itemengine-cypress-automation 1.0.193-packageUpdated-b3f3d0b.0 → 1.0.193

package/cypress/e2e/ILC/ImageHighlight/Scoring/allOrNothingWithCorrectPointsGreaterThanAlternatePoints.js

@@ -0,0 +1,285 @@
+import { imageHighlightPage } from "../../../../pages";
+import abortEarlySetup from "../../../../support/helpers/abortEarly";
+import utilities from "../../../../support/helpers/utilities";
+const css = Cypress.env('css');
+
+const flowerHighlightRegion = [[40, 6], [40, 20], [55, 20], [55, 6]];
+const branchesHighlightRegion = [[50, 30], [50, 42], [65, 42], [65, 30]];
+const leafHighlightRegion = [[26, 26], [26, 36], [48, 36], [48, 26]];
+const rootsHighlightRegion = [[45, 45], [45, 55], [57, 55], [57, 45]];
+
+describe('Create Item page - Image highlight: All or nothing with alternative answers', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Question Preview: AutoScored - All or Nothing with alternate answer: When correct answer points are more than alternate answer points', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to highlight image question type');
+            imageHighlightPage.steps.navigateToCreateQuestion('image highlight');
+            cy.barsPreLoaderWait();
+            imageHighlightPage.steps.addQuestionInstructions();
+            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.highlightRegionInImage(rootsHighlightRegion);
+            imageHighlightPage.steps.selectMultipleSelectionToggle();
+            imageHighlightPage.steps.highlightARegionInSpecifyCorrectAnswerSection(0);
+            imageHighlightPage.steps.highlightARegionInSpecifyCorrectAnswerSection(3);
+            imageHighlightPage.steps.allotPoints(20);
+            imageHighlightPage.steps.clickOnAddAlternativeAnswerButton();
+            imageHighlightPage.steps.highlightARegionInSpecifyCorrectAnswerSection(0);
+            imageHighlightPage.steps.highlightARegionInSpecifyCorrectAnswerSection(1);
+            imageHighlightPage.steps.allotPoints(12);
+            imageHighlightPage.steps.checkAllowStudentsToCheckAnswerCheckbox();
+            imageHighlightPage.steps.switchToPreviewTab();
+        });
+
+        it('When the user switches to \'Grading view\' without attempting the question then the no regions should be highlighted, \'Your answer is incorrect\' label should be displayed and the correct answer section with the answers of the correct accordion should be displayed', () => {
+            cy.log('Total points displayed besides Show correct answer checkbox should be of alternate answer points')
+            imageHighlightPage.steps.verifyPreviewScore(0, 20);
+            imageHighlightPage.steps.switchToGradingView();
+            imageHighlightPage.steps.verifyHighlightRegionNumerationPreviewTab()
+            imageHighlightPage.steps.verifyDefaultHighlightRegion(0);
+            imageHighlightPage.steps.verifyDefaultHighlightRegion(1);
+            imageHighlightPage.steps.verifyDefaultHighlightRegion(2);
+            imageHighlightPage.steps.verifyDefaultHighlightRegion(3);
+            imageHighlightPage.steps.verifyCorrectAnswerContainerContents(['Option 1', 'Option 4'], [1, 2]);
+        });
+
+        it('When the user attempts the question with responses from the correct accordion, then the user should be awarded full points and on switching to \'Grading\' view, correct icons should be displayed beside all the correct responses, a status message with text \'Your answer is correct\' should be displayed and correct answer section should not be displayed', () => {
+            imageHighlightPage.steps.resetQuestionPreview();
+            imageHighlightPage.steps.highlightARegionInPreviewTab(0);
+            imageHighlightPage.steps.highlightARegionInPreviewTab(3);
+            imageHighlightPage.steps.verifyPreviewScore(20, 20);
+            imageHighlightPage.steps.switchToGradingView();
+            imageHighlightPage.steps.verifyCorrectHighlightRegion(0);
+            imageHighlightPage.steps.verifyDefaultHighlightRegion(1);
+            imageHighlightPage.steps.verifyDefaultHighlightRegion(2);
+            imageHighlightPage.steps.verifyCorrectHighlightRegion(3);
+            imageHighlightPage.steps.verifyCorrectAnswerSectionNotExists();
+            imageHighlightPage.steps.verifyCorrectIncorrectAnswerLabel('correct');
+            imageHighlightPage.steps.verifyQuestionPreviewStateWhenSwitchingBackToStudentView();
+
+            cy.log('When the user has attempted the question with responses from the correct accordion and clicks on \'Check answer\' button, then 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.checkAnswer();
+            imageHighlightPage.steps.verifyCorrectHighlightRegion(0);
+            imageHighlightPage.steps.verifyHiddenHighlightRegion(1);
+            imageHighlightPage.steps.verifyHiddenHighlightRegion(2);
+            imageHighlightPage.steps.verifyCorrectHighlightRegion(3);
+            imageHighlightPage.steps.verifyCorrectIncorrectAnswerLabel('correct');
+            imageHighlightPage.steps.verifyCorrectAnswerSectionNotExists();
+        });
+
+        it('CSS of correct answer section', { tags: 'css' }, () => {
+            utilities.verifyCSS(imageHighlightPage.correctIncorrectAnswerTextWrapper(), {
+                'border': `1px solid ${css.color.correctAnswer}`,
+                'color': css.color.text,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.normal
+            });
+            utilities.verifyCSS(imageHighlightPage.highlightNumerationPreviewTab(), {
+                'color': css.color.text,
+                'font-size': css.fontSize.small,
+                'font-weight': css.fontWeight.regular
+            });
+        });
+
+        it('Accessibility of correct answer section', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(imageHighlightPage.previewTabQuestionWrapper());
+        });
+
+        it('When the user attempts the question with responses from the alternative accordion, then the user should be awarded with points specified for alternative accordion (less than full points) and on switching to \'Grading\' view, correct icons should be displayed beside all the correct responses, a status message with text \'Your answer is correct\' and correct answer section should not be displayed', () => {
+            imageHighlightPage.steps.resetQuestionPreview();
+            imageHighlightPage.steps.highlightARegionInPreviewTab(0);
+            imageHighlightPage.steps.highlightARegionInPreviewTab(1);
+            imageHighlightPage.steps.verifyPreviewScore(12, 20);
+            imageHighlightPage.steps.switchToGradingView();
+            imageHighlightPage.steps.verifyCorrectHighlightRegion(0);
+            imageHighlightPage.steps.verifyCorrectHighlightRegion(1);
+            imageHighlightPage.steps.verifyDefaultHighlightRegion(2);
+            imageHighlightPage.steps.verifyDefaultHighlightRegion(3);
+            imageHighlightPage.steps.verifyCorrectAnswerSectionNotExists();
+            imageHighlightPage.steps.verifyCorrectIncorrectAnswerLabel('correct');
+            imageHighlightPage.steps.verifyQuestionPreviewStateWhenSwitchingBackToStudentView();
+
+            cy.log('When the user has attempted the question with responses from the alternative accordion and clicks on \'Check answer\' button, then 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.checkAnswer();
+            imageHighlightPage.steps.verifyCorrectHighlightRegion(0);
+            imageHighlightPage.steps.verifyCorrectHighlightRegion(1);
+            imageHighlightPage.steps.verifyHiddenHighlightRegion(2);
+            imageHighlightPage.steps.verifyHiddenHighlightRegion(3);
+            imageHighlightPage.steps.verifyCorrectIncorrectAnswerLabel('correct');
+            imageHighlightPage.steps.verifyCorrectAnswerSectionNotExists();
+        });
+
+        it('When the user attempts the question with partially correct options exclusively from the correct accordion, then the user should be awarded 0 points and on switching to \'Grading\' view, correct icon should be displayed besides the correct answer responses, no icon should be displayed beside unattempted response a status message with text \'Your answer is incorrect\' and correct answer section with all correct answers from the correct accordion should be displayed', () => {
+            imageHighlightPage.steps.resetQuestionPreview();
+            imageHighlightPage.steps.highlightARegionInPreviewTab(3);
+            imageHighlightPage.steps.verifyPreviewScore(0, 20);
+            imageHighlightPage.steps.switchToGradingView();
+            imageHighlightPage.steps.verifyDefaultHighlightRegion(0);
+            imageHighlightPage.steps.verifyDefaultHighlightRegion(1);
+            imageHighlightPage.steps.verifyDefaultHighlightRegion(2);
+            imageHighlightPage.steps.verifyCorrectHighlightRegion(3);
+            imageHighlightPage.steps.verifyCorrectAnswerContainerContents(['Option 1', 'Option 4'], [1, 2]);
+            imageHighlightPage.steps.verifyCorrectIncorrectAnswerLabel('incorrect');
+            imageHighlightPage.steps.verifyQuestionPreviewStateWhenSwitchingBackToStudentView();
+
+            cy.log('When the user has attempted the question with partially correct options exclusively from the correct accordion and clicks on \'Check answer\' button, then correct icon should be displayed besides the correct answer responses, a status message with text \'Your answer is incorrect\' and correct answer section should not be displayed')
+            imageHighlightPage.steps.checkAnswer();
+            imageHighlightPage.steps.verifyHiddenHighlightRegion(0);
+            imageHighlightPage.steps.verifyHiddenHighlightRegion(1);
+            imageHighlightPage.steps.verifyHiddenHighlightRegion(2);
+            imageHighlightPage.steps.verifyCorrectHighlightRegion(3);
+            imageHighlightPage.steps.verifyCorrectAnswerSectionNotExists();
+            imageHighlightPage.steps.verifyCorrectIncorrectAnswerLabel('incorrect');
+        });
+
+        it('When the user attempts the question with partially correct options exclusively from the alternative accordion, then the user should be awarded 0 points and on switching to \'Grading\' view, correct icon should be displayed besides the correct answer responses,  no icon should be displayed beside unattempted response a status message with text \'Your answer is incorrect\' and correct answer section with all correct answers from the correct accordion should be displayed', () => {
+            imageHighlightPage.steps.resetQuestionPreview();
+            imageHighlightPage.steps.highlightARegionInPreviewTab(1);
+            imageHighlightPage.steps.verifyPreviewScore(0, 20);
+            imageHighlightPage.steps.switchToGradingView();
+            imageHighlightPage.steps.verifyDefaultHighlightRegion(0);
+            imageHighlightPage.steps.verifyCorrectHighlightRegion(1);
+            imageHighlightPage.steps.verifyDefaultHighlightRegion(2);
+            imageHighlightPage.steps.verifyDefaultHighlightRegion(3);
+            imageHighlightPage.steps.verifyCorrectAnswerContainerContents(['Option 1', 'Option 4'], [1, 2]);
+            imageHighlightPage.steps.verifyCorrectIncorrectAnswerLabel('incorrect');
+            imageHighlightPage.steps.verifyQuestionPreviewStateWhenSwitchingBackToStudentView();
+
+            cy.log('When the user has attempted the question with partially correct options exclusively from the alternative accordion and clicks on \'Check answer\' button, then correct icon should be displayed besides the correct answer responses,  no icon should be displayed beside unattempted response a status message with text \'Your answer is incorrect\' and correct answer section should not be displayed')
+            imageHighlightPage.steps.checkAnswer();
+            imageHighlightPage.steps.verifyHiddenHighlightRegion(0);
+            imageHighlightPage.steps.verifyCorrectHighlightRegion(1);
+            imageHighlightPage.steps.verifyHiddenHighlightRegion(2);
+            imageHighlightPage.steps.verifyHiddenHighlightRegion(3);
+            imageHighlightPage.steps.verifyCorrectAnswerSectionNotExists();
+            imageHighlightPage.steps.verifyCorrectIncorrectAnswerLabel('incorrect');
+        });
+
+        it('When the user has attempted the question with equal number of correct responses from correct and alternative accordion, then the user should be awarded with 0 points and on switching to \'Grading\' view, green check-mark icon should be displayed besides response field with correct answer responses, red cross-mark icon should be displayed beside responses from the alternative tab, a status message with text \'Your answer is incorrect\' and correct answer section with all correct answers from the correct accordion should be displayed', () => {
+            imageHighlightPage.steps.resetQuestionPreview();
+            imageHighlightPage.steps.highlightARegionInPreviewTab(1);
+            imageHighlightPage.steps.highlightARegionInPreviewTab(3);
+            imageHighlightPage.steps.verifyPreviewScore(0, 20);
+            imageHighlightPage.steps.switchToGradingView();
+            imageHighlightPage.steps.verifyDefaultHighlightRegion(0);
+            imageHighlightPage.steps.verifyIncorrectHighlightRegion(1);
+            imageHighlightPage.steps.verifyDefaultHighlightRegion(2);
+            imageHighlightPage.steps.verifyCorrectHighlightRegion(3);
+            imageHighlightPage.steps.verifyCorrectAnswerContainerContents(['Option 1', 'Option 4'], [1, 2]);
+            imageHighlightPage.steps.verifyCorrectIncorrectAnswerLabel('incorrect');
+            imageHighlightPage.steps.verifyQuestionPreviewStateWhenSwitchingBackToStudentView();
+
+            cy.log('When the user has attempted the question with equal number of correct responses from correct and alternative accordion and clicks on \'Check answer\' button, then correct icon should be displayed besides the correct answer responses, incorrect icon should be displayed beside empty responses a status message with text \'Your answer is incorrect\' and correct answer section should not be displayed')
+            imageHighlightPage.steps.checkAnswer();
+            imageHighlightPage.steps.verifyHiddenHighlightRegion(0);
+            imageHighlightPage.steps.verifyIncorrectHighlightRegion(1);
+            imageHighlightPage.steps.verifyHiddenHighlightRegion(2);
+            imageHighlightPage.steps.verifyCorrectHighlightRegion(3);
+            imageHighlightPage.steps.verifyCorrectAnswerSectionNotExists();
+            imageHighlightPage.steps.verifyCorrectIncorrectAnswerLabel('incorrect');
+        });
+
+        it('Race condition 1: When the user attempts the question with the common response between correct and alternative accordion, then the user should be awarded with 0 points and on switching to \'Grading\' view, green check-mark icon should be besides the common response, no icon should be displayed beside unattempted response, \'Your answer is incorrect\' and correct answer section with all correct answers from the correct accordion should be displayed', () => {
+            imageHighlightPage.steps.resetQuestionPreview();
+            imageHighlightPage.steps.highlightARegionInPreviewTab(0);
+            imageHighlightPage.steps.verifyPreviewScore(0, 20);
+            imageHighlightPage.steps.switchToGradingView();
+            imageHighlightPage.steps.verifyCorrectHighlightRegion(0);
+            imageHighlightPage.steps.verifyDefaultHighlightRegion(1);
+            imageHighlightPage.steps.verifyDefaultHighlightRegion(2);
+            imageHighlightPage.steps.verifyDefaultHighlightRegion(3);
+            imageHighlightPage.steps.verifyCorrectAnswerContainerContents(['Option 1', 'Option 4'], [1, 2]);
+            imageHighlightPage.steps.verifyCorrectIncorrectAnswerLabel('incorrect');
+            imageHighlightPage.steps.verifyQuestionPreviewStateWhenSwitchingBackToStudentView();
+
+            cy.log('When the user has attempted the question with equal number of correct responses from correct and alternative accordion and clicks on \'Check answer\' button, then correct icon should be displayed besides the correct answer responses,  no icon should be displayed beside unattempted response a status message with text \'Your answer is incorrect\' and correct answer section should not be displayed')
+            imageHighlightPage.steps.checkAnswer();
+            imageHighlightPage.steps.verifyCorrectHighlightRegion(0);
+            imageHighlightPage.steps.verifyHiddenHighlightRegion(1);
+            imageHighlightPage.steps.verifyHiddenHighlightRegion(2);
+            imageHighlightPage.steps.verifyHiddenHighlightRegion(3);
+            imageHighlightPage.steps.verifyCorrectAnswerSectionNotExists();
+            imageHighlightPage.steps.verifyCorrectIncorrectAnswerLabel('incorrect');
+        });
+
+        it('Race condition 2: When the user attempts the question partially correct with all the responses, then the user should be awarded 0 points and on switching to \'Grading\' view, correct icon should be displayed besides the response from the correct accordion, incorrect icon should be displayed besides the responses from the alternative accordion and  no icon should be displayed beside unattempted response, a status message with text \'Your answer is incorrect\' and correct answer section with all correct answers from the correct accordion should be displayed', () => {
+            imageHighlightPage.steps.resetQuestionPreview();
+            imageHighlightPage.steps.highlightARegionInPreviewTab(0);
+            imageHighlightPage.steps.highlightARegionInPreviewTab(1);
+            imageHighlightPage.steps.highlightARegionInPreviewTab(3);
+            imageHighlightPage.steps.verifyPreviewScore(0, 20);
+            imageHighlightPage.steps.switchToGradingView();
+            imageHighlightPage.steps.verifyCorrectHighlightRegion(0);
+            imageHighlightPage.steps.verifyIncorrectHighlightRegion(1);
+            imageHighlightPage.steps.verifyDefaultHighlightRegion(2);
+            imageHighlightPage.steps.verifyCorrectHighlightRegion(3);
+            imageHighlightPage.steps.verifyCorrectAnswerContainerContents(['Option 1', 'Option 4'], [1, 2]);
+            imageHighlightPage.steps.verifyCorrectIncorrectAnswerLabel('incorrect');
+            imageHighlightPage.steps.verifyQuestionPreviewStateWhenSwitchingBackToStudentView();
+
+            cy.log('When the user has attempted the question with partially correct with all the response and clicks on \'Check answer\' button, then correct icon should be displayed besides the response from the correct accordion, incorrect icon should be displayed besides the responses from the alternative accordion and no icon should be displayed beside unattempted response, a status message with text \'Your answer is incorrect\' and correct answer section should not be displayed')
+            imageHighlightPage.steps.checkAnswer();
+            imageHighlightPage.steps.verifyCorrectHighlightRegion(0);
+            imageHighlightPage.steps.verifyIncorrectHighlightRegion(1);
+            imageHighlightPage.steps.verifyHiddenHighlightRegion(2);
+            imageHighlightPage.steps.verifyCorrectHighlightRegion(3);
+            imageHighlightPage.steps.verifyCorrectAnswerSectionNotExists();
+            imageHighlightPage.steps.verifyCorrectIncorrectAnswerLabel('incorrect');
+        });
+
+        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,  no icon should be displayed beside unattempted response a status message with text \'Your answer is incorrect\' and correct answer section with all correct answers should be displayed', () => {
+            imageHighlightPage.steps.resetQuestionPreview();
+            imageHighlightPage.steps.highlightARegionInPreviewTab(2);
+            imageHighlightPage.steps.verifyPreviewScore(0, 20);
+            imageHighlightPage.steps.switchToGradingView();
+            imageHighlightPage.steps.verifyDefaultHighlightRegion(0);
+            imageHighlightPage.steps.verifyDefaultHighlightRegion(1);
+            imageHighlightPage.steps.verifyIncorrectHighlightRegion(2);
+            imageHighlightPage.steps.verifyDefaultHighlightRegion(3);
+            imageHighlightPage.steps.verifyCorrectAnswerContainerContents(['Option 1', 'Option 4'], [1, 2]);
+            imageHighlightPage.steps.verifyCorrectIncorrectAnswerLabel('incorrect');
+            imageHighlightPage.steps.verifyQuestionPreviewStateWhenSwitchingBackToStudentView();
+
+            cy.log('When the user has attempted the question incorrectly and clicks on \'Check answer\' button, then incorrect icons should be displayed besides all incorrect responses,  no icon should be displayed beside unattempted response a status message with text \'Your answer is incorrect\' and correct answer section should not be displayed')
+            imageHighlightPage.steps.checkAnswer();
+            imageHighlightPage.steps.verifyHiddenHighlightRegion(0);
+            imageHighlightPage.steps.verifyHiddenHighlightRegion(1);
+            imageHighlightPage.steps.verifyIncorrectHighlightRegion(2);
+            imageHighlightPage.steps.verifyHiddenHighlightRegion(3);
+            imageHighlightPage.steps.verifyCorrectAnswerSectionNotExists();
+            imageHighlightPage.steps.verifyCorrectIncorrectAnswerLabel('incorrect');
+        });
+
+        it('CSS of incorrect answer state', { tags: 'css' }, () => {
+            utilities.verifyCSS(imageHighlightPage.correctIncorrectAnswerTextWrapper(), {
+                'border': `1px solid ${css.color.incorrectAnswer}`,
+                'color': css.color.text,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.normal
+            });
+            utilities.verifyCSS(imageHighlightPage.highlightNumerationPreviewTab(), {
+                'color': css.color.text,
+                'font-size': css.fontSize.small,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(imageHighlightPage.correctAnswerContainerAnswerWrapper().find('.question-text-wrapper'), {
+                'color': css.color.text,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.normal
+            });
+
+        });
+
+        it('Accessibility of incorrect answer state', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(imageHighlightPage.previewTabQuestionWrapper());
+        });
+    });
+});

