itemengine-cypress-automation 1.0.203-31stMayFixes-16985aa.0 → 1.0.203

package/cypress/e2e/ILC/DragAndDropIntoCategoriesNew/pagination.js

@@ -0,0 +1,170 @@
+import { dragAndDropIntoCategoriesPage } from "../../../pages";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import utilities from "../../../support/helpers/utilities";
+const css = Cypress.env('css');
+
+describe('Create Item page - Drag and drop into categories: Pagination cases - Edit tab and preview tab', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Pagination cases - Specify correct answer section', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to Drag and drop into categories question type');
+            dragAndDropIntoCategoriesPage.steps.navigateToCreateQuestion('drag and drop into categories');
+            cy.barsPreLoaderWait();
+            dragAndDropIntoCategoriesPage.steps.setRowsAndColumnsForQuestion();
+            dragAndDropIntoCategoriesPage.steps.addInputToOptionsInputField(['Bat', 'Eagle']);
+        });
+
+        it('When there are less than 8 columns in the table, then the left and right arrow navigation button should not be displayed in the \'Specify correct answer\' table', () => {
+            utilities.verifyElementVisibilityState(dragAndDropIntoCategoriesPage.leftArrowNavigationButtonSpecifyCorrectAnswerSection(), 'notExist');
+            utilities.verifyElementVisibilityState(dragAndDropIntoCategoriesPage.rightArrowNavigationButtonSpecifyCorrectAnswerSection(), 'notExist');
+        });
+
+        it('When the user adds multiple columns in the table such that they exceed the viewport, then the left and right arrow navigation button should be displayed in the \'Specify correct answer\' table', () => {
+            dragAndDropIntoCategoriesPage.steps.addInputToColumnInputStepper(8);
+            utilities.verifyElementVisibilityState(dragAndDropIntoCategoriesPage.leftArrowNavigationButtonSpecifyCorrectAnswerSection(), 'visible');
+            utilities.verifyElementVisibilityState(dragAndDropIntoCategoriesPage.rightArrowNavigationButtonSpecifyCorrectAnswerSection(), 'visible');
+        });
+
+        it('By default the left arrow navigation button should be disabled and right arrow navigation should be enabled in \'Specify correct answer\' table', () => {
+            utilities.verifyElementDisabled(dragAndDropIntoCategoriesPage.leftArrowNavigationButtonSpecifyCorrectAnswerSection());
+            utilities.verifyElementNotDisabled(dragAndDropIntoCategoriesPage.rightArrowNavigationButtonSpecifyCorrectAnswerSection());
+        });
+
+        it('When user clicks on the right arrow navigation button, then the table should be scrolled by one column towards its right and the left and right arrow navigation button should now be enabled', () => {
+            cy.log('Pre-step: Setting number of columns to 15');
+            dragAndDropIntoCategoriesPage.steps.addInputToColumnInputStepper(15);
+            dragAndDropIntoCategoriesPage.steps.clickOnRightArrowNavigationButtonSpecifyCorrectAnswerSection();
+            dragAndDropIntoCategoriesPage.steps.verifyColumnIsVisibleInTableSpecifyCorrectAnswer(8);
+            utilities.verifyElementNotDisabled(dragAndDropIntoCategoriesPage.leftArrowNavigationButtonSpecifyCorrectAnswerSection());
+            utilities.verifyElementNotDisabled(dragAndDropIntoCategoriesPage.rightArrowNavigationButtonSpecifyCorrectAnswerSection());
+        });
+
+        it('When user has navigated to the rightmost column of the table, then the right arrow navigation button should be disabled and left arrow should be enabled', () => {
+            for (let index = 9; index < 16; index++) {
+                dragAndDropIntoCategoriesPage.steps.clickOnRightArrowNavigationButtonSpecifyCorrectAnswerSection();
+            }
+            utilities.verifyElementDisabled(dragAndDropIntoCategoriesPage.rightArrowNavigationButtonSpecifyCorrectAnswerSection());
+            utilities.verifyElementNotDisabled(dragAndDropIntoCategoriesPage.leftArrowNavigationButtonSpecifyCorrectAnswerSection());
+        });
+
+        it('When user clicks on the left arrow navigation button, then the table should be scrolled by one column towards its left and the right arrow navigation button should be enabled', () => {
+            dragAndDropIntoCategoriesPage.steps.clickOnLeftArrowNavigationButtonSpecifyCorrectAnswerSection();
+            dragAndDropIntoCategoriesPage.steps.verifyColumnIsVisibleInTableSpecifyCorrectAnswer(8);
+            utilities.verifyElementNotDisabled(dragAndDropIntoCategoriesPage.rightArrowNavigationButtonSpecifyCorrectAnswerSection());
+            utilities.verifyElementNotDisabled(dragAndDropIntoCategoriesPage.leftArrowNavigationButtonSpecifyCorrectAnswerSection());
+        });
+
+        it('CSS of \'Specify correct answer\' Columns and Rows input steppers section\'', { tags: 'css' }, () => {
+            utilities.verifyCSS(dragAndDropIntoCategoriesPage.leftArrowNavigationButtonSpecifyCorrectAnswerSection(), {
+                'color': css.color.nextPreviousButtonFill
+            });
+            utilities.verifyCSS(dragAndDropIntoCategoriesPage.rightArrowNavigationButtonSpecifyCorrectAnswerSection(), {
+                'color': css.color.nextPreviousButtonFill
+            });
+        });
+
+        it('Accessibility of \'Specify correct answer\' Columns and Rows input steppers section\'', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(dragAndDropIntoCategoriesPage.specifyCorrectAnswerSectionWrapper());
+        });
+
+        it('When user has navigated towards the left using the left arrow navigation button, then the right arrow navigation button should be enabled again', () => {
+            for (let index = 9; index < 16; index++) {
+                dragAndDropIntoCategoriesPage.steps.clickOnLeftArrowNavigationButtonSpecifyCorrectAnswerSection();
+            }
+            utilities.verifyElementDisabled(dragAndDropIntoCategoriesPage.leftArrowNavigationButtonSpecifyCorrectAnswerSection());
+        });
+
+        it('When the number of columns is reduced such that they do not exceed the viewport, then the then the left and right arrow navigation button should not be displayed in the \'Specify correct answer\' table', () => {
+            dragAndDropIntoCategoriesPage.steps.addInputToColumnInputStepper(7);
+            utilities.verifyElementVisibilityState(dragAndDropIntoCategoriesPage.leftArrowNavigationButtonSpecifyCorrectAnswerSection(), 'notExist');
+            utilities.verifyElementVisibilityState(dragAndDropIntoCategoriesPage.rightArrowNavigationButtonSpecifyCorrectAnswerSection(), 'notExist');
+        });
+    });
+
+    describe('Pagination cases - Preview tab', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to Drag and drop into categories question type');
+            dragAndDropIntoCategoriesPage.steps.navigateToCreateQuestion('drag and drop into categories');
+            cy.barsPreLoaderWait();
+            dragAndDropIntoCategoriesPage.steps.setRowsAndColumnsForQuestion();
+            dragAndDropIntoCategoriesPage.steps.addInputToOptionsInputField(['Bat', 'Eagle']);
+        });
+
+        it('When there are less than 8 columns in the table, then the left and right arrow navigation button should not be displayed in the \'Specify correct answer\' table', () => {
+            dragAndDropIntoCategoriesPage.steps.switchToPreviewTab();
+            utilities.verifyElementVisibilityState(dragAndDropIntoCategoriesPage.leftArrowNavigationButtonPreviewTab(), 'notExist');
+            utilities.verifyElementVisibilityState(dragAndDropIntoCategoriesPage.rightArrowNavigationButtonPreviewTab(), 'notExist');
+        });
+
+        it('When the user adds columns in the table such that they exceed the viewport, then the left and right arrow navigation button should be displayed in the \'Specify correct answer\' table', () => {
+            dragAndDropIntoCategoriesPage.steps.switchToEditTab();
+            dragAndDropIntoCategoriesPage.steps.addInputToColumnInputStepper(8);
+            dragAndDropIntoCategoriesPage.steps.switchToPreviewTab();
+            utilities.verifyElementVisibilityState(dragAndDropIntoCategoriesPage.leftArrowNavigationButtonPreviewTab(), 'visible');
+            utilities.verifyElementVisibilityState(dragAndDropIntoCategoriesPage.rightArrowNavigationButtonPreviewTab(), 'visible');
+        });
+
+        it('By default the left arrow navigation button should be disabled and right arrow navigation should be enabled in \'Specify correct answer\' table', () => {
+            utilities.verifyElementDisabled(dragAndDropIntoCategoriesPage.leftArrowNavigationButtonPreviewTab());
+            utilities.verifyElementNotDisabled(dragAndDropIntoCategoriesPage.rightArrowNavigationButtonPreviewTab());
+        });
+
+        it('When user clicks on the right arrow navigation button, then the table should be scrolled by one column towards its right and the left and right arrow navigation button should now be enabled', () => {
+            cy.log('Pre-step: Setting number of columns to 15');
+            dragAndDropIntoCategoriesPage.steps.switchToEditTab();
+            dragAndDropIntoCategoriesPage.steps.addInputToColumnInputStepper(15);
+            dragAndDropIntoCategoriesPage.steps.switchToPreviewTab();
+            dragAndDropIntoCategoriesPage.steps.clickOnRightArrowNavigationButtonPreviewTab();
+            dragAndDropIntoCategoriesPage.steps.verifyColumnIsVisibleInTablePreviewTab(8);
+            utilities.verifyElementNotDisabled(dragAndDropIntoCategoriesPage.leftArrowNavigationButtonPreviewTab());
+            utilities.verifyElementNotDisabled(dragAndDropIntoCategoriesPage.rightArrowNavigationButtonPreviewTab());
+        });
+
+        it('When user has navigated to the rightmost column of the table, then the right arrow navigation button should be disabled and left arrow should be enabled', () => {
+            for (let index = 9; index < 16; index++) {
+                dragAndDropIntoCategoriesPage.steps.clickOnRightArrowNavigationButtonPreviewTab();
+            }
+            utilities.verifyElementDisabled(dragAndDropIntoCategoriesPage.rightArrowNavigationButtonPreviewTab());
+            utilities.verifyElementNotDisabled(dragAndDropIntoCategoriesPage.leftArrowNavigationButtonPreviewTab());
+        });
+
+        it('When user clicks on the left arrow navigation button, then the table should be scrolled by one column towards its left and the right arrow navigation button should be enabled', () => {
+            dragAndDropIntoCategoriesPage.steps.clickOnLeftArrowNavigationButtonPreviewTab();
+            dragAndDropIntoCategoriesPage.steps.verifyColumnIsVisibleInTablePreviewTab(8);
+            utilities.verifyElementNotDisabled(dragAndDropIntoCategoriesPage.rightArrowNavigationButtonPreviewTab());
+        });
+
+        it('When user has navigated towards the left using the left arrow navigation button, then the right arrow navigation button should be enabled again', () => {
+            for (let index = 9; index < 16; index++) {
+                dragAndDropIntoCategoriesPage.steps.clickOnLeftArrowNavigationButtonPreviewTab();
+            }
+            utilities.verifyElementDisabled(dragAndDropIntoCategoriesPage.leftArrowNavigationButtonPreviewTab());
+        });
+
+        it('When the number of columns is reduced such that they do not exceed the viewport, then the then the left and right arrow navigation button should not be displayed in the \'Specify correct answer\' table', () => {
+            dragAndDropIntoCategoriesPage.steps.switchToEditTab();
+            dragAndDropIntoCategoriesPage.steps.addInputToColumnInputStepper(7);
+            dragAndDropIntoCategoriesPage.steps.switchToPreviewTab();
+            utilities.verifyElementVisibilityState(dragAndDropIntoCategoriesPage.leftArrowNavigationButtonPreviewTab(), 'notExist');
+            utilities.verifyElementVisibilityState(dragAndDropIntoCategoriesPage.rightArrowNavigationButtonPreviewTab(), 'notExist');
+        });
+
+        it('CSS of \'Specify correct answer\' Columns and Rows input steppers section\'', { tags: 'css' }, () => {
+            utilities.verifyCSS(dragAndDropIntoCategoriesPage.leftArrowNavigationButtonPreviewTab(), {
+                'color': css.color.nextPreviousButtonFill
+            });
+            utilities.verifyCSS(dragAndDropIntoCategoriesPage.rightArrowNavigationButtonPreviewTab(), {
+                'color': css.color.nextPreviousButtonFill
+            });
+        });
+
+        it('Accessibility of \'Specify correct answer\' Columns and Rows input steppers section\'', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(dragAndDropIntoCategoriesPage.previewTabQuestionWrapper());
+        });
+    });
+});

