itemengine-cypress-automation 1.0.189-e2e-execution-crash-83cdbd4.0 → 1.0.190-7thMayFixes-fcaf7b8.0

package/cypress/e2e/ILC/ImageHighlight/allOrNothingForAllViews.smoke.js

@@ -0,0 +1,276 @@
+import { dialogBoxBase, imageHighlightPage, gradingViewPage, itemPreviewPage, studentViewPage } from "../../../pages";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import utilities from "../../../support/helpers/utilities";
+const css = Cypress.env('css');
+const grepTags = Cypress.env('grepTags');
+let correctAnswerViews = ['Question preview', 'Item preview', 'Grading view'];
+const views = utilities.getViews(correctAnswerViews);
+var itemReferenceID = "";
+
+const flowerHighlightRegion = [[30, 10], [30, 20], [45, 20], [45, 10]];
+const branchesHighlightRegion = [[45, 45], [45, 55], [57, 55], [57, 45]];
+const leafHighlightRegion = [[26, 26], [26, 36], [48, 36], [48, 26]];
+
+describe('Create item page - Image highlight: All or nothing ', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    if (!grepTags || !grepTags.includes('smoke')) {
+        describe('Question preview modes: Student view and Grading view', () => {
+            abortEarlySetup();
+            before(() => {
+                imageHighlightPage.steps.navigateToCreateQuestion('image highlight');
+                imageHighlightPage.steps.addTextInQuestionInstructionsInputField('Select the appropriate highlight in the image below');
+                imageHighlightPage.steps.uploadFile('highlightImage.jpg');
+                imageHighlightPage.steps.verifyImageUploadedInSpecifyPossibleOptionsSection();
+                imageHighlightPage.steps.verifyImageUploadedSpecifyCorrectAnswer();
+                imageHighlightPage.steps.highlightRegionInImage(flowerHighlightRegion);
+                imageHighlightPage.steps.highlightRegionInImage(branchesHighlightRegion);
+                imageHighlightPage.steps.highlightRegionInImage(leafHighlightRegion);
+                imageHighlightPage.steps.selectMultipleSelectionToggle();
+                imageHighlightPage.steps.switchToPreviewTab();
+            });
+
+            imageHighlightPage.tests.verifyPreviewModesAndScoreWhenPointsAndCorrectAnswersIsNotSet();
+
+            it('When the user sets correct answer responses and allots points, then the alloted points should be displayed in the preview tab', () => {
+                imageHighlightPage.steps.switchToEditTab();
+                imageHighlightPage.steps.allotPoints(20);
+                imageHighlightPage.steps.highlightARegionInSpecifyCorrectAnswerSection(0);
+                imageHighlightPage.steps.highlightARegionInSpecifyCorrectAnswerSection(2);
+                imageHighlightPage.steps.switchToPreviewTab();
+                imageHighlightPage.steps.verifyPreviewScore(0, 20);
+            });
+
+            it('When the user attempts question in preview tab and switches to edit tab, then on re-switching to the preview tab, users response should not persist', () => {
+                imageHighlightPage.steps.highlightARegionInPreviewTab(0);
+                imageHighlightPage.steps.resetQuestionPreview();
+                imageHighlightPage.steps.verifyRegionIsNotHighlightedPreviewTab(0);
+            });
+        });
+    };
+
+    //Failing due to https://redmine.zeuslearning.com/issues/571054
+    views.forEach((view) => {
+        describe(`${view}: Auto scored - All or nothing scoring`, { tags: 'smoke' }, () => {
+            abortEarlySetup();
+            before(() => {
+                switch (view) {
+                    case 'Question preview':
+                        imageHighlightPage.steps.navigateToCreateQuestion('image highlight');
+                        imageHighlightPage.steps.addTextInQuestionInstructionsInputField('Select the appropriate highlight in the image below');
+                        imageHighlightPage.steps.uploadFile('highlightImage.jpg');
+                        imageHighlightPage.steps.verifyImageUploadedInSpecifyPossibleOptionsSection();
+                        imageHighlightPage.steps.verifyImageUploadedSpecifyCorrectAnswer();
+                        imageHighlightPage.steps.highlightRegionInImage(flowerHighlightRegion);
+                        imageHighlightPage.steps.highlightRegionInImage(branchesHighlightRegion);
+                        imageHighlightPage.steps.highlightRegionInImage(leafHighlightRegion);
+                        imageHighlightPage.steps.selectMultipleSelectionToggle();
+                        imageHighlightPage.steps.highlightARegionInSpecifyCorrectAnswerSection(0);
+                        imageHighlightPage.steps.highlightARegionInSpecifyCorrectAnswerSection(2);
+                        imageHighlightPage.steps.allotPoints(20);
+                        imageHighlightPage.steps.switchToPreviewTab();
+                        break;
+                    case 'Item preview':
+                        cy.visit(`/item-engine/demo/edit-item/${utilities.base64Encoding(itemReferenceID)}`);
+                        itemPreviewPage.steps.switchToPreviewTab();
+                        break;
+                    case 'Grading view':
+                        cy.visit(`/item-engine/demo/render-item/student-view/${utilities.base64Encoding(itemReferenceID)}`);
+                        break;
+                };
+            });
+
+            beforeEach(() => {
+                switch (view) {
+                    case 'Question preview':
+                        imageHighlightPage.steps.verifyQuestionPreviewStateWhenSwitchingBackToStudentView();
+                        imageHighlightPage.steps.resetQuestionPreview();
+                        break;
+                    case 'Item preview':
+                        imageHighlightPage.steps.verifyQuestionPreviewStateWhenSwitchingBackToStudentView();
+                        itemPreviewPage.steps.resetQuestionPreview();
+                        break;
+                    case 'Grading view':
+                        cy.visit(`/item-engine/demo/render-item/student-view/${utilities.base64Encoding(itemReferenceID)}`);
+                        break;
+                }
+            });
+
+            if (view === 'Question preview') {
+                after(() => {
+                    imageHighlightPage.steps.clickOnSaveQuestionButton();
+                    utilities.verifyElementVisibilityState(itemPreviewPage.referenceID(), 'visible');
+                    itemReferenceID = itemPreviewPage.steps.getItemReferenceID();
+                });
+            };
+
+            it('When the user selects \'Grading\' view without attempting the question, highlight numeration should be displayed, correct answers section with a label \'Correct answers\' should be displayed with correct answers and respective option numeration', () => {
+                if (view === 'Grading view') {
+                    studentViewPage.steps.submitResponse();
+                    utilities.verifyElementVisibilityState(dialogBoxBase.dialogBox(), 'visible');
+                    studentViewPage.steps.clickOnGoToGradingViewButton();
+                    gradingViewPage.steps.verifyGradingViewScore(0, 20);
+                };
+                if (view === 'Question preview' || view === 'Item preview') {
+                    imageHighlightPage.steps.verifyPreviewScore(0, 20);
+                    imageHighlightPage.steps.switchToGradingView();
+                    imageHighlightPage.steps.verifyPreviewTabPointsBackgroundForIncorrectOrPartiallyCorrectAnswer();
+                };
+                imageHighlightPage.steps.verifyHighlightRegionNumerationPreviewTab()
+                imageHighlightPage.steps.verifyDefaultHighlightRegion(0);
+                imageHighlightPage.steps.verifyDefaultHighlightRegion(1);
+                imageHighlightPage.steps.verifyDefaultHighlightRegion(2);
+                utilities.verifyInnerText(imageHighlightPage.correctAnswersLabel(), 'Correct answers');
+                imageHighlightPage.steps.verifyCorrectAnswerContainerContents(['Option 1', 'Option 3'], [1, 2]);
+            });
+
+            it('When the user attempts the question incorrectly, then the user should be awarded 0 points and on switching to \'Grading\' view, incorrect icons should be displayed besides all incorrect responses, a status message with text \'Your answer is incorrect\' and correct answer section with all correct answers along with numeration should be displayed', () => {
+                imageHighlightPage.steps.highlightARegionInPreviewTab(1);
+                if (view === 'Grading view') {
+                    studentViewPage.steps.submitResponse();
+                    utilities.verifyElementVisibilityState(dialogBoxBase.dialogBox(), 'visible');
+                    studentViewPage.steps.clickOnGoToGradingViewButton();
+                    gradingViewPage.steps.verifyGradingViewScore(0, 20);
+                };
+                if (view === 'Question preview' || view === 'Item preview') {
+                    imageHighlightPage.steps.verifyPreviewScore(0, 20);
+                    imageHighlightPage.steps.switchToGradingView();
+                };
+                imageHighlightPage.steps.verifyHighlightRegionNumerationPreviewTab()
+                imageHighlightPage.steps.verifyDefaultHighlightRegion(0);
+                imageHighlightPage.steps.verifyIncorrectHighlightRegion(1);
+                imageHighlightPage.steps.verifyDefaultHighlightRegion(2);
+                imageHighlightPage.steps.verifyCorrectIncorrectAnswerLabel('incorrect');
+                imageHighlightPage.steps.verifyCorrectAnswerContainerContents(['Option 1', 'Option 3'], [1, 2]);
+            });
+
+            it('When the user attempts the question partially correct then the user should be awarded 0 points and on switching to \'Grading\' view, correct icon should be displayed besides the correct answer responses, a status message with text \'Your answer is incorrect\' and correct answer section with all correct answers along with numeration should be displayed', () => {
+                if (view === 'Grading view') {
+                    studentViewPage.steps.clearResponses();
+                };
+                imageHighlightPage.steps.highlightARegionInPreviewTab(0);
+                if (view === 'Grading view') {
+                    studentViewPage.steps.submitResponse();
+                    utilities.verifyElementVisibilityState(dialogBoxBase.dialogBox(), 'visible');
+                    studentViewPage.steps.clickOnGoToGradingViewButton();
+                    gradingViewPage.steps.verifyGradingViewScore(0, 20);
+                };
+                if (view === 'Question preview' || view === 'Item preview') {
+                    imageHighlightPage.steps.verifyPreviewScore(0, 20);
+                    imageHighlightPage.steps.switchToGradingView();
+                };
+                imageHighlightPage.steps.verifyHighlightRegionNumerationPreviewTab()
+                imageHighlightPage.steps.verifyCorrectHighlightRegion(0);
+                imageHighlightPage.steps.verifyDefaultHighlightRegion(1);
+                imageHighlightPage.steps.verifyDefaultHighlightRegion(2);
+                imageHighlightPage.steps.verifyCorrectIncorrectAnswerLabel('incorrect');
+                imageHighlightPage.steps.verifyCorrectAnswerContainerContents(['Option 1', 'Option 3'], [1, 2]);
+            });
+
+            it('When the user attempts the question correct with an incorrect response, then the user should be awarded 0 points and on switching to \'Grading\' view, correct icon should be displayed besides the correct answer responses, incorrect icon should be displayed besides incorrect answer response, a status message with text \'Your answer is incorrect\' and correct answer section with all correct answers along with numeration should be displayed', () => {
+                if (view === 'Grading view') {
+                    studentViewPage.steps.clearResponses();
+                };
+                imageHighlightPage.steps.highlightARegionInPreviewTab(1);
+                imageHighlightPage.steps.highlightARegionInPreviewTab(2);
+                if (view === 'Grading view') {
+                    studentViewPage.steps.submitResponse();
+                    utilities.verifyElementVisibilityState(dialogBoxBase.dialogBox(), 'visible');
+                    studentViewPage.steps.clickOnGoToGradingViewButton();
+                    gradingViewPage.steps.verifyGradingViewScore(0, 20);
+                };
+                if (view === 'Question preview' || view === 'Item preview') {
+                    imageHighlightPage.steps.verifyPreviewScore(0, 20);
+                    imageHighlightPage.steps.switchToGradingView();
+                };
+                imageHighlightPage.steps.verifyHighlightRegionNumerationPreviewTab()
+                imageHighlightPage.steps.verifyDefaultHighlightRegion(0);
+                imageHighlightPage.steps.verifyIncorrectHighlightRegion(1);
+                imageHighlightPage.steps.verifyCorrectHighlightRegion(2);
+                imageHighlightPage.steps.verifyCorrectIncorrectAnswerLabel('incorrect');
+                imageHighlightPage.steps.verifyCorrectAnswerContainerContents(['Option 1', 'Option 3'], [1, 2]);
+            });
+
+            it('When user attempts the question correctly, the user should be awarded full points and on switching to \'Grading\' view, then correct icons should be displayed beside all the correct responses, correct icon should be displayed besides the correct answer responses, a status message with text \'Your answer is correct\' and correct answer section should not be displayed', () => {
+                if (view === 'Grading view') {
+                    studentViewPage.steps.clearResponses();
+                };
+                imageHighlightPage.steps.highlightARegionInPreviewTab(0);
+                imageHighlightPage.steps.highlightARegionInPreviewTab(2);
+                if (view === 'Grading view') {
+                    studentViewPage.steps.submitResponse();
+                    utilities.verifyElementVisibilityState(dialogBoxBase.dialogBox(), 'visible');
+                    studentViewPage.steps.clickOnGoToGradingViewButton();
+                    gradingViewPage.steps.verifyGradingViewScore(20, 20);
+                };
+                if (view === 'Question preview' || view === 'Item preview') {
+                    imageHighlightPage.steps.verifyPreviewScore(20, 20);
+                    imageHighlightPage.steps.switchToGradingView();
+                    imageHighlightPage.steps.verifyPreviewTabPointsBackgroundForCorrectAnswer();
+                };
+                imageHighlightPage.steps.verifyHighlightRegionNumerationPreviewTab()
+                imageHighlightPage.steps.verifyCorrectHighlightRegion(0);
+                imageHighlightPage.steps.verifyDefaultHighlightRegion(1);
+                imageHighlightPage.steps.verifyCorrectHighlightRegion(2);
+                imageHighlightPage.steps.verifyCorrectIncorrectAnswerLabel('correct');
+                imageHighlightPage.steps.verifyCorrectAnswerSectionNotExists();
+            });
+        });
+    });
+
+    if (!grepTags || !grepTags.includes('smoke')) {
+        describe('Question preview: Auto scored - All or nothing: Minimum scoring', () => {
+            abortEarlySetup();
+            before(() => {
+                imageHighlightPage.steps.navigateToCreateQuestion('image highlight');
+                imageHighlightPage.steps.addTextInQuestionInstructionsInputField('Select the appropriate highlight in the image below');
+                imageHighlightPage.steps.uploadFile('highlightImage.jpg');
+                imageHighlightPage.steps.verifyImageUploadedInSpecifyPossibleOptionsSection();
+                imageHighlightPage.steps.verifyImageUploadedSpecifyCorrectAnswer();
+                imageHighlightPage.steps.highlightRegionInImage(flowerHighlightRegion);
+                imageHighlightPage.steps.highlightRegionInImage(branchesHighlightRegion);
+                imageHighlightPage.steps.highlightRegionInImage(leafHighlightRegion);
+                imageHighlightPage.steps.selectMultipleSelectionToggle();
+                imageHighlightPage.steps.highlightARegionInSpecifyCorrectAnswerSection(0);
+                imageHighlightPage.steps.highlightARegionInSpecifyCorrectAnswerSection(2);
+                imageHighlightPage.steps.allotPoints(20);
+            });
+
+            it('When the user selects \'Award minimum score\' from the minimum scoring dropdown, does not attempt the question and switches to grading view, then the user should be awarded with minimum points', () => {
+                imageHighlightPage.steps.expandMinimumScoringDropdown();
+                imageHighlightPage.steps.selectOptionFromMinimumScoringDropdown('Award minimum score');
+                imageHighlightPage.steps.allotMinimumPoints(2);
+                imageHighlightPage.steps.switchToPreviewTab();
+                imageHighlightPage.steps.switchToGradingView();
+                imageHighlightPage.steps.verifyPreviewScore(2, 20);
+                imageHighlightPage.steps.verifyQuestionPreviewStateWhenSwitchingBackToStudentView();
+            });
+
+            it('When the user has selected \'Award minimum score\' from the minimum scoring dropdown, attempts the question incorrectly and switches to grading view, the user should be awarded with minimum points', () => {
+                imageHighlightPage.steps.resetQuestionPreview();
+                imageHighlightPage.steps.highlightARegionInPreviewTab(1);
+                imageHighlightPage.steps.verifyPreviewScore(2, 20);
+                imageHighlightPage.steps.verifyQuestionPreviewStateWhenSwitchingBackToStudentView();
+            });
+
+            it('When the user selects \'Award minimum score only if attempted\' from the minimum scoring dropdown, does not attempt the question and switches to grading view, then the user should be awarded with 0 points', () => {
+                imageHighlightPage.steps.switchToEditTab();
+                imageHighlightPage.steps.expandMinimumScoringDropdown();
+                imageHighlightPage.steps.selectOptionFromMinimumScoringDropdown('Award minimum score only if attempted');
+                imageHighlightPage.steps.allotMinimumPoints(2);
+                imageHighlightPage.steps.switchToPreviewTab();
+                imageHighlightPage.steps.switchToGradingView();
+                imageHighlightPage.steps.verifyPreviewScore(0, 20);
+                imageHighlightPage.steps.verifyQuestionPreviewStateWhenSwitchingBackToStudentView();
+            });
+
+            it('When the user has selected \'Award minimum score\' from the minimum scoring dropdown, attempts the question incorrectly and switches to grading view, the user should be awarded with minimum points', () => {
+                imageHighlightPage.steps.resetQuestionPreview();
+                imageHighlightPage.steps.highlightARegionInPreviewTab(1);
+                imageHighlightPage.steps.verifyPreviewScore(2, 20);
+            });
+        });
+    };
+});

