itemengine-cypress-automation 1.0.24 → 1.0.26

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

@@ -0,0 +1,88 @@
+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: Preview tab', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Preview tab contents with uploading image', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to Highlight image question type');
+            highlightImagePage.steps.navigateToCreateQuestion('highlight image');
+            cy.barsPreLoaderWait();
+            highlightImagePage.steps.addQuestionInstructions();
+            uploadImageSectionComponent.steps.uploadFile('highlightImage.jpg');
+            uploadImageSectionComponent.steps.verifyUploadedImageInImagePopup();
+            uploadImageSectionComponent.steps.clickOnImagePopupOkButton();
+            utilities.verifyElementVisibilityState(uploadImageSectionComponent.uploadImagePopup(), 'notExist');
+            highlightImagePage.steps.verifyImageUploadedInHighlightRegion();
+            highlightImagePage.steps.verifyImageUploadedInSetCorrectAnswerSection();
+            highlightImagePage.steps.highlightRegionInImage(flowerHighlightRegion);
+            highlightImagePage.steps.highlightRegionInImage(branchesHighlightRegion);
+            highlightImagePage.steps.highlightRegionInImage(leafHighlightRegion);
+            highlightImagePage.steps.checkMultipleSelectionCheckbox();
+            highlightImagePage.steps.switchToPreviewTab();
+        });
+
+        it('When user uploads an image in the \'Highlight image\' section then the uploaded image should be displayed with highlight regions, error message should not be displayed and in the preview tab', () => {
+            utilities.verifyElementVisibilityState(highlightImagePage.previewTabImage(), 'visible');
+            utilities.verifyElementVisibilityState(highlightImagePage.errorMessage(), 'notExist');
+        });
+
+        it('The highlighted regions should be displayed in the preview tab', () => {
+            highlightImagePage.steps.verifyHighlightRegionsInPreviewTab(0, flowerHighlightRegion);
+            highlightImagePage.steps.verifyHighlightRegionsInPreviewTab(1, branchesHighlightRegion);
+            highlightImagePage.steps.verifyHighlightRegionsInPreviewTab(2, leafHighlightRegion);
+            utilities.verifyElementCount(highlightImagePage.previewTabHighlight(), 3);
+        });
+
+        it('User should be able to select and de-select the highlight regions in preview tab', () => {
+            highlightImagePage.steps.highlightARegionInPreviewTab(0);
+            highlightImagePage.steps.highlightARegionInPreviewTab(1);
+            highlightImagePage.steps.verifySelectedHighlightRegionInPreviewTab(0);
+            highlightImagePage.steps.verifySelectedHighlightRegionInPreviewTab(1);
+            highlightImagePage.steps.verifyRegionIsNotHighlighted(2);
+            highlightImagePage.steps.removeHighlightOfARegionInPreviewTab(0);
+            highlightImagePage.steps.verifyRegionIsNotHighlighted(0);
+            highlightImagePage.steps.verifySelectedHighlightRegionInPreviewTab(1);
+            highlightImagePage.steps.verifyRegionIsNotHighlighted(2);
+        });
+
+        it('CSS of highlight region in preview tab in default, hover and active state', { tags: 'css' }, () => {
+            cy.log('Default state')
+            utilities.verifyCSS(highlightImagePage.previewTabHighlightPolygon().eq(2), {
+                'stroke': css.color.activeButtons,
+                'stroke-width': '2px'
+            });
+            cy.log('Active state')
+            utilities.verifyCSS(highlightImagePage.previewTabHighlightPolygon().eq(1), {
+                'stroke': css.color.activeHighlightBorder,
+                'stroke-width': '4px'
+            });
+            cy.log('Hover state')
+            utilities.hoverOverElement(highlightImagePage.previewTabHighlight().eq(0))
+            utilities.verifyCSS(highlightImagePage.previewTabHighlightPolygon().eq(0), {
+                'stroke': css.color.hoverHighlightBorder,
+                'stroke-width': '4px'
+            });
+            utilities.hoverAwayFromElement();
+            utilities.verifyCSS(highlightImagePage.previewTabHighlightPolygon().eq(2), {
+                'stroke': css.color.activeButtons,
+                'stroke-width': '2px'
+            });
+        });
+
+        it('Accessibility of preview tab highlight regions', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(highlightImagePage.previewTabQuestionWrapper());
+        });
+    });
+});

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

