itemengine-cypress-automation 1.0.2

package/cypress/pages/highlightImagePage.js

@@ -0,0 +1,1316 @@
+import utilities from "../support/helpers/utilities";
+import { dialogBoxBase } from "./dialogBoxBase";
+import { createQuestionBasePage, questionInstructionsComponent, commonComponents, autoScoredScoringSection, scoringSectionBase, previewScoringAndShowCorrectAnswerComponent, additionalSettingsPanel, autoScoredAdditionalSettings, autoScoredPreviewBase, autoScoredSetCorrectAnswerSection, autoScoredScoringSectionMultipleResponsesType, answerNumerationComponent } from "./components"
+import { customizeHighlightPropertiesComponent } from './components/customizeHighlightPropertiesComponent'
+
+const css = Cypress.env('css');
+let imageWidth = 500;
+let imageHeight = 500;
+
+const selectors = {
+    ...commonComponents,
+    ...autoScoredPreviewBase,
+    ...previewScoringAndShowCorrectAnswerComponent,
+    ...autoScoredScoringSectionMultipleResponsesType,
+    ...scoringSectionBase,
+    ...autoScoredSetCorrectAnswerSection,
+    ...autoScoredAdditionalSettings,
+    ...dialogBoxBase,
+    ...answerNumerationComponent,
+    ...additionalSettingsPanel,
+    ...questionInstructionsComponent,
+    ...customizeHighlightPropertiesComponent,
+    highlightImageLabel: () => cy.get('[class*="HighlightImageLabel"]'),
+    selectTool: () => cy.get('.drawing-tool__button-select'),
+    penTool: () => cy.get('.drawing-tool__button-polygon'),
+    undoTool: () => cy.get('.drawing-tool__button-undo'),
+    redoTool: () => cy.get('.drawing-tool__button-redo'),
+    itemEraserTool: () => cy.get('.drawing-tool__button-itemEraser'),
+    clearAllTool: () => cy.get('.drawing-tool__button-clearAll'),
+    highlightCount: () => cy.get('[class*="HighlightImagestyles__HighlightCountWrapper"]'),
+    tooltipText: () => cy.get('[class*="Tooltipstyles__TooltipContent"]:visible'),
+    highlightImageSectionWrapper: () => cy.get('.highlight-image-drawing-tool .drawing-tool__wrapper'),
+    widthLabel: () => cy.get('.width-alternative-text-wrapper .highlight-image-property-label'),
+    widthInputField: () => cy.get('.highlight-image-input-field input'),
+    imageAlternativeTextLabel: () => cy.get('.image-alternative-text-wrapper .inline-text-property-label'),
+    imageAlternativeTextInputField: () => cy.get('.inline-text-question-prefix-wrapper input'),
+    highlighImageCanvasWrapper: () => cy.get('.drawing-tool__wrapper .drawing-tool__canvas'),
+    highlighImageCanvas: () => cy.get('.drawing-tool__wrapper .upper-canvas'),
+    setCorrectAnswerSectionHighlight: () => cy.get('[class*="HighlightImageControlstyles__ShapeWrapper"] a'),
+    setCorrectAnswerSectionHighlightActivePattern: () => cy.get('[class*="HighlightImageControlstyles__ShapeWrapper"] a [class*="HighlightImageControlstyles__DiamondPattern-"]'),
+    setCorrectAnswerSectionHighlightFillColor: () => cy.get('[class*="HighlightImageControlstyles__ShapeWrapper"] a [class*="HighlightImageControlstyles__DiamondPatternWrapper"]'),
+    setCorrectAnswerSectionHighlightPolygon: () => cy.get('[class*="HighlightImageControlstyles__PolygonWrapper"]'),
+    highlightNumeration: () => cy.get('[class*="styles__TextWrapper"]'),
+    setCorrectAnswerSectionImage: () => cy.get('.highlight-svg-responseive image'),
+    previewTabHighlight: () => cy.get('.edit-question-preview-wrapper [class*="HighlightImageControlstyles__ShapeWrapper"] a'),
+    previewTabHighlightActivePattern: () => cy.get('.edit-question-preview-wrapper [class*="HighlightImageControlstyles__ShapeWrapper"] a [class*="HighlightImageControlstyles__DiamondPattern-"]'),
+    previewTabHighlightFillColor: () => cy.get('.edit-question-preview-wrapper [class*="HighlightImageControlstyles__ShapeWrapper"] a [class*="HighlightImageControlstyles__DiamondPatternWrapper"]'),
+    previewTabHighlightPolygon: () => cy.get('.edit-question-preview-wrapper [class*="HighlightImageControlstyles__PolygonWrapper"]'),
+    multipleSelectionCheckboxLabel: () => cy.get('[data-ngie-testid="multiple-selection-checkbox"] .MuiFormControlLabel-label'),
+    multipleSelectionCheckbox: () => cy.get('[data-ngie-testid="multiple-selection-checkbox"] input'),
+    hideHighlightsCheckboxLabel: () => cy.get('[data-ngie-testid="hide-highlights-checkbox"] .MuiFormControlLabel-label'),
+    hideHighlightsCheckbox: () => cy.get('[data-ngie-testid="hide-highlights-checkbox"] input'),
+    //Customize highlight property panel
+    customizeHighlightPropertiesPanel: () => cy.get('.customize-highlight-properties-wrapper .ngie-accordion-summary'),
+    customizeHighlightPropertiesLabel: () => cy.get('.customize-highlight-properties-label'),
+    customizeHighlightPropertiesTab: () => cy.get('.customize-highlight-properties-wrapper  .ngie-tablist-box-wrapper button'),
+    highlightColorLabel: () => cy.get('[class*=CustomizeHighlightPropertiesstyles__HighlightColorWrapper]'),
+    labelTitle: () => cy.get('[class*="CustomizeHighlightPropertiesstyles__LabelWrapper"]'),
+    ariaLabelInputFieldLabel: () => cy.get('.aria-label-wrapper .text-label'),
+    ariaLabelInputField: () => cy.get('.aria-label-wrapper input'),
+    optionLabelInputFieldLabel: () => cy.get('[class*=CustomizeHighlightPropertiesstyles__OptionLabelWrapper] .text-label'),
+    optionLabelInputField: () => cy.get('[class*=CustomizeHighlightPropertiesstyles__OptionLabelWrapper] input'),
+    resetToGlobalColorButton: () => cy.get('.reset-color-wrapper button'),
+    //Correct answer container
+    correctAnswerContainerLabel: () => cy.get('.edit-question-preview-wrapper [class*="CorrectAnswerLabel"]'),
+    correctAnswerContainerAnswerWrapper: () => cy.get('[class*="ItemWrapperDiv"]'),
+    correctAnswerNumeration: () => cy.get('[class*="NumerationWrapper"]'),
+    correctIncorrectAnswerBorder: () => cy.get('.edit-question-preview-wrapper .highlight-svg-responseive'),
+    checkmarkCrossmarkIcon: () => cy.get('g[id*="Rectangle"]'),
+    //Scoring
+    pointsPerResponseLabel: () => cy.get('.alternate-points-points-per-text-span'),
+    partialEqualWeightsPointsPerResponseScore: () => cy.get('.alternate-points-points-per-value-span'),
+    partialDifferentWeightsPointsOptionsLabel: () => cy.get('.highlight-image-partial-points-per-response-form-control-wrapper .points-label'),
+    studentResponseAreaAndLayoutLabel: () => cy.get('.highlight-image-wrapper [role="heading"]').eq(0),
+    canvasMaximumWidthLabel: () => cy.get('.canvas-max-width-wrapper .additional-settings-label'),
+    canvasMaximumWidthInputField: () => cy.get('.canvas-max-width-wrapper input'),
+    //Preview tab
+    previewTabImage: () => cy.get('.edit-question-preview-wrapper .highlight-svg-responseive image')
+}
+
+const steps = {
+    ...createQuestionBasePage.steps,
+    ...questionInstructionsComponent.steps,
+    ...scoringSectionBase.steps,
+    ...previewScoringAndShowCorrectAnswerComponent.steps,
+    ...additionalSettingsPanel.steps,
+    ...autoScoredAdditionalSettings.steps,
+    ...autoScoredPreviewBase.steps,
+    ...autoScoredSetCorrectAnswerSection.steps,
+    ...autoScoredScoringSectionMultipleResponsesType.steps,
+    ...autoScoredScoringSection.steps,
+    ...dialogBoxBase.steps,
+    ...commonComponents.steps,
+    ...answerNumerationComponent.steps,
+    ...customizeHighlightPropertiesComponent.steps,
+    verifyImageUploadedInHighlightRegion: () => {
+        highlightImagePage.highlighImageCanvasWrapper()
+            .should('be.visible')
+            .and('have.css', 'background-image');
+        highlightImagePage.highlighImageCanvasWrapper()
+            .should('have.css', 'background-size')
+            .and('eq', '100% 100%');
+        highlightImagePage.highlighImageCanvas()
+            .should('be.visible')
+            .should('have.css', 'cursor');
+    },
+
+    /**
+     * @param {number} imageWidth width of highlight image wrapper
+     * @description this function verifies the width of highlight image wrapper
+     */
+    verifyImageWidthInHighlightImageSection: (imageWidth) => {
+        highlightImagePage.highlighImageCanvasWrapper()
+            .should('be.visible')
+            .and('have.css', 'width', `${imageWidth}px`)
+    },
+
+    verifyImageUploadedInSetCorrectAnswerSection: () => {
+        utilities.verifyElementVisibilityState(highlightImagePage.setCorrectAnswerSectionImage(), 'visible')
+    },
+
+    /**
+     * @param {number} index of highlighted region
+     * @param {number[]} hotspotCoordsInPercentage co-ordinates of the highlighted image in set correct answer section
+     * @description this function verifies the co-ordinates of region highlighted in set correct answer section
+     */
+    verifyHighlightRegionsInSetCorrectAnswerSection: (index, hotspotCoordsInPercentage) => {
+        let flattenedArr = hotspotCoordsInPercentage.flat();
+        highlightImagePage.setCorrectAnswerSectionHighlightPolygon()
+            .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((actualPointsValue, index) => {
+                    const expectedPointsValue = flattenedArr[index] * imageWidth / 100;
+                    cy.wrap(actualPointsValue).should('be.closeTo', expectedPointsValue, 2);
+                });
+            });
+        highlightImagePage.setCorrectAnswerSectionHighlight()
+            .eq(index)
+            .within(() => {
+                highlightImagePage.highlightNumeration()
+                    .should('have.text', index + 1);
+            });
+    },
+
+    /**
+     * @param {number[]} arrayOfPoints co-ordinates of the region to be highlighted
+     * @description this function draws the region to be highlighted
+     */
+    highlightRegionInImage: (arrayOfPoints) => {
+        highlightImagePage.steps.clickOnPenTool();
+        highlightImagePage.highlighImageCanvas()
+            .then(($element) => {
+                const clientWidth = $element[0].clientWidth;
+                arrayOfPoints.forEach((coordinates) => {
+                    highlightImagePage.highlighImageCanvas()
+                        .click(coordinates[0] * clientWidth / 100, coordinates[1] * clientWidth / 100);
+                });
+                highlightImagePage.highlighImageCanvas()
+                    .click(arrayOfPoints[0][0] * clientWidth / 100, arrayOfPoints[0][1] * clientWidth / 100);
+                highlightImagePage.highlighImageCanvas()
+                    .click(arrayOfPoints[0][0] * clientWidth / 100, arrayOfPoints[0][1] * clientWidth / 100);
+            });
+    },
+
+    /**
+     * @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();
+        highlightImagePage.previewTabHighlightPolygon()
+            .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
+     */
+    verifySelectedHighlightRegionInSetCorrectAnswerSection: (index) => {
+        highlightImagePage.setCorrectAnswerSectionHighlight()
+            .eq(index)
+            .should('have.attr', 'aria-checked', 'true');
+    },
+
+    verifySelectedStateOfPenTool: () => {
+        highlightImagePage.penTool()
+            .should('have.class', 'drawing-tool__button--active');
+    },
+
+    verifyUnselectedStateOfSelectTool: () => {
+        highlightImagePage.selectTool()
+            .should('not.have.class', 'drawing-tool__button--active');
+    },
+
+    verifyUnselectedStateOfUndoTool: () => {
+        highlightImagePage.undoTool()
+            .should('not.have.class', 'drawing-tool__button--active');
+    },
+
+    verifyUnselectedStateOfRedoTool: () => {
+        highlightImagePage.redoTool()
+            .should('not.have.class', 'drawing-tool__button--active');
+    },
+
+    verifyUnselectedStateOfItemEraserTool: () => {
+        highlightImagePage.itemEraserTool()
+            .should('not.have.class', 'drawing-tool__button--active');
+    },
+
+    verifySelectedStateOfItemEraserTool: () => {
+        highlightImagePage.itemEraserTool()
+            .should('have.class', 'drawing-tool__button--active');
+    },
+
+    verifyUnselectedStateOfClearAllTool: () => {
+        highlightImagePage.clearAllTool()
+            .should('not.have.class', 'drawing-tool__button--active');
+    },
+
+    /**
+     * @description verify the highlight count
+     * @param {number} count shows the count of highlight
+     */
+    verifyHighlightCountInHighlightImageSection: (count) => {
+        highlightImagePage.highlightCount()
+            .verifyInnerText(`Highlight count: ${count}`)
+    },
+
+    //TODO: Need to update script after https://redmine.zeuslearning.com/issues/518498 is resolved
+    /**
+    * @description verify the tooltip text
+    * @param {tool selector} button cy.get selector
+    * @param {string} tooltipText shows the tooltip text
+    */
+    verifyTooltip: (tool, tooltipText) => {
+        tool
+            .trigger('mouseover')
+        highlightImagePage.tooltipText()
+            .and('be.visible')
+            .should('have.text', tooltipText)
+        tool
+            .trigger('mouseout')
+        highlightImagePage.tooltipText()
+            .should('not.exist')
+    },
+
+    /**
+     * @param {number} imageWidth width of the image
+     * @description this function enters and verifies width input field value
+     */
+    addInputToEditTabWidthInputField: (imageWidth) => {
+        highlightImagePage.widthInputField()
+            .clear()
+            .type(imageWidth);
+        steps.verifyEditTabWidthInputFieldValue(imageWidth);
+    },
+
+    /**
+     * @param {number} imageWidth width of the image
+     * @description this function verifies width input field value
+     */
+    verifyEditTabWidthInputFieldValue: (imageWidth) => {
+        highlightImagePage.widthInputField()
+            .should('have.value', imageWidth);
+    },
+
+    /**
+     * @param {number} index of highlight region
+     * @description this function verifies the numeration displayed for highlight regions
+     */
+    verifyHighlightNumerationSetCorrectAnswer: (index) => {
+        highlightImagePage.setCorrectAnswerSectionHighlight()
+            .eq(index)
+            .within(() => {
+                utilities.verifyTextContent(highlightImagePage.highlightNumeration(), index + 1);
+            });
+    },
+
+    /**
+     * @param {string} imageAlternativeText alternate input field
+     * @description this function enters and verifies text present in image alternative text input
+     */
+    addInputToImageAlternativeTextInputField: (imageAlternativeText) => {
+        highlightImagePage.imageAlternativeTextInputField()
+            .clear()
+            .type(imageAlternativeText);
+        steps.verifyImageAlternativeTextInputField(imageAlternativeText);
+    },
+
+    clearImageAlternativeTextInputField: () => {
+        highlightImagePage.imageAlternativeTextInputField()
+            .clear();
+        steps.verifyImageAlternativeTextInputField('');
+    },
+
+    /**
+     * @param {string} imageAlternativeText alternate input field
+     * @description this function verifies text present in image alternative text input
+     */
+    verifyImageAlternativeTextInputField: (imageAlternativeText) => {
+        highlightImagePage.imageAlternativeTextInputField()
+            .should('have.value', imageAlternativeText);
+    },
+
+    /**
+    * @param {number} index of region to be highlighted in set correct answer section
+    * @description this function verifies if the region is highlighted
+    */
+    verifySelectedHighlightRegionInPreviewTab: (index) => {
+        highlightImagePage.previewTabHighlight()
+            .eq(index)
+            .should('have.attr', 'aria-checked', 'true');
+    },
+
+    /**
+   * @param {number} index of highlight region
+   * @description this functions highlights a region in set correct answer section
+   */
+    highlightARegionInSetCorrectAnswerSection: (index) => {
+        highlightImagePage.setCorrectAnswerSectionHighlightPolygon()
+            .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) => {
+        highlightImagePage.setCorrectAnswerSectionHighlightPolygon()
+            .eq(index)
+            .click();
+        steps.verifyRegionIsNotHighlightedInSetCorrectAnswerSection(index);
+    },
+
+    /**
+     * @param {number} index of highlight region
+     * @description this functions highlights a region in preview tab
+     */
+    highlightARegionInPreviewTab: (index) => {
+        highlightImagePage.previewTabHighlightPolygon()
+            .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) => {
+        highlightImagePage.previewTabHighlightPolygon()
+            .eq(index)
+            .click();
+        steps.verifyRegionIsNotHighlighted(index)
+    },
+
+    /**
+     * @param {number} index of highlight region
+     * @description this function verifies if aa highlight region is not selected
+     */
+    verifyRegionIsNotHighlighted: (index) => {
+        highlightImagePage.previewTabHighlight()
+            .eq(index)
+            .should('have.attr', 'aria-checked', 'false');
+    },
+
+    /**
+    * @param {number} index of highlight region
+    * @description this function verifies if a highlight region is not selected
+    */
+    verifyRegionIsNotHighlightedInSetCorrectAnswerSection: (index) => {
+        highlightImagePage.setCorrectAnswerSectionHighlight()
+            .eq(index)
+            .should('have.attr', 'aria-checked', 'false');
+    },
+
+    checkMultipleSelectionCheckbox: () => {
+        highlightImagePage.multipleSelectionCheckbox()
+            .click()
+            .should('be.checked');
+    },
+
+    uncheckMultipleSelectionCheckbox: () => {
+        highlightImagePage.multipleSelectionCheckbox()
+            .click()
+            .should('not.be.checked');
+    },
+
+    //Scoring
+    /**
+     * @param {*} index of highlight region
+     * @description this function verifies the highlight region is correct
+     */
+    verifyCorrectHighlightRegion: (index) => {
+        utilities.verifyCSS(highlightImagePage.previewTabHighlightPolygon().eq(index), {
+            'fill': css.color.correctAnswerHighlightRegion,
+            'stroke': css.color.correctAnswer
+        });
+        highlightImagePage.previewTabHighlight()
+            .eq(index)
+            .within(() => {
+                utilities.verifyCSS(highlightImagePage.checkmarkCrossmarkIcon(), {
+                    'fill': css.color.correctAnswer
+                });
+            });
+    },
+
+    /**
+     * @param {*} index of highlight region
+     * @description this function verifies the highlight region is incorrect
+     */
+    verifyIncorrectHighlightRegion: (index) => {
+        utilities.verifyCSS(highlightImagePage.previewTabHighlightPolygon().eq(index), {
+            'fill': css.color.incorrectAnswerHighlightRegion,
+            'stroke': css.color.incorrectAnswer
+        });
+        highlightImagePage.previewTabHighlight()
+            .eq(index)
+            .within(() => {
+                utilities.verifyCSS(highlightImagePage.checkmarkCrossmarkIcon(), {
+                    'fill': css.color.incorrectAnswer
+                });
+            });
+    },
+
+    /**
+     * @param {*} index of highlight region
+     * @description this function verifies the highlight region is neither correct nor incorrect
+     */
+    verifyDefaultHighlightRegion: (index) => {
+        utilities.verifyCSS(highlightImagePage.previewTabHighlightPolygon().eq(index), {
+            'stroke': css.color.activeButtons
+        });
+    },
+
+    /**
+     * @param {number} index of highlight region
+     * @param {number} numeration numeration displayed beside the highlight region
+     * @description this function verifies the numeration displayed for highlight regions
+     */
+    verifyHighlightNumerationPreviewTab: (index, numeration) => {
+        highlightImagePage.previewTabHighlight()
+            .eq(index)
+            .within(() => {
+                utilities.verifyTextContent(highlightImagePage.highlightNumeration(), numeration);
+            });
+    },
+
+    eraseAHighlightRegion: (arrayOfCoordinates) => {
+        highlightImagePage.itemEraserTool()
+            .click();
+        highlightImagePage.highlighImageCanvas()
+            .then(($element) => {
+                const clientWidth = $element[0].clientWidth;
+                arrayOfCoordinates.forEach((coordinates) => {
+                    highlightImagePage.highlighImageCanvas()
+                        .click(coordinates[0] * clientWidth / 100, coordinates[1] * clientWidth / 100);
+                });
+            });
+    },
+
+    clickOnPenTool: () => {
+        highlightImagePage.penTool()
+            .click()
+            .blur();
+    },
+
+    clickOnUndoTool: () => {
+        highlightImagePage.undoTool()
+            .click()
+            .blur();
+    },
+
+    clickOnRedoTool: () => {
+        highlightImagePage.redoTool()
+            .click()
+            .blur();
+    },
+
+    clickOnClearAllTool: () => {
+        highlightImagePage.clearAllTool()
+            .click()
+            .blur();
+    },
+
+    /**
+     * @description verify count of highlight in set correct anser section
+     * @param {number} count count of the element
+     */
+    verifyHighlightRegionCountInSetCorrectAnswerSection: (count) => {
+        highlightImagePage.setCorrectAnswerSectionHighlight()
+            .should('have.length', count);
+    },
+
+    verifyCorrectAnswerContainerDoesNotExist: () => {
+        highlightImagePage.correctAnswerContainerLabel()
+            .should('not.exist');
+        highlightImagePage.correctAnswerContainerAnswerWrapper()
+            .should('not.exist');
+    },
+
+    /**
+     * @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) => {
+            highlightImagePage.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) => {
+            highlightImagePage.correctAnswerContainerAnswerWrapper()
+                .eq(index)
+                .should('have.text', optionsText);
+        });
+        steps.verifyCorrectAnswerContainerNumeration(numerationArray);
+    },
+
+    verifyCorrectIncorrectBorderNotVisible: () => {
+        highlightImagePage.correctIncorrectAnswerBorder()
+            .should('have.css', 'border')
+            .and('match', /0px none/);
+    },
+
+    verifyCorrectAttemptBorder: () => {
+        highlightImagePage.correctIncorrectAnswerBorder()
+            .should('have.css', 'border', `1px solid ${css.color.correctAnswer}`);
+    },
+
+    verifyIncorrectAttemptBorder: () => {
+        highlightImagePage.correctIncorrectAnswerBorder()
+            .should('have.css', 'border', `1px solid ${css.color.incorrectAnswer}`);
+    },
+
+    verifyQuestionPreviewStateWhenShowCorrectAnswerIsUnchecked: () => {
+        cy.log('After deselecting Show correct answer checkbox, the question preview should return to the previous state');
+        previewScoringAndShowCorrectAnswerComponent.showCorrectAnswerCheckbox()
+            .click()
+            .should('not.be.checked');
+        autoScoredPreviewBase.correctIncorectAnswerLabel()
+            .should('not.exist');
+        highlightImagePage.steps.verifyCorrectIncorrectBorderNotVisible();
+    },
+
+    /**
+     * @description verify count of highlight in set correct answer section
+     * @param {number} count count of the element
+     */
+    verifyHighlightRegionCountInPreviewTab: (count) => {
+        highlightImagePage.previewTabHighlight()
+            .should('have.length', count);
+    },
+
+    verifyCustomizeHighlightPropertiesCollapsedState: () => {
+        highlightImagePage.customizeHighlightPropertiesPanel()
+            .should('have.attr', 'aria-expanded', 'false');
+    },
+
+    expandCustomizeHighlightProperties: () => {
+        highlightImagePage.customizeHighlightPropertiesPanel()
+            .click()
+            .should('have.attr', 'aria-expanded', 'true');
+    },
+
+    /**
+     * @param {number} tabIndex index of the tab in customize highlight properties accordion
+     * @description this function verifies active state of the tab
+     */
+    verifyActiveStateOfCustomizeHighlightPropertiesTab: (tabIndex) => {
+        highlightImagePage.customizeHighlightPropertiesTab()
+            .eq(tabIndex)
+            .should('have.attr', 'aria-selected', 'true');
+    },
+
+    /**
+     * @param {number} tabIndex index of the tab in customize highlight properties accordion
+     * @description this function verifies Inactive state of the tab
+     */
+    verifyInactiveStateOfCustomizeHighlightPropertiesTab: (tabIndex) => {
+        highlightImagePage.customizeHighlightPropertiesTab()
+            .eq(tabIndex)
+            .should('have.attr', 'aria-selected', 'false');
+    },
+    /**
+     * @param {number} points points displayed in partial equal weights points per response
+     * @description Verify points displayed in partial equal weights points per response
+     */
+    verifyPartialEqualWeightsPointsPerResponseScore: (points) => {
+        highlightImagePage.partialEqualWeightsPointsPerResponseScore()
+            .verifyInnerText(`${points}`);
+    },
+
+    /**
+     * @param {number} index of points input field
+     * @param {number} points alloted in the points input field
+     * @description this function verifies the Options label and points input field
+     */
+    verifyPartialDifferentWeightsOptionLabelAndPoints: (index, points) => {
+        utilities.verifyInnerText(highlightImagePage.partialDifferentWeightsPointsOptionsLabel().eq(index), `Option ${index + 1}`);
+        highlightImagePage.pointsInputField()
+            .eq(index)
+            .should('have.value', points);
+        utilities.verifyElementVisibilityState(highlightImagePage.pointsInputField().eq(index), 'visible');
+    },
+
+    //TODO: Need to check if common function verifyPartialDifferentWeightsPointsInputFieldIsDisabled can be used once https://redmine.zeuslearning.com/issues/545223 is resolved
+    /**
+     * @param {number} index of points input field
+     * @description this function verifies if points field is disabled
+     */
+    verifyPartialDifferentWeightsPointsInputFieldDisabled: (index) => {
+        scoringSectionBase.pointsInputField()
+            .eq(index)
+            .should('be.disabled');
+    },
+
+    /**
+     * @param {number} index of points input field
+     * @description this function verifies if points field is enabled
+     */
+    verifyPartialDifferentWeightsPointsInputFieldEnabled: (index) => {
+        scoringSectionBase.pointsInputField()
+            .eq(index)
+            .should('be.enabled');
+    },
+
+    /**
+     * @param {number} imageWidth canvas maximum width input field
+     * @description this verifies input of canvas maximum width input field
+     */
+    verifyCanvasMaximumWidthInputField: (imageWidth) => {
+        highlightImagePage.canvasMaximumWidthInputField()
+            .should('have.value', imageWidth)
+    },
+
+    clearCanvasMaximumWidthInputField: () => {
+        highlightImagePage.canvasMaximumWidthInputField()
+            .clear()
+            .blur();
+    },
+
+    /**
+    * @param {number} imageWidth canvas maximum width input field
+    * @description this function adds input to canvas maximum width input field
+    */
+    addInputToCanvasMaximumWidthInputField: (imageWidth) => {
+        highlightImagePage.canvasMaximumWidthInputField()
+            .type(imageWidth)
+            .blur();
+        steps.verifyCanvasMaximumWidthInputField(imageWidth)
+    },
+
+    /**
+     * @param {number} imageHeight expected height of image
+     * @param {number} imageWidth expected width of image
+     * @description this function verifies height and width of image in set correct answer section
+     */
+    verifyHeightAndWidthOfImageInSetCorrectAnswerSection: (imageHeight, imageWidth) => {
+        highlightImagePage.setCorrectAnswerSectionImage()
+            .should('have.attr', 'height', imageHeight)
+            .and('have.attr', 'width', imageWidth);
+    },
+
+    /**
+     * @param {string} imageAlternativeText alternate text of image
+     * @description this function verifies the alt attribute of the image
+     */
+    verifyImageAlternativeTextOfImageInSetCorrectAnswerSection: (imageAlternativeText) => {
+        highlightImagePage.setCorrectAnswerSectionImage()
+            .should('have.attr', 'alt', imageAlternativeText);
+    },
+
+    /**
+     * @param {number} imageHeight expected height of image
+     * @param {number} imageWidth expected width of image
+     * @description this function verifies height and width of image in preview tab
+     */
+    verifyHeightAndWidthOfImageInPreviewTab: (imageHeight, imageWidth) => {
+        highlightImagePage.previewTabImage()
+            .should('have.attr', 'height', imageHeight)
+            .and('have.attr', 'width', imageWidth);
+    },
+
+    /**
+     * @param {string} imageAlternativeText alternate text of image
+     * @description this function verifies the alt attribute of the image
+     */
+    verifyImageAlternativeTextOfImageInPreviewTab: (imageAlternativeText) => {
+        highlightImagePage.previewTabImage()
+            .should('have.attr', 'alt', imageAlternativeText);
+    },
+
+    //Conditional checkboxes
+    verifyMultipleSelectionCheckboxIsUnchecked: () => {
+        highlightImagePage.multipleSelectionCheckbox()
+            .should('not.be.checked');
+    },
+
+    verifyHideHighlightsCheckboxIsUnchecked: () => {
+        highlightImagePage.hideHighlightsCheckbox()
+            .should('not.be.checked');
+    },
+
+    checkHideHighlightsCheckbox: () => {
+        highlightImagePage.hideHighlightsCheckbox()
+            .click()
+            .should('be.checked');
+    },
+
+    /**
+    * @param {number} index of highlight region
+    * @description this function hovers over highlight region
+    */
+    hoverOverHighlightRegionInSetCorrectSection: (index) => {
+        utilities.hoverOverElement(highlightImagePage.setCorrectAnswerSectionHighlightPolygon().eq(index));
+    },
+
+    /**
+     * @param {number} index of highlight region
+     * @description this function hovers over highlight region
+     */
+    hoverOverHighlightRegionInPreviewTab: (index) => {
+        utilities.hoverOverElement(highlightImagePage.previewTabHighlightPolygon().eq(index));
+    },
+
+    /**
+     * @param {number} index of highlight region
+     * @description this function verifies that the highlight region is visible
+     */
+    verifyHighlightRegionVisibleInSetCorrectAnswerSection: (index) => {
+        highlightImagePage.setCorrectAnswerSectionHighlightPolygon()
+            .eq(index)
+            .should('have.attr', 'fill-opacity', '40')
+            .and('have.attr', 'stroke-opacity', '100');
+    },
+
+    /**
+     * @param {number} index of highlight region
+     * @description this function verifies that the highlight region is visible
+     */
+    verifySelectedHighlightRegionVisibleInSetCorrectAnswerSection: (index) => {
+        highlightImagePage.setCorrectAnswerSectionHighlightPolygon()
+            .eq(index)
+            .should('have.attr', 'fill-opacity', '70')
+            .and('have.attr', 'stroke-opacity', '100');
+    },
+
+    /**
+     * @param {number} index of highlight region
+     * @description this function verifies that the highlight region is not visible
+     */
+    verifyHighlightRegionHiddenInSetCorrectAnswerSection: (index) => {
+        highlightImagePage.setCorrectAnswerSectionHighlightPolygon()
+            .eq(index)
+            .should('have.attr', 'fill-opacity', 'transparent')
+            .and('have.attr', 'stroke-opacity', 'transparent');
+    },
+
+    /**
+     * @param {number} index of highlight region
+     * @description this function verifies that the highlight region is visible
+     */
+    verifyHighlightRegionVisibleInPreviewTab: (index) => {
+        highlightImagePage.previewTabHighlightPolygon()
+            .eq(index)
+            .should('have.attr', 'fill-opacity', '40')
+            .and('have.attr', 'stroke-opacity', '100');
+    },
+
+    /**
+     * @param {number} index of highlight region
+     * @description this function verifies that the highlight region is visible
+     */
+    verifySelectedHighlightRegionVisibleInPreviewTab: (index) => {
+        highlightImagePage.previewTabHighlightPolygon()
+            .eq(index)
+            .should('have.attr', 'fill-opacity', '70')
+            .and('have.attr', 'stroke-opacity', '100');
+    },
+
+    /**
+     * @param {number} index of highlight region
+     * @description this function verifies that the highlight region is not visible
+     */
+    verifyHighlightRegionHiddenInPreviewTab: (index) => {
+        highlightImagePage.previewTabHighlightPolygon()
+            .eq(index)
+            .should('have.attr', 'fill-opacity', 'transparent')
+            .and('have.attr', 'stroke-opacity', 'transparent');
+    },
+
+    /**
+     * @param {string} fileFormat format of the uploaded file in the highlight region
+     * @description this function verifies the attribute of the image has the expected file format
+     */
+    verifyUploadedImageFormatInSetCorrectAnswerSection: (fileFormat) => {
+        highlightImagePage.setCorrectAnswerSectionImage()
+            .should(($element) => {
+                const hrefAttributeValue = $element.attr('href');
+                expect(hrefAttributeValue).to.include(fileFormat);
+            });
+    },
+
+    /**
+     * @param {string} fileFormat format of the uploaded file in the highlight region
+     * @description this function verifies the attribute of the image has the expected file format
+     */
+    verifyUploadedImageFormatInPreviewTab: (fileFormat) => {
+        highlightImagePage.previewTabImage()
+            .should(($element) => {
+                const hrefAttributeValue = $element.attr('href');
+                expect(hrefAttributeValue).to.include(fileFormat);
+            });
+    },
+
+    /**
+     * @param {number} count of tabs in customize highlight properties accordion
+     * @description this function verifies the count of tabs in customize highlight properties accordion
+     */
+    verifyCountOfCustomizePropertiesTab: (count) => {
+        utilities.verifyElementCount(highlightImagePage.customizeHighlightPropertiesTab(), count)
+    },
+
+    verifyResetToGlobalColorButtonEnabled: () => {
+        highlightImagePage.resetToGlobalColorButton()
+            .should('be.enabled');
+    },
+
+    verifyResetToGlobalColorButtonDisabled: () => {
+        highlightImagePage.resetToGlobalColorButton()
+            .should('be.disabled');
+    },
+
+    /**
+     * @param {string} text to enter in option label input field
+     * @description this function adds and verifies the text in option label input field
+     */
+    addAndVerifyTextInOptionLabelInputField: (text) => {
+        highlightImagePage.optionLabelInputField()
+            .type(text, { delay: 0 })
+            .blur()
+            .should('have.attr', 'value', text);
+    },
+
+    /**
+     * @param {string} text to enter in aria label input field
+     * @description this function adds and verifies the text in aria label input field
+     */
+    addAndVerifyTextInAriaLabelInputField: (text) => {
+        highlightImagePage.ariaLabelInputField()
+            .type(text, { delay: 0 })
+            .blur()
+            .should('have.attr', 'value', text);
+    },
+
+    /**
+    * @param {number} index of the option tab
+    * @description this function verifies that option tab is displayed
+    */
+    verifyOptionTabIsDisplayed: (index) => {
+        utilities.verifyInnerText(highlightImagePage.customizeHighlightPropertiesTab().eq(index), `Option ${index}`);
+        utilities.verifyElementVisibilityState(highlightImagePage.customizeHighlightPropertiesTab().eq(index), 'visible');
+    },
+
+    /**
+    * @param {number} tabIndex of the option tab to navigate
+    * @description this function navigates to option tab
+    */
+    navigateToOptionTab: (tabIndex) => {
+        highlightImagePage.customizeHighlightPropertiesTab().eq(tabIndex)
+            .click();
+    },
+
+    navigateToGlobalTab: () => {
+        highlightImagePage.customizeHighlightPropertiesTab().eq(0)
+            .click();
+    },
+
+    verifyHighlightColorLabelIsDisplayed: () => {
+        highlightImagePage.highlightColorLabel()
+            .invoke('text')
+            .then(text => {
+                const highlightColorLabel = text.split('R')[0];
+                expect(highlightColorLabel).to.deep.eq('Highlight color');
+            });
+        utilities.verifyElementVisibilityState(highlightImagePage.highlightColorLabel(), 'visible');
+    },
+
+    /**
+     * @param {string} highlightColorBlock 'defaultFillColor' | 'defaultBorderColor' | 'hoverFillColor' | 'hoverBorderColor' | 'activeFillColor' | 'activeBorderColor'
+     * @description this function clicks on the highlight color block
+     */
+    clickOnHighlightColorBlock: (highlightColorBlock) => {
+        switch (highlightColorBlock) {
+            case 'defaultFillColor':
+                highlightImagePage.defaultFillColorBlock()
+                    .click();
+                break;
+            case 'defaultBorderColor':
+                highlightImagePage.defaultBorderColorBlock()
+                    .click();
+                break;
+            case 'hoverFillColor':
+                highlightImagePage.hoverFillColorBlock()
+                    .click();
+                break;
+            case 'hoverBorderColor':
+                highlightImagePage.hoverBorderColorBlock()
+                    .click();
+                break;
+            case 'activeFillColor':
+                highlightImagePage.activeFillColorBlock()
+                    .click();
+                break;
+            case 'activeBorderColor':
+                highlightImagePage.activeBorderColorBlock()
+                    .click();
+                break;
+            default:
+                throw new Error('Invalid highlight color block');
+        }
+    },
+
+    /**
+    * @param {number} index of highlight region
+    * @param {string} fillColor of highlight region
+    * @param {string} fillOpacity of highlight region
+    * @description this function verifies default state fill color and opacity of a highlight region in set correct answer section
+    */
+    verifyDefaultFillColorOfHighlightRegionInSetCorrectAnswerSection: (index, fillColor, fillOpacity) => {
+        highlightImagePage.setCorrectAnswerSectionHighlightFillColor()
+            .eq(index)
+            .should('have.css', 'fill', fillColor)
+            .and('have.css', 'fill-opacity', fillOpacity);
+    },
+
+    /**
+    * @param {number} index of highlight region
+    * @param {string} fillColor of highlight region
+    * @param {string} fillOpacity of highlight region
+    * @description this function verifies default state fill color and opacity of a highlight region in preview tab
+    */
+    verifyDefaultFillColorOfHighlightRegionInPreviewTab: (index, fillColor, fillOpacity) => {
+        highlightImagePage.previewTabHighlightFillColor()
+            .eq(index)
+            .should('have.css', 'fill', fillColor)
+            .and('have.css', 'fill-opacity', fillOpacity);
+    },
+
+    /**
+    * @param {number} index of highlight region
+    * @param {string} borderColor of highlight region
+    * @param {string} borderOpacity of highlight region
+    * @description this function verifies default state border color and opacity of a highlight region in set correct answer section
+    */
+    verifyDefaultBorderColorOfHighlightRegionInSetCorrectAnswerSection: (index, borderColor, borderOpacity) => {
+        highlightImagePage.setCorrectAnswerSectionHighlightPolygon()
+            .eq(index)
+            .should('have.css', 'stroke', borderColor)
+            .and('have.css', 'stroke-opacity', borderOpacity);
+    },
+
+    /**
+    * @param {number} index of highlight region
+    * @param {string} borderColor of highlight region
+    * @param {string} borderOpacity of highlight region
+    * @description this function verifies default state border color and opacity of a highlight region in preview tab
+    */
+    verifyDefaultBorderColorOfHighlightRegionInPreviewTab: (index, borderColor, borderOpacity) => {
+        highlightImagePage.previewTabHighlightPolygon()
+            .eq(index)
+            .should('have.css', 'stroke', borderColor)
+            .and('have.css', 'stroke-opacity', borderOpacity);
+    },
+
+    /**
+    * @param {number} index of highlight region
+    * @param {string} fillColor of highlight region
+    * @param {string} fillOpacity of highlight region
+    * @description this function verifies hover state fill color and opacity of a highlight region in set correct answer section
+    */
+    verifyHoverFillColorOfHighlightRegionInSetCorrectAnswerSection: (index, fillColor, fillOpacity) => {
+        utilities.hoverOverElement(highlightImagePage.setCorrectAnswerSectionHighlightPolygon().eq(index));
+        highlightImagePage.setCorrectAnswerSectionHighlightFillColor()
+            .eq(index)
+            .should('have.css', 'fill', fillColor)
+            .and('have.css', 'fill-opacity', fillOpacity);
+        utilities.hoverAwayFromElement(highlightImagePage.setCorrectAnswerSectionHighlightPolygon().eq(index));
+    },
+
+    /**
+    * @param {number} index of highlight region
+    * @param {string} fillColor of highlight region
+    * @param {string} fillOpacity of highlight region
+    * @description this function verifies hover state fill color and opacity of a highlight region in preview tab
+    */
+    verifyHoverFillColorOfHighlightRegionInPreviewTab: (index, fillColor, fillOpacity) => {
+        utilities.hoverOverElement(highlightImagePage.previewTabHighlightPolygon().eq(index));
+        highlightImagePage.previewTabHighlightFillColor()
+            .eq(index)
+            .should('have.css', 'fill', fillColor)
+            .and('have.css', 'fill-opacity', fillOpacity);
+        utilities.hoverAwayFromElement(highlightImagePage.previewTabHighlightPolygon().eq(index));
+    },
+
+    /**
+    * @param {number} index of highlight region
+    * @param {string} borderColor of highlight region
+    * @param {string} borderOpacity of highlight region
+    * @description this function verifies hover state border color and opacity of a highlight region in set correct answer section
+    */
+    verifyHoverBorderColorOfHighlightRegionInSetCorrectAnswerSection: (index, borderColor, borderOpacity) => {
+        utilities.hoverOverElement(highlightImagePage.setCorrectAnswerSectionHighlightPolygon().eq(index));
+        highlightImagePage.setCorrectAnswerSectionHighlightPolygon()
+            .eq(index)
+            .should('have.css', 'stroke', borderColor)
+            .and('have.css', 'stroke-opacity', borderOpacity);
+        utilities.hoverAwayFromElement(highlightImagePage.setCorrectAnswerSectionHighlightPolygon().eq(index));
+    },
+
+    /**
+    * @param {number} index of highlight region
+    * @param {string} borderColor of highlight region
+    * @param {string} borderOpacity of highlight region
+    * @description this function verifies hover state border color and opacity of a highlight region in preview tab
+    */
+
+    verifyHoverBorderColorOfHighlightRegionInPreviewTab: (index, borderColor, borderOpacity) => {
+        utilities.hoverOverElement(highlightImagePage.previewTabHighlightPolygon().eq(index));
+        highlightImagePage.previewTabHighlightPolygon()
+            .eq(index)
+            .should('have.css', 'stroke', borderColor)
+            .and('have.css', 'stroke-opacity', borderOpacity);
+        utilities.hoverAwayFromElement(highlightImagePage.previewTabHighlightPolygon().eq(index));
+    },
+
+    /**
+    * @param {number} index of highlight region
+    * @param {string} fillColor of highlight region
+    * @param {string} fillOpacity of highlight region
+    * @description this function verifies active state fill color and opacity of a highlight region in set correct answer section
+    */
+    verifyActiveFillColorOfHighlightRegionInSetCorrectAnswerSection: (index, fillColor, fillOpacity) => {
+        highlightImagePage.steps.highlightARegionInSetCorrectAnswerSection(index);
+        highlightImagePage.setCorrectAnswerSectionHighlightFillColor()
+            .eq(index)
+            .should('have.css', 'fill', fillColor)
+            .and('have.css', 'fill-opacity', fillOpacity);
+        highlightImagePage.steps.removeHighlightOfARegionInSetCorrectAnswerSection(index);
+    },
+
+    /**
+    * @param {number} index of highlight region
+    * @param {string} fillColor of highlight region
+    * @param {string} fillOpacity of highlight region
+    * @description this function verifies active state fill color and opacity of a highlight region in preview tab
+    */
+    verifyActiveFillColorOfHighlightRegionInPreviewTab: (index, fillColor, fillOpacity) => {
+        highlightImagePage.steps.highlightARegionInPreviewTab(index);
+        highlightImagePage.previewTabHighlightFillColor()
+            .eq(index)
+            .should('have.css', 'fill', fillColor)
+            .and('have.css', 'fill-opacity', fillOpacity);
+        highlightImagePage.steps.removeHighlightOfARegionInPreviewTab(index);
+    },
+
+    /**
+    * @param {number} index of highlight region
+    * @param {string} borderColor of highlight region
+    * @param {string} borderOpacity of highlight region
+    * @description this function verifies active state border color and opacity of a highlight region in set correct answer section
+    */
+    verifyActiveBorderColorOfHighlightRegionInSetCorrectAnswerSection: (index, borderColor, borderOpacity) => {
+        highlightImagePage.steps.highlightARegionInSetCorrectAnswerSection(index);
+        highlightImagePage.setCorrectAnswerSectionHighlightPolygon()
+            .eq(index)
+            .should('have.css', 'stroke', borderColor)
+            .and('have.css', 'stroke-opacity', borderOpacity);
+        highlightImagePage.steps.removeHighlightOfARegionInSetCorrectAnswerSection(index);
+    },
+
+    /**
+    * @param {number} index of highlight region
+    * @param {string} borderColor of highlight region
+    * @param {string} borderOpacity of highlight region
+    * @description this function verifies active state border color and opacity of a highlight region in preview tab
+    */
+    verifyActiveBorderColorOfHighlightRegionInPreviewTab: (index, borderColor, borderOpacity) => {
+        highlightImagePage.steps.highlightARegionInPreviewTab(index);
+        highlightImagePage.previewTabHighlightPolygon()
+            .eq(index)
+            .should('have.css', 'stroke', borderColor)
+            .and('have.css', 'stroke-opacity', borderOpacity);
+        highlightImagePage.steps.removeHighlightOfARegionInPreviewTab(index);
+    },
+
+    clickOnResetToGlobalColorButton: () => {
+        highlightImagePage.resetToGlobalColorButton()
+            .click();
+    },
+
+    verifyHideHighlightsCheckboxIsChecked: () => {
+        highlightImagePage.hideHighlightsCheckbox()
+            .should('be.checked');
+    },
+
+    checkApplyPatternOnActiveStateCheckbox: () => {
+        highlightImagePage.applyPatternOnActiveStateCheckbox()
+            .click()
+            .should('be.checked');
+    },
+
+    uncheckApplyPatternOnActiveStateCheckbox: () => {
+        highlightImagePage.applyPatternOnActiveStateCheckbox()
+            .click()
+            .should('not.be.checked');
+    },
+
+    //TODO: Need to update script after https://redmine.zeuslearning.com/issues/518498 is resolved
+    /**
+    * @param {number} index of highlight region
+    * @description this function verifies that active pattern is displayed on the highlight region in Set correct answer section
+    */
+    verifyActivePatternIsDisplayedOnHighlightRegionInSetCorrectAnswerSection: (index) => {
+        highlightImagePage.setCorrectAnswerSectionHighlightActivePattern()
+            .eq(index)
+            .should('exist');
+    },
+
+    /**
+    * @param {number} index of highlight region
+    * @description this function verifies that active pattern is displayed on the highlight region in Preview tab
+    */
+    verifyActivePatternIsDisplayedOnHighlightRegionInPreviewTab: (index) => {
+        highlightImagePage.previewTabHighlightActivePattern()
+            .eq(index)
+            .should('exist');
+    },
+
+    /**
+    * @param {number} index of highlight region
+    * @description this function verifies that active pattern is not displayed on the highlight region in Set correct answer section
+    */
+    verifyActivePatternIsNotDisplayedOnHighlightRegionInSetCorrectAnswerSection: (index) => {
+        highlightImagePage.setCorrectAnswerSectionHighlightActivePattern()
+            .eq(index)
+            .should('not.exist');
+    },
+
+    /**
+    * @param {number} index of highlight region
+    * @description this function verifies that active pattern is not displayed on the highlight region in Preview Tab
+    */
+    verifyActivePatternIsNotDisplayedOnHighlightRegionInPreviewTab: (index) => {
+        highlightImagePage.previewTabHighlightActivePattern()
+            .eq(index)
+            .should('not.exist');
+    }
+}
+
+const tests = {
+    ...questionInstructionsComponent.tests,
+    ...autoScoredScoringSection.tests,
+    ...previewScoringAndShowCorrectAnswerComponent.tests,
+    ...commonComponents.tests,
+    ...scoringSectionBase.tests,
+    ...autoScoredScoringSectionMultipleResponsesType.tests,
+    ...autoScoredSetCorrectAnswerSection.tests,
+    ...additionalSettingsPanel.tests,
+    ...answerNumerationComponent.tests,
+    ...autoScoredAdditionalSettings.tests,
+    ...createQuestionBasePage.tests,
+    /**
+     * 
+     * @param {number} totalPoints total points scored by user
+     * @description this verifies the minimum score functionality when user attempts the question incorrectly
+     */
+    verifyMinimumScoreAwardedIfAttemptedFunctionalityForIncorrectAnswer: (totalPoints) => {
+        it('When user has provided minimum score awarded (if attempted) points, then in Preview tab on entering incorrect answer, minimum score should be provided for the question', () => {
+            cy.log('Switch to edit tab and set minimum score if attempted points')
+            createQuestionBasePage.steps.switchToEditTab();
+            scoringSectionBase.steps.allotMinimumScoreAwardedIfAttempted('1')
+            createQuestionBasePage.steps.switchToPreviewTab()
+            highlightImagePage.steps.highlightARegionInPreviewTab(2);
+            previewScoringAndShowCorrectAnswerComponent.steps.verifyPreviewTabScoreText(1, `${totalPoints}`)
+        });
+
+        it('When user removes minimum score awarded (if attempted) points, then in Preview tab on selecting any options other than correct answers, points should not be provided', () => {
+            cy.log('Switch to edit tab and remove minimum score if attempted points')
+            createQuestionBasePage.steps.switchToEditTab();
+            scoringSectionBase.steps.clearMinimumScoreIfAttemptedPointsField();
+            createQuestionBasePage.steps.switchToPreviewTab();
+            highlightImagePage.steps.highlightARegionInPreviewTab(2);
+            previewScoringAndShowCorrectAnswerComponent.steps.verifyPreviewTabScoreText(0, `${totalPoints}`)
+        });
+    },
+
+    /**
+     * 
+     * @param {number} scoredPoints the points scored by the user when penalty points are reduced
+     * @param {number} totalPoints the maximum points that can be scored by the user
+     * @description this function verifies the functionality of Penalty points when minimum points are not set and user attempts incorrect answer
+     */
+    verifyPenaltyPointsFunctionalityForIncorrectAnswer: (scoredPoints, totalPoints) => {
+        it('When user has defined penalty points', () => {
+            cy.log('Pre-step: Switch to edit tab and set penalty points');
+            createQuestionBasePage.steps.switchToEditTab();
+            autoScoredScoringSectionMultipleResponsesType.steps.allotPenaltyPoints(3)
+
+            cy.log('After switching to preview tab, when user adds an incorrect answer input, then 0 points should be awarded(no negative points)');
+            createQuestionBasePage.steps.switchToPreviewTab();
+            highlightImagePage.steps.highlightARegionInPreviewTab(2);
+            highlightImagePage.steps.verifyPreviewTabScoreText(0, `${totalPoints}`)
+
+            cy.log('When user adds a partially correct answer input, the points should be updated accordingly with deducted penalty points');
+            createQuestionBasePage.steps.resetQuestionPreview()
+            highlightImagePage.steps.highlightARegionInPreviewTab(0);
+            highlightImagePage.steps.highlightARegionInPreviewTab(2);
+            highlightImagePage.steps.verifyPreviewTabScoreText(`${scoredPoints}`, `${totalPoints}`);
+
+            cy.log('Post step: Clearing the Penalty points field')
+            createQuestionBasePage.steps.switchToEditTab();
+            autoScoredScoringSectionMultipleResponsesType.penaltyPointsInputField()
+                .clear();
+        });
+    },
+
+    /**
+    * @param {number[]} scoredPointsArray An array of numbers representing points scored in different cases.
+    *   - The first element represents points scored for incorrect answers.
+    *   - The second element represents points scored for partially correct answers.
+    *   - The third element represents points scored when minimum score awarded (if attempted) points is greater than the points achieved by attempting the question partially correct
+    * @param {number} minimumPointsForPartialCorrectAnswers minimum score awarded (if attempted) points on attempting the question partially correct
+    * @param {number} totalPoints the maximum points that can be achieved by the user
+    * @description this function verifies the functionality of Minimum score if attempted points when penalty points are set and user attempts incorrect answer
+    * - For all incorrect responses
+    * - For partially correct responses, when points scored > minimum score awarded(if attempted) points
+    * - For partially correct responses, when minimum score awarded(if attempted) points > points scored
+    */
+    verifyMinimumScoreIfAttemptedAndPenaltyPointsFunctionalityForIncorrectAnswer: (scoredPointsArray, minimumPointsForPartialCorrectAnswers, totalPoints) => {
+        it('When user has defined both penalty points and minimum score awarded (if attempted) points', () => {
+            cy.log('Pre-step: Switch to edit tab and set minimum score awarded (if attempted) points and Penalty points');
+            createQuestionBasePage.steps.switchToEditTab();
+            scoringSectionBase.steps.allotMinimumScoreAwardedIfAttempted(1);
+            autoScoredScoringSectionMultipleResponsesType.steps.allotPenaltyPoints(3);
+
+            cy.log('Switch to preview tab and give incorrect answer input to check that minimum points are displayed');
+            createQuestionBasePage.steps.switchToPreviewTab();
+            highlightImagePage.steps.highlightARegionInPreviewTab(2);
+            highlightImagePage.steps.verifyPreviewTabScoreText(`${scoredPointsArray[0]}`, `${totalPoints}`);
+
+            cy.log('When user adds a partially correct answer such that the points of the attempt(with penalty points deducted) is more than the minimum score awarded(if attempted) points');
+            createQuestionBasePage.steps.resetQuestionPreview();
+            highlightImagePage.steps.highlightARegionInPreviewTab(0);
+            highlightImagePage.steps.highlightARegionInPreviewTab(2);
+            highlightImagePage.steps.verifyPreviewTabScoreText(`${scoredPointsArray[1]}`, `${totalPoints}`);
+
+            cy.log('When user switches to edit tab and increases the minimum score awarded (if attempted) points to check the case for an attempt in which points of the attempt is less than minimum score awarded (if attempted) points, then the minimum score awarded (if attempted) points should be displayed to the user');
+            createQuestionBasePage.steps.switchToEditTab();
+            scoringSectionBase.steps.clearMinimumScoreIfAttemptedPointsField()
+            scoringSectionBase.steps.allotMinimumScoreAwardedIfAttempted(minimumPointsForPartialCorrectAnswers)
+            cy.log('Switching to preview tab');
+            createQuestionBasePage.steps.switchToPreviewTab();
+            highlightImagePage.steps.highlightARegionInPreviewTab(0);
+            highlightImagePage.steps.verifyPreviewTabScoreText(`${scoredPointsArray[2]}`, `${totalPoints}`);
+        });
+    },
+
+    /**
+     * @param {string} scoringType scoring type 'All or nothing| Partial equal weights| Partial different weights'
+     * @description this function verifies the contents of Set correct answer section for different scoring types
+     */
+    verifyResponseContentsOfSetCorrectAnswerSection: () => {
+        it(`When user has selected a scoring type then the uploaded image with highlight regions should be displayed in the set correct answer section`, () => {
+            highlightImagePage.steps.verifyImageUploadedInSetCorrectAnswerSection();
+            utilities.verifyElementCount(highlightImagePage.setCorrectAnswerSectionHighlightPolygon(), 3);
+            highlightImagePage.steps.verifyRegionIsNotHighlightedInSetCorrectAnswerSection(0);
+            highlightImagePage.steps.verifyRegionIsNotHighlightedInSetCorrectAnswerSection(1);
+            highlightImagePage.steps.verifyRegionIsNotHighlightedInSetCorrectAnswerSection(2);
+        });
+    }
+}
+
+export const highlightImagePage = {
+    ...selectors,
+    steps,
+    tests
+}