itemengine-cypress-automation 1.0.198-drawingResponseEnumUpdate-1aa98cf.0 → 1.0.198

package/cypress/e2e/ILC/ImageHighlight/specifyCorrectAnswerSection.js

@@ -0,0 +1,92 @@
+import { imageHighlightPage } from "../../../pages";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import utilities from "../../../support/helpers/utilities";
+const css = Cypress.env('css');
+
+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 - Matching : Specify correct answer, Alternative correct answer', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Specify correct answer section - \'Correct\' accordion', () => {
+        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.tests.verifyAutoScoredSpecifyCorrectAnswerHeaderSectionContents('image highlight');
+
+        it('In the \'Correct\' accordion the highlight region should be displayed with numeration and they should not be highlighted by default in the \'Specify correct answer\' options section', () => {
+            utilities.verifyElementCount(imageHighlightPage.specifyCorrectAnswerSectionHighlight(), 3);
+            imageHighlightPage.steps.verifyHighlightRegionNumerationSpecifyCorrectAnswer();
+            imageHighlightPage.steps.verifyImageUploadedSpecifyCorrectAnswer();
+            imageHighlightPage.steps.verifyRegionIsNotHighlightedInSetCorrectAnswerSection(0);
+            imageHighlightPage.steps.verifyRegionIsNotHighlightedInSetCorrectAnswerSection(1);
+            imageHighlightPage.steps.verifyRegionIsNotHighlightedInSetCorrectAnswerSection(2);
+        });
+
+        imageHighlightPage.tests.verifySpecifyCorrectAnswerAccordionContentsAndFunctionality('Correct');
+    });
+
+    describe('Specify correct answer section - \'Alternative\' accordion', () => {
+        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.tests.verifyAutoScoredAddAlternativeAnswerButtonAndValidation();
+
+        it('When user has added points and set correct answers in the \'Correct\' accordion, then the user should be able to add alternative answer for the question using \'Add alternative answer\' button', () => {
+            imageHighlightPage.steps.highlightARegionInSpecifyCorrectAnswerSection(2);
+            imageHighlightPage.steps.allotPoints(20);
+            imageHighlightPage.steps.addAlternativeAnswerAccordion(1);
+        });
+
+        it('The image and highlight regions should be displayed in the \'Alternative\' accordion options section in unselected state', () => {
+            imageHighlightPage.steps.verifyImageUploadedSpecifyCorrectAnswer();
+            imageHighlightPage.steps.verifyRegionIsNotHighlightedInSetCorrectAnswerSection(0);
+            imageHighlightPage.steps.verifyRegionIsNotHighlightedInSetCorrectAnswerSection(1);
+            imageHighlightPage.steps.verifyRegionIsNotHighlightedInSetCorrectAnswerSection(2);
+        });
+
+        imageHighlightPage.tests.verifySpecifyCorrectAnswerAccordionContentsAndFunctionality('Alternative');
+
+        it('User should be able to add another alternative answer for the question using \'Add alternative answer\' button and the name for this new accordion should be \'Alternative 2\'', () => {
+            imageHighlightPage.steps.addAlternativeAnswerAccordion(2);
+        });
+
+        imageHighlightPage.tests.verifyWarningPopupAndAccordionNavigationWhenNoPointsAddedInAlternativeAccordion();
+
+        it('User should be able to remove alternative correct answer by clicking on the \'Delete\' icon button alongside alternative answer accordion and the name of the alternative answer accordions should get updated accordingly', () => {
+            cy.log('Set correct answer and points in alternative 2 accordion, then switch to alternative 1 accordion and click delete icon button');
+            imageHighlightPage.steps.highlightARegionInSpecifyCorrectAnswerSection(2);
+            imageHighlightPage.steps.allotPoints(5);
+            imageHighlightPage.steps.deleteAlternativeAnswerAccordion(1);
+            imageHighlightPage.steps.verifyAlternativeAnswerAccordionNotExists(2);
+            imageHighlightPage.steps.verifyAlternativeAnswerAccordionLabel(0);
+        });
+
+        it('When the user deletes an option assigned as correct in the correct accordion then the correct accordion should be in the expanded state', () => {
+            imageHighlightPage.steps.eraseAHighlightRegion(leafHighlightRegion);
+            imageHighlightPage.steps.verifyCorrectAnswerAccordionIsExpanded();
+        });
+    });
+});