package/cypress/e2e/ILC/FillInTheGapsDragAndDropNew/additionalSettingsForDropzones.js

@@ -0,0 +1,170 @@
+import { fillInTheGapsDragAndDropPage } from "../../../pages";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import utilities from "../../../support/helpers/utilities";
+const enumerationOptions = {
+    'Numerical': ['1', '2'],
+    'Alphabet (uppercase)': ['A', 'B'],
+    'Alphabet (lowercase)': ['a', 'b'],
+    'Roman numeral (uppercase)': ['I', 'II'],
+    'Roman numeral (lowercase)': ['i', 'ii'],
+};
+const css = Cypress.env('css');
+
+describe('Fill In the gaps with drag and drop - Additional settings : Grading view, ARIA label for dropzones', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Additional Settings: Grading view - Contents in edit tab', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsDragAndDropPage.steps.navigateToCreateQuestion('fill in the gaps with drag and drop');
+            cy.barsPreLoaderWait();
+            fillInTheGapsDragAndDropPage.steps.expandAdditionalSettings();
+        });
+
+        fillInTheGapsDragAndDropPage.tests.verifyGradingViewEnumerationSectionContents('Dropzone');
+
+        it('When the user selects "Without enumeration" radio button, the identifiers section should disappear', () => {
+            fillInTheGapsDragAndDropPage.steps.selectEnumerationType('without enumeration');
+            utilities.verifyElementVisibilityState(fillInTheGapsDragAndDropPage.identifiersLabel(), 'notExist');
+            utilities.verifyElementVisibilityState(fillInTheGapsDragAndDropPage.numericalToggleButton(), 'notExist');
+        });
+
+        it('When the user selects "With enumeration" radio button again, the identifiers section should appear again', () => {
+            fillInTheGapsDragAndDropPage.steps.selectEnumerationType('with enumeration');
+            utilities.verifyElementVisibilityState(fillInTheGapsDragAndDropPage.identifiersLabel(), 'visible');
+            utilities.verifyElementVisibilityState(fillInTheGapsDragAndDropPage.numericalToggleButton(), 'visible');
+        })
+    });
+
+    describe('Additional settings: Grading view - functionality in preview tab', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsDragAndDropPage.steps.navigateToCreateQuestion('fill in the gaps with drag and drop');
+            cy.barsPreLoaderWait();
+            fillInTheGapsDragAndDropPage.steps.addInputToOptionsInputField(['Petals', 'Leaves']);
+            fillInTheGapsDragAndDropPage.steps.clickAndDropOptionInDropzoneSpecifyCorrectAnswerSection({ 'Petals': 0, 'Leaves': 1});
+            fillInTheGapsDragAndDropPage.steps.expandAdditionalSettings();
+        });
+
+        Object.keys(enumerationOptions).forEach(option => {
+            it(`When "${option}" toggle button is selected in the dropzone identifiers section, then on switching to the preview tab dropzone numeration should not be displayed`, () => {
+                fillInTheGapsDragAndDropPage.steps.selectIdentifierToggleButton(option);
+                fillInTheGapsDragAndDropPage.steps.switchToPreviewTab();
+                fillInTheGapsDragAndDropPage.steps.verifyDropzoneNumerationNotExists();
+            });
+
+            it(`When the user switches to the "Grading view", then the "${option}" numeration should be displayed in the dropzones as well as correct answer options in the correct answer section`, () => {
+                fillInTheGapsDragAndDropPage.steps.switchToGradingView();
+                fillInTheGapsDragAndDropPage.steps.verifyDropzoneEnumeration(enumerationOptions[option]);
+                fillInTheGapsDragAndDropPage.steps.verifyCorrectAnswerResponsesEnumeration(enumerationOptions[option]);
+                cy.log('Post step: Switch to Edit tab')
+                fillInTheGapsDragAndDropPage.steps.switchToEditTab();
+            });
+        });
+
+        it('When the user selects "without enumeration" radio button, then in the "Grading view", numeration should not be displayed for dropzones and in the correct answer section, the entire question preview should be displayed with correct answers', () => {
+            fillInTheGapsDragAndDropPage.steps.selectEnumerationType('without enumeration');
+            fillInTheGapsDragAndDropPage.steps.switchToPreviewTab();
+            fillInTheGapsDragAndDropPage.steps.switchToGradingView();
+            utilities.verifyInnerText(fillInTheGapsDragAndDropPage.correctAnswerSectionWithoutEnumerationWrapper(), 'Lorem ipsum dolor sit amet, \nPetals\n onsectetur adipiscing elit. Ut pellentesque tincidunt ornare. Integer porttitor est quis urna porttitor,eget \nLeaves\n tempus tellus dapibus.');
+            fillInTheGapsDragAndDropPage.steps.verifyCorrectAnswerResponsesWithoutEnumeration(['Petals', 'Leaves']);
+            fillInTheGapsDragAndDropPage.steps.verifyDropzoneNumerationNotExists();
+            utilities.verifyElementVisibilityState(fillInTheGapsDragAndDropPage.correctAnswersNumeration(), 'notExist');
+        });
+
+        it('CSS of correct answer section', { tags: 'css' }, () => {
+            utilities.verifyCSS(fillInTheGapsDragAndDropPage.correctAnswerSectionWithoutEnumerationWrapper(), {
+                'color': css.color.text,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+            fillInTheGapsDragAndDropPage.correctAnswerSectionWithoutEnumerationWrapper()
+                .within(() => {
+                    utilities.verifyCSS(fillInTheGapsDragAndDropPage.correctAnswerResponseWrapperWithoutEnumeration(), {
+                        'color': css.color.text,
+                        'font-size': css.fontSize.default,
+                        'font-weight': css.fontWeight.regular
+                    });
+                    utilities.verifyCSS(fillInTheGapsDragAndDropPage.correctAnswerResponseWrapperWithoutEnumeration(), {
+                        'border': `1px solid ${css.color.correctAnswer}`
+                    });
+                })
+        });
+
+        it('Accessibility of correct answer section', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(fillInTheGapsDragAndDropPage.correctAnswerSectionWithoutEnumerationWrapper().parents('[class*="question-preview-wrapper"]'));
+        });
+    });
+
+    describe('Additional settings: ARIA label for dropzones - Contents in edit tab', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsDragAndDropPage.steps.navigateToCreateQuestion('fill in the gaps with drag and drop');
+            cy.barsPreLoaderWait();
+            fillInTheGapsDragAndDropPage.steps.expandAdditionalSettings();
+        });
+
+        fillInTheGapsDragAndDropPage.tests.verifyAriaLabelSectionContents('dropzones');
+
+        it('When the users adds a new dropzone, the count of the aria label text input fields should update accordingly', () => {
+            fillInTheGapsDragAndDropPage.steps.addResponseArea();
+            utilities.verifyElementCount(fillInTheGapsDragAndDropPage.ariaLabelInputField(), 3);
+            fillInTheGapsDragAndDropPage.steps.verifyAriaLabelTextInputFields(2);
+        });
+
+        it('When the user deletes any dropzone, the count of the aria label texts input fields should update accordingly', () => {
+            fillInTheGapsDragAndDropPage.steps.deleteAResponseArea(1);
+            utilities.verifyElementCount(fillInTheGapsDragAndDropPage.ariaLabelInputField(), 2);
+            fillInTheGapsDragAndDropPage.steps.verifyAriaLabelTextInputFields(0);
+            fillInTheGapsDragAndDropPage.steps.verifyAriaLabelTextInputFields(1);
+        });
+
+        it('When the user has not set \'ARIA label\' input field, then default aria labels should be present for the dropzones of the specify correct answer section', () => {
+            fillInTheGapsDragAndDropPage.steps.verifyDropzoneAriaLabelSpecifyCorrectAnswerSection(0, 'Response Area');
+            fillInTheGapsDragAndDropPage.steps.verifyDropzoneAriaLabelSpecifyCorrectAnswerSection(1, 'Response Area');
+        });
+
+        it('When the user sets aria label, then in the dropzones of the specify correct answer section, the aria labels should also update', () => {
+            fillInTheGapsDragAndDropPage.steps.enterTextInAriaLabelInputField(0, 'Add answer for response 1');
+            fillInTheGapsDragAndDropPage.steps.verifyDropzoneAriaLabelSpecifyCorrectAnswerSection(0, 'Add answer for response 1');
+            fillInTheGapsDragAndDropPage.steps.verifyDropzoneAriaLabelSpecifyCorrectAnswerSection(1, 'Response Area');
+        });
+    });
+
+    describe('Additional settings: ARIA label for dropzones - functionality in preview tab', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsDragAndDropPage.steps.navigateToCreateQuestion('fill in the gaps with drag and drop');
+            cy.barsPreLoaderWait();
+            fillInTheGapsDragAndDropPage.steps.expandAdditionalSettings();
+            fillInTheGapsDragAndDropPage.steps.switchToPreviewTab();
+        });
+
+        it('When the user has not set \'ARIA label\' input field, then default aria labels should be present for the dropzones in the preview tab', () => {
+            fillInTheGapsDragAndDropPage.steps.verifyDropzoneAriaLabelPreviewTab(0, 'Response Area');
+            fillInTheGapsDragAndDropPage.steps.verifyDropzoneAriaLabelPreviewTab(1, 'Response Area');
+        });
+
+        it('When the user has set \'ARIA label\', then it should be present for the dropzones in the preview tab', () => {
+            fillInTheGapsDragAndDropPage.steps.switchToEditTab();
+            fillInTheGapsDragAndDropPage.steps.enterTextInAriaLabelInputField(0, 'Correct response 1');
+            fillInTheGapsDragAndDropPage.steps.switchToPreviewTab();
+            fillInTheGapsDragAndDropPage.steps.verifyDropzoneAriaLabelPreviewTab(0, 'Correct response 1');
+            fillInTheGapsDragAndDropPage.steps.verifyDropzoneAriaLabelPreviewTab(1, 'Response Area');
+        });
+
+        it('Accessibility of input field in preview tab when custom \'ARIA label\' is set', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(fillInTheGapsDragAndDropPage.dropzonePreviewTab().parents('[class*="question-preview-wrapper"]'));
+        });
+
+        it('When the user clears the set value in the \'ARIA label\' input field, then the default aria labels should be present for the dropzones in the preview tab', () => {
+            fillInTheGapsDragAndDropPage.steps.switchToEditTab();
+            fillInTheGapsDragAndDropPage.steps.clearTextInAriaLabelInputField(0);
+            fillInTheGapsDragAndDropPage.steps.switchToPreviewTab();
+            fillInTheGapsDragAndDropPage.steps.verifyDropzoneAriaLabelPreviewTab(0, 'Response Area');
+            fillInTheGapsDragAndDropPage.steps.verifyDropzoneAriaLabelPreviewTab(1, 'Response Area');
+        });
+    });
+});

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

