itemengine-cypress-automation 1.0.24 → 1.0.26

package/cypress/e2e/ILC/HighlightImage/highlightImageEditTabScoring.js

@@ -0,0 +1,403 @@
+import { highlightImagePage } from "../../../pages";
+import { uploadImageSectionComponent } from "../../../pages/components/uploadImageSectionComponent";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import utilities from "../../../support/helpers/utilities";
+const css = Cypress.env('css');
+
+const flowerHighlightRegion = [[24, 6], [24, 24], [56, 24], [56, 6]];
+const branchesHighlightRegion = [[36, 36], [36, 46], [58, 46], [58, 36]];
+const leafHighlightRegion = [[54, 48], [54, 72], [82, 72], [82, 48]];
+
+describe('Create Item page - Highlight image: Edit tab scoring types and set correct answer section (Correct answer tab)', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Scoring section contents', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to Highlight image question type');
+            highlightImagePage.steps.navigateToCreateQuestion('highlight image');
+            cy.barsPreLoaderWait();
+        });
+
+        highlightImagePage.tests.verifyScoringTypeLabelAndDropdown('autoScored');
+
+        it('When user has not uploaded any image then the scoring sub types should not be displayed', () => {
+            utilities.verifyElementVisibilityState(highlightImagePage.pointsLabel(), 'notExist');
+            utilities.verifyElementVisibilityState(highlightImagePage.pointsInputField(), 'notExist');
+            utilities.verifyElementVisibilityState(highlightImagePage.allOrNothingCheckboxLabel(), 'notExist');
+            utilities.verifyElementVisibilityState(highlightImagePage.allOrNothingCheckbox(), 'notExist');
+            utilities.verifyElementVisibilityState(highlightImagePage.partialDifferentWeightsCheckboxLabel(), 'notExist');
+            utilities.verifyElementVisibilityState(highlightImagePage.partialDifferentWeightsCheckbox(), 'notExist');
+            utilities.verifyElementVisibilityState(highlightImagePage.partialEqualWeightsCheckboxLabel(), 'notExist');
+            utilities.verifyElementVisibilityState(highlightImagePage.partialEqualWeightsCheckbox(), 'notExist');
+        });
+    });
+
+    describe('Scoring section sub types contents', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to Highlight image question type');
+            highlightImagePage.steps.navigateToCreateQuestion('highlight image');
+            cy.barsPreLoaderWait();
+            uploadImageSectionComponent.steps.uploadFile('highlightImage.jpg');
+            uploadImageSectionComponent.steps.verifyUploadedImageInImagePopup();
+            uploadImageSectionComponent.steps.clickOnImagePopupOkButton();
+            cy.log('Checking multiple selection checkbox to check scoring sub types')
+            highlightImagePage.steps.checkMultipleSelectionCheckbox();
+        });
+
+        highlightImagePage.tests.verifyAutoScoredScoringTypeSectionWithCSSAnda11y();
+
+        it('When user unchecks the \'Multiple selection\' checkbox then the scoring subtypes should not be displayed', () => {
+            highlightImagePage.steps.uncheckMultipleSelectionCheckbox();
+            utilities.verifyElementVisibilityState(highlightImagePage.allOrNothingCheckboxLabel(), 'notExist');
+            utilities.verifyElementVisibilityState(highlightImagePage.allOrNothingCheckbox(), 'notExist');
+            utilities.verifyElementVisibilityState(highlightImagePage.partialDifferentWeightsCheckboxLabel(), 'notExist');
+            utilities.verifyElementVisibilityState(highlightImagePage.partialDifferentWeightsCheckbox(), 'notExist');
+            utilities.verifyElementVisibilityState(highlightImagePage.partialEqualWeightsCheckboxLabel(), 'notExist');
+            utilities.verifyElementVisibilityState(highlightImagePage.partialEqualWeightsCheckbox(), 'notExist');
+        });
+    });
+
+    describe('Edit tab \'Set correct answer\' section (Correct answer tab) and \'Scoring\' section for Auto scored: All or nothing scoring type', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to Highlight image question type');
+            highlightImagePage.steps.navigateToCreateQuestion('highlight image');
+            cy.barsPreLoaderWait();
+            uploadImageSectionComponent.steps.uploadFile('highlightImage.jpg');
+            uploadImageSectionComponent.steps.verifyUploadedImageInImagePopup();
+            uploadImageSectionComponent.steps.clickOnImagePopupOkButton();
+            utilities.verifyElementVisibilityState(uploadImageSectionComponent.uploadImagePopup(), 'notExist');
+            highlightImagePage.steps.verifyImageUploadedInHighlightRegion();
+            highlightImagePage.steps.checkMultipleSelectionCheckbox();
+            highlightImagePage.steps.highlightRegionInImage(flowerHighlightRegion);
+            highlightImagePage.steps.highlightRegionInImage(branchesHighlightRegion);
+            highlightImagePage.steps.highlightRegionInImage(leafHighlightRegion);
+        });
+
+        highlightImagePage.tests.verifyResponseContentsOfSetCorrectAnswerSection();
+
+        highlightImagePage.tests.verifyAutoScoredAllOrNothingPointsAndMinimumScoreAwardedLabelAndInputField();
+
+        highlightImagePage.tests.verifyPointsFieldErrorState(10);
+
+        highlightImagePage.tests.verifyMinimumScoreIfAttemptedFieldErrorState(10, 20, 10);
+    });
+
+    describe('Edit tab \'Set correct answer\' section (Correct answer tab) and \'Scoring\' section for Auto scored: Partial equal weights scoring type', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to Highlight image question type');
+            highlightImagePage.steps.navigateToCreateQuestion('highlight image');
+            cy.barsPreLoaderWait();
+            uploadImageSectionComponent.steps.uploadFile('highlightImage.jpg');
+            uploadImageSectionComponent.steps.verifyUploadedImageInImagePopup();
+            uploadImageSectionComponent.steps.clickOnImagePopupOkButton();
+            utilities.verifyElementVisibilityState(uploadImageSectionComponent.uploadImagePopup(), 'notExist');
+            highlightImagePage.steps.verifyImageUploadedInHighlightRegion();
+            highlightImagePage.steps.checkMultipleSelectionCheckbox();
+        });
+
+        it('When Scoring type dropdown has Auto scored selected then user should be able to select \'Partial - equal weights\' scoring type', () => {
+            utilities.verifyInnerText(highlightImagePage.scoringTypeDropdown(), 'Auto scored')
+            highlightImagePage.steps.selectPartialEqualWeightsCheckbox();
+        });
+
+        it('When the user switches to \'Partial - equal weights\' then points input field should be displayed with \'Points per response:\' label and score, the score should be displayed as \'-\' when points field is empty', () => {
+            highlightImagePage.steps.verifyDefaultPointsLabelAndInputField();
+            utilities.verifyInnerText(highlightImagePage.pointsPerResponseLabel(), 'Points per response:');
+            utilities.verifyElementVisibilityState(highlightImagePage.pointsPerResponseLabel(), 'visible');
+            highlightImagePage.steps.verifyPartialEqualWeightsPointsPerResponseScore('-');
+            highlightImagePage.steps.verifyDefaultPenaltyPointsInputFieldAndLabel();
+            highlightImagePage.steps.verifyDefaultMinimumScoreIfAttemptedLabelAndPointsField()
+            highlightImagePage.steps.verifyDefaultRoundDownScoreCheckboxCheckedAndLabel();
+        });
+
+        //Failing due to - https://redmine.zeuslearning.com/issues/543228
+        it('When user allots points without highlighting any region points per response should be displayed as \'-\'', () => {
+            highlightImagePage.steps.allotPoints(20);
+            utilities.verifyElementVisibilityState(highlightImagePage.setCorrectAnswerSectionHighlight(), 'notExist');
+            highlightImagePage.steps.verifyPartialEqualWeightsPointsPerResponseScore('-');
+        });
+
+        it('When user highlights region on the image without selecting them then points per response should be displayed as \'-\'', () => {
+            highlightImagePage.steps.highlightRegionInImage(flowerHighlightRegion);
+            highlightImagePage.steps.highlightRegionInImage(branchesHighlightRegion);
+            highlightImagePage.steps.highlightRegionInImage(leafHighlightRegion);
+            highlightImagePage.steps.verifyRegionIsNotHighlightedInSetCorrectAnswerSection(0);
+            highlightImagePage.steps.verifyRegionIsNotHighlightedInSetCorrectAnswerSection(1);
+            highlightImagePage.steps.verifyRegionIsNotHighlightedInSetCorrectAnswerSection(2);
+            highlightImagePage.steps.verifyPartialEqualWeightsPointsPerResponseScore('-');
+        });
+
+        highlightImagePage.tests.verifyResponseContentsOfSetCorrectAnswerSection();
+
+        it('When user selects a highlight region the points should be equally divided among the selected responses', () => {
+            highlightImagePage.steps.highlightARegionInSetCorrectAnswerSection(0);
+            highlightImagePage.steps.highlightARegionInSetCorrectAnswerSection(1);
+            highlightImagePage.steps.highlightARegionInSetCorrectAnswerSection(2);
+            highlightImagePage.steps.verifyPartialEqualWeightsPointsPerResponseScore(6.67);
+        });
+
+        it('When user de-selects a region then the points should be divided only among the selected highlight regions', () => {
+            highlightImagePage.steps.removeHighlightOfARegionInSetCorrectAnswerSection(0);
+            highlightImagePage.steps.verifyPartialEqualWeightsPointsPerResponseScore(10);
+        });
+
+        it('User should be able to enter points in \'Penalty Points\' and \'Minimum score awarded (if attempted)\' input fields', () => {
+            highlightImagePage.steps.allotPenaltyPoints(2);
+            highlightImagePage.steps.allotMinimumScoreAwardedIfAttempted(1);
+        });
+
+        it('CSS of Partial equal weights points section', { tags: 'css' }, () => {
+            utilities.verifyCSS(highlightImagePage.pointsLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(highlightImagePage.pointsInputField(), {
+                'color': css.color.text,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(highlightImagePage.pointsPerResponseLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(highlightImagePage.partialEqualWeightsPointsPerResponseScore(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.bold
+            });
+            utilities.verifyCSS(highlightImagePage.penaltyPointsLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(highlightImagePage.minimumScoreIfAttemptedLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(highlightImagePage.rounddownScoreCheckboxLabel(), {
+                'color': css.color.labelText,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.regular
+            });
+        });
+
+        it('Accessibility of Partial equal weights points section', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(highlightImagePage.pointsPerResponseLabel().parents('.set-correct-answer-points-wrapper'));
+        });
+
+        it('When the user switches to \'All or nothing\' scoring, the \'Points per response\' label and the points displayed for individual highlight region should not be displayed and the points displayed in \'Points\' input field should remain unchanged', () => {
+            highlightImagePage.steps.selectAllOrNothingCheckbox()
+            utilities.verifyElementVisibilityState(highlightImagePage.pointsPerResponseLabel(), 'notExist');
+            utilities.verifyElementVisibilityState(highlightImagePage.partialEqualWeightsPointsPerResponseScore(), 'notExist');
+            highlightImagePage.steps.verifyPointsFieldValue(20);
+        });
+
+        it('When user has entered points in \'All or nothing\' scoring type and switches to \'Partial equal weights\' scoring type, then the score should be equally divided and displayed beside the \'Points per response\' label', () => {
+            highlightImagePage.steps.allotPoints(10);
+            highlightImagePage.steps.selectPartialEqualWeightsCheckbox();
+            highlightImagePage.steps.verifyPartialEqualWeightsPointsPerResponseScore(5);
+        });
+    });
+
+    describe('Edit tab \'Set correct answer\' section (Correct answer tab) and \'Scoring\' section for Auto scored: Partial different weights scoring type', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to Highlight image question type');
+            highlightImagePage.steps.navigateToCreateQuestion('highlight image');
+            cy.barsPreLoaderWait();
+            uploadImageSectionComponent.steps.uploadFile('highlightImage.jpg');
+            uploadImageSectionComponent.steps.verifyUploadedImageInImagePopup();
+            uploadImageSectionComponent.steps.clickOnImagePopupOkButton();
+            utilities.verifyElementVisibilityState(uploadImageSectionComponent.uploadImagePopup(), 'notExist');
+            highlightImagePage.steps.verifyImageUploadedInHighlightRegion();
+            highlightImagePage.steps.checkMultipleSelectionCheckbox();
+        });
+
+        it('When scoring type dropdown has Auto scored selected then user should be able to select \'Partial - different weights\' scoring', () => {
+            utilities.verifyInnerText(highlightImagePage.scoringTypeDropdown(), 'Auto scored');
+            highlightImagePage.steps.selectPartialDifferentWeightsCheckbox();
+        });
+
+        it('When user switches to \'Partial different weights\' then \'Points\' label should be displayed and no input fields should be displayed when no region is highlighted', () => {
+            utilities.verifyInnerText(highlightImagePage.pointsLabel(), 'Points');
+            utilities.verifyElementVisibilityState(highlightImagePage.pointsLabel(), 'visible');
+            utilities.verifyElementVisibilityState(highlightImagePage.pointsInputField(), 'notExist');
+            utilities.verifyElementVisibilityState(highlightImagePage.partialDifferentWeightsPointsOptionsLabel(), 'notExist');
+        });
+
+        it('When user highlights a region then empty points input field should be displayed with label \'Option #\' and they should be in disabled state', () => {
+            highlightImagePage.steps.highlightRegionInImage(flowerHighlightRegion);
+            highlightImagePage.steps.highlightRegionInImage(branchesHighlightRegion);
+            highlightImagePage.steps.highlightRegionInImage(leafHighlightRegion);
+            highlightImagePage.steps.verifyPartialDifferentWeightsOptionLabelAndPoints(0, '');
+            highlightImagePage.steps.verifyPartialDifferentWeightsOptionLabelAndPoints(1, '');
+            highlightImagePage.steps.verifyPartialDifferentWeightsOptionLabelAndPoints(2, '');
+            highlightImagePage.steps.verifyPartialDifferentWeightsPointsInputFieldDisabled(0);
+            highlightImagePage.steps.verifyPartialDifferentWeightsPointsInputFieldDisabled(1);
+            highlightImagePage.steps.verifyPartialDifferentWeightsPointsInputFieldDisabled(2);
+        });
+
+        highlightImagePage.tests.verifyResponseContentsOfSetCorrectAnswerSection();
+
+        it('When user highlights a region then the points field of that highlight region should be displayed in enabled state', () => {
+            highlightImagePage.steps.highlightARegionInSetCorrectAnswerSection(0);
+            highlightImagePage.steps.verifyPartialDifferentWeightsPointsInputFieldEnabled(0);
+            highlightImagePage.steps.verifyPartialDifferentWeightsPointsInputFieldDisabled(1);
+            highlightImagePage.steps.verifyPartialDifferentWeightsPointsInputFieldDisabled(2);
+        });
+
+        it('When the user focuses in and out of the enabled empty points input field, \'Please enter points.\' validation text should be displayed below the Points input field with a error icon on the correct tab', () => {
+            highlightImagePage.steps.focusInAndFocusOutOfPointsInputField(0)
+            utilities.verifyInnerText(highlightImagePage.errorMessage(), 'Error: Please enter points.');
+            highlightImagePage.steps.verifySetCorrectAnswerErrorIconIsDisplayed();
+        });
+
+        it('When user enters points the error message and error icon should disappear', () => {
+            highlightImagePage.steps.addPartialDifferentWeightsPoints([20]);
+            utilities.verifyElementVisibilityState(highlightImagePage.errorMessage(), 'notExist');
+            highlightImagePage.steps.verifySetCorrectAnswerErrorIconIsNotDisplayed();
+        });
+
+        it('User should be able to enter points in \'Penalty Points\' and \'Minimum score awarded (if attempted)\' input fields', () => {
+            highlightImagePage.steps.allotPenaltyPoints(2);
+            highlightImagePage.steps.allotMinimumScoreAwardedIfAttempted(1);
+        });
+
+        it('CSS of Partial different weights points section', { tags: 'css' }, () => {
+            utilities.verifyCSS(highlightImagePage.pointsInputField().eq(0), {
+                'color': css.color.text,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+            cy.log('Disabled points input field')
+            utilities.verifyCSS(highlightImagePage.pointsInputField().eq(1), {
+                'opacity': '1'
+            });
+            utilities.verifyCSS(highlightImagePage.partialDifferentWeightsPointsOptionsLabel().eq(0), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(highlightImagePage.penaltyPointsLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(highlightImagePage.minimumScoreIfAttemptedLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(highlightImagePage.rounddownScoreCheckboxLabel(), {
+                'color': css.color.labelText,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.regular
+            });
+        });
+
+        it('Accessibility of partial different weights scoring section', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(highlightImagePage.pointsLabel().parents('.highlight-image-partial-points-form-control-wrapper'));
+        });
+
+        it('When user de-selects a selected highlight region the points field should change to disabled state', () => {
+            highlightImagePage.steps.removeHighlightOfARegionInSetCorrectAnswerSection(0);
+            highlightImagePage.steps.verifyPartialDifferentWeightsPointsInputFieldDisabled(0);
+            utilities.verifyInnerText(highlightImagePage.pointsInputField(), '');
+            highlightImagePage.steps.verifyPartialDifferentWeightsPointsInputFieldDisabled(1);
+            highlightImagePage.steps.verifyPartialDifferentWeightsPointsInputFieldDisabled(2);
+        });
+
+        it('When the user switches to \'All or nothing\' scoring, the points added for individual responses in Partial - different weights scoring should get summed up in the All or nothing scoring Points input field', () => {
+            cy.log('Pre step: Selecting highlight regions and allotting points')
+            highlightImagePage.steps.highlightARegionInSetCorrectAnswerSection(0);
+            highlightImagePage.steps.highlightARegionInSetCorrectAnswerSection(1);
+            highlightImagePage.steps.addPartialDifferentWeightsPoints([12, 8]);
+            highlightImagePage.steps.selectAllOrNothingCheckbox();
+            utilities.verifyElementCount(highlightImagePage.pointsInputField(), 1);
+            highlightImagePage.steps.verifyPointsFieldValue(20);
+        });
+
+        //Failing due to https://redmine.zeuslearning.com/issues/541788
+        it('When user has entered points in \'All or nothing\' scoring type and switches to \'Partial different weights\' scoring type, then the points should be equally divided among the selected highlight regions', () => {
+            highlightImagePage.steps.clearPointsField();
+            highlightImagePage.steps.allotPoints(9);
+            highlightImagePage.steps.selectPartialDifferentWeightsCheckbox();
+            highlightImagePage.steps.verifyPartialDifferentWeightsOptionLabelAndPoints(0, 3);
+            highlightImagePage.steps.verifyPartialDifferentWeightsOptionLabelAndPoints(1, 3);
+            highlightImagePage.steps.verifyPartialDifferentWeightsOptionLabelAndPoints(2, 3);
+        });
+    });
+
+    describe('Edit tab \'Set correct answer\' section (Correct answer tab) and \'Scoring\' section for Manually Scored scoring type', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to Highlight image question type');
+            highlightImagePage.steps.navigateToCreateQuestion('highlight image');
+            cy.barsPreLoaderWait();
+            uploadImageSectionComponent.steps.uploadFile('highlightImage.jpg');
+            uploadImageSectionComponent.steps.verifyUploadedImageInImagePopup();
+            uploadImageSectionComponent.steps.clickOnImagePopupOkButton();
+            utilities.verifyElementVisibilityState(uploadImageSectionComponent.uploadImagePopup(), 'notExist');
+            highlightImagePage.steps.verifyImageUploadedInHighlightRegion();
+            highlightImagePage.steps.checkMultipleSelectionCheckbox();
+        });
+
+        it('User should be able to select \'Manually scored\' scoring type from scoring type dropdown', () => {
+            highlightImagePage.steps.selectAScoringTypeFromScoringTypeDropdown('Manually scored');
+        });
+
+        it('When the user has selected \'Manually Scored\' option from the Scoring Type dropdown then the \'Set Correct Answer\' section should not be displayed, \'All or Nothing\', \'Partial - equal weights\' and \'Partial - different weights\' radio buttons should not be displayed, \'Points\' and \'Minimum score awarded (if attempted)\' labels and input fields should be displayed, round down score label and checkbox should not be displayed and inside Additional Settings accordion Check Answer section i.e. \'Allow students to check answer\' checkbox should not be displayed', () => {
+            utilities.verifyElementVisibilityState(highlightImagePage.setCorrectAnswerLabel(), 'notExist');
+            utilities.verifyElementVisibilityState(highlightImagePage.setCorrectAnswerHelpText(), 'notExist');
+            utilities.verifyElementVisibilityState(highlightImagePage.correctTab(), 'notExist');
+            utilities.verifyElementVisibilityState(highlightImagePage.alternateAnswerButton(), 'notExist');
+            utilities.verifyElementVisibilityState(highlightImagePage.allOrNothingCheckbox(), 'notExist');
+            utilities.verifyElementVisibilityState(highlightImagePage.partialEqualWeightsCheckbox(), 'notExist');
+            utilities.verifyElementVisibilityState(highlightImagePage.partialDifferentWeightsCheckbox(), 'notExist');
+            utilities.verifyElementVisibilityState(highlightImagePage.penaltyPointsInputField(), 'notExist');
+            utilities.verifyElementVisibilityState(highlightImagePage.penaltyPointsLabel(), 'notExist');
+            utilities.verifyElementVisibilityState(highlightImagePage.rounddownScoreCheckbox(), 'notExist');
+            utilities.verifyElementVisibilityState(highlightImagePage.rounddownScoreCheckboxLabel(), 'notExist');
+            highlightImagePage.steps.verifyDefaultMinimumScoreIfAttemptedLabelAndPointsField();
+            highlightImagePage.steps.expandAdditonalSettings();
+            utilities.verifyElementVisibilityState(highlightImagePage.checkAnswerLabel(), 'notExist');
+            utilities.verifyElementVisibilityState(highlightImagePage.allowStudentsToCheckAnswerLabel(), 'notExist');
+            utilities.verifyElementVisibilityState(highlightImagePage.setCorrectAnswerSectionImage(), 'notExist');
+        });
+
+        highlightImagePage.tests.verifyPointsFieldErrorState(10);
+
+        highlightImagePage.tests.verifyMinimumScoreIfAttemptedFieldErrorState(10, 20, 10);
+    });
+
+    describe('Edit tab \'Set correct answer\' section (Correct answer tab) and \'Scoring\' section for Non Scored scoring type', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to Highlight image question type');
+            highlightImagePage.steps.navigateToCreateQuestion('highlight image');
+            cy.barsPreLoaderWait();
+            uploadImageSectionComponent.steps.uploadFile('highlightImage.jpg');
+            uploadImageSectionComponent.steps.verifyUploadedImageInImagePopup();
+            uploadImageSectionComponent.steps.clickOnImagePopupOkButton();
+            utilities.verifyElementVisibilityState(uploadImageSectionComponent.uploadImagePopup(), 'notExist');
+            highlightImagePage.steps.verifyImageUploadedInHighlightRegion();
+            highlightImagePage.steps.checkMultipleSelectionCheckbox();
+            highlightImagePage.steps.highlightRegionInImage(flowerHighlightRegion);
+            highlightImagePage.steps.highlightRegionInImage(branchesHighlightRegion);
+            highlightImagePage.steps.highlightRegionInImage(leafHighlightRegion);
+        });
+
+        highlightImagePage.tests.verifyResponseContentsOfSetCorrectAnswerSection();
+
+        highlightImagePage.tests.verifyEditTabNonScoredScoringSectionContents();
+    });
+});

