itemengine-cypress-automation 1.0.26 → 1.0.27

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

@@ -22,17 +22,6 @@ describe('Create Item page - Highlight image: Additional settings', () => {
         cy.loginAs('admin');
     });
 
-    describe('Additional Settings accordion', () => {
-        abortEarlySetup();
-        before(() => {
-            cy.log('Navigating to Highlight image question type');
-            highlightImagePage.steps.navigateToCreateQuestion('highlight image');
-            cy.barsPreLoaderWait();
-        });
-
-        highlightImagePage.tests.verifyAdditonalSettingsAccordionProperties();
-    });
-
     describe('Additional settings: Student response area and layout', () => {
         abortEarlySetup();
         before(() => {
@@ -58,7 +47,7 @@ describe('Create Item page - Highlight image: Additional settings', () => {
 
         //Note: a11y covered in verifyAdditonalSettingsAccordionProperties
     });
-
+    
     describe('Additional settings: Answer numeration (only while grading) contents', () => {
         abortEarlySetup();
         before(() => {
@@ -148,211 +137,6 @@ describe('Create Item page - Highlight image: Additional settings', () => {
         });
     });
 
-    describe('Additional settings: Font size contents', () => {
-        abortEarlySetup();
-        before(() => {
-            cy.log('Navigating to Highlight question type');
-            highlightImagePage.steps.navigateToCreateQuestion('highlight image');
-            cy.barsPreLoaderWait();
-            highlightImagePage.steps.expandAdditonalSettings();
-        });
-
-        highlightImagePage.tests.verifyFontSizeSectionContents();
-    });
-
-    describe('Additional settings: Font size functionality set correct answer section', () => {
-        abortEarlySetup();
-        before(() => {
-            cy.log('Navigating to Highlight question type');
-            highlightImagePage.steps.navigateToCreateQuestion('highlight image');
-            cy.barsPreLoaderWait();
-            uploadImageSectionComponent.steps.uploadFile('highlightImage.jpg');
-            uploadImageSectionComponent.steps.verifyUploadedImageInImagePopup();
-            uploadImageSectionComponent.steps.clickOnImagePopupOkButton();
-            utilities.verifyElementVisibilityState(uploadImageSectionComponent.uploadImagePopup(), 'notExist');
-            highlightImagePage.steps.verifyImageUploadedInHighlightRegion();
-            highlightImagePage.steps.verifyImageUploadedInSetCorrectAnswerSection();
-            highlightImagePage.steps.highlightRegionInImage(flowerHighlightRegion);
-            highlightImagePage.steps.highlightRegionInImage(branchesHighlightRegion);
-            highlightImagePage.steps.expandAdditonalSettings();
-        });
-
-        fontSizeDropdownOptions.forEach((option, fontsIndex) => {
-            it(`When the user selects \'${option}\' option from the Font Size dropdown, then font size of the set correct answer section should not change to ${option}`, () => {
-                highlightImagePage.steps.selectFontSizeOptionFromFontSizeDropdown(fontsIndex);
-                utilities.verifyInnerText(highlightImagePage.fontSizeDropdown(), `${option}`);
-                utilities.verifyCSS(highlightImagePage.setCorrectAnswerSectionImage(), {
-                    'font-size': fontSizes[2]
-                });
-                utilities.verifyCSS(highlightImagePage.highlightNumeration(), {
-                    'font-size': fontSizes[0]
-                });
-            });
-        });
-    });
-
-    describe('Additional settings: Font size functionality preview tab', () => {
-        abortEarlySetup();
-        before(() => {
-            cy.log('Navigating to Highlight question type');
-            highlightImagePage.steps.navigateToCreateQuestion('highlight image');
-            cy.barsPreLoaderWait();
-            highlightImagePage.steps.addQuestionInstructions();
-            uploadImageSectionComponent.steps.uploadFile('highlightImage.jpg');
-            uploadImageSectionComponent.steps.verifyUploadedImageInImagePopup();
-            uploadImageSectionComponent.steps.clickOnImagePopupOkButton();
-            utilities.verifyElementVisibilityState(uploadImageSectionComponent.uploadImagePopup(), 'notExist');
-            highlightImagePage.steps.verifyImageUploadedInHighlightRegion();
-            highlightImagePage.steps.verifyImageUploadedInSetCorrectAnswerSection();
-            highlightImagePage.steps.highlightRegionInImage(flowerHighlightRegion);
-            highlightImagePage.steps.highlightRegionInImage(branchesHighlightRegion);
-            highlightImagePage.steps.allotPoints(10);
-            highlightImagePage.steps.highlightARegionInSetCorrectAnswerSection(0);
-            highlightImagePage.steps.expandAdditonalSettings();
-        });
-
-        fontSizeDropdownOptions.forEach((option, fontsIndex) => {
-            it(`When the user selects \'${option}\' option from the Font Size dropdown, then font size of the preview tab should change to ${option} accordingly`, () => {
-                highlightImagePage.steps.selectFontSizeOptionFromFontSizeDropdown(fontsIndex);
-                utilities.verifyInnerText(highlightImagePage.fontSizeDropdown(), `${option}`);
-                highlightImagePage.steps.switchToPreviewTab();
-                utilities.verifyCSS(highlightImagePage.questionInstructionsText(), {
-                    'font-size': fontSizes[fontsIndex]
-                });
-                utilities.verifyCSS(highlightImagePage.previewTabImage(), {
-                    'font-size': fontSizes[fontsIndex]
-                });
-                highlightImagePage.steps.checkShowCorrectAnswerCheckbox();
-                highlightImagePage.steps.highlightARegionInPreviewTab(1);
-                utilities.verifyCSS(highlightImagePage.correctAnswerContainerLabel(), {
-                    'font-size': fontSizes[fontsIndex]
-                });
-                utilities.verifyCSS(highlightImagePage.correctAnswerNumeration(), {
-                    'font-size': fontSizes[fontsIndex]
-                });
-                utilities.verifyCSS(highlightImagePage.correctAnswerContainerAnswerWrapper(), {
-                    'font-size': fontSizes[fontsIndex]
-                });
-                highlightImagePage.steps.uncheckShowCorrectAnswerCheckbox();
-                highlightImagePage.steps.switchToEditTab();
-            });
-        });
-    });
-
-    describe('Additional settings: Check answer', () => {
-        abortEarlySetup();
-        before(() => {
-            cy.log('Navigating to Highlight question type');
-            highlightImagePage.steps.navigateToCreateQuestion('highlight image');
-            cy.barsPreLoaderWait();
-            uploadImageSectionComponent.steps.uploadFile('highlightImage.jpg');
-            uploadImageSectionComponent.steps.verifyUploadedImageInImagePopup();
-            uploadImageSectionComponent.steps.clickOnImagePopupOkButton();
-            utilities.verifyElementVisibilityState(uploadImageSectionComponent.uploadImagePopup(), 'notExist');
-            highlightImagePage.steps.verifyImageUploadedInHighlightRegion();
-            highlightImagePage.steps.verifyImageUploadedInSetCorrectAnswerSection();
-            highlightImagePage.steps.highlightRegionInImage(flowerHighlightRegion);
-            highlightImagePage.steps.highlightRegionInImage(branchesHighlightRegion);
-            highlightImagePage.steps.allotPoints(10);
-            highlightImagePage.steps.highlightARegionInSetCorrectAnswerSection(0);
-            highlightImagePage.steps.expandAdditonalSettings();
-        });
-
-        highlightImagePage.tests.verifyCheckAnswerSectionAndPreviewTabCheckAnswerButton();
-    });
-
-    describe('Additional settings: Check answer functionality', () => {
-        abortEarlySetup();
-        before(() => {
-            cy.log('Navigating to Highlight question type');
-            highlightImagePage.steps.navigateToCreateQuestion('highlight image');
-            cy.barsPreLoaderWait();
-            highlightImagePage.steps.addQuestionInstructions();
-            uploadImageSectionComponent.steps.uploadFile('highlightImage.jpg');
-            uploadImageSectionComponent.steps.verifyUploadedImageInImagePopup();
-            uploadImageSectionComponent.steps.clickOnImagePopupOkButton();
-            utilities.verifyElementVisibilityState(uploadImageSectionComponent.uploadImagePopup(), 'notExist');
-            highlightImagePage.steps.verifyImageUploadedInHighlightRegion();
-            highlightImagePage.steps.verifyImageUploadedInSetCorrectAnswerSection();
-            highlightImagePage.steps.highlightRegionInImage(flowerHighlightRegion);
-            highlightImagePage.steps.highlightRegionInImage(branchesHighlightRegion);
-            highlightImagePage.steps.highlightRegionInImage(leafHighlightRegion);
-            highlightImagePage.steps.highlightRegionInImage(rootsHighlightRegion);
-            highlightImagePage.steps.checkMultipleSelectionCheckbox();
-            highlightImagePage.steps.highlightARegionInSetCorrectAnswerSection(0);
-            highlightImagePage.steps.highlightARegionInSetCorrectAnswerSection(3);
-            highlightImagePage.steps.allotPoints(10);
-            highlightImagePage.steps.expandAdditonalSettings();
-            highlightImagePage.steps.setMaximumCheckAnswerAttempts(2);
-            highlightImagePage.steps.switchToPreviewTab();
-        });
-
-        highlightImagePage.tests.verifyCheckAnswerButtonFunctionalityWhenQuestionIsUnattempted();
-
-        it('When user attempts the question partially correct then on clicking on the Check Answer button, green check-mark regions should be displayed for the correctly attempted highlights, red cross-mark regions should be displayed for the incorrectly attempted highlights, a label \'Incorrect answer\' and border should be displayed below the question preview', () => {
-            highlightImagePage.steps.highlightARegionInPreviewTab(0);
-            highlightImagePage.steps.highlightARegionInPreviewTab(1);
-            highlightImagePage.steps.checkAnswer();
-            highlightImagePage.steps.verifyCorrectHighlightRegion(0);
-            highlightImagePage.steps.verifyIncorrectHighlightRegion(1);
-            highlightImagePage.steps.verifyDefaultHighlightRegion(2);
-            highlightImagePage.steps.verifyDefaultHighlightRegion(3);
-            highlightImagePage.steps.verifyIncorrectAttemptBorder();
-            highlightImagePage.steps.verifyCorrectIncorrectAnswerLabel('Incorrect');
-        });
-
-        it('When user attempts the question correctly and clicks on the \'Check Answer\' button, green check-mark regions should be displayed for the correctly attempted highlights, a label \'Correct answer\' and border should be displayed below the question preview', () => {
-            highlightImagePage.steps.removeHighlightOfARegionInPreviewTab(1);
-            highlightImagePage.steps.highlightARegionInPreviewTab(3);
-            highlightImagePage.steps.checkAnswer();
-            highlightImagePage.steps.verifyCorrectHighlightRegion(0);
-            highlightImagePage.steps.verifyDefaultHighlightRegion(1);
-            highlightImagePage.steps.verifyDefaultHighlightRegion(2);
-            highlightImagePage.steps.verifyCorrectHighlightRegion(3);
-            highlightImagePage.steps.verifyCorrectAttemptBorder();
-            highlightImagePage.steps.verifyCorrectIncorrectAnswerLabel('Correct');
-        });
-
-        highlightImagePage.tests.verifyDisabledCheckAnswerButtonWithCSSAnda11y();
-
-        it('When the user updates the value of Maximum check answer attempts input field, it should get reflected on the Preview tab', () => {
-            highlightImagePage.steps.switchToEditTab();
-            highlightImagePage.steps.clearMaximumCheckAnswerAttemptsInputField();
-            highlightImagePage.steps.addInputToMaximumCheckAnswerAttemptsInputField(1);
-            highlightImagePage.steps.switchToPreviewTab();
-            highlightImagePage.steps.verifyCheckAnswerButtonEnabled();
-            highlightImagePage.steps.highlightARegionInPreviewTab(2);
-            highlightImagePage.steps.checkAnswer();
-            highlightImagePage.steps.verifyCheckAnswerButtonDisabled();
-        });
-
-        it('When the \'Maximum check answer attempts\' input field has value \'0\' and user switches to Preview tab, then the \'Check Answer\' button should be enabled and user should be able to check answer multiple times', () => {
-            highlightImagePage.steps.switchToEditTab();
-            highlightImagePage.steps.clearMaximumCheckAnswerAttemptsInputField();
-            highlightImagePage.steps.addInputToMaximumCheckAnswerAttemptsInputField(0);
-            cy.log('Switching to Preview tab')
-            highlightImagePage.steps.switchToPreviewTab();
-            highlightImagePage.steps.highlightARegionInPreviewTab(0);
-            highlightImagePage.steps.checkAnswer();
-            highlightImagePage.steps.verifyCheckAnswerButtonEnabled();
-            highlightImagePage.steps.highlightARegionInPreviewTab(1);
-            highlightImagePage.steps.checkAnswer();
-            highlightImagePage.steps.verifyCheckAnswerButtonEnabled();
-        });
-
-        it('When the \'Maximum check answer attempts\' input field is empty and user switches to Preview tab, then the \'Check Answer\' button should be enabled and user should be able to check answer multiple times', () => {
-            highlightImagePage.steps.switchToEditTab();
-            highlightImagePage.steps.clearMaximumCheckAnswerAttemptsInputField()
-            highlightImagePage.steps.switchToPreviewTab();
-            highlightImagePage.steps.highlightARegionInPreviewTab(0);
-            highlightImagePage.steps.checkAnswer();
-            highlightImagePage.steps.verifyCheckAnswerButtonEnabled();
-            highlightImagePage.steps.highlightARegionInPreviewTab(1);
-            highlightImagePage.steps.checkAnswer();
-            highlightImagePage.steps.verifyCheckAnswerButtonEnabled();
-        });
-    });
-
     describe('Additional settings: Canvas maximum width contents and set correct answer section', () => {
         abortEarlySetup();
         before(() => {
@@ -432,16 +216,4 @@ describe('Create Item page - Highlight image: Additional settings', () => {
             highlightImagePage.steps.verifyHeightAndWidthOfImageInPreviewTab(imageHeight, imageWidth);
         });
     });
-
-    describe('Additional Settings: Details section', () => {
-        abortEarlySetup();
-        before(() => {
-            cy.log('Navigating to Highlight image question type');
-            highlightImagePage.steps.navigateToCreateQuestion('highlight image');
-            cy.barsPreLoaderWait();
-            highlightImagePage.steps.expandAdditonalSettings();
-        });
-
-        highlightImagePage.tests.verifyDetailsSection();
-    });
 });

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

@@ -0,0 +1,252 @@
+import { highlightImagePage } from "../../../pages";
+import { uploadImageSectionComponent } from "../../../pages/components/uploadImageSectionComponent";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import utilities from "../../../support/helpers/utilities";
+const css = Cypress.env('css');
+
+let imageWidth = 500;
+let imageHeight = 500;
+const flowerHighlightRegion = [[24, 6], [24, 24], [56, 24], [56, 6]];
+const branchesHighlightRegion = [[36, 36], [36, 46], [58, 46], [58, 36]];
+const leafHighlightRegion = [[54, 48], [54, 72], [82, 72], [82, 48]];
+const rootsHighlightRegion = [[28, 84], [28, 98], [74, 98], [74, 84]];
+const numbers = ['1', '2'];
+const lowercase = ['a', 'b'];
+const uppercase = ['A', 'B'];
+const fontSizeDropdownOptions = ['Default', 'Small', 'Normal', 'Large', 'Extra large', 'Huge'];
+const fontSizes = ['16px', '12px', '14px', '17px', '20px', '24px'];
+const answerNumerationDropdownOptions = ['Numerical', 'Uppercase alphabet', 'Lowercase alphabet'];
+
+describe('Create Item page - Highlight image: Additional settings', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Additional Settings accordion', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to Highlight image question type');
+            highlightImagePage.steps.navigateToCreateQuestion('highlight image');
+            cy.barsPreLoaderWait();
+        });
+
+        highlightImagePage.tests.verifyAdditonalSettingsAccordionProperties();
+    });
+
+    describe('Additional settings: Font size contents', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to Highlight question type');
+            highlightImagePage.steps.navigateToCreateQuestion('highlight image');
+            cy.barsPreLoaderWait();
+            highlightImagePage.steps.expandAdditonalSettings();
+        });
+
+        highlightImagePage.tests.verifyFontSizeSectionContents();
+    });
+
+    describe('Additional settings: Font size functionality set correct answer section', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to Highlight question type');
+            highlightImagePage.steps.navigateToCreateQuestion('highlight image');
+            cy.barsPreLoaderWait();
+            uploadImageSectionComponent.steps.uploadFile('highlightImage.jpg');
+            uploadImageSectionComponent.steps.verifyUploadedImageInImagePopup();
+            uploadImageSectionComponent.steps.clickOnImagePopupOkButton();
+            utilities.verifyElementVisibilityState(uploadImageSectionComponent.uploadImagePopup(), 'notExist');
+            highlightImagePage.steps.verifyImageUploadedInHighlightRegion();
+            highlightImagePage.steps.verifyImageUploadedInSetCorrectAnswerSection();
+            highlightImagePage.steps.highlightRegionInImage(flowerHighlightRegion);
+            highlightImagePage.steps.highlightRegionInImage(branchesHighlightRegion);
+            highlightImagePage.steps.expandAdditonalSettings();
+        });
+
+        fontSizeDropdownOptions.forEach((option, fontsIndex) => {
+            it(`When the user selects \'${option}\' option from the Font Size dropdown, then font size of the set correct answer section should not change to ${option}`, () => {
+                highlightImagePage.steps.selectFontSizeOptionFromFontSizeDropdown(fontsIndex);
+                utilities.verifyInnerText(highlightImagePage.fontSizeDropdown(), `${option}`);
+                utilities.verifyCSS(highlightImagePage.setCorrectAnswerSectionImage(), {
+                    'font-size': fontSizes[2]
+                });
+                utilities.verifyCSS(highlightImagePage.highlightNumeration(), {
+                    'font-size': fontSizes[0]
+                });
+            });
+        });
+    });
+
+    describe('Additional settings: Font size functionality preview tab', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to Highlight question type');
+            highlightImagePage.steps.navigateToCreateQuestion('highlight image');
+            cy.barsPreLoaderWait();
+            highlightImagePage.steps.addQuestionInstructions();
+            uploadImageSectionComponent.steps.uploadFile('highlightImage.jpg');
+            uploadImageSectionComponent.steps.verifyUploadedImageInImagePopup();
+            uploadImageSectionComponent.steps.clickOnImagePopupOkButton();
+            utilities.verifyElementVisibilityState(uploadImageSectionComponent.uploadImagePopup(), 'notExist');
+            highlightImagePage.steps.verifyImageUploadedInHighlightRegion();
+            highlightImagePage.steps.verifyImageUploadedInSetCorrectAnswerSection();
+            highlightImagePage.steps.highlightRegionInImage(flowerHighlightRegion);
+            highlightImagePage.steps.highlightRegionInImage(branchesHighlightRegion);
+            highlightImagePage.steps.allotPoints(10);
+            highlightImagePage.steps.highlightARegionInSetCorrectAnswerSection(0);
+            highlightImagePage.steps.expandAdditonalSettings();
+        });
+
+        fontSizeDropdownOptions.forEach((option, fontsIndex) => {
+            it(`When the user selects \'${option}\' option from the Font Size dropdown, then font size of the preview tab should change to ${option} accordingly`, () => {
+                highlightImagePage.steps.selectFontSizeOptionFromFontSizeDropdown(fontsIndex);
+                utilities.verifyInnerText(highlightImagePage.fontSizeDropdown(), `${option}`);
+                highlightImagePage.steps.switchToPreviewTab();
+                utilities.verifyCSS(highlightImagePage.questionInstructionsText(), {
+                    'font-size': fontSizes[fontsIndex]
+                });
+                utilities.verifyCSS(highlightImagePage.previewTabImage(), {
+                    'font-size': fontSizes[fontsIndex]
+                });
+                highlightImagePage.steps.checkShowCorrectAnswerCheckbox();
+                highlightImagePage.steps.highlightARegionInPreviewTab(1);
+                utilities.verifyCSS(highlightImagePage.correctAnswerContainerLabel(), {
+                    'font-size': fontSizes[fontsIndex]
+                });
+                utilities.verifyCSS(highlightImagePage.correctAnswerNumeration(), {
+                    'font-size': fontSizes[fontsIndex]
+                });
+                utilities.verifyCSS(highlightImagePage.correctAnswerContainerAnswerWrapper(), {
+                    'font-size': fontSizes[fontsIndex]
+                });
+                highlightImagePage.steps.uncheckShowCorrectAnswerCheckbox();
+                highlightImagePage.steps.switchToEditTab();
+            });
+        });
+    });
+
+    describe('Additional settings: Check answer', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to Highlight question type');
+            highlightImagePage.steps.navigateToCreateQuestion('highlight image');
+            cy.barsPreLoaderWait();
+            uploadImageSectionComponent.steps.uploadFile('highlightImage.jpg');
+            uploadImageSectionComponent.steps.verifyUploadedImageInImagePopup();
+            uploadImageSectionComponent.steps.clickOnImagePopupOkButton();
+            utilities.verifyElementVisibilityState(uploadImageSectionComponent.uploadImagePopup(), 'notExist');
+            highlightImagePage.steps.verifyImageUploadedInHighlightRegion();
+            highlightImagePage.steps.verifyImageUploadedInSetCorrectAnswerSection();
+            highlightImagePage.steps.highlightRegionInImage(flowerHighlightRegion);
+            highlightImagePage.steps.highlightRegionInImage(branchesHighlightRegion);
+            highlightImagePage.steps.allotPoints(10);
+            highlightImagePage.steps.highlightARegionInSetCorrectAnswerSection(0);
+            highlightImagePage.steps.expandAdditonalSettings();
+        });
+
+        highlightImagePage.tests.verifyCheckAnswerSectionAndPreviewTabCheckAnswerButton();
+    });
+
+    describe('Additional settings: Check answer functionality', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to Highlight question type');
+            highlightImagePage.steps.navigateToCreateQuestion('highlight image');
+            cy.barsPreLoaderWait();
+            highlightImagePage.steps.addQuestionInstructions();
+            uploadImageSectionComponent.steps.uploadFile('highlightImage.jpg');
+            uploadImageSectionComponent.steps.verifyUploadedImageInImagePopup();
+            uploadImageSectionComponent.steps.clickOnImagePopupOkButton();
+            utilities.verifyElementVisibilityState(uploadImageSectionComponent.uploadImagePopup(), 'notExist');
+            highlightImagePage.steps.verifyImageUploadedInHighlightRegion();
+            highlightImagePage.steps.verifyImageUploadedInSetCorrectAnswerSection();
+            highlightImagePage.steps.highlightRegionInImage(flowerHighlightRegion);
+            highlightImagePage.steps.highlightRegionInImage(branchesHighlightRegion);
+            highlightImagePage.steps.highlightRegionInImage(leafHighlightRegion);
+            highlightImagePage.steps.highlightRegionInImage(rootsHighlightRegion);
+            highlightImagePage.steps.checkMultipleSelectionCheckbox();
+            highlightImagePage.steps.highlightARegionInSetCorrectAnswerSection(0);
+            highlightImagePage.steps.highlightARegionInSetCorrectAnswerSection(3);
+            highlightImagePage.steps.allotPoints(10);
+            highlightImagePage.steps.expandAdditonalSettings();
+            highlightImagePage.steps.setMaximumCheckAnswerAttempts(2);
+            highlightImagePage.steps.switchToPreviewTab();
+        });
+
+        highlightImagePage.tests.verifyCheckAnswerButtonFunctionalityWhenQuestionIsUnattempted();
+
+        it('When user attempts the question partially correct then on clicking on the Check Answer button, green check-mark regions should be displayed for the correctly attempted highlights, red cross-mark regions should be displayed for the incorrectly attempted highlights, a label \'Incorrect answer\' and border should be displayed below the question preview', () => {
+            highlightImagePage.steps.highlightARegionInPreviewTab(0);
+            highlightImagePage.steps.highlightARegionInPreviewTab(1);
+            highlightImagePage.steps.checkAnswer();
+            highlightImagePage.steps.verifyCorrectHighlightRegion(0);
+            highlightImagePage.steps.verifyIncorrectHighlightRegion(1);
+            highlightImagePage.steps.verifyDefaultHighlightRegion(2);
+            highlightImagePage.steps.verifyDefaultHighlightRegion(3);
+            highlightImagePage.steps.verifyIncorrectAttemptBorder();
+            highlightImagePage.steps.verifyCorrectIncorrectAnswerLabel('Incorrect');
+        });
+
+        it('When user attempts the question correctly and clicks on the \'Check Answer\' button, green check-mark regions should be displayed for the correctly attempted highlights, a label \'Correct answer\' and border should be displayed below the question preview', () => {
+            highlightImagePage.steps.removeHighlightOfARegionInPreviewTab(1);
+            highlightImagePage.steps.highlightARegionInPreviewTab(3);
+            highlightImagePage.steps.checkAnswer();
+            highlightImagePage.steps.verifyCorrectHighlightRegion(0);
+            highlightImagePage.steps.verifyDefaultHighlightRegion(1);
+            highlightImagePage.steps.verifyDefaultHighlightRegion(2);
+            highlightImagePage.steps.verifyCorrectHighlightRegion(3);
+            highlightImagePage.steps.verifyCorrectAttemptBorder();
+            highlightImagePage.steps.verifyCorrectIncorrectAnswerLabel('Correct');
+        });
+
+        highlightImagePage.tests.verifyDisabledCheckAnswerButtonWithCSSAnda11y();
+
+        it('When the user updates the value of Maximum check answer attempts input field, it should get reflected on the Preview tab', () => {
+            highlightImagePage.steps.switchToEditTab();
+            highlightImagePage.steps.clearMaximumCheckAnswerAttemptsInputField();
+            highlightImagePage.steps.addInputToMaximumCheckAnswerAttemptsInputField(1);
+            highlightImagePage.steps.switchToPreviewTab();
+            highlightImagePage.steps.verifyCheckAnswerButtonEnabled();
+            highlightImagePage.steps.highlightARegionInPreviewTab(2);
+            highlightImagePage.steps.checkAnswer();
+            highlightImagePage.steps.verifyCheckAnswerButtonDisabled();
+        });
+
+        it('When the \'Maximum check answer attempts\' input field has value \'0\' and user switches to Preview tab, then the \'Check Answer\' button should be enabled and user should be able to check answer multiple times', () => {
+            highlightImagePage.steps.switchToEditTab();
+            highlightImagePage.steps.clearMaximumCheckAnswerAttemptsInputField();
+            highlightImagePage.steps.addInputToMaximumCheckAnswerAttemptsInputField(0);
+            cy.log('Switching to Preview tab')
+            highlightImagePage.steps.switchToPreviewTab();
+            highlightImagePage.steps.highlightARegionInPreviewTab(0);
+            highlightImagePage.steps.checkAnswer();
+            highlightImagePage.steps.verifyCheckAnswerButtonEnabled();
+            highlightImagePage.steps.highlightARegionInPreviewTab(1);
+            highlightImagePage.steps.checkAnswer();
+            highlightImagePage.steps.verifyCheckAnswerButtonEnabled();
+        });
+
+        it('When the \'Maximum check answer attempts\' input field is empty and user switches to Preview tab, then the \'Check Answer\' button should be enabled and user should be able to check answer multiple times', () => {
+            highlightImagePage.steps.switchToEditTab();
+            highlightImagePage.steps.clearMaximumCheckAnswerAttemptsInputField()
+            highlightImagePage.steps.switchToPreviewTab();
+            highlightImagePage.steps.highlightARegionInPreviewTab(0);
+            highlightImagePage.steps.checkAnswer();
+            highlightImagePage.steps.verifyCheckAnswerButtonEnabled();
+            highlightImagePage.steps.highlightARegionInPreviewTab(1);
+            highlightImagePage.steps.checkAnswer();
+            highlightImagePage.steps.verifyCheckAnswerButtonEnabled();
+        });
+    });
+
+    describe('Additional Settings: Details section', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to Highlight image question type');
+            highlightImagePage.steps.navigateToCreateQuestion('highlight image');
+            cy.barsPreLoaderWait();
+            highlightImagePage.steps.expandAdditonalSettings();
+        });
+
+        highlightImagePage.tests.verifyDetailsSection();
+    });
+});