package/cypress/e2e/ILC/ImageHighlight/checkAnswerFunctionalityForAllViews.smoke.js

@@ -0,0 +1,141 @@
+import { imageHighlightPage, itemPreviewPage, studentViewPage } from "../../../pages";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import utilities from "../../../support/helpers/utilities";
+var itemReferenceID = "";
+const checkAnswerViews = ['Question preview', 'Item preview', 'Student view'];
+const views = utilities.getViews(checkAnswerViews);
+const flowerHighlightRegion = [[30, 10], [30, 20], [45, 20], [45, 10]];
+const branchesHighlightRegion = [[45, 45], [45, 55], [57, 55], [57, 45]];
+const leafHighlightRegion = [[26, 26], [26, 36], [48, 36], [48, 26]];
+
+describe('Create item page - Image highlight - Check answer functionality', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    views.forEach((view) => {
+        //Note: Remove after https://redmine.zeuslearning.com/issues/549542 is fixed
+        const checkAnswer = (view) => {
+            switch (view) {
+                case 'Question preview':
+                case 'Item preview':
+                    imageHighlightPage.steps.checkAnswer();
+                    break;
+                case 'Student view':
+                    studentViewPage.steps.checkAnswer();
+                    break;
+                default:
+                    throw new Error(`Unsupported page identifier: ${view}`);
+            }
+        };
+
+        describe(`${view} - Check answer functionality`, { tags: 'smoke' }, () => {
+            abortEarlySetup();
+            before(() => {
+                switch (view) {
+                    case 'Question preview':
+                        imageHighlightPage.steps.navigateToCreateQuestion('image highlight');
+                        cy.barsPreLoaderWait();
+                        imageHighlightPage.steps.addTextInQuestionInstructionsInputField('Select the appropriate highlight in the image below');
+                        imageHighlightPage.steps.uploadFile('highlightImage.jpg');
+                        imageHighlightPage.steps.verifyImageUploadedInSpecifyPossibleOptionsSection();
+                        imageHighlightPage.steps.verifyImageUploadedSpecifyCorrectAnswer();
+                        imageHighlightPage.steps.highlightRegionInImage(flowerHighlightRegion);
+                        imageHighlightPage.steps.highlightRegionInImage(branchesHighlightRegion);
+                        imageHighlightPage.steps.highlightRegionInImage(leafHighlightRegion);
+                        imageHighlightPage.steps.selectMultipleSelectionToggle();
+                        imageHighlightPage.steps.highlightARegionInSpecifyCorrectAnswerSection(0);
+                        imageHighlightPage.steps.highlightARegionInSpecifyCorrectAnswerSection(2);
+                        imageHighlightPage.steps.allotPoints(20);
+                        imageHighlightPage.steps.checkAllowStudentToCheckAnswerCheckbox();
+                        imageHighlightPage.steps.switchToPreviewTab();
+                        break;
+                    case 'Item preview':
+                        cy.visit(`/item-engine/demo/edit-item/${utilities.base64Encoding(itemReferenceID)}`);
+                        itemPreviewPage.steps.switchToPreviewTab();
+                        break;
+                    case 'Student view':
+                        cy.visit(`/item-engine/demo/render-item/student-view/${utilities.base64Encoding(itemReferenceID)}`);
+                        break;
+                }
+            });
+
+            beforeEach(() => {
+                switch (view) {
+                    case 'Question preview':
+                        imageHighlightPage.steps.verifyCorrectAnswerSectionNotExists();
+                        imageHighlightPage.steps.resetQuestionPreview();
+                        break;
+                    case 'Item preview':
+                        imageHighlightPage.steps.verifyCorrectAnswerSectionNotExists();
+                        itemPreviewPage.steps.resetQuestionPreview();
+                        break;
+                    case 'Student view':
+                        cy.visit(`/item-engine/demo/render-item/student-view/${utilities.base64Encoding(itemReferenceID)}`);
+                        break;
+                }
+            });
+
+            if (view === 'Question preview') {
+                after(() => {
+                    imageHighlightPage.steps.clickOnSaveQuestionButton();
+                    utilities.verifyElementVisibilityState(itemPreviewPage.referenceID(), 'visible');
+                    itemReferenceID = itemPreviewPage.steps.getItemReferenceID();
+                });
+            };
+
+            it('When the user selects \'Check answer\' button without attempting the question, then correct/incorrect icons, correct/incorrect answer status message, correct answer section and highlight regions should not be displayed', () => {
+                checkAnswer(view);
+                imageHighlightPage.steps.verifyHiddenHighlightRegion(0);
+                imageHighlightPage.steps.verifyHiddenHighlightRegion(1);
+                imageHighlightPage.steps.verifyHiddenHighlightRegion(2);
+                utilities.verifyElementVisibilityState(imageHighlightPage.crossMarkIcon(), 'notExist');
+                utilities.verifyElementVisibilityState(imageHighlightPage.checkMarkIcon(), 'notExist');
+                utilities.verifyElementVisibilityState(imageHighlightPage.correctIncorrectAnswerTextWrapper(), 'notExist');
+                imageHighlightPage.steps.verifyCorrectAnswerSectionNotExists();
+            });
+
+            it('When the user attempts the question incorrectly and clicks on \'Check answer\' button, then incorrect icons should be displayed besides all incorrect responses, a status message with text \'Your answer is incorrect\' should be displayed. Correct answer section should not be displayed', () => {
+                imageHighlightPage.steps.highlightARegionInPreviewTab(1);
+                checkAnswer(view);
+                imageHighlightPage.steps.verifyHiddenHighlightRegion(0);
+                imageHighlightPage.steps.verifyIncorrectHighlightRegion(1);
+                imageHighlightPage.steps.verifyHiddenHighlightRegion(2);
+                imageHighlightPage.steps.verifyCorrectIncorrectAnswerLabel('incorrect');
+                imageHighlightPage.steps.verifyCorrectAnswerSectionNotExists();
+            });
+
+            it('When the user attempts the question partially correct and clicks on \'Check answer\' button, then incorrect icons should be displayed besides all incorrect responses, correct icons should be displayed besides correct responses, a status message with text \'Your answer is incorrect\' should be displayed. Correct answer section should not be displayed', () => {
+                imageHighlightPage.steps.highlightARegionInPreviewTab(0);
+                checkAnswer(view);
+                imageHighlightPage.steps.verifyCorrectHighlightRegion(0);
+                imageHighlightPage.steps.verifyHiddenHighlightRegion(1);
+                imageHighlightPage.steps.verifyHiddenHighlightRegion(2);
+                imageHighlightPage.steps.verifyCorrectIncorrectAnswerLabel('incorrect');
+                imageHighlightPage.steps.verifyCorrectAnswerSectionNotExists();
+            });
+
+            it('When the user attempts the question partially correct with an incorrect response, then the user should be awarded 0 points and on switching to \'Grading\' view, correct icon should be displayed besides the correct answer responses, incorrect icon should be displayed besides incorrect answer response, a status message with text \'Your answer is incorrect\' and correct answer section with all correct answers along with numeration should be displayed', () => {
+                imageHighlightPage.steps.highlightARegionInPreviewTab(1);
+                imageHighlightPage.steps.highlightARegionInPreviewTab(2);
+                checkAnswer(view);
+                imageHighlightPage.steps.verifyHiddenHighlightRegion(0);
+                imageHighlightPage.steps.verifyIncorrectHighlightRegion(1);
+                imageHighlightPage.steps.verifyCorrectHighlightRegion(2);
+                imageHighlightPage.steps.verifyCorrectIncorrectAnswerLabel('incorrect');
+                imageHighlightPage.steps.verifyCorrectAnswerSectionNotExists();
+            });
+
+            it('When user attempts the question correctly, the user should be awarded full points and on switching to \'Grading\' view, then correct icons should be displayed beside all the correct responses, correct icon should be displayed besides the correct answer responses, a status message with text \'Your answer is correct\' and correct answer section should not be displayed', () => {
+                imageHighlightPage.steps.highlightARegionInPreviewTab(0);
+                imageHighlightPage.steps.highlightARegionInPreviewTab(2);
+                checkAnswer(view);
+                imageHighlightPage.steps.verifyCorrectHighlightRegion(0);
+                imageHighlightPage.steps.verifyHiddenHighlightRegion(1);
+                imageHighlightPage.steps.verifyCorrectHighlightRegion(2);
+                imageHighlightPage.steps.verifyCorrectIncorrectAnswerLabel('correct');
+                imageHighlightPage.steps.verifyCorrectAnswerSectionNotExists();
+            });
+        });
+    });
+});