@@ -0,0 +1,250 @@
+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]];
+
+describe('Create Item page - Image highlight: Alternative answer with single selection', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Question Preview: AutoScored - Single selection: 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.uploadFile('highlightImage.jpg');
+            imageHighlightPage.steps.verifyImageUploadedInSpecifyPossibleOptionsSection();
+            imageHighlightPage.steps.verifyImageUploadedSpecifyCorrectAnswer();
+            imageHighlightPage.steps.highlightRegionInImage(flowerHighlightRegion);
+            imageHighlightPage.steps.highlightRegionInImage(branchesHighlightRegion);
+            imageHighlightPage.steps.highlightRegionInImage(leafHighlightRegion);
+            imageHighlightPage.steps.selectSingleSelectionToggle();
+            imageHighlightPage.steps.highlightARegionInSpecifyCorrectAnswerSection(0);
+            imageHighlightPage.steps.allotPoints(20);
+            imageHighlightPage.steps.clickOnAddAlternativeAnswerButton();
+            imageHighlightPage.steps.highlightARegionInSpecifyCorrectAnswerSection(1);
+            imageHighlightPage.steps.allotPoints(12);
+            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', () => {
+            imageHighlightPage.steps.verifyPreviewScore(0, 20);
+            imageHighlightPage.steps.switchToGradingView();
+            imageHighlightPage.steps.verifyHighlightRegionNumerationPreviewTab();
+            imageHighlightPage.steps.verifyCorrectIncorrectAnswerLabel('incorrect');
+            imageHighlightPage.steps.verifyDefaultHighlightRegion(0);
+            imageHighlightPage.steps.verifyDefaultHighlightRegion(1);
+            imageHighlightPage.steps.verifyCorrectAnswerContainerContents(['Option 1'], [1]);
+        });
+
+        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.regular
+            });
+            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.regular
+            });
+        });
+
+        it('Accessibility of incorrect answer state', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(imageHighlightPage.previewTabQuestionWrapper());
+        });
+
+        it('When user attempts the response from the correct accordion, full points should be alloted 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.verifyPreviewScore(20, 20);
+            imageHighlightPage.steps.switchToGradingView();
+            imageHighlightPage.steps.verifyCorrectHighlightRegion(0);
+            imageHighlightPage.steps.verifyDefaultHighlightRegion(1);
+            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.regular
+            });
+            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 from the alternative accordion  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(1);
+            imageHighlightPage.steps.verifyPreviewScore(12, 20);
+            imageHighlightPage.steps.switchToGradingView();
+            imageHighlightPage.steps.verifyCorrectHighlightRegion(1);
+            imageHighlightPage.steps.verifyDefaultHighlightRegion(0);
+            imageHighlightPage.steps.verifyCorrectIncorrectAnswerLabel('correct');
+            imageHighlightPage.steps.verifyCorrectAnswerSectionNotExists();
+        });
+
+        it('When user attempts the question with incorrect highlight region then no points should be given and on switching to \'Grading\' view, incorrect icon should be displayed beside the wrong response, a status message with text \'Your answer is incorrect\' should be displayed and correct answer section should be displayed', () =>{
+            imageHighlightPage.steps.switchToPreviewTab();
+            imageHighlightPage.steps.resetQuestionPreview();
+            imageHighlightPage.steps.highlightARegionInPreviewTab(2);
+            imageHighlightPage.steps.verifyPreviewScore(0, 20);
+            imageHighlightPage.steps.switchToGradingView();
+            imageHighlightPage.steps.verifyIncorrectHighlightRegion(2);
+            imageHighlightPage.steps.verifyCorrectIncorrectAnswerLabel('incorrect');
+            imageHighlightPage.steps.verifyCorrectAnswerContainerContents(['Option 1'], [1]);
+        });
+    });
+
+    describe('Question Preview: AutoScored - Single selection: When correct answer points are less than alternate answer points', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to highlight image question type');
+            imageHighlightPage.steps.navigateToCreateQuestion('image highlight');
+            cy.barsPreLoaderWait();
+            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.selectSingleSelectionToggle();
+            imageHighlightPage.steps.highlightARegionInSpecifyCorrectAnswerSection(0);
+            imageHighlightPage.steps.allotPoints(10);
+            imageHighlightPage.steps.clickOnAddAlternativeAnswerButton();
+            imageHighlightPage.steps.highlightARegionInSpecifyCorrectAnswerSection(1);
+            imageHighlightPage.steps.allotPoints(20);
+            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', () => {
+            imageHighlightPage.steps.verifyPreviewScore(0, 20);
+            imageHighlightPage.steps.switchToGradingView();
+            imageHighlightPage.steps.verifyHighlightRegionNumerationPreviewTab();
+            imageHighlightPage.steps.verifyCorrectIncorrectAnswerLabel('incorrect');
+            imageHighlightPage.steps.verifyDefaultHighlightRegion(0);
+            imageHighlightPage.steps.verifyDefaultHighlightRegion(1);
+            imageHighlightPage.steps.verifyCorrectAnswerContainerContents(['Option 2'], [1]);
+        });
+
+        it('When the user highlights a correct region with points less than alternative answer, then the user should be awarded with points from correct accordian 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.verifyPreviewScore(10, 20);
+            imageHighlightPage.steps.switchToGradingView();
+            imageHighlightPage.steps.verifyCorrectHighlightRegion(0);
+            imageHighlightPage.steps.verifyDefaultHighlightRegion(1);
+            imageHighlightPage.steps.verifyCorrectIncorrectAnswerLabel('correct');
+            imageHighlightPage.steps.verifyCorrectAnswerSectionNotExists();
+        });
+
+        it('When the user attempts the question with responses from the alternative accordion, then the user should be awarded with points from alternative accordion 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(1);
+            imageHighlightPage.steps.verifyPreviewScore(20, 20);
+            imageHighlightPage.steps.switchToGradingView();
+            imageHighlightPage.steps.verifyCorrectHighlightRegion(1);
+            imageHighlightPage.steps.verifyDefaultHighlightRegion(0);
+            imageHighlightPage.steps.verifyCorrectIncorrectAnswerLabel('correct');
+            imageHighlightPage.steps.verifyCorrectAnswerSectionNotExists();
+        });
+
+        it('When user attempts the question with incorrect highlight region then no points should be given and on switching to \'Grading\' view, incorrect icon should be displayed beside the wrong response, a status message with text \'Your answer is incorrect\' should be displayed and correct answer section should be displayed', () =>{
+            imageHighlightPage.steps.switchToPreviewTab();
+            imageHighlightPage.steps.resetQuestionPreview();
+            imageHighlightPage.steps.highlightARegionInPreviewTab(2);
+            imageHighlightPage.steps.verifyPreviewScore(0, 20);
+            imageHighlightPage.steps.switchToGradingView();
+            imageHighlightPage.steps.verifyIncorrectHighlightRegion(2);
+            imageHighlightPage.steps.verifyCorrectIncorrectAnswerLabel('incorrect');
+            imageHighlightPage.steps.verifyCorrectAnswerContainerContents(['Option 2'], [1]);
+        });
+    });
+
+    describe('Question Preview: AutoScored - Single selection: When correct answer points are equal to alternate answer points', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to highlight image question type');
+            imageHighlightPage.steps.navigateToCreateQuestion('image highlight');
+            cy.barsPreLoaderWait();
+            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.selectSingleSelectionToggle();
+            imageHighlightPage.steps.highlightARegionInSpecifyCorrectAnswerSection(0);
+            imageHighlightPage.steps.allotPoints(10);
+            imageHighlightPage.steps.clickOnAddAlternativeAnswerButton();
+            imageHighlightPage.steps.highlightARegionInSpecifyCorrectAnswerSection(1);
+            imageHighlightPage.steps.allotPoints(10);
+            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', () => {
+            imageHighlightPage.steps.verifyPreviewScore(0, 10);
+            imageHighlightPage.steps.switchToGradingView();
+            imageHighlightPage.steps.verifyHighlightRegionNumerationPreviewTab();
+            imageHighlightPage.steps.verifyCorrectIncorrectAnswerLabel('incorrect');
+            imageHighlightPage.steps.verifyDefaultHighlightRegion(0);
+            imageHighlightPage.steps.verifyDefaultHighlightRegion(1);
+            imageHighlightPage.steps.verifyCorrectAnswerContainerContents(['Option 1'], [1]);
+        });
+
+        it('When the user highlights a correct region with points equal to alternative answer, then the user should be awarded with points from correct accordian 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.verifyPreviewScore(10, 10);
+            imageHighlightPage.steps.switchToGradingView();
+            imageHighlightPage.steps.verifyCorrectHighlightRegion(0);
+            imageHighlightPage.steps.verifyDefaultHighlightRegion(1);
+            imageHighlightPage.steps.verifyCorrectIncorrectAnswerLabel('correct');
+            imageHighlightPage.steps.verifyCorrectAnswerSectionNotExists();
+        });
+
+        it('When user attempts the response from the alternative accordion, then the user should be awarded with points specified for alternative accordion 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(1);
+            imageHighlightPage.steps.verifyPreviewScore(10, 10);
+            imageHighlightPage.steps.switchToGradingView();
+            imageHighlightPage.steps.verifyCorrectHighlightRegion(1);
+            imageHighlightPage.steps.verifyDefaultHighlightRegion(0);
+            imageHighlightPage.steps.verifyCorrectIncorrectAnswerLabel('correct');
+            imageHighlightPage.steps.verifyCorrectAnswerSectionNotExists();
+        });
+
+        it('When user attempts the question with incorrect highlight region then no points should be given and on switching to \'Grading\' view, incorrect icon should be displayed beside the wrong response, a status message with text \'Your answer is incorrect\' should be displayed and correct answer section should be displayed', () =>{
+            imageHighlightPage.steps.switchToPreviewTab();
+            imageHighlightPage.steps.resetQuestionPreview();
+            imageHighlightPage.steps.highlightARegionInPreviewTab(2);
+            imageHighlightPage.steps.verifyPreviewScore(0, 10);
+            imageHighlightPage.steps.switchToGradingView();
+            imageHighlightPage.steps.verifyIncorrectHighlightRegion(2);
+            imageHighlightPage.steps.verifyCorrectIncorrectAnswerLabel('incorrect');
+            imageHighlightPage.steps.verifyCorrectAnswerContainerContents(['Option 1'], [1]);
+        });
+    });
+});