package/cypress/e2e/ILC/ImageHighlight/Scoring/manuallyAndNonScored.js

@@ -0,0 +1,164 @@
+import { imageHighlightPage } from "../../../../pages";
+import abortEarlySetup from "../../../../support/helpers/abortEarly";
+
+const flowerHighlightRegion = [[40, 6], [40, 20], [55, 20], [55, 6]];
+const branchesHighlightRegion = [[50, 30], [50, 42], [65, 42], [65, 30]];
+const leafHighlightRegion = [[26, 26], [26, 36], [48, 36], [48, 26]];
+const rootsHighlightRegion = [[45, 45], [45, 55], [57, 55], [57, 45]];
+
+describe('Create Item page - Matching: Manually and non scored', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Question Preview: Manually Scored', () => {
+        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.highlightRegionInImage(rootsHighlightRegion);
+            imageHighlightPage.steps.selectMultipleSelectionToggle();
+            imageHighlightPage.steps.highlightARegionInSpecifyCorrectAnswerSection(0);
+            imageHighlightPage.steps.highlightARegionInSpecifyCorrectAnswerSection(1);
+            imageHighlightPage.steps.expandScoringTypeDropdown();
+            imageHighlightPage.steps.selectOptionFromScoringTypeDropdown('Manually scored');
+            imageHighlightPage.steps.switchToPreviewTab();
+        });
+
+        it('In Preview tab, question instructions and highlight regions should be displayed in the preview tab', () => {
+            imageHighlightPage.steps.verifyQuestionInstructionsTextPreviewTab('Select the appropriate highlight in the image below');
+            imageHighlightPage.steps.verifyHighlightRegionsInPreviewTab(0, flowerHighlightRegion);
+            imageHighlightPage.steps.verifyHighlightRegionsInPreviewTab(1, branchesHighlightRegion);
+            imageHighlightPage.steps.verifyHighlightRegionsInPreviewTab(2, leafHighlightRegion);
+            imageHighlightPage.steps.verifyHighlightRegionsInPreviewTab(3, rootsHighlightRegion);
+        });
+
+        imageHighlightPage.tests.verifyGradingStudentViewRadioButtonAndScoringTypeInPreviewTab('Manually scored');
+    });
+
+    describe('Question Preview: Non Scored', () => {
+        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.highlightRegionInImage(rootsHighlightRegion);
+            imageHighlightPage.steps.selectMultipleSelectionToggle();
+            imageHighlightPage.steps.highlightARegionInSpecifyCorrectAnswerSection(0);
+            imageHighlightPage.steps.highlightARegionInSpecifyCorrectAnswerSection(1);
+            imageHighlightPage.steps.highlightARegionInSpecifyCorrectAnswerSection(2);
+            imageHighlightPage.steps.expandScoringTypeDropdown();
+            imageHighlightPage.steps.selectOptionFromScoringTypeDropdown('Non scored');
+            imageHighlightPage.steps.checkAllowStudentToCheckAnswerCheckbox();
+            imageHighlightPage.steps.switchToPreviewTab();
+        });
+
+        imageHighlightPage.tests.verifyGradingStudentViewRadioButtonAndScoringTypeInPreviewTab('Non scored');
+
+        it('When the user selects \'Grading\' view without attempting the question, correct/incorrect icons should not be displayed and the correct answer section should be displayed with correct answers', () => {
+            imageHighlightPage.steps.switchToGradingView();
+            imageHighlightPage.steps.verifyDefaultHighlightRegion(0);
+            imageHighlightPage.steps.verifyDefaultHighlightRegion(1);
+            imageHighlightPage.steps.verifyDefaultHighlightRegion(2);
+            imageHighlightPage.steps.verifyDefaultHighlightRegion(3);
+            //TODO: Remove comment after https://redmine.zeuslearning.com/issues/565569 is resolved
+            //imageHighlightPage.steps.verifyCorrectIncorrectAnswerLabel('incorrect');
+            imageHighlightPage.steps.verifyCorrectAnswerContainerContents(['Option 1', 'Option 2', 'Option 3'], [1, 2, 3]);
+            imageHighlightPage.steps.switchToStudentView();
+        });
+
+        it('When the user attempts the question incorrectly, then the user should be awarded 0 points and on switching to \'Grading\' view, red cross-marks should be displayed besides all incorrect responses, a status message should not be displayed and correct answer section with all correct answers along with numeration should be displayed', () => {
+            imageHighlightPage.steps.highlightARegionInPreviewTab(3);
+            imageHighlightPage.steps.switchToGradingView();
+            imageHighlightPage.steps.verifyDefaultHighlightRegion(0);
+            imageHighlightPage.steps.verifyDefaultHighlightRegion(1);
+            imageHighlightPage.steps.verifyDefaultHighlightRegion(2);
+            imageHighlightPage.steps.verifyIncorrectHighlightRegion(3);
+            imageHighlightPage.steps.verifyCorrectAnswerContainerContents(['Option 1', 'Option 2', 'Option 3'], [1, 2, 3]);
+            imageHighlightPage.steps.verifyCorrectIncorrectAnswerLabel('incorrect');
+            imageHighlightPage.steps.verifyQuestionPreviewStateWhenSwitchingBackToStudentView();
+            cy.log('When the user attempts the question incorrectly and clicks on \'Check answer\' red cross-marks should be displayed besides all incorrect responses, a status message should not be displayed and correct answer section should not be displayed')
+            imageHighlightPage.steps.checkAnswer();
+            imageHighlightPage.steps.verifyHiddenHighlightRegion(0);
+            imageHighlightPage.steps.verifyHiddenHighlightRegion(1);
+            imageHighlightPage.steps.verifyHiddenHighlightRegion(2);
+            imageHighlightPage.steps.verifyIncorrectHighlightRegion(3);
+            imageHighlightPage.steps.verifyCorrectAnswerSectionNotExists();
+        });
+
+        it('When the user attempts the question partially correct with some correct, some incomplete, some incorrect options, then the user should be awarded points alloted to the responses and on switching to \'Grading\' view, green check-mark should be displayed besides the correct answer responses, red cross-mark should be displayed besides incorrect answer response, a status message should not be displayed and correct answer section with all correct answers along with numeration should be displayed', () => {
+            imageHighlightPage.steps.resetQuestionPreview();
+            imageHighlightPage.steps.highlightARegionInPreviewTab(3);
+            imageHighlightPage.steps.highlightARegionInPreviewTab(0);
+            imageHighlightPage.steps.switchToGradingView();
+            imageHighlightPage.steps.verifyCorrectHighlightRegion(0);
+            imageHighlightPage.steps.verifyDefaultHighlightRegion(1);
+            imageHighlightPage.steps.verifyDefaultHighlightRegion(2);
+            imageHighlightPage.steps.verifyIncorrectHighlightRegion(3);
+            imageHighlightPage.steps.verifyCorrectAnswerContainerContents(['Option 1', 'Option 2', 'Option 3'], [1, 2, 3]);
+            imageHighlightPage.steps.verifyCorrectIncorrectAnswerLabel('incorrect');
+            imageHighlightPage.steps.verifyQuestionPreviewStateWhenSwitchingBackToStudentView();
+            cy.log('When the user attempts the question partially correct with some correct, some incomplete, some incorrect options and clicks on \'Check answer\' green check-mark should be displayed besides the correct answer responses, red cross-mark should be displayed besides incorrect answer response, a status message should not be displayed and correct answer section should not be displayed')
+            imageHighlightPage.steps.checkAnswer();
+            imageHighlightPage.steps.verifyCorrectHighlightRegion(0);
+            imageHighlightPage.steps.verifyHiddenHighlightRegion(1);
+            imageHighlightPage.steps.verifyHiddenHighlightRegion(2);
+            imageHighlightPage.steps.verifyIncorrectHighlightRegion(3);
+            imageHighlightPage.steps.verifyCorrectAnswerSectionNotExists();
+        });
+
+        it('When the user attempts the question partially correct with all the responses correctly attempted but one response incomplete, then the user should be awarded points of the correctly attempted responses and on switching to \'Grading\' view, green check-mark should be displayed besides the correct answer responses, red cross-mark should be displayed besides incorrect answer response, a status message should not be displayed and correct answer section with all correct answers along with numeration should be displayed', () => {
+            imageHighlightPage.steps.resetQuestionPreview();
+            imageHighlightPage.steps.highlightARegionInPreviewTab(0);
+            imageHighlightPage.steps.highlightARegionInPreviewTab(1);
+            imageHighlightPage.steps.switchToGradingView();
+            imageHighlightPage.steps.verifyCorrectHighlightRegion(0);
+            imageHighlightPage.steps.verifyCorrectHighlightRegion(1);
+            imageHighlightPage.steps.verifyDefaultHighlightRegion(2);
+            imageHighlightPage.steps.verifyDefaultHighlightRegion(3);
+            imageHighlightPage.steps.verifyCorrectAnswerContainerContents(['Option 1', 'Option 2', 'Option 3'], [1, 2, 3]);
+            imageHighlightPage.steps.verifyCorrectIncorrectAnswerLabel('incorrect');
+            imageHighlightPage.steps.verifyQuestionPreviewStateWhenSwitchingBackToStudentView();
+            cy.log('When the user attempts the question partially correct with all the responses correctly attempted but one response incomplete and clicks on \'Check answer\' green check-mark should be displayed besides the correct answer responses, red cross-mark should be displayed besides incorrect answer response, a status message should not be displayed and correct answer section should not be displayed')
+            imageHighlightPage.steps.checkAnswer();
+            imageHighlightPage.steps.verifyCorrectHighlightRegion(0);
+            imageHighlightPage.steps.verifyCorrectHighlightRegion(1);
+            imageHighlightPage.steps.verifyHiddenHighlightRegion(2);
+            imageHighlightPage.steps.verifyHiddenHighlightRegion(3);
+            imageHighlightPage.steps.verifyCorrectAnswerSectionNotExists();
+        });
+
+        it('When user attempts the question correctly, the user should be awarded full points and on switching to \'Grading\' view, then green check-marks should be displayed beside all the correct responses, green check-mark should be displayed besides the correct answer responses, a status message and correct answer section should not be displayed', () => {
+            imageHighlightPage.steps.resetQuestionPreview();
+            imageHighlightPage.steps.highlightARegionInPreviewTab(0);
+            imageHighlightPage.steps.highlightARegionInPreviewTab(1);
+            imageHighlightPage.steps.highlightARegionInPreviewTab(2);
+            imageHighlightPage.steps.switchToGradingView();
+            imageHighlightPage.steps.verifyCorrectHighlightRegion(0);
+            imageHighlightPage.steps.verifyCorrectHighlightRegion(1);
+            imageHighlightPage.steps.verifyCorrectHighlightRegion(2);
+            imageHighlightPage.steps.verifyDefaultHighlightRegion(3);
+            imageHighlightPage.steps.verifyCorrectAnswerSectionNotExists();
+            imageHighlightPage.steps.verifyCorrectIncorrectAnswerLabel('correct');
+            imageHighlightPage.steps.verifyQuestionPreviewStateWhenSwitchingBackToStudentView();
+            cy.log('When the user attempts the question with all the responses correctly attempted and clicks on \'Check answer\' green check-mark should be displayed besides the correct answer responses, a status message should not be displayed and correct answer section should not be displayed')
+            imageHighlightPage.steps.checkAnswer();
+            imageHighlightPage.steps.verifyCorrectHighlightRegion(0);
+            imageHighlightPage.steps.verifyCorrectHighlightRegion(1);
+            imageHighlightPage.steps.verifyCorrectHighlightRegion(2);
+            imageHighlightPage.steps.verifyHiddenHighlightRegion(3);
+            imageHighlightPage.steps.verifyCorrectAnswerSectionNotExists();
+        });
+    });
+});