itemengine-cypress-automation 1.0.200-23rdMayUpdates-264dc55.0 → 1.0.201-28thMayRepoUpdate-e720349.0

package/cypress/pages/imageHighlightPage.js

@@ -1,5 +1,5 @@
 import utilities from "../support/helpers/utilities";
-import { autoScoredScoringPreviewTab, autoScoredScoringSectionMultiResponseType, autoScoredSpecifyCorrectAnswerSection, autoScoredStudentViewSettings, backgroundImageUploadComponent, commonComponents, createQuestionBasePage, enableOuterBorderComponent, imageCanvasComponent, questionInstructionsComponent, scoringSectionBaseEditTab, singleMultipleSelectionModeComponent } from "./components"
+import { additionalSettingsAccessibilitySectionComponent, additionalSettingsPanel, autoScoredScoringPreviewTab, autoScoredScoringSectionMultiResponseType, autoScoredSpecifyCorrectAnswerSection, autoScoredStudentViewSettings, backgroundImageUploadComponent, commonComponents, createQuestionBasePage, enableOuterBorderComponent, gradingViewEnumerationComponent, imageActionsComponent, imageCanvasComponent, questionInstructionsComponent, scoringSectionBaseEditTab, showAvailableOptionsToStudents, showStudentMaximumNumberOfPossibleSelections, singleMultipleSelectionModeComponent } from "./components"
 const css = Cypress.env('css');
 let imageWidth = 768;
 let imageHeight = 432;