@@ -0,0 +1,244 @@
+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('Highlight image: Set correct answer checkboxes', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Multiple selection: Set correct answer section', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to highlight image question type');
+            highlightImagePage.steps.navigateToCreateQuestion('highlight image');
+            cy.barsPreLoaderWait();
+            highlightImagePage.steps.addQuestionInstructions();
+            uploadImageSectionComponent.steps.uploadFile('highlightImage.jpg');
+            uploadImageSectionComponent.steps.verifyUploadedImageInImagePopup();
+            uploadImageSectionComponent.steps.clickOnImagePopupOkButton();
+            utilities.verifyElementVisibilityState(uploadImageSectionComponent.uploadImagePopup(), 'notExist');
+            highlightImagePage.steps.verifyImageUploadedInHighlightRegion();
+            highlightImagePage.steps.verifyImageUploadedInSetCorrectAnswerSection();
+            highlightImagePage.steps.highlightRegionInImage(flowerHighlightRegion);
+            highlightImagePage.steps.highlightRegionInImage(branchesHighlightRegion);
+            highlightImagePage.steps.highlightRegionInImage(leafHighlightRegion);
+        });
+
+        it('\'Multiple selection\' label and checkbox should be displayed and by default it should be unchecked', () => {
+            utilities.verifyInnerText(highlightImagePage.multipleSelectionCheckboxLabel(), 'Multiple selection');
+            utilities.verifyElementVisibilityState(highlightImagePage.multipleSelectionCheckboxLabel(), 'exist');
+            utilities.verifyElementVisibilityState(highlightImagePage.multipleSelectionCheckbox(), 'exist');
+            highlightImagePage.steps.verifyMultipleSelectionCheckboxIsUnchecked();
+        });
+
+        it('When multiple selection checkbox is unchecked then the user should be able to highlight only one region in the set correct answer section', () => {
+            highlightImagePage.steps.highlightARegionInSetCorrectAnswerSection(0);
+            highlightImagePage.steps.highlightARegionInSetCorrectAnswerSection(2);
+            highlightImagePage.steps.verifyRegionIsNotHighlightedInSetCorrectAnswerSection(0);
+            highlightImagePage.steps.verifyRegionIsNotHighlightedInSetCorrectAnswerSection(1);
+            highlightImagePage.steps.verifySelectedHighlightRegionInSetCorrectAnswerSection(2);
+        });
+
+        it('When the user checks the multiple selection checkbox then the user should be able to highlight multiple regions in the set correct answer section', () => {
+            highlightImagePage.steps.checkMultipleSelectionCheckbox();
+            highlightImagePage.steps.highlightARegionInSetCorrectAnswerSection(1);
+            highlightImagePage.steps.verifyRegionIsNotHighlightedInSetCorrectAnswerSection(0);
+            highlightImagePage.steps.verifySelectedHighlightRegionInSetCorrectAnswerSection(1);
+            highlightImagePage.steps.verifySelectedHighlightRegionInSetCorrectAnswerSection(2);
+        });
+
+        it('CSS of multiple selection checkbox', { tags: 'css' }, () => {
+            utilities.verifyCSS(highlightImagePage.multipleSelectionCheckboxLabel(), {
+                'color': css.color.labelText,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(highlightImagePage.multipleSelectionCheckbox().parents('[data-ngie-testid="multiple-selection-checkbox"]').find('svg g').eq(1), {
+                'fill': css.color.primaryBtnBg
+            });
+        });
+
+        it('Accessibility of multiple selection checkbox', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(highlightImagePage.multipleSelectionCheckboxLabel());
+        });
+    });
+
+    describe('Multiple selection: Preview tab', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to highlight image question type');
+            highlightImagePage.steps.navigateToCreateQuestion('highlight image');
+            cy.barsPreLoaderWait();
+            highlightImagePage.steps.addQuestionInstructions();
+            uploadImageSectionComponent.steps.uploadFile('highlightImage.jpg');
+            uploadImageSectionComponent.steps.verifyUploadedImageInImagePopup();
+            uploadImageSectionComponent.steps.clickOnImagePopupOkButton();
+            utilities.verifyElementVisibilityState(uploadImageSectionComponent.uploadImagePopup(), 'notExist');
+            highlightImagePage.steps.verifyImageUploadedInHighlightRegion();
+            highlightImagePage.steps.verifyImageUploadedInSetCorrectAnswerSection();
+            highlightImagePage.steps.highlightRegionInImage(flowerHighlightRegion);
+            highlightImagePage.steps.highlightRegionInImage(branchesHighlightRegion);
+            highlightImagePage.steps.highlightRegionInImage(leafHighlightRegion);
+        });
+
+        it('When multiple selection checkbox is unchecked then the user should be able to highlight only one region in the preview tab', () => {
+            highlightImagePage.steps.verifyMultipleSelectionCheckboxIsUnchecked();
+            highlightImagePage.steps.switchToPreviewTab();
+            highlightImagePage.steps.highlightARegionInPreviewTab(0);
+            highlightImagePage.steps.highlightARegionInPreviewTab(2);
+            highlightImagePage.steps.verifyRegionIsNotHighlighted(0);
+            highlightImagePage.steps.verifyRegionIsNotHighlighted(1);
+            highlightImagePage.steps.verifySelectedHighlightRegionInPreviewTab(2);
+        });
+
+        it('When the user checks the multiple selection checkbox then the user should be able to highlight multiple regions in the preview tab', () => {
+            highlightImagePage.steps.switchToEditTab();
+            highlightImagePage.steps.checkMultipleSelectionCheckbox();
+            highlightImagePage.steps.switchToPreviewTab();
+            highlightImagePage.steps.highlightARegionInPreviewTab(1);
+            highlightImagePage.steps.highlightARegionInPreviewTab(2);
+            highlightImagePage.steps.verifyRegionIsNotHighlighted(0);
+            highlightImagePage.steps.verifySelectedHighlightRegionInPreviewTab(1);
+            highlightImagePage.steps.verifySelectedHighlightRegionInPreviewTab(2);
+        });
+    });
+
+    describe('Hide highlights: Set correct answer section', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to highlight image question type');
+            highlightImagePage.steps.navigateToCreateQuestion('highlight image');
+            cy.barsPreLoaderWait();
+            highlightImagePage.steps.addQuestionInstructions();
+            uploadImageSectionComponent.steps.uploadFile('highlightImage.jpg');
+            uploadImageSectionComponent.steps.verifyUploadedImageInImagePopup();
+            uploadImageSectionComponent.steps.clickOnImagePopupOkButton();
+            utilities.verifyElementVisibilityState(uploadImageSectionComponent.uploadImagePopup(), 'notExist');
+            highlightImagePage.steps.verifyImageUploadedInHighlightRegion();
+            highlightImagePage.steps.verifyImageUploadedInSetCorrectAnswerSection();
+            highlightImagePage.steps.highlightRegionInImage(flowerHighlightRegion);
+            highlightImagePage.steps.highlightRegionInImage(branchesHighlightRegion);
+            highlightImagePage.steps.highlightRegionInImage(leafHighlightRegion);
+        });
+
+        it('\'Hide highlight\' label and checkbox should be displayed and by default it should be unchecked', () => {
+            utilities.verifyInnerText(highlightImagePage.hideHighlightsCheckboxLabel(), 'Hide highlights');
+            utilities.verifyElementVisibilityState(highlightImagePage.hideHighlightsCheckboxLabel(), 'exist');
+            utilities.verifyElementVisibilityState(highlightImagePage.hideHighlightsCheckbox(), 'exist');
+            highlightImagePage.steps.verifyHideHighlightsCheckboxIsUnchecked();
+        });
+
+        it('When \'Hide highlight\' checkbox is unchecked then the highlights should be displayed in the set correct answer section', () => {
+            highlightImagePage.steps.verifyHighlightRegionVisibleInSetCorrectAnswerSection(0);
+            highlightImagePage.steps.verifyHighlightRegionVisibleInSetCorrectAnswerSection(1);
+            highlightImagePage.steps.verifyHighlightRegionVisibleInSetCorrectAnswerSection(2);
+        });
+
+        it('When the user checks the \'Hide highlight\' checkbox then the highlights should not be displayed in the set correct answer section', () => {
+            highlightImagePage.steps.checkHideHighlightsCheckbox();
+            highlightImagePage.steps.verifyHighlightRegionHiddenInSetCorrectAnswerSection(0);
+            highlightImagePage.steps.verifyHighlightRegionHiddenInSetCorrectAnswerSection(1);
+            highlightImagePage.steps.verifyHighlightRegionHiddenInSetCorrectAnswerSection(2);
+        });
+
+        it('When the user hovers over the highlight regions the regions should be displayed in the set correct answer section', () => {
+            highlightImagePage.steps.hoverOverHighlightRegionInSetCorrectSection(0);
+            highlightImagePage.steps.verifyHighlightRegionVisibleInSetCorrectAnswerSection(0);
+            highlightImagePage.steps.verifyHighlightRegionHiddenInSetCorrectAnswerSection(1);
+            highlightImagePage.steps.verifyHighlightRegionHiddenInSetCorrectAnswerSection(2);
+        });
+
+        it('CSS of hide highlight checkbox and label', { tags: 'css' }, () => {
+            utilities.verifyCSS(highlightImagePage.hideHighlightsCheckboxLabel(), {
+                'color': css.color.labelText,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(highlightImagePage.hideHighlightsCheckbox().parents('[data-ngie-testid="hide-highlights-checkbox"]').find('svg g').eq(1), {
+                'fill': css.color.primaryBtnBg
+            });
+        });
+
+        it('Accessibility of Set correct answer section', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(highlightImagePage.hideHighlightsCheckboxLabel().parents('.highlight-image-set-correct-answer-wrapper'));
+        });
+
+        it('The user should be able to select and de-select highlight regions in the set correct answer section', () => {
+            highlightImagePage.steps.highlightARegionInSetCorrectAnswerSection(1);
+            highlightImagePage.steps.verifyHighlightRegionHiddenInSetCorrectAnswerSection(0);
+            highlightImagePage.steps.verifySelectedHighlightRegionVisibleInSetCorrectAnswerSection(1);
+            highlightImagePage.steps.verifyHighlightRegionHiddenInSetCorrectAnswerSection(2);
+            highlightImagePage.steps.removeHighlightOfARegionInSetCorrectAnswerSection(1);
+            utilities.hoverAwayFromElement();
+            highlightImagePage.steps.verifyHighlightRegionHiddenInSetCorrectAnswerSection(0);
+            highlightImagePage.steps.verifyHighlightRegionHiddenInSetCorrectAnswerSection(1);
+            highlightImagePage.steps.verifyHighlightRegionHiddenInSetCorrectAnswerSection(2);
+        });
+    });
+
+    describe('Hide highlights: Preview tab', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to highlight image question type');
+            highlightImagePage.steps.navigateToCreateQuestion('highlight image');
+            cy.barsPreLoaderWait();
+            highlightImagePage.steps.addQuestionInstructions();
+            uploadImageSectionComponent.steps.uploadFile('highlightImage.jpg');
+            uploadImageSectionComponent.steps.verifyUploadedImageInImagePopup();
+            uploadImageSectionComponent.steps.clickOnImagePopupOkButton();
+            utilities.verifyElementVisibilityState(uploadImageSectionComponent.uploadImagePopup(), 'notExist');
+            highlightImagePage.steps.verifyImageUploadedInHighlightRegion();
+            highlightImagePage.steps.verifyImageUploadedInSetCorrectAnswerSection();
+            highlightImagePage.steps.highlightRegionInImage(flowerHighlightRegion);
+            highlightImagePage.steps.highlightRegionInImage(branchesHighlightRegion);
+            highlightImagePage.steps.highlightRegionInImage(leafHighlightRegion);
+        });
+
+        it('When \'Hide highlight\' checkbox is unchecked then the highlights should be displayed in the preview tab', () => {
+            highlightImagePage.steps.verifyHideHighlightsCheckboxIsUnchecked();
+            highlightImagePage.steps.switchToPreviewTab();
+            highlightImagePage.steps.verifyHighlightRegionVisibleInPreviewTab(0);
+            highlightImagePage.steps.verifyHighlightRegionVisibleInPreviewTab(1);
+            highlightImagePage.steps.verifyHighlightRegionVisibleInPreviewTab(2);
+        });
+
+        it('When the user checks the \'Hide highlight\' checkbox then the highlights should not be displayed in the preview tab', () => {
+            highlightImagePage.steps.switchToEditTab();
+            highlightImagePage.steps.checkHideHighlightsCheckbox();
+            highlightImagePage.steps.switchToPreviewTab();
+            highlightImagePage.steps.verifyHighlightRegionHiddenInPreviewTab(0);
+            highlightImagePage.steps.verifyHighlightRegionHiddenInPreviewTab(1);
+            highlightImagePage.steps.verifyHighlightRegionHiddenInPreviewTab(2);
+        });
+
+        it('When the user hovers over the highlight regions the regions should be displayed in the preview tab and the user should be able to select and de-select them', () => {
+            highlightImagePage.steps.hoverOverHighlightRegionInPreviewTab(0);
+            highlightImagePage.steps.verifyHighlightRegionVisibleInPreviewTab(0);
+            highlightImagePage.steps.verifyHighlightRegionHiddenInPreviewTab(1);
+            highlightImagePage.steps.verifyHighlightRegionHiddenInPreviewTab(2);
+        });
+
+        it('Accessibility of preview tab', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(highlightImagePage.previewTabQuestionWrapper());
+        });
+
+        it('The user should be able to select and de-select highlight regions in the preview tab', () => {
+            highlightImagePage.steps.highlightARegionInSetCorrectAnswerSection(1);
+            highlightImagePage.steps.verifyHighlightRegionHiddenInPreviewTab(0);
+            highlightImagePage.steps.verifySelectedHighlightRegionVisibleInPreviewTab(1);
+            highlightImagePage.steps.verifyHighlightRegionHiddenInPreviewTab(2);
+            highlightImagePage.steps.removeHighlightOfARegionInPreviewTab(1);
+            utilities.hoverAwayFromElement();
+            highlightImagePage.steps.verifyHighlightRegionHiddenInPreviewTab(0);
+            highlightImagePage.steps.verifyHighlightRegionHiddenInPreviewTab(1);
+            highlightImagePage.steps.verifyHighlightRegionHiddenInPreviewTab(2);
+        });
+    });
+});

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

