itemengine-cypress-automation 1.0.190-repoUpdate3May-f180558.0 → 1.0.191-7thMayFixes-2faebef.0

package/cypress/pages/components/imageCanvasComponent.js

@@ -646,11 +646,11 @@ const tests = {
     },
 
     verifyCanvasResponseAreaContents: () => {
-        it('When user clicks inside canvas, then one response container should be added with pointer, close button and numeration.', () => {
+        it('When user clicks inside canvas, then one response container should be added with close button, numeration and without pointer.', () => {
             imageCanvasComponent.steps.insertResponseArea(80);
             utilities.verifyElementCount(imageCanvasComponent.responseAreaWrapper(), 1);
             utilities.verifyElementVisibilityState(imageCanvasComponent.responseArea(), 'visible');
-            utilities.verifyElementVisibilityState(imageCanvasComponent.responseAreaPointer(), 'visible');
+            utilities.verifyElementVisibilityState(imageCanvasComponent.responseAreaPointer(), 'notExist');
             utilities.verifyElementVisibilityState(imageCanvasComponent.removeResponseAreaButton(), 'visible');
             utilities.verifyInnerText(imageCanvasComponent.responseAreaNumerationText(), '1');
             utilities.verifyElementVisibilityState(imageCanvasComponent.responseAreaNumerationText(), 'visible');
@@ -823,7 +823,7 @@ const tests = {
         it('\'Cancel\' and \'Ok\' buttons should be displayed', () => {
             utilities.verifyInnerText(colorPopupComponent.cancelButton(), 'Cancel');
             utilities.verifyElementVisibilityState(colorPopupComponent.cancelButton(), 'visible');
-            utilities.verifyInnerText(colorPopupComponent.okButton(), 'OK');
+            utilities.verifyInnerText(colorPopupComponent.okButton(), 'Ok');
             utilities.verifyElementVisibilityState(colorPopupComponent.okButton(), 'visible');
         });
 

package/cypress/pages/components/index.js

@@ -70,4 +70,5 @@ export * from './barAndLineChartComponent';
 export * from './chartsCommonComponent';
 export * from './numberLineCommonComponent';
 export * from './limitNumberOfRetakeComponent';
-export * from './allowTeachersToDownloadStudentResponseComponent';
+export * from './allowTeachersToDownloadStudentResponseComponent';
+export * from './singleMultipleSelectionModeComponent';

package/cypress/pages/components/questionInputFieldComponent.js

@@ -138,7 +138,8 @@ const tests = {
             questionInputFieldComponent.steps.clearQuestionInputField();
             questionInputFieldComponent.steps.verifyQuestionInputFieldPlaceholder();
             questionInputFieldComponent.steps.addInputToQuestionInputField('Lorem Ipsum');
-            utilities.verifyTextContent(questionInputFieldComponent.questionInputField(), '​​​​​​​Lorem Ipsum');
+            questionInputFieldComponent.questionInputField()
+                .contains('Lorem Ipsum');
             questionInputFieldComponent.steps.verifyQuestionInputFieldPlaceholderNotDisplayed();
         });
     },

package/cypress/pages/components/resetPopupComponent.js

@@ -20,14 +20,18 @@ const steps = {
 }
 
 const tests = {
-    verifyResetPopupContentWithCSSAndA11y: () => {
+    /**
+     * @description Verify reset popup content with css and accessibility
+     * @param {("graph"|"chart")} representation
+     */
+    verifyResetPopupContentWithCSSAndA11y: (representation) => {
         it('When the user clicks on the \'Reset\' button then a dialog box should appear with title \'Reset\'', () => {
             utilities.verifyElementVisibilityState(dialogBoxBase.dialogBox(), 'exist');
             utilities.verifyInnerText(dialogBoxBase.dialogBoxTitle(), 'Reset');
         });
 
-        it('The dialog box should have content \'Are you sure you want to reset the graph? This will clear all objects and revert all settings to their default values.\' with \'Cancel\' and \'Confirm reset\' buttons should be displayed', () => {
-            utilities.verifyInnerText(dialogBoxBase.dialogBoxContent(), 'Are you sure you want to reset the graph? This will clear all objects and revert all settings to their default values.');
+        it(`The dialog box should have content \'Are you sure you want to reset the ${representation}? This will clear all objects and revert all settings to their default values.\' with \'Cancel\' and \'Confirm reset\' buttons should be displayed`, () => {
+            utilities.verifyInnerText(dialogBoxBase.dialogBoxContent(), `Are you sure you want to reset the ${representation}? This will clear all objects and revert all settings to their default values.`);
             utilities.verifyInnerText(resetPopupComponent.resetPopupConfirmResetButton(), 'Confirm reset');
             utilities.verifyInnerText(resetPopupComponent.resetPopupCancelButton(), 'Cancel');
         });

package/cypress/pages/components/scoringSectionBaseEditTab.js

@@ -123,7 +123,10 @@ const steps = {
     },
 
     verifyPointsFieldErrorMessageIsNotDisplayed: () => {
-        utilities.verifyElementVisibilityState(scoringSectionBaseEditTab.pleaseEnterPointsErrorMessage(), 'notExist');
+        scoringSectionBaseEditTab.pointsWrapper()
+            .within(() => {
+                utilities.verifyElementVisibilityState(scoringSectionBaseEditTab.pleaseEnterPointsErrorMessage(), 'notExist');
+            });
     },
 
     /**
@@ -248,25 +251,11 @@ const tests = {
             scoringSectionBaseEditTab.pointsInputField()
                 .focus()
                 .blur();
-            utilities.verifyInnerText(scoringSectionBaseEditTab.pleaseEnterPointsErrorMessage(), 'Error: Please enter points.');
-            utilities.verifyElementVisibilityState(scoringSectionBaseEditTab.pleaseEnterPointsErrorMessage(), 'visible');
-        });
-
-        it('CSS of points field error message', { tags: 'css' }, () => {
-            utilities.verifyCSS(scoringSectionBaseEditTab.pleaseEnterPointsErrorMessage(), {
-                'color': css.color.errorText,
-                'font-size': css.fontSize.small,
-                'font-weight': css.fontWeight.regular
-            });
-        });
-
-        it('Accessibility of points field error message', { tags: 'a11y' }, () => {
-            cy.checkAccessibility(commonComponents.errorMessage());
+            utilities.verifyElementVisibilityState(scoringSectionBaseEditTab.pleaseEnterPointsErrorMessage(), 'notExist');
         });
 
-        it('When the user enters point in Points input field then the \'Please enter points.\' validation text should disappear', () => {
+        it('User should be able to enter points in the points input fields', () => {
             scoringSectionBaseEditTab.steps.allotPoints(10);
-            utilities.verifyElementVisibilityState(scoringSectionBaseEditTab.pleaseEnterPointsErrorMessage(), 'notExist');
         });
     },
 

package/cypress/pages/components/singleMultipleSelectionModeComponent.js

@@ -0,0 +1,16 @@
+const selectors = {
+    multipleSelectionToggleButton: () => cy.get('.response-toggle-wrapper button[aria-label*="Multiple selection"]'),
+    singleSelectionToggleButton: () => cy.get('.response-toggle-wrapper button[aria-label*="Single selection"]'),
+}
+
+const steps = {
+    selectMultipleSelectionToggle: () => {
+        singleMultipleSelectionModeComponent.multipleSelectionToggleButton()
+            .click();
+    }
+}
+
+export const singleMultipleSelectionModeComponent = {
+    ...selectors,
+    steps
+}

package/cypress/pages/contentBlocksPage.js

@@ -56,7 +56,7 @@ const selectors = {
     groupDividerPreviewTab: () => cy.get('.content-wrapper .group-divider'),
     previousPageButton: () => cy.get('.pagination-button[data-at="previous"]'),
     nextPageButton: () => cy.get('.pagination-button[data-at="next"]'),
-    noPreviewText: () => cy.get('[class*="PassagePreviewstyles__NoPreview"]'),
+    noPreviewText: () => cy.get('[class*="__NoPreview"]'),
     paginationText: () => cy.get('.pagination-text'),
     previewWrapper: () => cy.get('[class*="TabsComponentstyles__PreviewWrapper"]'),
     sliderButtonPreviewTab: () => cy.get('.slider-indicators button'),

package/cypress/pages/dragAndDropIntoCategoriesPage.js

@@ -28,21 +28,20 @@ const selectors = {
     cellSubheadingTextArea: () => cy.get('.heading-field-wrapper [role="textbox"]'),
     cellTextTextArea: () => cy.get('.matrix-text-field [role="textbox"]'),
     tableCellContainer: () => cy.get('[class*="DragAndDropTablestyles__CellContainer"]'),
-    //Note: remove :visible after https://redmine.zeuslearning.com/issues/556304 gets fixed
-    dropzoneCellSpecifyCorrectAnswerSection: () => cy.get('[class*="DragAndDropMatrixstyles__CellContainer"][class*="dropzone-cell"]:visible'),
+    dropzoneCellSpecifyCorrectAnswerSection: () => cy.get('[class*="CellDropZonestyles__CellContainer"][class*="dropzone-cell"]'),
     //Note: Items render twice in student view, need to remove .first()
-    dropzoneCellPreviewTab: () => cy.get('[class*="question-preview-wrapper"] [class*="DragAndDropMatrixstyles__CellContainer"][class*="dropzone-cell"]'),
+    dropzoneCellPreviewTab: () => cy.get('[class*="question-preview-wrapper"] [class*="CellDropZonestyles__CellContainer"][class*="dropzone-cell"]'),
     dropzoneCellNumeration: () => cy.get('.answer-numeration-number-box'),
-    correctAnswerDropzoneCell: () => cy.get('[class*="DragAndDropMatrixstyles__AnswerCell"]'),
-    correctAnswerDropzoneCellTickIcon: () => cy.get('[class*="DragAndDropMatrixstyles__GreenBlock"]'),
+    correctAnswerDropzoneCell: () => cy.get('[class*="Matrixstyles__AnswerCell"]'),
+    correctAnswerDropzoneCellTickIcon: () => cy.get('[class*="Matrixstyles__GreenBlock"]'),
     correctAnswersLabel: () => cy.get('.correct-answers-label'),
-    correctAnswerOption: () => cy.get('[class*="DragAndDropMatrixstyles__AnswerWrapper"]'),
+    correctAnswerOption: () => cy.get('[class*="Matrixstyles__AnswerWrapper"]'),
     //Note: Items render twice in student view, need to remove .first()
-    categoryGridPreviewTab: () => cy.get('[class*="question-preview-wrapper"] [class*="DragAndDropMatrixstyles__TableWrapper"]').first(),
-    optionsWrapper: () => cy.get('[class*="DragAndDropMatrixstyles__DraggableItemWrapper"]'),
+    categoryGridPreviewTab: () => cy.get('[class*="question-preview-wrapper"] [class*="Matrixstyles__TableWrapper"]').first(),
+    optionsWrapper: () => cy.get('[class*="CellDropZonestyles__DraggableItemWrapper"]'),
     correctIncorrectAnswerBlock: () => cy.get('[class*="correct-answer-block"]'),
-    correctIncorrectStatusMessageText: () => cy.get('[class*="DragAndDropMatrixstyles__AnswerStatusText"]'),
-    correctIncorrectAnswerLabel: () => cy.get('[class*="DragAndDropMatrixstyles__CorrectIncorrectLabel"]'),
+    correctIncorrectStatusMessageText: () => cy.get('[class*="Matrixstyles__AnswerStatusText"]'),
+    correctIncorrectAnswerLabel: () => cy.get('[class*="Matrixstyles__CorrectIncorrectLabel"]'),
     correctAnswerContainer: () => cy.get('[class*="_CorrectAnswerWrapper"]'),
 
     //Specify columns and rows
@@ -57,8 +56,8 @@ const selectors = {
     rightArrowNavigationButton: () => cy.get('[class*="DragAndDropTablestyles__PaginationRightControl"]'),
 
     //Specify correct answer matrix
-    tableCellContainerSpecifyCorrectAnswerSection: () => cy.get('[class*="DragAndDropMatrixstyles__CellContainer"]'),
-    tableRowContainerSpecifyCorrectAnswerSection: () => cy.get('[class*="DragAndDropMatrixstyles__RowContainer"]'),
+    tableCellContainerSpecifyCorrectAnswerSection: () => cy.get('[class*="Matrixstyles__CellContainer"]'),
+    tableRowContainerSpecifyCorrectAnswerSection: () => cy.get('[class*="Matrixstyles__RowContainer"]'),
     leftArrowNavigationButtonSpecifyCorrectAnswerSection: () => cy.get('.classification-set-correct-answer-wrapper [aria-label="Left Pagination Button"]'),
     rightArrowNavigationButtonSpecifyCorrectAnswerSection: () => cy.get('.classification-set-correct-answer-wrapper [aria-label="Right Pagination Button"]'),
     tableCellLabel: () => cy.get('.cell-label'),
@@ -67,11 +66,11 @@ const selectors = {
     dropzoneAriaLabelInputField: () => cy.get('[type="text"][aria-label*="Enter ARIA label"]'),
 
     //Preview tab table
-    tableRowContainerPreviewTab: () => cy.get('[class*="question-preview-wrapper"] [class*="DragAndDropMatrixstyles__RowContainer"]'),
-    leftArrowNavigationButtonPreviewTab: () => cy.get('[class*="question-preview-wrapper"] [aria-label="Left Pagination Button"][class*="DragAndDropMatrixstyles__PaginationControl"]'),
-    rightArrowNavigationButtonPreviewTab: () => cy.get('[class*="question-preview-wrapper"] [aria-label="Right Pagination Button"][class*="DragAndDropMatrixstyles__PaginationControl"]'),
-    cellContainerPreviewTab: () => cy.get('[class*="question-preview-wrapper"] [class*="DragAndDropMatrixstyles__CellContainer"]'),
-    cellContainerSpecifyCorrectAnswer: () => cy.get('[class*="DragAndDropMatrixstyles__CellContainer"]'),
+    tableRowContainerPreviewTab: () => cy.get('[class*="question-preview-wrapper"] [class*="Matrixstyles__RowContainer"]'),
+    leftArrowNavigationButtonPreviewTab: () => cy.get('[class*="question-preview-wrapper"] [aria-label="Left Pagination Button"][class*="Matrixstyles__PaginationControl"]'),
+    rightArrowNavigationButtonPreviewTab: () => cy.get('[class*="question-preview-wrapper"] [aria-label="Right Pagination Button"][class*="Matrixstyles__PaginationControl"]'),
+    cellContainerPreviewTab: () => cy.get('[class*="question-preview-wrapper"] [class*="Matrixstyles__CellContainer"]'),
+    cellContainerSpecifyCorrectAnswer: () => cy.get('[class*="Matrixstyles__CellContainer"]'),
     incorrectOptionWrapper: () => cy.get('[class*="question-preview-wrapper"] .incorrect-answer-item'),
     correctOptionWrapper: () => cy.get('[class*="question-preview-wrapper"] .correct-answer-item'),
     perDropzoneRadioButton: () => cy.get('input[aria-label="per dropzone"]'),
@@ -88,10 +87,9 @@ const selectors = {
     penaltyPointsForIncorrectOptionInputField: () => cy.get('input[aria-label="penalty points for each incorrect option"]'),
     penaltyPointsForEachIncorrectOptionOrDropzoneLabel: () => cy.get('[class*="PenaltyScoreForEachIncorrectstyles__PointsLabel"]'),
     tableOuterBorder: () => cy.get('.table-border'),
-    categoryGridSpecifyCorrectAnswerSection: () => cy.get('[class*="DragAndDropMatrixstyles__TableWrapper"]'),
-    maxLimitInEachDropzoneHelpText: () => cy.get('[class*="DragAndDropMatrixstyles__MaxLimitWrapper"]'),
-    dropzoneGridSpecifyCorrectAnswerSection: () => cy.get('[class*="DragAndDropMatrixstyles__TableWrapper"]'),
-    dropzoneGridPreviewTab: () => cy.get('[class*="question-preview-wrapper"] [class*="DragAndDropMatrixstyles__TableWrapper"]'),
+    maxLimitInEachDropzoneHelpText: () => cy.get('[class*="Matrixstyles__MaxLimitWrapper"]'),
+    dropzoneGridSpecifyCorrectAnswerSection: () => cy.get('[class*="Matrixstyles__TableWrapper"]'),
+    dropzoneGridPreviewTab: () => cy.get('[class*="question-preview-wrapper"] [class*="Matrixstyles__TableWrapper"]'),
 }
 
 const steps = {
@@ -618,7 +616,7 @@ const steps = {
         dragAndDropIntoCategoriesPage.tableRowContainerPreviewTab()
             .eq(0)
             .within(($element) => {
-                utilities.verifyElementCount(cy.wrap($element).find('[class*="DragAndDropMatrixstyles__CellContainer"]'), numberOfColumns);
+                utilities.verifyElementCount(cy.wrap($element).find('[class*="Matrixstyles__CellContainer"]'), numberOfColumns);
             });
     },
 
@@ -638,7 +636,7 @@ const steps = {
         dragAndDropIntoCategoriesPage.tableRowContainerPreviewTab()
             .eq(0)
             .within(($element) => {
-                utilities.verifyElementCount(cy.wrap($element).find('[class*="DragAndDropMatrixstyles__CellContainer"]'), numberOfColumns);
+                utilities.verifyElementCount(cy.wrap($element).find('[class*="Matrixstyles__CellContainer"]'), numberOfColumns);
             });
     },
 
@@ -1149,7 +1147,7 @@ const steps = {
     },
 
     clickAndDropOptionFromDropzoneToOptionContainerSpecifyCorrectAnswerSection: (optionText) => {
-        dragAndDropIntoCategoriesPage.categoryGridSpecifyCorrectAnswerSection()
+        dragAndDropIntoCategoriesPage.dropzoneGridSpecifyCorrectAnswerSection()
             .within(() => {
                 draggableOptionContainer.draggableOption()
                     .contains(optionText)

package/cypress/pages/drawingResponsePage.js

@@ -60,7 +60,7 @@ const selectors = {
     },
     previewTabToolbarOptionTooltip: () => cy.get('.edit-question-preview-wrapper [role="tooltip"][class*="Tooltipstyles__TooltipContent"]'),
     previewTabLowerCanvas: () => cy.get('.question-preview-wrapper .lower-canvas'),
-    previewTabUpperCanvas: () => cy.get('.question-preview-wrapper .upper-canvas'),
+    previewTabUpperCanvas: () => cy.get('.edit-question-preview-wrapper .upper-canvas'),
     previewTabSecondaryToolbarOptionLabel: () => cy.get('.edit-question-preview-wrapper .drawing-tool__secondary-toolbar__tool-name'),
     previewTabSecondaryToolbarOption: (ariaLabel = null) => {
         if (ariaLabel) {
@@ -194,6 +194,7 @@ const selectors = {
     specialCharactersPopupCategoryTitle: () => cy.get('[class*="characters__container"] [class="drawing-tool-options__options__accordion__header"]'),
     specialCharactersPopupCategoryAccordionIcon: () => cy.get('[class*="characters__container"] [aria-label="AccordionIcon"]'),
 
+    //TODO - update selectors https://redmine.zeuslearning.com/issues/571423
     //Edit tab color picker popup
     editTabColorPickerPopupOpacityPalette: () => cy.get('.react-colorful__last-control .react-colorful__interactive'),
     editTabColorPickerPopupOpacityPicker: () => cy.get('.react-colorful__last-control .react-colorful__pointer'),
@@ -636,7 +637,7 @@ const steps = {
     verifySecondaryPopupLineType: (lineType, index) => {
         drawingResponsePage.previewTabSecondaryOptionPopupOptions()
             .eq(index)
-            .should('have.attr', 'aria-label', `Line Type ${lineType}`);
+            .should('have.attr', 'aria-label', `Line type ${lineType}`);
     },
 
     /**

package/cypress/pages/fillInTheGapsOverImageDragAndDropPage.js

@@ -546,6 +546,20 @@ const steps = {
         fillInTheGapsOverImageDragAndDropPage.dropzonePreviewTab()
             .should('be.visible');
     },
+
+    /**
+     * @param {number} index of option input field
+     * @param {string} textContent to enter text in the options input field
+     */
+    enterTextInOptionInputField: (index, textContent) => {
+        optionsWrapperComponent.optionsSectionWrapper()
+            .within(() => {
+                optionsWrapperComponent.optionsInputField()
+                    .eq(index)
+                    .type(textContent)
+                    .blur();
+            });
+    },
 }
 
 const tests = {

package/cypress/pages/fillInTheGapsOverImageDropdownPage.js

@@ -157,7 +157,7 @@ const steps = {
     * @description this function verifies width of canvas
     */
     verifyCanvasWidthInPreviewTab: (width) => {
-        fillInTheGapsOverImageDropdownPage.canvasInPreviewTab()
+        fillInTheGapsOverImageDropdownPage.canvasImageInPreviewTab()
             .should('have.attr', 'width', width);
     },
 

package/cypress/pages/imageHighlightPage.js

@@ -0,0 +1,364 @@
+import utilities from "../support/helpers/utilities";
+import { autoScoredScoringPreviewTab, autoScoredStudentViewSettings, backgroundImageUploadComponent, createQuestionBasePage, imageCanvasComponent, questionInstructionsComponent, scoringSectionBaseEditTab, singleMultipleSelectionModeComponent } from "./components"
+const css = Cypress.env('css');
+let imageWidth = 768;
+let imageHeight = 432;
+
+const selectors = {
+    ...questionInstructionsComponent,
+
+    //Specify possible options
+    specifyPossibleOptionsImageWrapper: () => cy.get('.drawing-tool__wrapper .drawing-tool__canvas'),
+    specifyPossibleOptionsImageCanvas: () => cy.get('.drawing-tool__wrapper .upper-canvas'),
+    freeformTool: () => cy.get('.drawing-tool__button-polygon'),
+    //Specify correct answer section
+    specifyCorrectAnswerSectionImage: () => cy.get('.highlight-svg-responseive image'),
+    specifyCorrectAnswerSectionHighlight: () => cy.get('[class*="HighlightImageControlstyles__ShapeWrapper"] a'),
+    //preview tab
+    imagePreviewTab: () => cy.get('[class*="question-preview-wrapper"] .highlight-svg-responseive image'),
+    highlightPreviewTab: () => cy.get('[class*="question-preview-wrapper"] [class*="HighlightImageControlstyles__ShapeWrapper"] a'),
+    highlightPolygonPreviewTab: () => cy.get('[class*="question-preview-wrapper"] [class*="HighlightImageControlstyles__PolygonWrapper"]'),
+    checkMarkIcon: () => cy.get('.correct-option-icon [data-name*="Rectangle"]'),
+    crossMarkIcon: () => cy.get('.incorrect-option-icon [data-name*="Rectangle"]'),
+    correctAnswersLabel: () => cy.get('[class*="__AnswerLabel"]'),
+    highlightNumerationPreviewTab: () => cy.get('[class*="__TextWrapper"]'),
+    correctAnswerContainerAnswerWrapper: () => cy.get('[class*="__AnswersWrapper"]'),
+    correctAnswerNumeration: () => cy.get('[class*="CellIndexWrapper"]'),
+    correctIncorrectAnswerTextWrapper: () => cy.get('[class*="_CorrectIncorrectWrapper"]'),
+    incorrectIcon: () => cy.get('[data-icon="Incorrect"]'),
+    correctIcon: () => cy.get('[data-icon="CorrectAnswer"]')
+}
+
+const steps = {
+    ...createQuestionBasePage.steps,
+    ...questionInstructionsComponent.steps,
+    ...backgroundImageUploadComponent.steps,
+    ...singleMultipleSelectionModeComponent.steps,
+    ...scoringSectionBaseEditTab.steps,
+    ...imageCanvasComponent.steps,
+    ...autoScoredScoringPreviewTab.steps,
+    ...autoScoredStudentViewSettings.steps,
+    //Specify possible options
+    clickOnFreeformTool: () => {
+        imageHighlightPage.freeformTool()
+            .click()
+            .blur();
+    },
+
+    verifyImageUploadedInSpecifyPossibleOptionsSection: () => {
+        imageHighlightPage.specifyPossibleOptionsImageWrapper()
+            .should('be.visible')
+            .and('have.css', 'background-image');
+        imageHighlightPage.specifyPossibleOptionsImageWrapper()
+            .should('have.css', 'background-size')
+            .and('eq', 'auto');
+        imageHighlightPage.specifyPossibleOptionsImageCanvas()
+            .should('be.visible')
+            .should('have.css', 'cursor');
+    },
+
+    /**
+     * @param {number[]} arrayOfPoints co-ordinates of the region to be highlighted
+     * @description this function draws the region to be highlighted
+     */
+    highlightRegionInImage: (arrayOfPoints) => {
+        imageHighlightPage.steps.clickOnFreeformTool();
+        imageHighlightPage.specifyPossibleOptionsImageCanvas()
+            .then(($element) => {
+                const clientWidth = $element[0].clientWidth;
+                arrayOfPoints.forEach((coordinates) => {
+                    imageHighlightPage.specifyPossibleOptionsImageCanvas()
+                        .click(coordinates[0] * clientWidth / 100, coordinates[1] * clientWidth / 100);
+                });
+                imageHighlightPage.specifyPossibleOptionsImageCanvas()
+                    .click(arrayOfPoints[0][0] * clientWidth / 100, arrayOfPoints[0][1] * clientWidth / 100);
+            });
+        cy.wait(200);
+    },
+
+    //Specify correct answer section
+    verifyImageUploadedSpecifyCorrectAnswer: () => {
+        utilities.verifyElementVisibilityState(imageHighlightPage.specifyCorrectAnswerSectionImage(), 'visible')
+    },
+
+    /**
+     * @param {number} index of region to be highlighted in set correct answer section
+     * @description this function verifies if the region is highlighted
+     */
+    verifySelectedHighlightRegionInSetCorrectAnswerSection: (index) => {
+        imageHighlightPage.specifyCorrectAnswerSectionHighlight()
+            .eq(index)
+            .should('have.attr', 'aria-checked', 'true');
+    },
+
+    /**
+    * @param {number} index of highlight region
+    * @description this function verifies if a highlight region is not selected
+    */
+    verifyRegionIsNotHighlightedInSetCorrectAnswerSection: (index) => {
+        imageHighlightPage.specifyCorrectAnswerSectionHighlight()
+            .eq(index)
+            .should('have.attr', 'aria-checked', 'false');
+    },
+
+    /**
+   * @param {number} index of highlight region
+   * @description this functions highlights a region in set correct answer section
+   */
+    highlightARegionInSpecifyCorrectAnswerSection: (index) => {
+        imageHighlightPage.specifyCorrectAnswerSectionHighlight()
+            .eq(index)
+            .click();
+        steps.verifySelectedHighlightRegionInSetCorrectAnswerSection(index);
+    },
+
+    /**
+   * @param {number} index of highlight region
+   * @description this functions highlights a region in set correct answer section
+   */
+    removeHighlightOfARegionInSetCorrectAnswerSection: (index) => {
+        imageHighlightPage.specifyCorrectAnswerSectionHighlight()
+            .eq(index)
+            .click();
+        steps.verifyRegionIsNotHighlightedInSetCorrectAnswerSection(index);
+    },
+
+    //Preview tab
+    verifyImageUploadedPreviewTab: () => {
+        utilities.verifyElementVisibilityState(imageHighlightPage.imagePreviewTab(), 'visible')
+    },
+
+    /**
+    * This function verifies the alt text of the image
+    * @param {string} altText for the image in preview tab
+    */
+    verifyImageUploadedAltTextPreviewTab: (altText) => {
+        imageHighlightPage.imagePreviewTab()
+            .should('have.attr', 'alt', altText)
+    },
+
+    /**
+     * This function verifies the image width and height
+     * @param {number} width of the image
+     * @param {number} height of the image
+     */
+    verifyImageUploadedWidthAndHeightPreviewTab: (width, height) => {
+        imageHighlightPage.imagePreviewTab()
+            .should('have.attr', 'width', width)
+            .should('have.attr', 'height', height)
+    },
+
+    /**
+     * @description verify count of highlight in preview tab
+     * @param {number} count count of the highlight
+     */
+    verifyHighlightRegionCountInPreviewTab: (count) => {
+        imageHighlightPage.highlightPreviewTab()
+            .should('have.length', count);
+    },
+
+    /**
+     * @description verify hidden state of highlight in preview tab
+     * @param {number} count count of the highlight
+     */
+    verifyHiddenHighlightRegion: (index) => {
+        utilities.getNthElement(imageHighlightPage.highlightPolygonPreviewTab(), index)
+            .should('have.attr', 'stroke-opacity', 'transparent');
+    },
+
+    /**
+     * @description verify hover state of highlight in preview tab
+     * @param {number} count count of the highlight
+     */
+    verifyHoverStateOfHighlightRegion: (index) => {
+        utilities.getNthElement(imageHighlightPage.highlightPolygonPreviewTab(), index)
+            .should('have.attr', 'stroke-opacity', '100')
+            .and('have.attr', 'fill-opacity', '40');
+    },
+
+    /**
+     * @param {number} index of highlighted region
+     * @param {number[]} hotspotCoordsInPercentage co-ordinates of the highlighted image in preview tab
+     * @description this function verifies the co-ordinates of region highlighted in preview tab
+     */
+    verifyHighlightRegionsInPreviewTab: (index, hotspotCoordsInPercentage) => {
+        let flattenedArr = hotspotCoordsInPercentage.flat();
+        imageHighlightPage.highlightPolygonPreviewTab()
+            .eq(index)
+            .then(($element) => {
+                const pointsValue = $element.attr('points');
+                const pointsArray = pointsValue.split(',');
+                let wholeNumbersArray = pointsArray.map((point) => {
+                    return Math.floor(Number(point))
+                });
+                wholeNumbersArray.forEach((actualValue, index) => {
+                    const targetValue = flattenedArr[index] * imageWidth / 100;
+                    cy.wrap(actualValue).should('be.closeTo', targetValue, 2);
+                });
+            });
+    },
+
+    /**
+    * @param {number} index of region to be highlighted in set correct answer section
+    * @description this function verifies if the region is highlighted
+    */
+    verifySelectedHighlightRegionInPreviewTab: (index) => {
+        imageHighlightPage.highlightPreviewTab()
+            .eq(index)
+            .should('have.attr', 'aria-checked', 'true');
+    },
+
+    /**
+     * @param {number} index of highlight region
+     * @description this function verifies if aa highlight region is not selected
+     */
+    verifyRegionIsNotHighlightedPreviewTab: (index) => {
+        imageHighlightPage.highlightPreviewTab()
+            .eq(index)
+            .should('have.attr', 'aria-checked', 'false');
+    },
+
+    /**
+     * @param {number} index of highlight region
+     * @description this functions highlights a region in preview tab
+     */
+    clickOnARegionInPreviewTab: (index) => {
+        imageHighlightPage.highlightPolygonPreviewTab()
+            .eq(index)
+            .click();
+    },
+
+    /**
+     * @param {number} index of highlight region
+     * @description this functions highlights a region in preview tab
+     */
+    highlightARegionInPreviewTab: (index) => {
+        imageHighlightPage.highlightPolygonPreviewTab()
+            .eq(index)
+            .click();
+        steps.verifySelectedHighlightRegionInPreviewTab(index);
+    },
+
+    /**
+    * @param {number} index of highlight region
+    * @description this functions highlights a region in set correct answer section
+    */
+    removeHighlightOfARegionInPreviewTab: (index) => {
+        imageHighlightPage.highlightPolygonPreviewTab()
+            .eq(index)
+            .click();
+        steps.verifyRegionIsNotHighlightedPreviewTab(index)
+    },
+
+    /**
+    * @param {*} index of highlight region
+    * @description this function verifies the highlight region is in default state
+    */
+    verifyDefaultHighlightRegion: (index) => {
+        utilities.verifyCSS(imageHighlightPage.highlightPolygonPreviewTab().eq(index), {
+            'stroke': css.color.activeButtons
+        });
+    },
+
+    /**
+    * @param {*} index of highlight region
+    * @description this function verifies the highlight region is correct
+    */
+    verifyCorrectHighlightRegion: (index) => {
+        utilities.verifyCSS(imageHighlightPage.highlightPolygonPreviewTab().eq(index), {
+            'fill': css.color.correctAnswerHighlightRegion,
+            'stroke': css.color.correctAnswer
+        });
+        imageHighlightPage.highlightPreviewTab()
+            .eq(index)
+            .within(() => {
+                utilities.verifyCSS(imageHighlightPage.checkMarkIcon(), {
+                    'fill': css.color.correctAnswer
+                });
+            });
+    },
+
+    /**
+     * @param {*} index of highlight region
+     * @description this function verifies the highlight region is incorrect
+     */
+    verifyIncorrectHighlightRegion: (index) => {
+        utilities.verifyCSS(imageHighlightPage.highlightPolygonPreviewTab().eq(index), {
+            'fill': css.color.incorrectAnswerHighlightRegion,
+            'stroke': css.color.incorrectAnswer
+        });
+        imageHighlightPage.highlightPreviewTab()
+            .eq(index)
+            .within(() => {
+                utilities.verifyCSS(imageHighlightPage.crossMarkIcon(), {
+                    'fill': css.color.incorrectAnswer
+                });
+            });
+    },
+
+    verifyHighlightRegionNumerationPreviewTab: () => {
+        imageHighlightPage.highlightNumerationPreviewTab()
+            .each(($el, index) => {
+                cy.wrap($el)
+                    .should('have.text', `${index + 1}`);
+            });
+    },
+
+    /**
+   * @param {string[]} numerationArray array of numeration numbers, lowercase, uppercase
+   * @description this function verifies the numeration of Correct Answer Container
+   */
+    verifyCorrectAnswerContainerNumeration: (numerationArray) => {
+        numerationArray.forEach((optionNumeration, index) => {
+            imageHighlightPage.correctAnswerNumeration()
+                .eq(index)
+                .should('have.text', optionNumeration);
+        });
+    },
+
+    /**
+     * @param {string[]} optionsTextArray array of options in the correct answer container
+     * @param {string[]} numerationArray array of numeration numbers, lowercase, uppercase
+     * @description this function verifies the contents of Correct Answer Container
+     */
+    verifyCorrectAnswerContainerContents: (optionsTextArray, numerationArray) => {
+        optionsTextArray.forEach((optionsText, index) => {
+            imageHighlightPage.correctAnswerContainerAnswerWrapper()
+                .eq(index)
+                .should('have.text', optionsText);
+        });
+        steps.verifyCorrectAnswerContainerNumeration(numerationArray);
+    },
+
+    verifyCorrectAnswerSectionNotExists: () => {
+        utilities.verifyElementVisibilityState(imageHighlightPage.correctAnswerContainerAnswerWrapper(), 'notExist');
+    },
+
+    /**
+    * @param {("correct" | "incorrect")} answerStatus - The status of the answer.
+    * @description Verifies the visibility and content of the correct/incorrect answer label block.
+    * If the answer is correct, it also verifies the visibility of the correct icon;
+    * otherwise, it verifies the visibility of the incorrect icon.
+    */
+    verifyCorrectIncorrectAnswerLabel: (answerStatus) => {
+        utilities.verifyInnerText(imageHighlightPage.correctIncorrectAnswerTextWrapper(), `Your answer is\n${answerStatus}`)
+        imageHighlightPage.correctIncorrectAnswerTextWrapper()
+            .within(() => {
+                if (answerStatus === 'correct') {
+                    utilities.verifyElementVisibilityState(imageHighlightPage.correctIcon(), 'visible');
+                } else {
+                    utilities.verifyElementVisibilityState(imageHighlightPage.incorrectIcon(), 'visible');
+                }
+            });
+    },
+}
+
+const tests = {
+    ...autoScoredScoringPreviewTab.tests,
+}
+
+export const imageHighlightPage = {
+    ...selectors,
+    steps,
+    tests
+}