package/cypress/e2e/ILC/ImageHighlight/studentViewSettings.js

@@ -0,0 +1,404 @@
+import { imageHighlightPage } from "../../../pages";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import utilities from "../../../support/helpers/utilities";
+const css = Cypress.env('css');
+
+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('Image highlight - Student view settings', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Enable outer border for question: Edit tab', () => {
+        abortEarlySetup();
+        before(() => {
+            imageHighlightPage.steps.navigateToCreateQuestion('image highlight');
+            cy.barsPreLoaderWait();
+        });
+
+        imageHighlightPage.tests.verifyEnableOuterBorderContents();
+    });
+
+    describe('Enable outer border for question: Preview tab', () => {
+        abortEarlySetup();
+        before(() => {
+            imageHighlightPage.steps.navigateToCreateQuestion('image highlight');
+            cy.barsPreLoaderWait();
+            imageHighlightPage.steps.uploadFile('highlightImage.jpg');
+            imageHighlightPage.steps.verifyImageUploadedInSpecifyPossibleOptionsSection();
+            imageHighlightPage.steps.verifyImageUploadedSpecifyCorrectAnswer();
+            imageHighlightPage.steps.switchToPreviewTab();
+        });
+
+        it('When the \'Enable outer border for question\' checkbox is in checked state, an outer border over the question preview should be visible', () => {
+            imageHighlightPage.steps.verifyOuterBorderForQuestion();
+        });
+
+        it('CSS of the outer border', { tags: 'css' }, () => {
+            utilities.verifyCSS(imageHighlightPage.imagePreviewTabWrapper(), {
+                'border': `1px solid ${css.color.draggableOptionsContainerBorder}`
+            });
+        });
+
+        it('When the user unchecks the \'Enable outer border for question\' checkbox, then the outer border over the question preview should not be displayed', () => {
+            imageHighlightPage.steps.switchToEditTab();
+            imageHighlightPage.steps.uncheckEnableOuterBorderCheckbox();
+            imageHighlightPage.steps.switchToPreviewTab()
+            imageHighlightPage.steps.verifyOuterBorderOfQuestionPreviewNotExists();
+        });
+    });
+
+    describe('Allow student to check answer: Edit tab', () => {
+        abortEarlySetup();
+        before(() => {
+            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.allotPoints(5);
+        });
+
+        imageHighlightPage.tests.verifyAllowStudentsToCheckAnswerLabelAndCheckboxCSS();
+
+        imageHighlightPage.tests.verifyMaximumAttemptsDropdownDisplayedWhenAllowStudentsToCheckAnswerIsChecked();
+
+        imageHighlightPage.tests.verifyMaxCheckAnswerAttemptsDropdown();
+
+        imageHighlightPage.tests.verifyAllowStudentsToCheckAnswerContentsCSSAndA11y();
+    });
+
+    describe('Allow student to check answer: Preview tab', () => {
+        abortEarlySetup();
+        before(() => {
+            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.highlightARegionInSpecifyCorrectAnswerSection(2);
+            imageHighlightPage.steps.allotPoints(20);
+        });
+
+        it('When the user has added options and specified correct answer and points then on checking the \'Allow student to check answer\' checkbox the Check answer button should be displayed in the preview tab', () => {
+            imageHighlightPage.steps.checkAllowStudentToCheckAnswerCheckbox();
+            imageHighlightPage.steps.switchToPreviewTab();
+            utilities.verifyInnerText(imageHighlightPage.checkAnswerButton(), 'Check answer');
+        });
+
+        it('When the user highlights a region and checks the answer then an icon should be displayed beside the selected option and the check answer button should be in enabled state', () => {
+            imageHighlightPage.steps.highlightARegionInPreviewTab(2);
+            imageHighlightPage.steps.checkAnswer();
+            imageHighlightPage.steps.verifyCorrectHighlightRegion(2);
+            imageHighlightPage.steps.verifyCheckAnswerButtonEnabled();
+        });
+
+        it('When the user selects an option from the Maximum check answer attempts dropdown then the user should be able to check answer only those many times in the preview tab', () => {
+            imageHighlightPage.steps.switchToEditTab();
+            imageHighlightPage.steps.expandMaxCheckAnswerAttemptsDropdown();
+            imageHighlightPage.steps.selectMaxCheckAnswerAttemptsDropdownListOption('1');
+            imageHighlightPage.steps.switchToPreviewTab();
+            imageHighlightPage.steps.highlightARegionInPreviewTab(0);
+            imageHighlightPage.steps.checkAnswer();
+            imageHighlightPage.steps.verifyCheckAnswerButtonDisabled();
+        });
+
+        imageHighlightPage.tests.verifyDisabledCheckAnswerButtonWithCSSAndA11y();
+
+        it('When the user updates the value of \'Maximum check answer attempts\' dropdown, it should get reflected on the Preview tab', () => {
+            imageHighlightPage.steps.switchToEditTab();
+            imageHighlightPage.steps.expandMaxCheckAnswerAttemptsDropdown();
+            imageHighlightPage.steps.selectMaxCheckAnswerAttemptsDropdownListOption('3');
+            imageHighlightPage.steps.switchToPreviewTab();
+            imageHighlightPage.steps.verifyCheckAnswerButtonEnabled();
+            imageHighlightPage.steps.highlightARegionInPreviewTab(1);
+            imageHighlightPage.steps.checkAnswer();
+            imageHighlightPage.steps.verifyCheckAnswerButtonEnabled();
+        });
+
+        it('When the user selects \'No limit\' option from the dropdown then user should be able to check answer multiple times', () => {
+            imageHighlightPage.steps.switchToEditTab();
+            imageHighlightPage.steps.expandMaxCheckAnswerAttemptsDropdown();
+            imageHighlightPage.steps.selectMaxCheckAnswerAttemptsDropdownListOption('0');
+            imageHighlightPage.steps.switchToPreviewTab();
+            imageHighlightPage.steps.verifyCheckAnswerButtonEnabled();
+            imageHighlightPage.steps.highlightARegionInPreviewTab(0);
+            imageHighlightPage.steps.checkAnswer();
+            imageHighlightPage.steps.verifyCheckAnswerButtonEnabled();
+            imageHighlightPage.steps.highlightARegionInPreviewTab(1);
+            imageHighlightPage.steps.checkAnswer();
+            imageHighlightPage.steps.verifyCheckAnswerButtonEnabled();
+        });
+    });
+
+    describe('Show the available options to students: Edit tab', () => {
+        abortEarlySetup();
+        before(() => {
+            imageHighlightPage.steps.navigateToCreateQuestion('image highlight');
+            cy.barsPreLoaderWait();
+        });
+
+        imageHighlightPage.tests.verifyShowAvailableOptionsToStudentsEditTab();
+    });
+
+    describe('Show the available options to students: Preview tab', () => {
+        abortEarlySetup();
+        before(() => {
+            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.highlightARegionInSpecifyCorrectAnswerSection(2);
+            imageHighlightPage.steps.allotPoints(20);
+            imageHighlightPage.steps.switchToPreviewTab();
+        });
+
+        it('When \'Show the available options to students\' checkbox is unchecked, then in preview tab the options should be displayed in standard state without any highlighted background', () => {
+            imageHighlightPage.steps.verifyHiddenHighlightRegion(0);
+            imageHighlightPage.steps.verifyHiddenHighlightRegion(1);
+            imageHighlightPage.steps.verifyHiddenHighlightRegion(2);
+        });
+
+        it('When \'Show the available options to students\' checkbox is checked, then in preview tab the available options should be displayed with a highlighted background', () => {
+            imageHighlightPage.steps.switchToEditTab();
+            imageHighlightPage.steps.checkShowAvailableOptionsToStudentsCheckbox();
+            imageHighlightPage.steps.switchToPreviewTab();
+            imageHighlightPage.steps.verifyDefaultHighlightRegion(0);
+            imageHighlightPage.steps.verifyDefaultHighlightRegion(1);
+            imageHighlightPage.steps.verifyDefaultHighlightRegion(2);
+        });
+
+        it('When user selects an option in preview tab, then that option should be selected', () => {
+            imageHighlightPage.steps.highlightARegionInPreviewTab(0);
+            imageHighlightPage.steps.highlightARegionInPreviewTab(1);
+            imageHighlightPage.steps.verifySelectedHighlightRegionInPreviewTab(0);
+            imageHighlightPage.steps.verifySelectedHighlightRegionInPreviewTab(1);
+        });
+
+        it('When user deselects an option in preview tab, then that option should be displayed as available option with a highlighted background', () => {
+            imageHighlightPage.steps.removeHighlightOfARegionInPreviewTab(0);
+            imageHighlightPage.steps.verifyDefaultHighlightRegion(0);
+        });
+
+        it('Accessibility of options with highlighted background', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(imageHighlightPage.previewTabQuestionWrapper());
+        });
+
+        it('When \'Show the available options to students\' checkbox is unchecked again, then in preview tab the available options should be not be displayed with a highlighted background', () => {
+            imageHighlightPage.steps.switchToEditTab();
+            imageHighlightPage.steps.uncheckShowAvailableOptionsToStudentsCheckbox();
+            imageHighlightPage.steps.switchToPreviewTab();
+            imageHighlightPage.steps.verifyHiddenHighlightRegion(0);
+            imageHighlightPage.steps.verifyHiddenHighlightRegion(1);
+            imageHighlightPage.steps.verifyHiddenHighlightRegion(2);
+        });
+    });
+
+    describe('Maximum number of possible selections and Show student the maximum number of possible selections: Edit tab', () => {
+        const listOptions = ['No limit', '1', '2', '3'];
+        abortEarlySetup();
+        before(() => {
+            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);
+        });
+
+        it('\'Maximum number of possible selections\' label and dropdown should be displayed. By default the \'No limit\' should be the selected option in the \'Maximum number of possible selections\' dropdown', () => {
+            utilities.verifyInnerText(imageHighlightPage.maxNumberOfPossibleSelectionsLabel(), 'Maximum number of possible selections');
+            utilities.verifyElementVisibilityState(imageHighlightPage.maxNumberOfPossibleSelectionsLabel(), 'visible');
+            utilities.verifyInnerText(imageHighlightPage.maxNumberOfPossibleSelectionsDropdown(), 'No limit');
+        });
+
+        it('When no options are selected in specify possible options section, then only No limit option should be displayed in the \'Maximum number of possible selections\' dropdown', () => {
+            imageHighlightPage.steps.expandMaxNumberOfPossibleSelectionsDropdown();
+            utilities.verifyElementVisibilityState(imageHighlightPage.dropdownList(), 'visible');
+            imageHighlightPage.steps.verifyMaxNumberOfPossibleSelectionsDropdownListOptions([listOptions[0]]);
+            imageHighlightPage.steps.selectOptionFromMaxNumberOfPossibleSelectionsDropdown('no limit');
+        });
+
+        it('When the user adds new options, the list options in the \'Maximum number of possible selections\' dropdown should also update accordingly', () => {
+            imageHighlightPage.steps.highlightRegionInImage(leafHighlightRegion);
+            imageHighlightPage.steps.expandMaxNumberOfPossibleSelectionsDropdown();
+            utilities.verifyElementVisibilityState(imageHighlightPage.dropdownList(), 'visible');
+            imageHighlightPage.steps.verifyMaxNumberOfPossibleSelectionsDropdownListOptions(listOptions);
+            imageHighlightPage.steps.selectOptionFromMaxNumberOfPossibleSelectionsDropdown('no limit');
+        });
+
+        it('CSS of \'Maximum number of possible selections\' dropdown in active state', { tags: 'css' }, () => {
+            utilities.verifyCSS(imageHighlightPage.dropdownListOption().eq(1), {
+                'color': css.color.liText,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular,
+                'background-color': css.color.liTextSelectedBg
+            });
+            utilities.verifyCSS(imageHighlightPage.dropdownListOption().eq(0), {
+                'background-color': css.color.transparent
+            });
+        });
+
+        it('Accessibility of \'Maximum number of possible selections\' dropdown in active state', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(imageHighlightPage.dropdownList())
+        });
+
+        it('When the user selects a finite number of options value from the \'Maximum number of possible selections\' dropdown, then the user should only be able to set correct answers in the specify correct answer section according to the selected option', () => {
+            imageHighlightPage.steps.expandMaxNumberOfPossibleSelectionsDropdown();
+            imageHighlightPage.steps.selectOptionFromMaxNumberOfPossibleSelectionsDropdown('2');
+            imageHighlightPage.steps.highlightARegionInSpecifyCorrectAnswerSection(0);
+            imageHighlightPage.steps.highlightARegionInSpecifyCorrectAnswerSection(1);
+        });
+
+        it('When user tries to select more number of options than the maximum number of options dropdown, then error message \'Error: maximum # options can be selected.\' should be displayed and user should not be able to select the option', () => {
+            imageHighlightPage.steps.clickOnARegionInSpecifyCorrectAnswerSection(2);
+            imageHighlightPage.steps.verifyRegionIsNotHighlightedInSetCorrectAnswerSection(2);
+            utilities.verifyInnerText(imageHighlightPage.maximumOptionsCanBeSelectedErrorMessage(), 'Error: maximum 2 options can be selected.');
+        });
+
+        it('\'Show student the maximum number of possible selections\' label and checkbox should be displayed. By default the checkbox should be unchecked', () => {
+            utilities.verifyInnerText(imageHighlightPage.showStudentMaximumNumberOfPossibleSelectionsLabel(), 'Show student the maximum number of possible selections');
+            utilities.verifyElementVisibilityState(imageHighlightPage.showStudentMaximumNumberOfPossibleSelectionsLabel(), 'visible');
+            utilities.verifyElementVisibilityState(imageHighlightPage.showStudentMaximumNumberOfPossibleSelectionsCheckbox(), 'exist');
+            imageHighlightPage.steps.verifyShowStudentTheMaxNumberOfSelectionsCheckboxIsUnchecked();
+        });
+
+        it('CSS of \'Show student the maximum number of possible selections\' checkbox and label - unchecked state', { tags: 'css' }, () => {
+            utilities.verifyCSS(imageHighlightPage.showStudentMaximumNumberOfPossibleSelectionsLabel(), {
+                'color': css.color.labelText,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(imageHighlightPage.showStudentMaximumNumberOfPossibleSelectionsCheckbox().parent().find('svg'), {
+                'fill': css.color.uncheckedCheckbox
+            });
+        });
+
+        it('When the user checks the \'Show student the maximum number of possible selections\' checkbox, help text should not be displayed in the specify correct answer section', () => {
+            imageHighlightPage.steps.checkShowStudentTheMaxNumberOfSelectionsCheckbox();
+            utilities.verifyElementVisibilityState(imageHighlightPage.maximumNumberOfSelectionsHelpText(), 'notExist');
+        });
+
+        it('CSS of \'Show student the maximum number of possible selections\' label and checkbox - checked state', { tags: 'css' }, () => {
+            utilities.verifyCSS(imageHighlightPage.showStudentMaximumNumberOfPossibleSelectionsCheckbox().parent().find('svg g g').eq(0), {
+                'fill': css.color.activeButtons
+            });
+        });
+
+        it('Accessibility of \'Show student the maximum number of possible selections\' checkbox - checked state', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(imageHighlightPage.showStudentMaximumNumberOfPossibleSelectionsCheckbox().parents('[data-ngie-testid="show-student-the-maximum-number-of-possible-selections-checkbox"]'));
+        });
+
+        it('When the user selects \'No limit\' from the \'Maximum number of possible selections\' dropdown, then the user should be able to set n number of highlights in the specify correct answer section', () => {
+            imageHighlightPage.steps.expandMaxNumberOfPossibleSelectionsDropdown();
+            imageHighlightPage.steps.selectOptionFromMaxNumberOfPossibleSelectionsDropdown('no limit');
+            imageHighlightPage.steps.highlightARegionInSpecifyCorrectAnswerSection(2);
+        });
+    });
+
+    describe('Maximum number of possible selections and Show student the maximum number of possible selections: Preview tab', () => {
+        abortEarlySetup();
+        before(() => {
+            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);
+        });
+
+        it('When the user selects a finite number of options value from the \'Maximum number of possible selections\' dropdown, then the user should only be able to select options in the preview tab according to the selected maximum limit', () => {
+            imageHighlightPage.steps.expandMaxNumberOfPossibleSelectionsDropdown();
+            imageHighlightPage.steps.selectOptionFromMaxNumberOfPossibleSelectionsDropdown('2');
+            imageHighlightPage.steps.switchToPreviewTab();
+            imageHighlightPage.steps.highlightARegionInPreviewTab(0);
+            imageHighlightPage.steps.highlightARegionInPreviewTab(1);
+        });
+
+        it('When user tries to select more number of options than the maximum limit, then error message \'Maximum n options can be selected.\' should be displayed and extra options should not be selected', () => {
+            imageHighlightPage.steps.clickOnARegionInPreviewTab(2);
+            imageHighlightPage.steps.verifyRegionIsNotHighlightedPreviewTab(2);
+            utilities.verifyInnerText(imageHighlightPage.maximumOptionsCanBeSelectedErrorMessagePreviewTab(), 'Maximum 2 options can be selected.');
+        });
+
+        it('CSS of \'Maximum n options can be selected.\' error message', { tags: 'css' }, () => {
+            utilities.verifyCSS(imageHighlightPage.maximumOptionsCanBeSelectedErrorMessagePreviewTab(), {
+                'color': css.color.warningMessage,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(imageHighlightPage.maximumOptionsCanBeSelectedErrorMessageWrapperPreviewTab().find('svg'), {
+                'color': css.color.warningMessage,
+            });
+            utilities.verifyCSS(imageHighlightPage.maximumOptionsCanBeSelectedErrorMessageWrapperPreviewTab(), {
+                'border': `1px solid ${css.color.warningContainerBorder}`
+            });
+            utilities.verifyCSS(imageHighlightPage.maximumOptionsCanBeSelectedErrorMessageWrapperPreviewTab(), {
+                'background-color': css.color.warningContainerBackground
+            });
+        });
+
+        it('Accessibility of \'Maximum n options can be selected.\' error message', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(imageHighlightPage.maximumOptionsCanBeSelectedErrorMessageWrapperPreviewTab());
+        });
+
+        it('When \'Show student the maximum number of possible selections\' checkbox is in unchecked state, no help text should be displayed in the preview tab', () => {
+            utilities.verifyElementVisibilityState(imageHighlightPage.maximumNumberOfSelectionsHelpText(), 'notExist');
+        });
+
+        it('When the user checks the \'Show student the maximum number of possible selections\' checkbox, a help text \'Maximum number of possible selections: n\' should be displayed in the preview tab', () => {
+            imageHighlightPage.steps.switchToEditTab();
+            imageHighlightPage.steps.checkShowStudentTheMaxNumberOfSelectionsCheckbox();
+            imageHighlightPage.steps.switchToPreviewTab();
+            utilities.verifyInnerText(imageHighlightPage.maximumNumberOfSelectionsHelpText(), 'Maximum number of possible selections: 2');
+        });
+
+        it('CSS of help text \'Maximum number of possible selections: n\'', { tags: 'css' }, () => {
+            utilities.verifyCSS(imageHighlightPage.maximumNumberOfSelectionsHelpText(), {
+                'color': css.color.text,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(imageHighlightPage.maximumNumberOfSelectionsHelpText().find('span'), {
+                'color': css.color.text,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.bold
+            });
+        });
+
+        it('Accessibility of help text \'Maximum number of possible selections: n\'', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(imageHighlightPage.maximumNumberOfSelectionsHelpText());
+        });
+
+        it('When the user selects \'No limit\' from the \'Maximum number of possible selections\' dropdown, then the user should be able to set n number of highlights in the preview tab', () => {
+            imageHighlightPage.steps.switchToEditTab();
+            imageHighlightPage.steps.expandMaxNumberOfPossibleSelectionsDropdown();
+            imageHighlightPage.steps.selectOptionFromMaxNumberOfPossibleSelectionsDropdown('no limit');
+            imageHighlightPage.steps.switchToPreviewTab();
+            imageHighlightPage.steps.highlightARegionInPreviewTab(0);
+            imageHighlightPage.steps.highlightARegionInPreviewTab(1);
+            imageHighlightPage.steps.highlightARegionInPreviewTab(2);
+        });
+    });
+});