@@ -10,8 +10,19 @@ const selectors = {
     ...autoScoredSpecifyCorrectAnswerSection,
     ...commonComponents,
     ...enableOuterBorderComponent,
+    ...showAvailableOptionsToStudents,
+    ...showStudentMaximumNumberOfPossibleSelections,
     ...autoScoredScoringPreviewTab,
-
+    ...imageCanvasComponent,
+    ...imageActionsComponent,
+    ...additionalSettingsPanel,
+    ...gradingViewEnumerationComponent,
+
+    //Image  selection style section.
+    imageSelectionStyleLabel: () => cy.get('.options-label'),
+    filledInToggleButton: () => cy.get('[data-ngie-testid="filled-in-toggle-button"]'),
+    outlineToggleButton: () => cy.get('[data-ngie-testid="outline-toggle-button"]'),
+    patternToggleButton: () => cy.get('[data-ngie-testid="pattern-toggle-button"]'),
     //Specify possible options
     specifyPossibleOptionsImageWrapper: () => cy.get('.drawing-tool__wrapper .drawing-tool__canvas'),
     specifyPossibleOptionsImageCanvas: () => cy.get('.drawing-tool__wrapper .upper-canvas'),
@@ -22,17 +33,26 @@ const selectors = {
     redoTool: () => cy.get('.drawing-tool__button-redo'),
     clearAllTool: () => cy.get('.drawing-tool__button-clearAll'),
     optionCount: () => cy.get('[class*="HighlightImagestyles__HighlightCountWrapper"]'),
+    specifyPossibleOptionsLabel: () => cy.get('[class*="HighlightImagestyles__HighlightImageLabel"]'),
+    clearAllPopupHeading: () => cy.get('.drawing-tool__delete-popup__heading'),
+    clearAllPopupDescription: () => cy.get('.drawing-tool__delete-popup__body'),
+    cancelButton: () => cy.get('.cancel-button'),
+    clearAllButton: () => cy.get('.clear-button'),
+    specifyPossibleOptionsToolbar: () => cy.get('.drawing-tool__toolbar'),
     //Specify correct answer section
-    specifyCorrectAnswerSectionImage: () => cy.get('.highlight-svg-responseive image'),
+    specifyCorrectAnswerSectionImage: () => cy.get('.ngie-accordion .highlight-svg-responseive image'),
     specifyCorrectAnswerSectionHighlight: () => cy.get('.ngie-accordion [class*="HighlightImageControlstyles__ShapeWrapper"] a'),
     specifyCorrectAnswerSectionHighlightPolygon: () => cy.get('[class*="HighlightImageControlstyles__PolygonWrapper"]'),
     highlightNumerationSpecifyCorrectAnswer: () => cy.get('[class*="__TspanWrapper"]:visible'),
     partialEqualWeightsPointsPerResponseScore: () => cy.get('.alternate-points-points-per-value-span'),
+    specifyCorrectAnswerSectionPatternPolygon: () => cy.get('[class*="HighlightImageControlstyles__LinkWrapper"]'),
+    specifyCorrectAnswerDiamondPattern: () => cy.get('[class*="HighlightImageControlstyles__DiamondPattern"]'),
     //preview tab
     imagePreviewTab: () => cy.get('[class*="question-preview-wrapper"] .highlight-svg-responseive image'),
     imagePreviewTabWrapper: () => cy.get('[class*="question-preview-wrapper"] .highlight-svg-wrapper'),
     highlightPreviewTab: () => cy.get('[class*="question-preview-wrapper"] [class*="HighlightImageControlstyles__ShapeWrapper"] a'),
     highlightPolygonPreviewTab: () => cy.get('[class*="question-preview-wrapper"] [class*="HighlightImageControlstyles__PolygonWrapper"]'),
+    previewSectionPatterntPolygon: () => cy.get('[class*="HighlightImageControlstyles__LinkWrapper"]'),
     checkMarkIcon: () => cy.get('.correct-option-icon [data-name*="Rectangle"]'),
     crossMarkIcon: () => cy.get('.incorrect-option-icon [data-name*="Rectangle"]'),
     correctAnswersLabel: () => cy.get('[class*="__AnswerLabel"]'),
@@ -41,7 +61,16 @@ const selectors = {
     correctAnswerNumeration: () => cy.get('[class*="CellIndexWrapper"]'),
     correctIncorrectAnswerTextWrapper: () => cy.get('[class*="_CorrectIncorrectWrapper"]'),
     incorrectIcon: () => cy.get('[data-icon="Incorrect"]'),
-    correctIcon: () => cy.get('[data-icon="CorrectAnswer"]')
+    correctIcon: () => cy.get('[data-icon="CorrectAnswer"]'),
+    //Additional settings
+    descriptorsAccordion: () => cy.get('.descriptor-wrapper .MuiAccordionSummary-root'),
+    descriptorsHeading: () => cy.get('[class*="Descriptorsstyles__AddToolsHeading"]'),
+    descriptorsInfoIcon: () => cy.get('[class*="Descriptorsstyles__InfoIconWrapper"]'),
+    descriptorsInputField: () => cy.get('.option-without-ckeditor input'),
+    descriptorsInputFieldNumeration: () => cy.get('.descriptor-wrapper .MuiInputAdornment-positionStart'),
+    ariaLabelInputField: () => cy.get('input[placeholder*="Enter ARIA label"]'),
+    inputFieldNumeration: () => cy.get('.MuiInputAdornment-root'),
+    ariaLabelSectionLabel: () => cy.get('[class*="styles__LabelWrapper"]').contains('ARIA'),
 }
 
 const steps = {
@@ -56,8 +85,24 @@ const steps = {
     ...autoScoredSpecifyCorrectAnswerSection.steps,
     ...autoScoredScoringSectionMultiResponseType.steps,
     ...enableOuterBorderComponent.steps,
+    ...showAvailableOptionsToStudents.steps,
+    ...showStudentMaximumNumberOfPossibleSelections.steps,
+    ...additionalSettingsPanel.steps,
+    ...gradingViewEnumerationComponent.steps,
 
     //Specify possible options
+    verifyToolbarDisabled: () => {
+        imageHighlightPage.specifyPossibleOptionsToolbar()
+            .parents('.drawing-tool__wrapper--disabled')
+            .should('exist');
+    },
+
+    verifyToolbarNotDisabled: () => {
+        imageHighlightPage.specifyPossibleOptionsToolbar()
+            .parent()
+            .should('not.have.class', '.drawing-tool__wrapper--disabled');
+    },
+
     clickOnFreeformTool: () => {
         imageHighlightPage.freeformTool()
             .click()
@@ -79,7 +124,16 @@ const steps = {
     clickOnClearAllTool: () => {
         imageHighlightPage.clearAllTool()
             .click()
-            .blur();
+    },
+
+    clickOnClearAllButton: () => {
+        imageHighlightPage.clearAllButton()
+            .click();
+    },
+
+    clickOnCancelAllButton: () => {
+        imageHighlightPage.cancelButton()
+            .click();
     },
 
     verifyImageUploadedInSpecifyPossibleOptionsSection: () => {
@@ -157,7 +211,233 @@ const steps = {
             .should('not.have.class', 'drawing-tool__button--active');
     },
 
+    verifyCanvasImageTopLeftAligned: () => {
+        imageHighlightPage.specifyPossibleOptionsImageCanvas()
+            .should('have.css', 'top', '0px')
+            .and('have.css', 'left', '0px');
+    },
+
+    verifyCanvasImageCenterAligned: () => {
+        imageHighlightPage.specifyPossibleOptionsImageCanvas()
+            .should('not.have.css', 'top', '0px')
+            .and('not.have.css', 'left', '0px');
+    },
+
+    verifyCanvasImageTopRightAligned: () => {
+        imageHighlightPage.specifyPossibleOptionsImageCanvas()
+            .should('have.css', 'top', '0px')
+            .and('not.have.css', 'left', '0px');
+    },
+
+    /**
+   * @param {number} value holds opacity value for image
+   * @description function verifies opacity value for image
+   */
+    verifyOpacityValueForCanvasImage: (value) => {
+        imageHighlightPage.specifyPossibleOptionsImageCanvas()
+            .should('have.attr', 'opacity', value / 100);
+    },
+
+    verifyImageFitsToCanvas: () => {
+        imageHighlightPage.canvasWidthInputField()
+            .invoke('attr', 'value')
+            .then((value) => {
+                imageHighlightPage.specifyPossibleOptionsImageCanvas()
+                    .should('have.css', 'width', `${value}px`);
+            });
+    },
+
+    verifyImageDoesNotFitToCanvas: () => {
+        imageHighlightPage.canvasWidthInputField()
+            .invoke('attr', 'value')
+            .then(($element) => {
+                imageHighlightPage.specifyPossibleOptionsImageCanvas()
+                    .should('not.have.css', 'width', `${$element}px`);
+            });
+    },
+
+    /**
+     * @param {*} width width of canvas
+     * @description this function verifies width of canvas
+     */
+    verifyCanvasWidth: (width) => {
+        const tolerance = 2
+        imageHighlightPage.specifyPossibleOptionsImageCanvas()
+            .should('have.attr', 'width', width - tolerance);
+    },
+
+    /**
+     * @param {*} height height of canvas
+     * @description this function verifies height of canvas
+     */
+    verifyCanvasHeight: (height) => {
+        const tolerance = 2
+        imageHighlightPage.specifyPossibleOptionsImageCanvas()
+            .should('have.css', 'height')
+            .then(($cssHeight) => {
+                const actualHeight = parseFloat($cssHeight);
+                expect(actualHeight).to.be.closeTo(height, tolerance);
+            });
+    },
+
+    /**
+    * @param {string} text alternative text for canvas image
+    * @description this function verifies text for canvas image
+    */
+    verifyImageAltTextSpecifyPossibleOptionsImageCanvas: (text) => {
+        imageHighlightPage.specifyPossibleOptionsImageCanvas()
+            .parents('.drawing-tool__wrapper')
+            .find('.lower-canvas')
+            .should('have.attr', 'aria-label', text);
+    },
+
+    verifyNoImageAltTextSpecifyPossibleOptionsImageCanvas: () => {
+        imageHighlightPage.specifyPossibleOptionsImageCanvas()
+            .parents('.drawing-tool__wrapper')
+            .find('.lower-canvas')
+            .should('have.attr', 'aria-label', 'Image');
+    },
+
     //Specify correct answer section
+    /**
+    * @param {string} text alternative text for canvas image
+    * @description this function verifies text for canvas image
+    */
+    verifyImageAltTextSpecifyCorrectAnswerImageCanvas: (text) => {
+        imageHighlightPage.specifyCorrectAnswerSectionImage()
+            .should('have.attr', 'alt', text);
+    },
+
+    verifyNoImageAltTextSpecifyCorrectAnswerImageCanvas: () => {
+        imageHighlightPage.specifyCorrectAnswerSectionImage()
+            .should('have.attr', 'alt', '');
+    },
+
+    verifyCanvasImageTopLeftAlignedSpecifyCorrectAnswer: () => {
+        imageHighlightPage.specifyCorrectAnswerSectionImage()
+            .should('have.css', 'top', '0px')
+            .and('have.css', 'left', '0px');
+    },
+
+    verifyCanvasImageCenterAlignedSpecifyCorrectAnswer: () => {
+        imageHighlightPage.specifyCorrectAnswerSectionImage()
+            .should('not.have.css', 'top', '0px')
+            .and('not.have.css', 'left', '0px');
+    },
+
+    verifyCanvasImageTopRightAlignedSpecifyCorrectAnswer: () => {
+        imageHighlightPage.specifyCorrectAnswerSectionImage()
+            .should('have.css', 'top', '0px')
+            .and('not.have.css', 'left', '0px');
+    },
+
+    /**
+   * @param {number} value holds opacity value for image
+   * @description function verifies opacity value for image
+   */
+    verifyOpacityValueForCanvasImageSpecifyCorrectAnswer: (value) => {
+        imageHighlightPage.specifyCorrectAnswerSectionImage()
+            .should('have.attr', 'opacity', value / 100);
+    },
+
+    verifyImageFitsToCanvasSpecifyCorrectAnswer: () => {
+        imageHighlightPage.canvasWidthInputField()
+            .invoke('attr', 'value')
+            .then((value) => {
+                imageHighlightPage.specifyCorrectAnswerSectionImage()
+                    .should('have.css', 'width', `${value}px`);
+            });
+    },
+
+    verifyImageDoesNotFitToCanvasSpecifyCorrectAnswer: () => {
+        imageHighlightPage.canvasWidthInputField()
+            .invoke('attr', 'value')
+            .then(($element) => {
+                imageHighlightPage.specifyCorrectAnswerSectionImage()
+                    .should('not.have.css', 'width', `${$element}px`);
+            });
+    },
+
+    /**
+     * @param {*} width width of canvas
+     * @description this function verifies width of canvas
+     */
+    verifyCanvasWidthSpecifyCorrectAnswer: (width) => {
+        imageHighlightPage.specifyCorrectAnswerSectionImage()
+            .should('have.attr', 'width', width);
+    },
+
+    /**
+     * @param {*} height height of canvas
+     * @description this function verifies height of canvas
+     */
+    verifyCanvasHeightSpecifyCorrectAnswer: (height) => {
+        imageHighlightPage.specifyCorrectAnswerSectionImage()
+            .should('have.css', 'height', `${height}px`);
+    },
+
+    /**
+    * @param {string} text alternative text for canvas image
+    * @description this function verifies text for canvas image
+    */
+    verifyImageAlternativeTextPresentInSpecifyCorrectAnswer: (text) => {
+        imageHighlightPage.specifyCorrectAnswerSectionImage()
+            .should('have.attr', 'alt', text);
+    },
+
+    verifyNoImageAlternativeTextPresentInSpecifyCorrectAnswer: () => {
+        imageHighlightPage.specifyCorrectAnswerSectionImage()
+            .should('not.have.attr', 'alt');
+    },
+
+    /**
+     * This function verifies highlight region aria label
+     * @param {number} index for the highlight region
+     * @param {string} ariaLabel for the highlight region
+     */
+    verifyHighlightRegionAriaLabelSpecifyCorrectAnswer: (index, ariaLabel) => {
+        imageHighlightPage.specifyCorrectAnswerSectionHighlight()
+            .eq(index)
+            .should('have.attr', 'aria-label', ariaLabel);
+    },
+
+    /**
+     * Verifies the ARIA label text input fields.
+     * @param {number} inputFieldIndex - The index of the input field to verify.
+     */
+    verifyAriaLabelTextInputFields: (inputFieldIndex) => {
+        imageHighlightPage.ariaLabelInputField()
+            .eq(inputFieldIndex)
+            .parents('.input-editable')
+            .within(() => {
+                utilities.verifyInnerText(imageHighlightPage.inputFieldNumeration(), `${inputFieldIndex + 1}`)
+                utilities.verifyInputFieldValue(imageHighlightPage.ariaLabelInputField(), '');
+            });
+    },
+
+    /**
+     * Enters text in the ARIA label input field.
+     * @param {number} inputFieldIndex - The index of the input field to enter text into.
+     * @param {string} text - The text to enter into the input field.
+     */
+    enterTextInAriaLabelInputField: (inputFieldIndex, text) => {
+        imageHighlightPage.ariaLabelInputField()
+            .eq(inputFieldIndex)
+            .type(text)
+            .should('have.value', text)
+            .blur();
+    },
+
+    /**
+     * Clears text in the ARIA label input field.
+     * @param {number} inputFieldIndex - The index of the input field to clear.
+     */
+    clearTextInAriaLabelInputField: (inputFieldIndex) => {
+        imageHighlightPage.ariaLabelInputField()
+            .eq(inputFieldIndex)
+            .clear();
+    },
+
     verifyImageUploadedSpecifyCorrectAnswer: () => {
         utilities.verifyElementVisibilityState(imageHighlightPage.specifyCorrectAnswerSectionImage(), 'visible')
     },
@@ -331,6 +611,103 @@ const steps = {
         utilities.verifyElementVisibilityState(imageHighlightPage.imagePreviewTab(), 'visible')
     },
 
+    verifyImageNotUploadedPreviewTab: () => {
+        imageHighlightPage.imagePreviewTab()
+            .should('have.attr', 'href', '');
+    },
+
+    verifyCanvasImageTopLeftAlignedInPreviewTab: () => {
+        imageHighlightPage.imagePreviewTab()
+            .should('have.css', 'top', '0px')
+            .and('have.css', 'left', '0px');
+    },
+
+    verifyCanvasImageCenterAlignedInPreviewTab: () => {
+        imageHighlightPage.imagePreviewTab()
+            .should('not.have.css', 'top', '0px')
+            .and('not.have.css', 'left', '0px');
+    },
+
+    verifyCanvasImageTopRightAlignedInPreviewTab: () => {
+        imageHighlightPage.imagePreviewTab()
+            .should('have.css', 'top', '0px')
+            .and('not.have.css', 'left', '0px');
+    },
+
+    /**
+    * @param {number} value holds opacity value for image
+    * @description function verifies opacity value for image
+    */
+    verifyOpacityValueForCanvasImageInPreviewTab: (value) => {
+        imageHighlightPage.imagePreviewTab()
+            .should('have.attr', 'opacity', value / 100);
+    },
+
+    /**
+    * @param {*} width width of canvas
+    * @description this function verifies width of canvas
+    */
+    verifyCanvasWidthInPreviewTab: (width) => {
+        imageHighlightPage.imagePreviewTab()
+            .should('have.attr', 'width', width);
+    },
+
+    /**
+     * @param {*} height height of canvas
+     * @description this function verifies height of canvas
+     */
+    verifyCanvasHeightInPreviewTab: (height) => {
+        imageHighlightPage.imagePreviewTab()
+            .should('have.css', 'height', `${height}px`);
+    },
+
+    /**
+     * @param {string} text alternative text for canvas image
+     * @description this function verifies text for canvas image
+     */
+    verifyImageAlternativeTextInPreviewTab: (text) => {
+        imageHighlightPage.imagePreviewTab()
+            .should('have.attr', 'alt', text);
+    },
+
+    verifyNoImageAlternativeTextPresentInPreviewTab: () => {
+        imageHighlightPage.imagePreviewTab()
+            .should('have.attr', 'alt', '');
+    },
+
+    verifyImageFitsToCanvasInPreviewTab: () => {
+        createQuestionBasePage.steps.switchToEditTab();
+        imageCanvasComponent.canvasWidthInputField()
+            .invoke('attr', 'value')
+            .then((value) => {
+                createQuestionBasePage.steps.switchToPreviewTab();
+                imageHighlightPage.imagePreviewTab()
+                    .should('have.css', 'width', `${value}px`);
+            });
+    },
+
+    verifyImageDoesNotFitToCanvasInPreviewTab: () => {
+        createQuestionBasePage.steps.switchToEditTab();
+        imageHighlightPage.canvasWidthInputField()
+            .invoke('attr', 'value')
+            .then(($element) => {
+                createQuestionBasePage.steps.switchToPreviewTab();
+                imageHighlightPage.imagePreviewTab()
+                    .should('not.have.css', 'width', `${$element}px`);
+            });
+    },
+
+    /**
+     * This function verifies highlight region aria label
+     * @param {number} index for the highlight region
+     * @param {string} ariaLabel for the highlight region
+     */
+    verifyHighlightRegionAriaLabelPreviewTab: (index, ariaLabel) => {
+        imageHighlightPage.highlightPreviewTab()
+            .eq(index)
+            .should('have.attr', 'aria-label', ariaLabel);
+    },
+
     /**
     * This function verifies the alt text of the image
     * @param {string} altText for the image in preview tab
@@ -474,7 +851,7 @@ const steps = {
     },
 
     /**
-    * @param {*} index of highlight region
+    * @param {number} index of highlight region
     * @description this function verifies the highlight region is correct
     */
     verifyCorrectHighlightRegion: (index) => {
@@ -517,6 +894,23 @@ const steps = {
             });
     },
 
+    verifyHighlightNumerationNotExist: () => {
+        imageHighlightPage.highlightNumerationPreviewTab()
+            .should('not.exist');
+    },
+
+    /**
+     * This function checks numeration array for highlights
+     * @param {string[]} numerationArray array of numeration to be checked for highlight options
+     */
+    verifyHighlightEnumeration: (numerationArray) => {
+        numerationArray.forEach((numeration, index) => {
+            imageHighlightPage.highlightNumerationPreviewTab()
+                .eq(index)
+                .should('have.text', numeration);
+        });
+    },
+
     /**
    * @param {string[]} numerationArray array of numeration numbers, lowercase, uppercase
    * @description this function verifies the numeration of Correct Answer Container
@@ -575,6 +969,196 @@ const steps = {
             .should('have.css', 'border')
             .and('match', /0px none/);
     },
+
+    /**
+    * @param {("Filled-in"|"Outline"|"Pattern")} toggleButtonType - Type of toggle button.
+    * @description Verifies the selected state of toggle button.
+    */
+    verifyToggleButtonSelected: (toggleButtonType) => {
+        switch (toggleButtonType) {
+            case 'Filled-in':
+                imageHighlightPage.filledInToggleButton()
+                    .should('have.attr','aria-pressed','true');
+                break;
+            case 'Outline':
+                imageHighlightPage.outlineToggleButton()
+                    .should('have.attr','aria-pressed','true');
+                break;
+            case 'Pattern':
+                imageHighlightPage.patternToggleButton()
+                    .should('have.attr','aria-pressed','true');
+                break;
+            default:
+                throw new Error('Invalid toggle button');        
+        }
+    },
+    
+    /**
+    * @param {("Filled-in"|"Outline"|"Pattern")} toggleButtonType - Type of toggle button.
+    * @description Verifies the not-selected state of toggle button.
+    */
+    verifyToggleButtonNotSelected: (toggleButtonType) => {
+        switch (toggleButtonType) {
+            case 'Filled-in':
+                imageHighlightPage.filledInToggleButton()
+                    .should('have.attr','aria-pressed','false');
+                break;
+            case 'Outline':
+                imageHighlightPage.outlineToggleButton()
+                    .should('have.attr','aria-pressed','false');
+                break;
+            case 'Pattern':
+                imageHighlightPage.patternToggleButton()
+                    .should('have.attr','aria-pressed','false');
+                break;
+            default:
+                throw new Error('Invalid toggle button');        
+        }
+    },
+
+    selectOutlineToggleButton: () => {
+        imageHighlightPage.outlineToggleButton()
+            .click();
+    },
+
+    selectpatternToggleButton: () => {
+        imageHighlightPage.patternToggleButton()
+            .click();
+    },
+    
+    selectPatternToggleButton: () => {
+        imageHighlightPage.patternToggleButton()
+            .click();
+    },
+
+    /**
+     * @param {number} index of highlight region
+     * @description this function verifies the default state of selected highlight.
+     */
+    verifyDefaultHighlightRegionSpecifyCorrectAnswer: (index) => {
+        utilities.verifyCSS(imageHighlightPage.specifyCorrectAnswerSectionHighlightPolygon().eq(index), {
+            'stroke': css.color.activeButtons
+        });
+    },
+
+    /**
+     * @param {number} index of highlight region
+     * @description this function verifies the FillIn of selected highlight in specify correct answer section.
+     */
+    verifyFillInHighlightRegionSpecifyCorrectAnswerSection: (index) => {
+        utilities.verifyCSS(imageHighlightPage.specifyCorrectAnswerSectionHighlightPolygon().eq(index), {
+            'fill-opacity': '1',
+            'stroke': css.color.activeHighlightBorder
+        });
+    },
+    
+    /**
+     * @param {number} index of highlight region
+     * @description this function verifies the outlineHighlight of selected highlight in specify correct answer section.
+     */
+    verifyOutlineHighlightRegionSpecifyCorrectAnswerSection: (index) => {
+        utilities.verifyCSS(imageHighlightPage.specifyCorrectAnswerSectionHighlightPolygon().eq(index), {
+            'stroke-width': '2px',
+            'stroke': css.color.activeHighlightBorder
+        });
+    },
+
+    /**
+     * @param {number} index of highlight region
+     * @description this function verifies the patternHighlight of selected highlight in specify correct answer section.
+     */
+    verifyPatternHighlightRegionSpecifyCorrectAnswerSection: (index) => {
+        imageHighlightPage.specifyCorrectAnswerSectionPatternPolygon()
+            .eq(index)
+            .within(() => {
+                utilities.verifyElementVisibilityState(imageHighlightPage.specifyCorrectAnswerDiamondPattern().eq(1),'exist');
+            })
+    },
+
+    /**
+     * @param {number} index of highlight region
+     * @description this function verifies the fillInHighlight of selected highlight in preview tab.
+     */
+    verifyFillInHighlightRegionPreviewTabSection: (index) => {
+        utilities.verifyCSS(imageHighlightPage.specifyCorrectAnswerSectionHighlightPolygon().eq(index), {
+            'fill-opacity': '1',
+            'stroke': css.color.activeHighlightBorder
+        });
+
+    },
+
+    /**
+     * @param {number} index of highlight region
+     * @description this function verifies the outLineHighlight of selected highlight in preview tab.
+     */
+    verifyOutlineHighlightRegionPreviewTabSection: (index) => {
+        utilities.verifyCSS(imageHighlightPage.specifyCorrectAnswerSectionHighlightPolygon().eq(index), {
+            'stroke-width': '2px',
+            'stroke': css.color.activeHighlightBorder
+        });
+    },
+
+    /**
+     * @param {number} index of highlight region
+     * @description this function verifies the patternHighlight of selected highlight in preview tab.
+     */
+    verifyPatternHighlightRegionPreviewTabSection: (index) => {
+        imageHighlightPage.previewSectionPatterntPolygon()
+            .eq(index)
+            .within(() => {
+                utilities.verifyElementVisibilityState(imageHighlightPage.specifyCorrectAnswerDiamondPattern().eq(1),'exist');
+            });
+    },
+
+    verifyDescriptorsAccordionIsCollapsed: () => {
+        imageHighlightPage.descriptorsAccordion()
+            .should('have.attr', 'aria-expanded', 'false');
+    },
+
+    expandDescriptorsAccordion: () => {
+        imageHighlightPage.descriptorsAccordion()
+            .click()
+            .should('have.attr', 'aria-expanded', 'true');
+    },
+
+    /**
+    * Verifies that the descriptors input fields are visible and correctly numbered.
+    * @param {number} countOfDescriptors - The total number of descriptor input fields to verify.
+    */
+    verifyDescriptorsInputFieldContents: (countOfDescriptors) => {
+        for (let i = 0; i < countOfDescriptors; i++) {
+            imageHighlightPage.descriptorsInputField()
+                .eq(i)
+                .should('be.visible')
+            imageHighlightPage.descriptorsInputFieldNumeration()
+                .eq(i)
+                .should('have.text', `${i + 1}`);
+        }
+    },
+
+    /**
+     * Verifies that a specific descriptor input field contains the expected text.
+     * @param {number} index - The index of the descriptor input field to verify.
+     * @param {string} inputText - The expected text to be found in the input field.
+     */
+    verifyDescriptorsInputField: (index, inputText) => {
+        imageHighlightPage.descriptorsInputField()
+            .eq(index)
+            .should('have.value', inputText)
+    },
+
+    /**
+    * Enters text into a specific descriptor input field and verifies the input.
+    * @param {number} index - The index of the descriptor input field where the text will be entered.
+    * @param {string} inputText - The text to enter into the input field.
+    */
+    enterTextInDescriptorsInputField: (index, inputText) => {
+        imageHighlightPage.descriptorsInputField()
+            .eq(index)
+            .type(inputText)
+            .blur();
+        steps.verifyDescriptorsInputField(index, inputText);
+    }
 }
 
 const tests = {
@@ -586,6 +1170,13 @@ const tests = {
     ...commonComponents.tests,
     ...enableOuterBorderComponent.tests,
     ...autoScoredStudentViewSettings.tests,
+    ...showAvailableOptionsToStudents.tests,
+    ...questionInstructionsComponent.tests,
+    ...backgroundImageUploadComponent.tests,
+    ...imageCanvasComponent.tests,
+    ...additionalSettingsPanel.tests,
+    ...gradingViewEnumerationComponent.tests,
+    ...additionalSettingsAccessibilitySectionComponent.tests,
 
     /**
      * @param {string} scoringType scoring type 'All or nothing| Partial equal weights| Partial different weights'