itemengine-cypress-automation 1.0.205 → 1.0.206

package/cypress/pages/essayResponsePage.js

@@ -62,7 +62,23 @@ const selectors = {
         } else {
             return cy.get('[class*="ControlsWrapper"] .icon-button-custom-format')
         }
-    }
+    },
+    //additional settings
+    clipboardFunctionLabel: () => cy.get('.essay-clipboard-functions .ngie-toggle-button-title'),
+    clipboardFunctionButton: (index) => cy.get('.ngie-toggle-button-group button').eq(index),
+    clipboardFunctionButtonIcon: (index) => cy.get('.ngie-toggle-button-icon').eq(index),
+    clipboardFunctionButtonTickIcon: (index) => cy.get('.ngie-toggle-button-tick-icon').eq(index),
+    setInputFieldheightLabel: () => cy.get('.set-input-height'),
+    setInputFieldheightToggleButton: (ariaLabel = null) => {
+        if (ariaLabel) {
+            return cy.get(`.input-field-height button[aria-label*="${ariaLabel}"]`)
+        } else {
+            return cy.get('.input-field-height button')
+        }
+    },
+    minimumHeightInputField: () => cy.get('.max-min-input-field input').eq(0),
+    maximumHeightInputField: () => cy.get('.max-min-input-field input').eq(1),
+    studentResponseAreaAndLayoutLabel: () => cy.get('[class*="StudentResponseAreaLayoutstyles__LayoutText"]'),
 }
 
 const tableDialogBox = {
@@ -954,7 +970,141 @@ const steps = {
     dblClickHyperlinkText: () => {
         essayResponsePage.previewInputFieldHyperlinkText()
             .dblclick();
-    }
+    },
+
+    verifyPlaceholderInputFieldIsEmpty: () => {
+        essayResponseCommonComponents.placeholderTextInputField()
+            .should('have.value', '');
+    },
+
+    /**
+    * @description type a text in placeholder input field and verify it.
+    * @param {string} inputText - the text to be typed in placeholder.
+    */
+    typeAndVerifyPlaceholderInputText: (inputText) => {
+        essayResponseCommonComponents.placeholderTextInputField()
+            .type(inputText);
+    },
+
+    /**
+    * @description verify placeholder text in preview tab.
+    * @param {string} text - the text to be verified .
+    */
+    verifyPlaceholderTextPreviewTab: (text) => {
+        essayResponsePage.responseField()
+            .should('have.attr', 'data-cke-editorplaceholder', text);
+    },
+
+    verifyPlaceholderTextNotPresentInPreviewTab: () => {
+        essayResponsePage.responseField()
+            .should('not.have.attr', 'data-cke-editorplaceholder');
+    },
+
+    /**
+     * @param {number} index index of the clipboard function button
+     * @description function verifies content of clipboard function buttons
+     */
+    verifyClipBoardButton: (index) => {
+        utilities.verifyElementVisibilityState(essayResponsePage.clipboardFunctionButton(index), 'visible');
+        utilities.verifyElementVisibilityState(essayResponsePage.clipboardFunctionButtonIcon(index), 'visible');
+        utilities.verifyElementVisibilityState(essayResponsePage.clipboardFunctionButtonTickIcon(index), 'visible');
+        steps.verifyClipboardFunctionButtonSelectedState(index);
+    },
+
+    /**
+     * @param {number} index index of the clipboard function button
+     * @description function verifies clipboard function button is in selected state
+     */
+    verifyClipboardFunctionButtonSelectedState: (index) => {
+        essayResponsePage.clipboardFunctionButton(index)
+            .should('have.attr', 'aria-pressed', 'true');
+    },
+
+    /**
+     * @param {number} index index of the clipboard function button
+     * @description function unselects the clipboard function button 
+     */
+    unselectClipboardFunctionButton: (index) => {
+        essayResponsePage.clipboardFunctionButton(index)
+            .click();
+        steps.verifyClipboardFunctionButtonUnselectedState(index);
+    },
+
+    /**
+     * @param {number} index index of the clipboard function button
+     * @description function verifies clipboard function button is in unselected state
+     */
+    verifyClipboardFunctionButtonUnselectedState: (index) => {
+        essayResponsePage.clipboardFunctionButton(index)
+            .should('have.attr', 'aria-pressed', 'false');
+    },
+
+    /**
+     * @param {"Set height"|"No scrolling"} ariaLabel aria label of toggle button
+     * @description selects a toggle button 
+     */
+    selectSetHeightNoScrollingToggleButton: (ariaLabel) => {
+        essayResponsePage.setInputFieldheightToggleButton(ariaLabel)
+            .click()
+            .should('have.attr', 'aria-pressed', 'true');
+    },
+
+    /**
+     * @param {string} minHeight height in px to be checked
+     * @description verifies the input field value od minimum height 
+     */
+    verifyMinHeightInputFieldValue: (minHeight) => {
+        essayResponsePage.minimumHeightInputField()
+            .should('have.value', `${minHeight}`)
+    },
+
+    /**
+     * @param {string} maxHeight height in px to be checked
+     * @description verifies the input field value od maximum height 
+     */
+    verifyMaxHeightInputFieldValue: (maxHeight) => {
+        essayResponsePage.maximumHeightInputField()
+            .should('have.value', `${maxHeight}`)
+    },
+
+    /**
+     * @param {string} minHeight height in px to be checked
+     * @description verifies the max-height attribute of response field in preview tab 
+     */
+    verifyMinHeightResponseField: (minHeight) => {
+        essayResponsePage.responseField()
+            .should('have.css', 'min-height', `${minHeight}`);
+    },
+
+    /**
+     * @param {string} maxHeight height in px to be checked
+     * @description verifies the max-height attribute of response field in preview tab 
+     */
+    verifyMaxHeightResponseField: (maxHeight) => {
+        essayResponsePage.responseField()
+            .should('have.css', 'max-height', `${maxHeight}`);
+    },
+
+    /**
+     * @param {string} maxHeight height in px to be checked
+     * @description verifies the min-height attribute of response field in preview tab 
+     */
+    setMinHeightInput: (inputHeight) => {
+        essayResponsePage.minimumHeightInputField()
+            .clear()
+            .type(`${inputHeight}`)
+            .should('have.value', `${inputHeight}`);
+    },
+
+    /**
+     * @param {string} maxHeight height in px to be checked
+     * @description verifies the max-height attribute of response field in preview tab 
+     */
+    setMaxHeightInput: (inputHeight) => {
+        essayResponsePage.maximumHeightInputField()
+            .type(`${inputHeight}`)
+            .should('have.value', `${inputHeight}`);
+    },
 }
 
 const tests = {

package/cypress/pages/imageHighlightPage.js

@@ -1,5 +1,5 @@
 import utilities from "../support/helpers/utilities";
-import { additionalSettingsAccessibilitySectionComponent, additionalSettingsPanel, autoScoredScoringPreviewTab, autoScoredScoringSectionMultiResponseType, autoScoredSpecifyCorrectAnswerSection, autoScoredStudentViewSettings, backgroundImageUploadComponent, commonComponents, createQuestionBasePage, enableOuterBorderComponent, gradingViewEnumerationComponent, imageActionsComponent, imageCanvasComponent, questionInstructionsComponent, scoringSectionBaseEditTab, showAvailableOptionsToStudents, showStudentMaximumNumberOfPossibleSelections, singleMultipleSelectionModeComponent } from "./components"
+import { additionalSettingsAccessibilitySectionComponent, additionalSettingsPanel, autoScoredScoringPreviewTab, autoScoredScoringSectionMultiResponseType, autoScoredSpecifyCorrectAnswerSection, autoScoredStudentViewSettings, backgroundImageUploadComponent, commonComponents, createQuestionBasePage, enableOuterBorderComponent, gradingViewEnumerationComponent, imageActionsComponent, imageCanvasComponent, questionInstructionsComponent, scoringSectionBaseEditTab, showAvailableOptionsToStudents, showStudentMaximumNumberOfPossibleSelections, singleMultipleSelectionModeComponent, colorPopupComponent } from "./components"
 const css = Cypress.env('css');
 let imageWidth = 768;
 let imageHeight = 432;
@@ -39,6 +39,7 @@ const selectors = {
     cancelButton: () => cy.get('.cancel-button'),
     clearAllButton: () => cy.get('.clear-button'),
     specifyPossibleOptionsToolbar: () => cy.get('.drawing-tool__toolbar'),
+    toolTipText: () => cy.get('.react-tooltip'),
     //Specify correct answer section
     specifyCorrectAnswerSectionImage: () => cy.get('.ngie-accordion .highlight-svg-responseive image'),
     specifyCorrectAnswerSectionHighlight: () => cy.get('.ngie-accordion [class*="HighlightImageControlstyles__ShapeWrapper"] a'),
@@ -47,6 +48,36 @@ const selectors = {
     partialEqualWeightsPointsPerResponseScore: () => cy.get('.alternate-points-points-per-value-span'),
     specifyCorrectAnswerSectionPatternPolygon: () => cy.get('[class*="HighlightImageControlstyles__LinkWrapper"]'),
     specifyCorrectAnswerDiamondPattern: () => cy.get('[class*="HighlightImageControlstyles__DiamondPattern"]'),
+    fillColorButton: () => cy.get('[id*="fillColor"]'),
+    borderColorButton: () => cy.get('[id*="strokeColor"]'),
+    borderStyleButton: () => cy.get('[id*="borderSetting"]'),
+    colorPopupWrapper: () => cy.get('[class*="DrawingToolOptionsstyled__OptionsWrapper"]'),
+    colorPopupMenuLabel: () => cy.get('.drawing-tool-options__options__label'),
+    defaultStateColorLabel: () => cy.get('.drawing-tool-options__options__options-list__state-text').eq(0),
+    activeStateColorLabel: () => cy.get('.drawing-tool-options__options__options-list__state-text').eq(1),
+    defaultColorButton: () => cy.get('.drawing-tool-options__options__options-list__button').eq(0),
+    activeColorButton: () => cy.get('.drawing-tool-options__options__options-list__button').eq(1),
+    defaultStateEditButton: () => cy.get('.drawing-tool-options__options__options-list__edit-color-button').eq(0),
+    activeStateEditButton: () => cy.get('.drawing-tool-options__options__options-list__edit-color-button').eq(1),
+    defaultEditButtonText: () => cy.get('.drawing-tool-options__options__options-list__edit-text').eq(0),
+    activeEditButtonText: () => cy.get('.drawing-tool-options__options__options-list__edit-text').eq(1),
+    applyToAllOptionsCheckbox: () => cy.get('.drawing-tool-options__options__options-list__checkbox-input'),
+    applyToAllOptionsCheckboxLabel: () => cy.get('.drawing-tool-options__options__options-list__checkbox-text'),
+    menuLabelColorPallete: () => cy.get('.drawing-tool-options__options__label'),
+    colorPickerLabel: () => cy.get('.drawing-tool-color-picker__label'),
+    selectedColorBlockLabelColorPallete: () => cy.get('.drawing-tool-color-picker__selected-color-label'),
+    selectedColorBlock: () => cy.get('[class*="ColorPickerstyled__SelectedColorBlock"]'),
+    cancelButtonColorPopup: () => cy.get('.drawing-tool-color-picker__footer__cancel-btn'),
+    okButtonColorPopup: () => cy.get('.drawing-tool-color-picker__footer__ok-btn'),
+    specifyCorrectAnswerSectionCustomizedPolygon: () => cy.get('[class*="HighlightImageControlstyles__LinkWrapper"]'),
+    activeDefaultToggleButton: (optionAriaLabel = null) => {
+        if (optionAriaLabel) {
+            return cy.get(`.drawing-tool-options__options__options-list__toggle-button-group button[aria-label*="${optionAriaLabel}"]`)
+        } else {
+            return cy.get('.drawing-tool-options__options__options-list__toggle-button-group button')
+        }
+    },
+    popupBorderStyleButtons: () => cy.get('.drawing-tool-options__options__options-list__button'),
     //preview tab
     imagePreviewTab: () => cy.get('[class*="question-preview-wrapper"] .highlight-svg-responseive image'),
     imagePreviewTabWrapper: () => cy.get('[class*="question-preview-wrapper"] .highlight-svg-wrapper'),
@@ -62,6 +93,7 @@ const selectors = {
     correctIncorrectAnswerTextWrapper: () => cy.get('[class*="_CorrectIncorrectWrapper"]'),
     incorrectIcon: () => cy.get('[data-icon="Incorrect"]'),
     correctIcon: () => cy.get('[data-icon="CorrectAnswer"]'),
+    previewSectionHighlight: () => cy.get('[class*="HighlightImageControlstyles__ShapeWrapper"] a'),
     //Additional settings
     descriptorsAccordion: () => cy.get('.descriptor-wrapper .MuiAccordionSummary-root'),
     descriptorsHeading: () => cy.get('[class*="Descriptorsstyles__AddToolsHeading"]'),
@@ -978,21 +1010,21 @@ const steps = {
         switch (toggleButtonType) {
             case 'Filled-in':
                 imageHighlightPage.filledInToggleButton()
-                    .should('have.attr','aria-pressed','true');
+                    .should('have.attr', 'aria-pressed', 'true');
                 break;
             case 'Outline':
                 imageHighlightPage.outlineToggleButton()
-                    .should('have.attr','aria-pressed','true');
+                    .should('have.attr', 'aria-pressed', 'true');
                 break;
             case 'Pattern':
                 imageHighlightPage.patternToggleButton()
-                    .should('have.attr','aria-pressed','true');
+                    .should('have.attr', 'aria-pressed', 'true');
                 break;
             default:
-                throw new Error('Invalid toggle button');        
+                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.
@@ -1001,18 +1033,18 @@ const steps = {
         switch (toggleButtonType) {
             case 'Filled-in':
                 imageHighlightPage.filledInToggleButton()
-                    .should('have.attr','aria-pressed','false');
+                    .should('have.attr', 'aria-pressed', 'false');
                 break;
             case 'Outline':
                 imageHighlightPage.outlineToggleButton()
-                    .should('have.attr','aria-pressed','false');
+                    .should('have.attr', 'aria-pressed', 'false');
                 break;
             case 'Pattern':
                 imageHighlightPage.patternToggleButton()
-                    .should('have.attr','aria-pressed','false');
+                    .should('have.attr', 'aria-pressed', 'false');
                 break;
             default:
-                throw new Error('Invalid toggle button');        
+                throw new Error('Invalid toggle button');
         }
     },
 
@@ -1025,7 +1057,7 @@ const steps = {
         imageHighlightPage.patternToggleButton()
             .click();
     },
-    
+
     selectPatternToggleButton: () => {
         imageHighlightPage.patternToggleButton()
             .click();
@@ -1051,7 +1083,7 @@ const steps = {
             'stroke': css.color.activeHighlightBorder
         });
     },
-    
+
     /**
      * @param {number} index of highlight region
      * @description this function verifies the outlineHighlight of selected highlight in specify correct answer section.
@@ -1071,7 +1103,7 @@ const steps = {
         imageHighlightPage.specifyCorrectAnswerSectionPatternPolygon()
             .eq(index)
             .within(() => {
-                utilities.verifyElementVisibilityState(imageHighlightPage.specifyCorrectAnswerDiamondPattern().eq(1),'exist');
+                utilities.verifyElementVisibilityState(imageHighlightPage.specifyCorrectAnswerDiamondPattern().eq(1), 'exist');
             })
     },
 
@@ -1106,7 +1138,7 @@ const steps = {
         imageHighlightPage.previewSectionPatterntPolygon()
             .eq(index)
             .within(() => {
-                utilities.verifyElementVisibilityState(imageHighlightPage.specifyCorrectAnswerDiamondPattern().eq(1),'exist');
+                utilities.verifyElementVisibilityState(imageHighlightPage.specifyCorrectAnswerDiamondPattern().eq(1), 'exist');
             });
     },
 
@@ -1158,7 +1190,299 @@ const steps = {
             .type(inputText)
             .blur();
         steps.verifyDescriptorsInputField(index, inputText);
-    }
+    },
+
+    clickOnFillColorIcon: () => {
+        imageHighlightPage.fillColorButton()
+            .click()
+    },
+
+    clickOnBorderColorIcon: () => {
+        imageHighlightPage.borderColorButton()
+            .click()
+    },
+
+    clickOnBorderStyleIcon: () => {
+        imageHighlightPage.borderStyleButton()
+            .click()
+    },
+
+    clickOnDefaultStateColorEditButton: () => {
+        imageHighlightPage.defaultStateEditButton()
+            .click()
+    },
+
+    clickOnActiveStateColorEditButton: () => {
+        imageHighlightPage.activeStateEditButton()
+            .click()
+    },
+
+    clickOnCancelButton: () => {
+        imageHighlightPage.cancelButtonColorPopup()
+            .click({ force: true });
+    },
+
+    clickOnOkButton: () => {
+        imageHighlightPage.okButtonColorPopup()
+            .click({ force: true });
+    },
+
+    verifyApplyToAllOptionsCheckboxChecked: () => {
+        imageHighlightPage.applyToAllOptionsCheckbox()
+            .should('be.checked')
+    },
+
+    uncheckApplyToAllOptionsCheckbox: () => {
+        imageHighlightPage.applyToAllOptionsCheckbox()
+            .click()
+            .should('not.be.checked')
+    },
+
+    checkApplyToAllOptionsCheckbox: () => {
+        imageHighlightPage.applyToAllOptionsCheckbox()
+            .click()
+            .should('be.checked')
+    },
+
+    /**
+     * @param {index} button index of tooltip text
+     * @param {HTMLElement} button button to check the tooltip
+     * @param {string} toolTipText text of tool tip
+     * @description this function verifies the tooltip text
+     */
+    verifyToolTipText: (index, button, toolTipText) => {
+        imageHighlightPage.steps.clickOnFreeformTool();
+        button
+            .realHover();
+        utilities.verifyElementVisibilityState(imageHighlightPage.toolTipText(), 'visible');
+        utilities.verifyInnerText(imageHighlightPage.toolTipText().eq(index), toolTipText);
+    },
+
+    /**
+     * @param {"default"|"active"} optionButton type of toggle button
+     * @description this function selects the active/defult toggle button
+     */
+    verifyActiveDefaultToggleButtonSelected: (optionButton) => {
+        imageHighlightPage.activeDefaultToggleButton(optionButton)
+            .should('have.attr', 'aria-pressed', 'true')
+    },
+
+    /**
+     * @param {"default"|"active"} optionButton type of toggle button
+     * @description this function is used to verify in the selected toggle button
+     */
+    selectActiveDefaultToggleButton: (optionButton) => {
+        imageHighlightPage.activeDefaultToggleButton(optionButton)
+            .click()
+        imageHighlightPage.steps.verifyActiveDefaultToggleButtonSelected(optionButton);
+    },
+
+    /**
+     * @param {string} color in the selected color block in rgb/rgba format
+     * @description this function is used to verify in the selected color block of the color popup
+     */
+    verifySelectedColorBlock: (color) => {
+        utilities.verifyCSS(imageHighlightPage.selectedColorBlock(), {
+            'background-color': color
+        });
+    },
+
+    /**
+     * @param {number} index index of highlight region
+     * @param {string} color color to be checked in rgb/rgba format
+     * @description this function verifiies the fill color of highlight regions in specify correct answer section.
+     */
+    verifyEditedFillColorInSpecifyCorrectAnswerSection: (index, color) => {
+        imageHighlightPage.specifyCorrectAnswerSectionCustomizedPolygon()
+            .eq(index)
+            .within(() => {
+                utilities.verifyCSS(imageHighlightPage.specifyCorrectAnswerDiamondPattern(), {
+                    'fill': color
+                });
+            });
+    },
+
+    /**
+     * @param {number} index index of highlight region
+     * @param {string} color color to be checked in rgb/rgba format
+     * @description this function verifiies the fill color of highlight regions in preview tab.
+     */
+    verifyEditedFillColorInPreviewtabSection: (index, color) => {
+        imageHighlightPage.specifyCorrectAnswerSectionCustomizedPolygon()
+            .eq(index)
+            .within(() => {
+                utilities.verifyCSS(imageHighlightPage.specifyCorrectAnswerDiamondPattern(), {
+                    'fill': color
+                });
+            });
+    },
+
+    /**
+     * @param {number} index index of highlight region
+     * @param {string} color color to be checked in rgb/rgba format
+     * @description this function verifiies the border color of highlight regions in specify correct answer section.
+     */
+    verifyEditedBorderColorInSpecifyCorrectAnswerSection: (index, color) => {
+        imageHighlightPage.specifyCorrectAnswerSectionHighlight()
+            .eq(index)
+            .within(() => {
+                utilities.verifyCSS(imageHighlightPage.specifyCorrectAnswerSectionHighlightPolygon(), {
+                    'stroke': color
+                });
+            });
+    },
+
+    /**
+     * @param {number} index index of highlight region
+     * @param {string} color color to be checked in rgb/rgba format
+     * @description this function verifiies the border color of highlight regions in preview tab.
+     */
+    verifyEditedBorderColorInPreviewtabSection: (index, color) => {
+        imageHighlightPage.previewSectionHighlight()
+            .eq(index)
+            .within(() => {
+                utilities.verifyCSS(imageHighlightPage.specifyCorrectAnswerSectionHighlightPolygon(), {
+                    'stroke': color
+                });
+            });
+    },
+
+    verifyBorderStyleButtonsVisible: () => {
+        utilities.verifyElementVisibilityState(imageHighlightPage.popupBorderStyleButtons().eq(0), 'visible');
+        utilities.verifyElementVisibilityState(imageHighlightPage.popupBorderStyleButtons().eq(1), 'visible');
+        utilities.verifyElementVisibilityState(imageHighlightPage.popupBorderStyleButtons().eq(2), 'visible');
+        utilities.verifyElementVisibilityState(imageHighlightPage.popupBorderStyleButtons().eq(3), 'visible');
+    },
+
+    /**
+     * @param {number} index index of highlight region
+     * @param {string} strokeDasharray stroke-dasharray style attribute 
+     * @param {string} strokWidth stroke-width style attribute
+     * @description this function verifiies the border style of highlight regions in specify correct answer section.
+     */
+    verifyEditedBorderStyleInSpecifyCorrectAnswerSection: (index, strokeDasharray, strokWidth) => {
+        imageHighlightPage.specifyCorrectAnswerSectionHighlight()
+            .eq(index)
+            .within(() => {
+                utilities.verifyCSS(imageHighlightPage.specifyCorrectAnswerSectionHighlightPolygon(), {
+                    'stroke-dasharray': strokeDasharray,
+                    'stroke-width': strokWidth
+                });
+            });
+    },
+
+    /**
+     * @param {number} index index of highlight region
+     * @param {string} strokeDasharray stroke-dasharray style attribute 
+     * @param {string} strokWidth stroke-width style attribute
+     * @description this function verifiies the border style of highlight regions in preview tab.
+     */
+    verifyEditedBorderStyleInPreviewTabSection: (index, strokeDasharray, strokWidth) => {
+        imageHighlightPage.previewSectionHighlight()
+            .eq(index)
+            .within(() => {
+                utilities.verifyCSS(imageHighlightPage.specifyCorrectAnswerSectionHighlightPolygon(), {
+                    'stroke-dasharray': strokeDasharray,
+                    'stroke-width': strokWidth
+                });
+            });
+    },
+
+    /**
+     * @param {number[]} region co-ordinates of the region to be selected
+     * @description this function selects a region in specify possible options section.
+     */
+    selectARegionInSpecifyPossibleOptions: (region) => {
+        imageHighlightPage.steps.clickOnFreeformTool();
+        imageHighlightPage.specifyPossibleOptionsImageCanvas()
+            .then(($element) => {
+                const clientWidth = $element[0].clientWidth;
+                region.forEach((coordinates) => {
+                    imageHighlightPage.specifyPossibleOptionsImageCanvas()
+                        .click(coordinates[0] * clientWidth / 100, coordinates[1] * clientWidth / 100);
+                });
+            });
+    },
+
+    /**
+    * @param {("Dashed"|"Dotted"|"Default"|"None")} borderStyle - Type of border style.
+    * @description Verifies the border style for the highlight regions.
+    */
+    selectBorderStyleForHighlightRegions: (borderStyle) => {
+        switch (borderStyle) {
+            case 'Dashed':
+                imageHighlightPage.popupBorderStyleButtons().eq(0)
+                    .click()
+                break;
+            case 'Dotted':
+                imageHighlightPage.popupBorderStyleButtons().eq(1)
+                    .click()
+                break;
+            case 'Default':
+                imageHighlightPage.popupBorderStyleButtons().eq(2)
+                    .click()
+                break;
+            case 'None':
+                imageHighlightPage.popupBorderStyleButtons().eq(3)
+                    .click()
+                break;
+            default:
+                throw new Error('Invalid toggle button');
+        }
+    },
+
+    /**
+    * @param {("Dashed"|"Dotted"|"Default"|"None")} borderStyle - Type of border style.
+    * @param {number} index index for the border style.
+    * @description Verifies the border style for the highlight regions in specify correct answer section.
+    */
+    verifyBorderStyleForHighlightRegionsSpecifyCorrectAnswer: (borderStyle, index) => {
+        switch (borderStyle) {
+            case 'Dashed':
+                imageHighlightPage.steps.verifyEditedBorderStyleInSpecifyCorrectAnswerSection(index, '5px, 5px', '2px');
+                break;
+            case 'Dotted':
+                imageHighlightPage.steps.verifyEditedBorderStyleInSpecifyCorrectAnswerSection(index, '2px, 2px', '2px');
+                break;
+            case 'Default':
+                imageHighlightPage.steps.verifyEditedBorderStyleInSpecifyCorrectAnswerSection(index, 'none', '2px');
+                break;
+            case 'None':
+                imageHighlightPage.steps.verifyEditedBorderStyleInSpecifyCorrectAnswerSection(index, 'none', '0px');
+                break;
+            default:
+                throw new Error('Invalid border style');
+        }
+    },
+
+    /**
+    * @param {("Dashed"|"Dotted"|"Default"|"None")} borderStyle - Type of border style.
+    * @param {number} index index for the border style.
+    * @description Verifies the border style for the highlight regions in preview tab.
+    */
+    verifyBorderStyleForHighlightRegionsPreviewTab: (borderStyle, index) => {
+        switch (borderStyle) {
+            case 'Dashed':
+                imageHighlightPage.steps.verifyEditedBorderStyleInPreviewTabSection(index, '5px, 5px', '2px');
+                break;
+            case 'Dotted':
+                imageHighlightPage.steps.verifyEditedBorderStyleInPreviewTabSection(index, '2px, 2px', '2px');
+                break;
+            case 'Default':
+                imageHighlightPage.steps.verifyEditedBorderStyleInPreviewTabSection(index, 'none', '2px');
+                break;
+            case 'None':
+                imageHighlightPage.steps.verifyEditedBorderStyleInPreviewTabSection(index, 'none', '0px');
+                break;
+            default:
+                throw new Error('Invalid border style');
+        }
+    },
+
+    verifyDefaultStyleButtonSelected: () => {
+        imageHighlightPage.popupBorderStyleButtons().eq(2)
+            .should('have.attr', 'aria-pressed', 'true');
+    },
 }
 
 const tests = {
@@ -1251,6 +1575,65 @@ const tests = {
         it('Accessibility of \'Correct\' accordion contents', { tags: 'a11y' }, () => {
             cy.checkAccessibility(imageHighlightPage.specifyCorrectAnswerSectionImage());
         });
+    },
+
+    /**
+     * Verifies the contents, CSS and functionality of the 'color popup' menu for fill color and border color customization.
+     * @param {{'Fill color' | 'Border color'}} customizationOption - The name of option.
+     * @example - verifySpecifyCorrectAnswerAccordionContentsAndFunctionality('Correct');
+     */
+    verifyColorPopupContentCSSandAccessibility: (customizationOption) => {
+        it(`When the user clicks the \'Edit color\' button the label ${customizationOption} should be visible, a \'Select color\' label along with color selector component should be visible. A \'Selected color\' label along with selected color box should be visible. Also \'Cancel\' and \'OK\' button should be visible`, () => {
+            imageHighlightPage.steps.clickOnDefaultStateColorEditButton();
+            utilities.verifyElementVisibilityState(imageHighlightPage.colorPopupMenuLabel(), 'visible');
+            utilities.verifyInnerText(imageHighlightPage.colorPopupMenuLabel(), `${customizationOption}`);
+            utilities.verifyElementVisibilityState(imageHighlightPage.colorPickerLabel(), 'visible');
+            utilities.verifyInnerText(imageHighlightPage.colorPickerLabel(), 'Select color');
+            utilities.verifyElementVisibilityState(colorPopupComponent.colorSaturationPalette(), 'visible');
+            utilities.verifyElementVisibilityState(colorPopupComponent.colorHuePalette(), 'visible');
+            utilities.verifyElementVisibilityState(colorPopupComponent.opacityGradientHue(), 'visible');
+            utilities.verifyElementVisibilityState(imageHighlightPage.selectedColorBlockLabelColorPallete(), 'visible');
+            utilities.verifyInnerText(imageHighlightPage.selectedColorBlockLabelColorPallete(), 'Selected color');
+            utilities.verifyElementVisibilityState(imageHighlightPage.selectedColorBlock(), 'visible');
+            utilities.verifyElementVisibilityState(imageHighlightPage.okButtonColorPopup(), 'exist');
+            utilities.verifyInnerText(imageHighlightPage.okButtonColorPopup(), 'OK');
+            utilities.verifyElementVisibilityState(imageHighlightPage.cancelButtonColorPopup(), 'exist');
+            utilities.verifyInnerText(imageHighlightPage.cancelButtonColorPopup(), 'Cancel');
+        });
+
+        it('CSS of \'Edit color\' popup', { tags: 'css' }, () => {
+            utilities.verifyCSS(imageHighlightPage.menuLabelColorPallete(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(imageHighlightPage.colorPickerLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(imageHighlightPage.selectedColorBlockLabelColorPallete(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(imageHighlightPage.cancelButtonColorPopup(), {
+                'background-color': css.color.primaryBtn,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular,
+                'border': `1px solid ${css.color.manipulativeOptionContainerBorder}`
+            });
+            utilities.verifyCSS(imageHighlightPage.okButtonColorPopup(), {
+                'background-color': css.color.activeButtons,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular,
+                'border': `1px solid ${css.color.gridBorder}`
+            });
+        });
+
+        it('Accessibility of \'Edit color\' popup', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(imageHighlightPage.colorPopupWrapper());
+        });
     }
 }