package/cypress/e2e/ILC/ImageHighlight/supportedFileTypes.js

@@ -0,0 +1,42 @@
+import constants from "../../../fixtures/constants";
+import { imageHighlightPage } from "../../../pages";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import utilities from "../../../support/helpers/utilities";
+
+describe('Create Item page - Image highlight: Supported file types', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Supported file types functionality: device popup', () => {
+        abortEarlySetup();
+        before(() => {
+            imageHighlightPage.steps.navigateToCreateQuestion('image highlight');
+            cy.barsPreLoaderWait();
+        });
+
+        const supportedFormatFiles = {
+            jpg: 'highlightImage.jpg',
+            jpeg: 'sample.jpeg',
+            png: 'image.png',
+            gif: 'sample.gif',
+            svg: 'sample.svg'
+        };
+
+        Object.keys(supportedFormatFiles).forEach((fileType) => {
+            it(`User should be able to upload ${fileType} file in the upload section using link text \'device\' and it should be displayed in the \'Set correct answer\' section and \'Preview tab\'`, () => {
+                imageHighlightPage.steps.uploadFile(supportedFormatFiles[fileType]);
+                imageHighlightPage.steps.verifyImageUploadedInSpecifyPossibleOptionsSection();
+                imageHighlightPage.steps.verifyImageUploadedSpecifyCorrectAnswer();
+                imageHighlightPage.steps.verifyUploadedImageFormatInSetCorrectAnswerSection(fileType);
+                cy.log('Checking in preview tab')
+                imageHighlightPage.steps.switchToPreviewTab();
+                imageHighlightPage.steps.verifyUploadedImageFormatInPreviewTab(fileType);
+                imageHighlightPage.steps.switchToEditTab();
+                cy.log('Post step: Delete the image')
+                imageHighlightPage.steps.deleteImage();
+                imageHighlightPage.steps.clickOnDeleteButtonInDeleteImagePopup();
+            });
+        });
+    });
+});