package/cypress/e2e/ILC/ImageHighlight/previewContentsForAllViews.smoke.js

@@ -0,0 +1,150 @@
+import { imageHighlightPage, itemPreviewPage, studentViewPage } from "../../../pages";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import utilities from "../../../support/helpers/utilities";
+const css = Cypress.env('css');
+const previewContentViews = ['Question preview', 'Item view', 'Item preview', 'Student view', 'Grading view', 'Correct answer view'];
+const views = utilities.getViews(previewContentViews);
+var itemReferenceID = "";
+
+const flowerHighlightRegion = [[30, 10], [30, 20], [45, 20], [45, 10]];
+const branchesHighlightRegion = [[45, 45], [45, 55], [57, 55], [57, 45]];
+const leafHighlightRegion = [[26, 26], [26, 36], [48, 36], [48, 26]];
+
+describe('Create item page - Image highlight - Preview contents in all views', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    views.forEach((view) => {
+        describe(`Preview tab contents - ${view}`, { tags: 'smoke' }, () => {
+            abortEarlySetup();
+            before(() => {
+                switch (view) {
+                    case 'Question preview':
+                        imageHighlightPage.steps.navigateToCreateQuestion('image highlight');
+                        imageHighlightPage.steps.addTextInQuestionInstructionsInputField('Select the appropriate highlight in the image below');
+                        imageHighlightPage.steps.uploadFile('highlightImage.jpg');
+                        imageHighlightPage.steps.verifyImageUploadedInSpecifyPossibleOptionsSection();
+                        imageHighlightPage.steps.verifyImageUploadedSpecifyCorrectAnswer();
+                        imageHighlightPage.steps.enterAndVerifyImageAlternativeTextInInputField('Image alternative text');
+                        imageHighlightPage.steps.highlightRegionInImage(flowerHighlightRegion);
+                        imageHighlightPage.steps.highlightRegionInImage(branchesHighlightRegion);
+                        imageHighlightPage.steps.highlightRegionInImage(leafHighlightRegion);
+                        imageHighlightPage.steps.selectMultipleSelectionToggle();
+                        imageHighlightPage.steps.highlightARegionInSpecifyCorrectAnswerSection(0);
+                        imageHighlightPage.steps.highlightARegionInSpecifyCorrectAnswerSection(2);
+                        imageHighlightPage.steps.allotPoints(10);
+                        imageHighlightPage.steps.switchToPreviewTab();
+                        break;
+                    case 'Item view':
+                        cy.visit(`/item-engine/demo/edit-item/${utilities.base64Encoding(itemReferenceID)}`);
+                        break;
+                    case 'Item preview':
+                        cy.visit(`/item-engine/demo/edit-item/${utilities.base64Encoding(itemReferenceID)}`);
+                        imageHighlightPage.steps.switchToPreviewTab();
+                        break;
+                    case 'Student view':
+                        cy.visit(`/item-engine/demo/render-item/student-view/${utilities.base64Encoding(itemReferenceID)}`);
+                        break;
+                    case 'Grading view':
+                        cy.visit(`/item-engine/demo/render-item/grading-view/${utilities.base64Encoding(itemReferenceID)}`);
+                        break;
+                    case 'Correct answer view':
+                        cy.visit(`/item-engine/demo/render-item/correct-answer-view/${utilities.base64Encoding(itemReferenceID)}`);
+                        break;
+                    default:
+                        throw new Error('Invalid view');
+                }
+            });
+
+            after(() => {
+                if (view === 'Question preview') {
+                    imageHighlightPage.steps.clickOnSaveQuestionButton();
+                    utilities.verifyElementVisibilityState(itemPreviewPage.referenceID(), 'visible');
+                    itemReferenceID = itemPreviewPage.steps.getItemReferenceID();
+                }
+                if (view === 'Student view') {
+                    studentViewPage.steps.submitResponse();
+                    utilities.verifyElementVisibilityState(studentViewPage.buttonGoToGradingView(), 'exist');
+                }
+            });
+
+            it('Question instructions should be visible', () => {
+                utilities.verifyInnerText(imageHighlightPage.questionInstructionsText(), 'Select the appropriate highlight in the image below');
+                utilities.verifyElementVisibilityState(imageHighlightPage.questionInstructionsText(), 'visible');
+            });
+
+            it('The uploaded image should be displayed and the highlighted sections should be present in the preview tab', () => {
+                imageHighlightPage.steps.verifyImageUploadedPreviewTab();
+                imageHighlightPage.steps.verifyHighlightRegionCountInPreviewTab(3);
+                imageHighlightPage.steps.verifyImageUploadedAltTextPreviewTab('Image alternative text');
+                imageHighlightPage.steps.verifyImageUploadedWidthAndHeightPreviewTab('768', '432');
+                imageHighlightPage.steps.verifyHighlightRegionsInPreviewTab(0, flowerHighlightRegion);
+                imageHighlightPage.steps.verifyHighlightRegionsInPreviewTab(1, branchesHighlightRegion);
+                imageHighlightPage.steps.verifyHighlightRegionsInPreviewTab(2, leafHighlightRegion);
+            });
+
+            if (view !== 'Grading view' && view !== 'Correct answer view') {
+                it('By default the highlighted sections should be hidden and when the user hovers over any highlighted section it should be visible', () => {
+                    imageHighlightPage.steps.verifyHiddenHighlightRegion(0);
+                    imageHighlightPage.steps.verifyHiddenHighlightRegion(1);
+                    imageHighlightPage.steps.verifyHiddenHighlightRegion(2);
+                    utilities.hoverOverElement(utilities.getNthElement(imageHighlightPage.highlightPreviewTab(), 0))
+                    imageHighlightPage.steps.verifyHoverStateOfHighlightRegion(0);
+                    utilities.hoverAwayFromElement();
+                });
+
+                it('User should be able to select or de-select any highlighted section', () => {
+                    imageHighlightPage.steps.highlightARegionInPreviewTab(0);
+                    imageHighlightPage.steps.highlightARegionInPreviewTab(1);
+                    imageHighlightPage.steps.verifySelectedHighlightRegionInPreviewTab(0);
+                    imageHighlightPage.steps.verifySelectedHighlightRegionInPreviewTab(1);
+                    imageHighlightPage.steps.verifyRegionIsNotHighlightedPreviewTab(2);
+                    imageHighlightPage.steps.removeHighlightOfARegionInPreviewTab(0);
+                    imageHighlightPage.steps.verifyRegionIsNotHighlightedPreviewTab(0);
+                    imageHighlightPage.steps.verifySelectedHighlightRegionInPreviewTab(1);
+                    imageHighlightPage.steps.verifyRegionIsNotHighlightedPreviewTab(2);
+                });
+            } else if (view === 'Grading view') {
+                it('The highlight regions should be displayed', () => {
+                    imageHighlightPage.steps.verifyHoverStateOfHighlightRegion(0);
+                    imageHighlightPage.steps.verifyHoverStateOfHighlightRegion(2);
+                });
+
+                it('User should not be able to select, de-select any highlight sections', () => {
+                    imageHighlightPage.steps.clickOnARegionInPreviewTab(0);
+                    imageHighlightPage.steps.clickOnARegionInPreviewTab(2);
+                    imageHighlightPage.steps.verifyRegionIsNotHighlightedPreviewTab(0);
+                    imageHighlightPage.steps.verifyRegionIsNotHighlightedPreviewTab(2);
+                });
+            } else {
+                it('The highlight regions should be displayed with correct answers', () => {
+                    imageHighlightPage.steps.verifyCorrectHighlightRegion(0);
+                    imageHighlightPage.steps.verifyCorrectHighlightRegion(1);
+                });
+            }
+
+            it('CSS of highlight region in preview tab in default, hover and active state', { tags: 'css' }, () => {
+                cy.log('Default state')
+                utilities.verifyCSS(imageHighlightPage.highlightPolygonPreviewTab().eq(2), {
+                    'color': css.color.successBtn,
+                    'stroke': css.color.transparent,
+                });
+                cy.log('Active state')
+                utilities.verifyCSS(imageHighlightPage.highlightPolygonPreviewTab().eq(1), {
+                    'stroke': css.color.activeHighlightBorder,
+                });
+                cy.log('Hover state')
+                utilities.hoverOverElement(imageHighlightPage.highlightPreviewTab().eq(0))
+                utilities.verifyCSS(imageHighlightPage.highlightPolygonPreviewTab().eq(0), {
+                    'stroke': css.color.hoverHighlightBorder,
+                });
+                utilities.hoverAwayFromElement();
+            });
+
+            it('Accessibility of preview tab highlight regions', { tags: 'a11y' }, () => {
+                cy.checkAccessibility(imageHighlightPage.highlightPreviewTab());
+            });
+        });
+    });
+});