@@ -0,0 +1,186 @@
+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: Set correct answer, Alternate correct answer - Edit tab cases', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Set correct answer section', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to highlight image question type');
+            highlightImagePage.steps.navigateToCreateQuestion('highlight image');
+            cy.barsPreLoaderWait();
+            highlightImagePage.steps.addQuestionInstructions();
+        });
+
+        it('When user has not uploaded any image then the \'Set correct answer\' section should not be displayed', () => {
+            utilities.verifyElementVisibilityState(highlightImagePage.setCorrectAnswerLabel(), 'notExist');
+            utilities.verifyElementVisibilityState(highlightImagePage.setCorrectAnswerHelpText(), 'notExist');
+            utilities.verifyElementVisibilityState(highlightImagePage.correctTab(), 'notExist');
+            utilities.verifyElementVisibilityState(highlightImagePage.alternateAnswerButton(), 'notExist');
+        });
+
+        it('When user uploads an image the \'Set correct answer\' section should be displayed along with the uploaded image', () => {
+            cy.log('Pre step: Switching to edit tab')
+            highlightImagePage.steps.switchToEditTab();
+            uploadImageSectionComponent.steps.uploadFile('highlightImage.jpg');
+            uploadImageSectionComponent.steps.verifyUploadedImageInImagePopup();
+            uploadImageSectionComponent.steps.clickOnImagePopupOkButton();
+            utilities.verifyElementVisibilityState(uploadImageSectionComponent.uploadImagePopup(), 'notExist');
+            highlightImagePage.steps.verifyImageUploadedInHighlightRegion();
+            utilities.verifyElementVisibilityState(highlightImagePage.setCorrectAnswerLabel(), 'visible');
+            utilities.verifyElementVisibilityState(highlightImagePage.setCorrectAnswerHelpText(), 'visible');
+            utilities.verifyElementVisibilityState(highlightImagePage.correctTab(), 'visible');
+            utilities.verifyElementVisibilityState(highlightImagePage.alternateAnswerButton(), 'visible');
+            highlightImagePage.steps.verifyImageUploadedInSetCorrectAnswerSection();
+        });
+
+        highlightImagePage.tests.verifyAutoScoredSetCorrectAnswerHeaderSectionContents('highlight image');
+
+        it('When user clicks on add alternate answer button without allotting points in the \'Set correct answer\' then a warning popup should be displayed', () => {
+            highlightImagePage.steps.clickOnAddAlternateAnswerButton();
+            utilities.verifyElementVisibilityState(highlightImagePage.dialogBox(), 'exist');
+        });
+
+        it('When user closes the warning popup \'Error: Please enter points\' and \'Error: Please set correct answer\' error message should be displayed', () => {
+            highlightImagePage.steps.closeWarningPopup();
+            highlightImagePage.steps.verifyPointsFieldErrorMessage()
+            highlightImagePage.steps.verifySetCorrectAnswerSectionErrorMessage()
+            highlightImagePage.steps.verifySetCorrectAnswerErrorIconIsDisplayed();
+        });
+
+        it('When user allots points and sets correct answer then the error messages and error icon should disappear', () => {
+            highlightImagePage.steps.allotPoints(10);
+            highlightImagePage.steps.highlightRegionInImage(flowerHighlightRegion);
+            highlightImagePage.steps.highlightRegionInImage(branchesHighlightRegion);
+            highlightImagePage.steps.highlightRegionInImage(leafHighlightRegion);
+            highlightImagePage.steps.highlightARegionInSetCorrectAnswerSection(0);
+            highlightImagePage.steps.highlightARegionInSetCorrectAnswerSection(1);
+            highlightImagePage.steps.verifySetCorrectAnswerErrorIconIsNotDisplayed();
+            highlightImagePage.steps.verifyErrorMessageIsNotDisplayed();
+            cy.log('Post step: Clear points field')
+            highlightImagePage.steps.clearPointsField();
+        });
+
+        highlightImagePage.tests.verifyAutoScoredPointsErrorMessageWhenPointsFieldIsEmpty('Correct tab');
+    });
+
+    describe('Alternate correct answer', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to highlight image question type');
+            highlightImagePage.steps.navigateToCreateQuestion('highlight image');
+            cy.barsPreLoaderWait();
+            highlightImagePage.steps.addQuestionInstructions();
+            uploadImageSectionComponent.steps.uploadFile('highlightImage.jpg');
+            uploadImageSectionComponent.steps.verifyUploadedImageInImagePopup();
+            uploadImageSectionComponent.steps.clickOnImagePopupOkButton();
+            utilities.verifyElementVisibilityState(uploadImageSectionComponent.uploadImagePopup(), 'notExist');
+            highlightImagePage.steps.verifyImageUploadedInHighlightRegion();
+            highlightImagePage.steps.verifyImageUploadedInSetCorrectAnswerSection();
+            highlightImagePage.steps.highlightRegionInImage(flowerHighlightRegion);
+            highlightImagePage.steps.highlightRegionInImage(branchesHighlightRegion);
+            highlightImagePage.steps.highlightRegionInImage(leafHighlightRegion);
+        });
+
+        highlightImagePage.tests.verifyAutoScoredAlternateAnswer('highlight image');
+
+        it('When the user allots points to the \'Correct tab\' and highlights region in the \'Set correct answer\' section then on clicking the \'Alternate tab\' button an alternate tab should be added', () => {
+            highlightImagePage.steps.allotPoints(10);
+            highlightImagePage.steps.highlightARegionInSetCorrectAnswerSection(0);
+            highlightImagePage.steps.verifyErrorMessageIsNotDisplayed();
+            highlightImagePage.steps.verifySetCorrectAnswerErrorIconIsNotDisplayed();
+            highlightImagePage.steps.addAlternateTab(1);
+        });
+
+        it('When user adds an alternate tab all the highlight regions should be displayed and they should not be selected', () => {
+            highlightImagePage.steps.verifyRegionIsNotHighlightedInSetCorrectAnswerSection(0);
+            highlightImagePage.steps.verifyRegionIsNotHighlightedInSetCorrectAnswerSection(1);
+            highlightImagePage.steps.verifyRegionIsNotHighlightedInSetCorrectAnswerSection(2);
+        });
+
+        it('User should be able set correct answer section in the \'Alternate tab\' by ordering the options in the \'Alternate tab\'', () => {
+            highlightImagePage.steps.highlightARegionInSetCorrectAnswerSection(1);
+        });
+
+        highlightImagePage.tests.verifyAutoScoredPointsErrorMessageWhenPointsFieldIsEmpty('Alternate tab');
+
+        //Failing due to https://redmine.zeuslearning.com/issues/544273
+        it('CSS of active state of Alternate answer tab', { tags: 'css' }, () => {
+            utilities.verifyCSS(highlightImagePage.alternateAnswerTab(1), {
+                'color': css.color.secondaryBtnActive,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.bold
+            });
+            cy.log('CSS of inactive Correct answer tab')
+            utilities.verifyCSS(highlightImagePage.correctTab(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.bold
+            });
+        });
+
+        highlightImagePage.tests.verifyA11yOfAlternateAnswerTab();
+
+        it('When user switches to the \'Correct tab\' from the \'Alternate tab\' the selected options in the \'Correct tab\' should remain the same', () => {
+            highlightImagePage.steps.navigateToCorrectTab();
+            highlightImagePage.steps.verifySelectedHighlightRegionInSetCorrectAnswerSection(0);
+            highlightImagePage.steps.verifyRegionIsNotHighlightedInSetCorrectAnswerSection(1);
+            highlightImagePage.steps.verifyRegionIsNotHighlightedInSetCorrectAnswerSection(2);
+        });
+
+        it('When user clicks on \'Add Alternate Answer\' button a new tab should be added with the name \'Alternate 2\' and appropriate options should be displayed in the set correct answer section', () => {
+            highlightImagePage.steps.addAlternateTab(2);
+            highlightImagePage.steps.verifyRegionIsNotHighlightedInSetCorrectAnswerSection(0);
+            highlightImagePage.steps.verifyRegionIsNotHighlightedInSetCorrectAnswerSection(1);
+            highlightImagePage.steps.verifyRegionIsNotHighlightedInSetCorrectAnswerSection(2);
+        });
+
+        highlightImagePage.tests.verifyWarningPopupAndTabNavigationWhenNoPointsAddedInAlternateTab();
+
+        it('When the user clicks on the \'Close\' button alongside alternate answer tab, alternate answer tab should get removed and the name of the alternate answer tabs should get updated and correct answers should be displayed accordingly', () => {
+            cy.log('Set correct answer and points in alternate 2 tab, then switch to Alternate 1 tab and click delete icon button');
+            highlightImagePage.steps.allotPoints(2);
+            highlightImagePage.steps.highlightARegionInSetCorrectAnswerSection(2);
+            highlightImagePage.steps.navigateToAlternateTab(1);
+            highlightImagePage.steps.deleteAlternateTab();
+            utilities.verifyElementVisibilityState(highlightImagePage.alternateAnswerTab(2), 'notExist');
+            utilities.verifyInnerText(highlightImagePage.alternateAnswerTab(1), 'Alternate 1')
+            highlightImagePage.steps.verifyRegionIsNotHighlightedInSetCorrectAnswerSection(0);
+            highlightImagePage.steps.verifyRegionIsNotHighlightedInSetCorrectAnswerSection(1);
+            highlightImagePage.steps.verifySelectedHighlightRegionInSetCorrectAnswerSection(2);
+        });
+
+        it('When the user is on \'Alternate 1\' tab then on deleting a highlight region set as correct answer in Correct answer tab, tab should be switched from \'Alternate 1\' tab to \'Correct\' tab and \'Error: Please set a correct answer.\' validation error message should be thrown along with an error icon besides the \'Correct\' tab', () => {
+            highlightImagePage.steps.eraseAHighlightRegion([flowerHighlightRegion[0]]);
+            highlightImagePage.steps.verifyActiveStateOfCorrectTab();
+            utilities.verifyTextContent(highlightImagePage.errorMessage(), 'Error: Please set a correct answer.');
+            utilities.verifyElementVisibilityState(highlightImagePage.errorMessage(), 'visible');
+            highlightImagePage.steps.verifySetCorrectAnswerErrorIconIsDisplayed();
+        });
+
+        //Failing due to https://redmine.zeuslearning.com/issues/544273
+        it('CSS of active state of Correct answer tab', { tags: 'css' }, () => {
+            utilities.verifyCSS(highlightImagePage.correctTab(), {
+                'color': css.color.secondaryBtnActive,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.bold
+            });
+            cy.log('CSS of inactive Alternate answer tab')
+            utilities.verifyCSS(highlightImagePage.alternateAnswerTab(1), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.bold
+            });
+        });
+    });
+});