package/cypress/e2e/ILC/HighlightImage/highlightImageHeaderSection.js

@@ -0,0 +1,86 @@
+import constants from "../../../fixtures/constants";
+import { dialogBoxBase, highlightImagePage } from "../../../pages";
+import { uploadImageSectionComponent } from "../../../pages/components/uploadImageSectionComponent";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+
+const flowerHighlightRegion = [[24, 6], [24, 24], [56, 24], [56, 6]];
+const branchesHighlightRegion = [[36, 36], [36, 46], [58, 46], [58, 36]];
+
+describe('Create question page - Highlight image: Header section and Saving question', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Header section contents', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to highlight image question type');
+            highlightImagePage.steps.navigateToCreateQuestion('highlight image');
+        });
+
+        highlightImagePage.tests.verifyCreateQuestionPageQuestionTypeHeader('Highlight image');
+    });
+
+    describe('Tabs section', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to highlight image question type');
+            highlightImagePage.steps.navigateToCreateQuestion('highlight image');
+        });
+
+        highlightImagePage.tests.verifyTabsSection();
+    });
+
+    describe('Cancel button', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to highlight image question type');
+            highlightImagePage.steps.navigateToCreateQuestion('highlight image');
+        });
+
+        highlightImagePage.tests.verifyCancelButton('highlight image');
+    });
+
+    describe('Save Question button', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to highlight image question type');
+            highlightImagePage.steps.navigateToCreateQuestion('highlight image');
+            cy.barsPreLoaderWait();
+            uploadImageSectionComponent.steps.uploadFile('highlightImage.jpg');
+            uploadImageSectionComponent.steps.verifyUploadedImageInImagePopup();
+            uploadImageSectionComponent.steps.clickOnImagePopupOkButton();
+            highlightImagePage.steps.verifyImageUploadedInHighlightRegion();
+        });
+
+        describe('Validation error messages', () => {
+            dialogBoxBase.tests.verifyRequiredFieldsWarningPopupOnClickingSaveButton();
+
+            it('Validation error messages should be displayed below required input fields', () => {
+                highlightImagePage.steps.verifyQuestionInstructionsErrorMessage();
+                highlightImagePage.steps.verifyPointsFieldErrorMessage();
+                highlightImagePage.steps.verifySetCorrectAnswerSectionErrorMessage();
+                highlightImagePage.steps.verifySetCorrectAnswerErrorIconIsDisplayed();
+            });
+
+            it('Validation error messages should disappear when required input fields are filled', () => {
+                highlightImagePage.steps.addQuestionInstructions();
+                highlightImagePage.steps.highlightRegionInImage(flowerHighlightRegion);
+                highlightImagePage.steps.highlightRegionInImage(branchesHighlightRegion);
+                highlightImagePage.steps.highlightARegionInSetCorrectAnswerSection(0);
+                highlightImagePage.steps.allotPoints(10);
+                highlightImagePage.steps.verifyErrorMessageIsNotDisplayed();
+                highlightImagePage.steps.verifySetCorrectAnswerErrorIconIsNotDisplayed();
+            });
+
+            highlightImagePage.tests.verifya11yOfCreateItemWrapperContents();
+        });
+
+        describe('Saving a question', () => {
+            it('When user has filled all the mandatory fields then on clicking on Save Question button the question should get saved and a snackbar with text \'Saved successfully!\' should be displayed', () => {
+                highlightImagePage.steps.saveAQuestionAndVerifySnackbar();
+            });
+            highlightImagePage.tests.verifySavedSuccessfullySnackbarCSSanda11y();
+        });
+    });
+});