package/cypress/e2e/ILC/ImageHighlight/toolSettings.js

@@ -0,0 +1,73 @@
+import { toolSettingsComponent } from "../../../pages/components";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import utilities from "../../../support/helpers/utilities";
+import { dialogBoxBase, imageHighlightPage, rulerPage } from "../../../pages";
+
+const css = Cypress.env('css');
+
+describe('Create Item page: Tool settings', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Tool settings: Contents', () => {
+        abortEarlySetup();
+        before(() => {
+            imageHighlightPage.steps.navigateToCreateQuestion('image highlight');
+        });
+
+        toolSettingsComponent.tests.verifyToolSettingsContent();
+    });
+
+    describe('Tool settings: Edit tool settings', () => {
+        abortEarlySetup();
+        before(() => {
+            imageHighlightPage.steps.navigateToCreateQuestion('image highlight');
+            toolSettingsComponent.steps.expandToolSettingsAccordion();
+        });
+
+        it('When user clicks on edit icon for ruler tool, then popup for ruler tool settings should be displayed', () => {
+            toolSettingsComponent.steps.clickOnToolEditIcon(0);
+            utilities.verifyElementVisibilityState(dialogBoxBase.dialogBox(), 'visible');
+        });
+
+        it('When user modifies the settings for the ruler tool and clicks the \'Ok\' button, then ruler tool should enter selected state.', () => {
+            rulerPage.steps.expandUnitOfMeasurementDropdown();
+            rulerPage.steps.selectOptionFromUnitOfMeasurementDropdown('Inch');
+            rulerPage.steps.selectOptionFromLengthOfRulerOptions('12 in');
+            rulerPage.steps.selectColorBlock(1);
+            rulerPage.steps.expandRotationDropdown();
+            rulerPage.steps.selectOptionFromRotationDropdown('Allow rotation and display angle');
+            rulerPage.steps.enterInputToOpacityInputField(60);
+            rulerPage.steps.checkAddShowHideButtonCheckbox();
+            toolSettingsComponent.steps.clickOnOkButton();
+            utilities.verifyElementVisibilityState(dialogBoxBase.dialogBox(), 'notExist');
+            toolSettingsComponent.steps.verifyToolSelectedState(0);
+        });
+
+        it('When user has made changes for ruler tool in edit tab then changes should be reflected in the ruler tool in the preview tab', () => {
+            cy.log('Switching to Preview Tab');
+            rulerPage.steps.switchToPreviewTab();
+            rulerPage.steps.verifyPreviewTabRulerVisibilityButtonLabel('Show');
+            rulerPage.steps.clickOnRulerVisibilityButton();
+            utilities.verifyElementVisibilityState(rulerPage.rulerPreviewTab(), 'visible');
+            rulerPage.steps.verifyLengthOfRulerInPreview('12in');
+            rulerPage.steps.verifyColorOfRulerInPreview(1);
+            rulerPage.steps.verifyRulerOpacityInPreview('0.6');
+            rulerPage.steps.verifyRotationButtonWithDegreeVisible();
+        });
+
+        it('CSS of the \'Hide ruler\' button', { tags: 'css' }, () => {
+            utilities.verifyCSS(rulerPage.rulerVisibilityButtonPreviewTab(), {
+                'border': `1px solid ${css.color.activeButtons}`,
+                'background-color': css.color.defaultBackground,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+        });
+
+        it('Accessibility of \'Hide ruler\' button', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(rulerPage.rulerVisibilityButtonPreviewTab().parents('[class*="ItemEnginestyles__MainWrapper"]'));
+        });
+    });
+});