itemengine-cypress-automation 1.0.211 → 1.0.212

package/cypress/pages/fillInTheGapsOverImageDragAndDropPage.js

@@ -1,6 +1,6 @@
 import constants from "../fixtures/constants";
 import utilities from "../support/helpers/utilities";
-import { createQuestionBasePage, questionInstructionsComponent, uploadImageSectionComponent, scoringSectionBaseEditTab, optionsWrapperComponent, equationEditorFlyout, ckEditorToolbar, commonComponents, autoScoredScoringPreviewTab, autoScoredStudentViewSettings, maximumCapacityPerDropzoneComponent, autoScoredSpecifyCorrectAnswerSection, autoScoredScoringSectionMultiResponseType, imageCanvasComponent, backgroundImageUploadComponent, correctIncorrectAnswerLabelComponent, draggableOptionsSectionComponent, draggableOptionContainer, studentViewSettingsLabelComponent, randomizeOptionsComponent, enableOuterBorderComponent, allowMultipleInstancesOfSameDraggableOptionComponent, additionalSettingsPanel, opacityComponent, imageActionsComponent, colorPopupComponent, fillInTheGapsDragAndDropCommonComponents, additionalSettingsAccessibilitySectionComponent } from "./components";
+import { createQuestionBasePage, questionInstructionsComponent, uploadImageSectionComponent, scoringSectionBaseEditTab, optionsWrapperComponent, equationEditorFlyout, ckEditorToolbar, commonComponents, autoScoredScoringPreviewTab, autoScoredStudentViewSettings, maximumCapacityPerDropzoneComponent, autoScoredSpecifyCorrectAnswerSection, autoScoredScoringSectionMultiResponseType, imageCanvasComponent, backgroundImageUploadComponent, correctIncorrectAnswerLabelComponent, draggableOptionsSectionComponent, draggableOptionContainer, studentViewSettingsLabelComponent, randomizeOptionsComponent, enableOuterBorderComponent, allowMultipleInstancesOfSameDraggableOptionComponent, additionalSettingsPanel, opacityComponent, imageActionsComponent, colorPopupComponent, fillInTheGapsDragAndDropCommonComponents, additionalSettingsAccessibilitySectionComponent, styleAndLayoutCustomizationAccordionComponent, figCommonStyleAndLayoutComponent, connectorStyleStyleAndLayoutCustomizationComponent } from "./components";
 import { dialogBoxBase } from "./dialogBoxBase";
 const css = Cypress.env('css');
 
@@ -31,12 +31,18 @@ const selectors = {
     ...colorPopupComponent,
     ...fillInTheGapsDragAndDropCommonComponents,
     ...additionalSettingsPanel,
+    ...styleAndLayoutCustomizationAccordionComponent,
+    ...figCommonStyleAndLayoutComponent,
+    ...connectorStyleStyleAndLayoutCustomizationComponent,
+
     dropzonePreviewTab: () => cy.get('.drag-and-drop-canvas [class*="__DraggableWrapper"]'),
     dropzoneContainerPreviewTab: () => cy.get('[class*="Canvasstyle__DropzoneWrapper"]'),
+    dropzoneBorderWrapperPreviewTab: () => cy.get('.drag-and-drop-canvas [class*="ResponseDropZonestyles__CellContainer"]'),
     optionContainerOptionsPreviewTab: () => cy.get('.item-list .draggable-options-item:visible'),
-    dropzoneWrapperPreviewTab: () => cy.get('.label-image-with-dnd-canvas-wrapper .cell'),
     optionContainerOptionsSpecifyCorrectAnswerSection: () => cy.get('.option-drag-and-drop .item-list .draggable-options-item:visible'),
     dropzoneSpecifyCorrectAnswerSection: () => cy.get('.dropzone-and-label-wrapper [class*="__DraggableWrapper"]:visible'),
+    dropzoneOptionSpecifyCorrectAnswerSection: () => cy.get('[class*="__DraggableWrapper"] [data-testid="question-instruction-element"]:visible'),
+    dropzoneBorderWrapperSpecifyCorrectAnswerSection: () => cy.get('[class*="ResponseDropZonestyles__CellContainer"]'),
     optionPreviewTab: () => cy.get('.draggable-options-item'),
     dropzoneWrapperSpecifyCorrectAnswerSection: () => cy.get('.cell'),
     correctIncorrectAnswerBlock: () => cy.get('[class*="-answer-block"]'),
@@ -50,7 +56,39 @@ const selectors = {
     dropzoneWrapperPreviewTab: () => cy.get('.preview-content-wrapper [class*="Canvasstyle__ResponseDiv"]'),
     dropzonePointerInPreviewTab: () => cy.get('[class*="PointerWrapper"]'),
     canvasInPreviewTab: () => cy.get('[class*="PreviewTabstyles__ContentWrapper"] [class*="Canvasstyle__DragAndDropCanvas"]'),
-    tickIconWrapper: () => cy.get('.tick-icon-wrapper g[id*="Rectangle"]')
+    tickIconWrapper: () => cy.get('.tick-icon-wrapper g[id*="Rectangle"]'),
+    dropzoneConnectorStyleLabel: () => cy.get('.dropzone-connector-style-label'),
+    connectorEndPointShapeLabel: () => cy.get('[class*="__SubSectionLabel"]').eq(3),
+    optionPlacementInDropzoneLabel: () => cy.get('.option-placement-label'),
+    wordWrapLabel: () => cy.get('[data-ngie-testid="word-wrap-checkbox"] .MuiFormControlLabel-label'),
+    wordWrapCheckbox: () => cy.get('[data-ngie-testid="word-wrap-checkbox"] input'),
+    inlineLabel: () => cy.get('[data-value="inline"] .ngie-radio-label'),
+    blockLabel: () => cy.get('[data-value="block"] .ngie-radio-label'),
+    inlineRadioButton: () => cy.get('[type="radio"][value="inline"]'),
+    blockRadioButton: () => cy.get('[type="radio"][value="block"]'),
+    expandIconButton: () => cy.get('.expand-dropzone-icon-button:visible'),
+    expandPopupDraggableOption: () => cy.get('.expand-dropzone-popup-overlay .draggable-item-wrapper'),
+    expandPopupCloseButton: () => cy.get('[class*="CancelButtonWrapper"] button'),
+    optionAlignmentInDropzoneLabel: () => cy.get('.option-alignment .options-label'),
+    optionAlignmentInDropzoneOptions: (alignmentOption) => cy.get(`.option-alignment button[aria-label*="option alignment in dropzone ${alignmentOption}"]`),
+    setHeightAndWidthForAllDropzoneCheckboxLabel: () => cy.get('[data-ngie-testid="set-height-and-width-for-all-dropzones-checkbox"] .MuiFormControlLabel-label'),
+    setHeightAndWidthForAllDropzoneCheckbox: () => cy.get('[data-ngie-testid="set-height-and-width-for-all-dropzones-checkbox"] input'),
+    dropzoneHeightInputFieldLabel: () => cy.get('.dropzone-text-container-dimension [aria-labelledby="Height (px)"]'),
+    dropzoneHeightInputField: () => cy.get('.dropzone-text-container-dimension [id="Height (px)"]'),
+    dropzoneWidthInputFieldLabel: () => cy.get('.dropzone-text-container-dimension [aria-labelledby="Width (px)"]'),
+    dropzoneWidthInputField: () => cy.get('.dropzone-text-container-dimension [id="Width (px)"]'),
+    draggableOptionPanelPlacementLabel: () => cy.get('.draggable-option-panel-label'),
+    panelPlacementLabel: () => cy.get('.panel-placement-style .options-label'),
+    optionAlignmentInPanelLabel: () => cy.get('.option-alignment .options-label').eq(1),
+    panelPlacementOptions: (placementOption) => cy.get(`.panel-placement-style button[aria-label*="panel placement ${placementOption}"]`),
+    optionAlignmentInPanelOptions: (alignmentOption) => cy.get(`.option-alignment button[aria-label*="option alignment in panel ${alignmentOption}"]`),
+    optionsWrapper: () => cy.get('[class*="StandardDropZonestyles__DraggableItemsGrid"]'),
+    optionsWrapperPreviewTab: () => cy.get('.edit-question-preview-wrapper [class*="StandardDropZonestyles__DraggableItemsGrid"]'),
+    optionPanelWrapper: () => cy.get('.option-drag-and-drop'),
+    dragHandleIconLabel: () => cy.get('[class*="__SubSectionLabel"]').eq(4),
+    dragHandle: () => cy.get('.draggable-item-wrapper svg'),
+    dragHandleOptions: () => cy.get('.drag-handle-icon-block'),
+    draggableOptionsFillColorLabel: () => cy.get('.sub-section-label').eq(2),
 }
 
 const steps = {
@@ -82,6 +120,9 @@ const steps = {
     ...imageActionsComponent.steps,
     ...colorPopupComponent.steps,
     ...fillInTheGapsDragAndDropCommonComponents.steps,
+    ...styleAndLayoutCustomizationAccordionComponent.steps,
+    ...figCommonStyleAndLayoutComponent.steps,
+    ...connectorStyleStyleAndLayoutCustomizationComponent.steps,
 
     /**
     * @description Verifies the text content of a specific preview tab dropzone element.
@@ -559,6 +600,509 @@ const steps = {
         imageCanvasComponent.canvasImageInPreviewTab()
             .should('have.attr', 'alt', 'highlightImage.jpg');
     },
+
+    /**
+   * Verifies the border color of the answer input field at the specified index.
+   * @param {number} responseAreaIndex - The index of the response area to verify.
+   * @param {string} borderValue - The expected border color value in CSS format.
+   */
+    verifyDropzoneBorderColor: (responseAreaIndex, borderValue) => {
+        utilities.verifyCSS(utilities.getNthElement(fillInTheGapsOverImageDragAndDropPage.dropzoneBorderWrapperPreviewTab(), responseAreaIndex), {
+            'border': borderValue
+        });
+    },
+
+    verifyWordWrapCheckboxIsUnchecked: () => {
+        fillInTheGapsOverImageDragAndDropPage.wordWrapCheckbox()
+            .should('not.be.checked');
+    },
+
+    checkWordWrapCheckbox: () => {
+        fillInTheGapsOverImageDragAndDropPage.wordWrapCheckbox()
+            .click()
+            .should('be.checked');
+    },
+
+    verifyOptionInDropzoneNotWrapped: () => {
+        fillInTheGapsOverImageDragAndDropPage.dropzoneOptionSpecifyCorrectAnswerSection()
+            .eq(0)
+            .should('have.css', 'height', '24px');
+    },
+
+    verifyOptionInDropzoneWrapped: () => {
+        fillInTheGapsOverImageDragAndDropPage.dropzoneOptionSpecifyCorrectAnswerSection()
+            .eq(0)
+            .should('have.css', 'height', '72px');
+    },
+
+    expandOptionInDropzone: () => {
+        fillInTheGapsOverImageDragAndDropPage.expandIconButton()
+            .click();
+    },
+
+    closeExpandOptionPopup: () => {
+        fillInTheGapsOverImageDragAndDropPage.expandPopupCloseButton()
+            .click();
+    },
+
+    verifyInlineRadioButtonChecked: () => {
+        fillInTheGapsOverImageDragAndDropPage.inlineRadioButton()
+            .should('be.checked');
+    },
+
+    checkBlockRadioButton: () => {
+        fillInTheGapsOverImageDragAndDropPage.blockRadioButton()
+            .click()
+            .should('be.checked');
+    },
+
+    verifyInlineOptionPlacementSpecifyCorrectAnswer: () => {
+        fillInTheGapsOverImageDragAndDropPage.dropzoneSpecifyCorrectAnswerSection()
+            .find('.draggable-items-grid')
+            .should('have.css', 'flex-direction', 'row')
+            .and('have.css', 'flex-wrap', 'wrap');
+    },
+
+    verifyBlockOptionPlacementSpecifyCorrectAnswer: () => {
+        fillInTheGapsOverImageDragAndDropPage.dropzoneSpecifyCorrectAnswerSection()
+            .find('.draggable-items-grid')
+            .should('have.css', 'flex-direction', 'column')
+            .and('have.css', 'flex-wrap', 'nowrap');
+    },
+
+    verifyInlineOptionPlacementPreviewTab: () => {
+        fillInTheGapsOverImageDragAndDropPage.dropzonePreviewTab()
+            .find('.draggable-items-grid')
+            .should('have.css', 'flex-direction', 'row')
+            .and('have.css', 'flex-wrap', 'wrap');
+    },
+
+    verifyBlockOptionPlacementPreviewTab: () => {
+        fillInTheGapsOverImageDragAndDropPage.dropzonePreviewTab()
+            .find('.draggable-items-grid')
+            .should('have.css', 'flex-direction', 'column')
+            .and('have.css', 'flex-wrap', 'nowrap');
+    },
+
+    /**
+     * Verifies if the specified option alignment in panel is selected.
+     * @param {string} alignmentOption - The alignment option to verify.
+     */
+    verifyOptionAlignmentInDropzoneOptionSelected: (alignmentOption) => {
+        fillInTheGapsOverImageDragAndDropPage.optionAlignmentInDropzoneOptions(alignmentOption)
+            .should('have.attr', 'aria-pressed', 'true');
+    },
+
+    /**
+     * Selects the specified option alignment in panel.
+     * @param {string} alignmentOption - The alignment option to select.
+     */
+    selectOptionAlignmentInDropzoneOption: (alignmentOption) => {
+        fillInTheGapsOverImageDragAndDropPage.optionAlignmentInDropzoneOptions(alignmentOption.toLowerCase())
+            .click();
+    },
+
+    /**
+     * Verifies the option alignment in panel in the specify correct answer section.
+     * @param {string} optionAlignment - The option alignment to verify ('Left', 'Center', 'Right').
+     */
+    verifyOptionAlignmentInDropzoneInSpecifyCorrectAnswer: (optionAlignment) => {
+        switch (optionAlignment) {
+            case 'Left':
+                fillInTheGapsOverImageDragAndDropPage.dropzoneSpecifyCorrectAnswerSection()
+                    .find('.draggable-items-grid')
+                    .should('have.css', 'justify-content', 'flex-start');
+                break;
+            case 'Center':
+                fillInTheGapsOverImageDragAndDropPage.dropzoneSpecifyCorrectAnswerSection()
+                    .find('.draggable-items-grid')
+                    .should('have.css', 'justify-content', 'center');
+                break;
+            case 'Right':
+                fillInTheGapsOverImageDragAndDropPage.dropzoneSpecifyCorrectAnswerSection()
+                    .find('.draggable-items-grid')
+                    .should('have.css', 'justify-content', 'flex-end');
+                break;
+            default:
+                throw new Error('Invalid option alignment');
+        }
+    },
+
+    /**
+     * Verifies the option alignment in panel in the specify correct answer section.
+     * @param {string} optionAlignment - The option alignment to verify ('Left', 'Center', 'Right').
+     */
+    verifyOptionAlignmentInDropzoneInPreviewTab: (optionAlignment) => {
+        switch (optionAlignment) {
+            case 'Left':
+                fillInTheGapsOverImageDragAndDropPage.dropzonePreviewTab()
+                    .find('.draggable-items-grid')
+                    .should('have.css', 'justify-content', 'flex-start');
+                break;
+            case 'Center':
+                fillInTheGapsOverImageDragAndDropPage.dropzonePreviewTab()
+                    .find('.draggable-items-grid')
+                    .should('have.css', 'justify-content', 'center');
+                break;
+            case 'Right':
+                fillInTheGapsOverImageDragAndDropPage.dropzonePreviewTab()
+                    .find('.draggable-items-grid')
+                    .should('have.css', 'justify-content', 'flex-end');
+                break;
+            default:
+                throw new Error('Invalid option alignment');
+        }
+    },
+
+    /**
+    * Sets the height of the text container.
+    * @param {string} height - The height to set for the text container.
+    */
+    setDropzoneHeight: (height) => {
+        fillInTheGapsOverImageDragAndDropPage.dropzoneHeightInputField()
+            .type(height)
+            .blur();
+    },
+
+    /**
+     * Sets the width of the text container.
+     * @param {string} width - The width to set for the text container.
+     */
+    setDropzoneWidth: (width) => {
+        fillInTheGapsOverImageDragAndDropPage.dropzoneWidthInputField()
+            .type(width)
+            .blur();
+    },
+
+    verifySetHeightAndWidthForAllDropzoneCheckboxUncheckedState: () => {
+        fillInTheGapsOverImageDragAndDropPage.setHeightAndWidthForAllDropzoneCheckbox()
+            .should('not.be.checked');
+    },
+
+    checkSetHeightAndWidthForAllDropzoneCheckbox: () => {
+        fillInTheGapsOverImageDragAndDropPage.setHeightAndWidthForAllDropzoneCheckbox()
+            .click()
+            .should('be.checked');
+    },
+
+    /**
+    * Verifies the value of the text container height input field.
+    * @param {string} value - The expected value of the height input field.
+    */
+    verifyDropzoneHeightInputFieldValue: (value) => {
+        utilities.verifyInputFieldValue(fillInTheGapsOverImageDragAndDropPage.dropzoneHeightInputField(), value);
+    },
+
+    /**
+     * Verifies the value of the text container width input field.
+     * @param {string} value - The expected value of the width input field.
+     */
+    verifyDropzoneWidthInputFieldValue: (value) => {
+        utilities.verifyInputFieldValue(fillInTheGapsOverImageDragAndDropPage.dropzoneWidthInputField(), value);
+    },
+
+    /**
+     * This function verified height and width of dropzone
+     * @param {number} height of dropzone
+     * @param {number} width of zropzone
+     */
+    verifyDropzoneDimensionsSpecifyCorrectAnswer: (height, width) => {
+        fillInTheGapsOverImageDragAndDropPage.dropzoneBorderWrapperSpecifyCorrectAnswerSection()
+            .should('have.attr', 'height', height)
+            .and('have.attr', 'width', width)
+    },
+
+    /**
+    * This function verified height and width of dropzone
+    * @param {number} height of dropzone
+    * @param {number} width of zropzone
+    */
+    verifyDropzoneDimensionsPreviewTab: (height, width) => {
+        fillInTheGapsOverImageDragAndDropPage.dropzoneBorderWrapperPreviewTab()
+            .should('have.attr', 'height', height)
+            .and('have.attr', 'width', width)
+    },
+
+    /**
+    * Verifies if the specified panel placement option is selected.
+    * @param {string} placementOption - The panel placement option to verify.
+    */
+    verifyPanelPlacementOptionSelected: (placementOption) => {
+        fillInTheGapsOverImageDragAndDropPage.panelPlacementOptions(placementOption)
+            .should('have.attr', 'aria-pressed', 'true');
+    },
+
+    /**
+     * Selects the specified panel placement option.
+     * @param {string} placementOption - The panel placement option to select.
+     */
+    selectPanelPlacementOption: (placementOption) => {
+        fillInTheGapsOverImageDragAndDropPage.panelPlacementOptions(placementOption)
+            .click();
+    },
+
+    /**
+     * Verifies if the specified option alignment in panel is selected.
+     * @param {string} alignmentOption - The alignment option to verify.
+     */
+    verifyOptionAlignmentInPanelOptionSelected: (alignmentOption) => {
+        fillInTheGapsOverImageDragAndDropPage.optionAlignmentInPanelOptions(alignmentOption)
+            .should('have.attr', 'aria-pressed', 'true');
+    },
+
+    /**
+     * Selects the specified option alignment in panel.
+     * @param {string} alignmentOption - The alignment option to select.
+     */
+    selectOptionAlignmentInPanelOption: (alignmentOption) => {
+        fillInTheGapsOverImageDragAndDropPage.optionAlignmentInPanelOptions(alignmentOption)
+            .click();
+    },
+
+    /**
+     * Verifies the panel placement in the specify correct answer section.
+     * @param {string} placementOption - The panel placement option to verify.
+     */
+    verifyPanelPlacementSpecifyCorrectAnswerSection: (placementOption) => {
+        switch (placementOption) {
+            case 'Bottom':
+                fillInTheGapsOverImageDragAndDropPage.optionPanelWrapper()
+                    .should('have.css', 'width', '844px')
+                    .and('have.css', 'padding-top', '32px')
+                    .and('have.css', 'padding-bottom', '16px')
+                break;
+            case 'Top':
+                fillInTheGapsOverImageDragAndDropPage.optionPanelWrapper()
+                    .should('have.css', 'width', '844px')
+                    .and('have.css', 'padding-top', '16px')
+                    .and('have.css', 'padding-bottom', '32px')
+                break;
+            case 'Left':
+                fillInTheGapsOverImageDragAndDropPage.optionPanelWrapper()
+                    .should('have.css', 'width', '200px')
+                    .and('have.css', 'padding-right', '24px')
+                    .and('have.css', 'padding-left', '8px')
+                break;
+            case 'Right':
+                fillInTheGapsOverImageDragAndDropPage.optionPanelWrapper()
+                    .should('have.css', 'width', '200px')
+                    .and('have.css', 'padding-right', '8px')
+                    .and('have.css', 'padding-left', '24px')
+                break;
+            default:
+                throw new Error('Invalid placement option');
+        }
+    },
+
+    /**
+     * Verifies the panel placement in the preview tab.
+     * @param {string} placementOption - The panel placement option to verify.
+     */
+    verifyPanelPlacementPreviewTab: (placementOption) => {
+        fillInTheGapsOverImageDragAndDropPage.previewTabQuestionWrapper()
+            .within(() => {
+                switch (placementOption) {
+                    case 'Bottom':
+                        fillInTheGapsOverImageDragAndDropPage.optionPanelWrapper()
+                            .should('have.css', 'width', '768px')
+                            .and('have.css', 'padding-top', '32px')
+                            .and('have.css', 'padding-bottom', '16px')
+                        break;
+                    case 'Top':
+                        fillInTheGapsOverImageDragAndDropPage.optionPanelWrapper()
+                            .should('have.css', 'width', '768px')
+                            .and('have.css', 'padding-top', '16px')
+                            .and('have.css', 'padding-bottom', '32px')
+                        break;
+                    case 'Left':
+                        fillInTheGapsOverImageDragAndDropPage.optionPanelWrapper()
+                            .should('have.css', 'width', '142.84375px')
+                            .and('have.css', 'padding-right', '24px')
+                            .and('have.css', 'padding-left', '8px')
+                        break;
+                    case 'Right':
+                        fillInTheGapsOverImageDragAndDropPage.optionPanelWrapper()
+                            .should('have.css', 'width', '142.84375px')
+                            .and('have.css', 'padding-right', '8px')
+                            .and('have.css', 'padding-left', '24px')
+                        break;
+                    default:
+                        throw new Error('Invalid panel placement option');
+                }
+            });
+    },
+
+    /**
+     * Verifies the option alignment in panel in the specify correct answer section.
+     * @param {string} optionAlignment - The option alignment to verify ('Left', 'Center', 'Right').
+     */
+    verifyOptionAlignmentInPanelInSpecifyCorrectAnswer: (optionAlignment) => {
+        switch (optionAlignment) {
+            case 'Left':
+                fillInTheGapsOverImageDragAndDropPage.optionsWrapper()
+                    .should('have.css', 'justify-content', 'flex-start');
+                break;
+            case 'Center':
+                fillInTheGapsOverImageDragAndDropPage.optionsWrapper()
+                    .should('have.css', 'justify-content', 'center');
+                break;
+            case 'Right':
+                fillInTheGapsOverImageDragAndDropPage.optionsWrapper()
+                    .should('have.css', 'justify-content', 'flex-end');
+                break;
+            default:
+                throw new Error('Invalid option alignment');
+        }
+    },
+
+    /**
+     * Verifies the option alignment in panel in the preview tab.
+     * @param {string} optionAlignment - The option alignment to verify ('Left', 'Center', 'Right').
+     */
+    verifyOptionAlignmentInPanelInPreviewTab: (optionAlignment) => {
+        switch (optionAlignment) {
+            case 'Left':
+                fillInTheGapsOverImageDragAndDropPage.optionsWrapperPreviewTab()
+                    .should('have.css', 'justify-content', 'flex-start');
+                break;
+            case 'Center':
+                fillInTheGapsOverImageDragAndDropPage.optionsWrapperPreviewTab()
+                    .should('have.css', 'justify-content', 'center');
+                break;
+            case 'Right':
+                fillInTheGapsOverImageDragAndDropPage.optionsWrapperPreviewTab()
+                    .should('have.css', 'justify-content', 'flex-end');
+                break;
+            default:
+                throw new Error('Invalid placement option');
+        }
+    },
+
+    /**
+     * Verifies that the specified drag handle option is selected.
+     * @param {number} index - The index of the drag handle option to verify.
+     */
+    verifyDragHandleOptionSelected: (index) => {
+        fillInTheGapsOverImageDragAndDropPage.dragHandleOptions()
+            .eq(index)
+            .should('have.attr', 'aria-pressed', 'true')
+            .within(() => {
+                fillInTheGapsOverImageDragAndDropPage.colorBlockSelectedIcon()
+                    .should('exist');
+            });
+    },
+
+    /**
+     * Selects a drag handle option.
+     * @param {number} index - The index of the drag handle option to select.
+     */
+    selectDragHandleOption: (index) => {
+        fillInTheGapsOverImageDragAndDropPage.dragHandleOptions()
+            .eq(index)
+            .click();
+    },
+
+
+    /**
+     * Verifies the drag handle icon in the "Specify Correct Answer" section.
+     * @param {string} dragHandleOption - The drag handle option to verify.
+     */
+    verifyDragHandleIconSpecifyCorrectAnswer: (dragHandleOption) => {
+        switch (dragHandleOption) {
+            case 'drag icon':
+                fillInTheGapsOverImageDragAndDropPage.dragHandle()
+                    .should('have.class', 'drag-icon-button');
+                break;
+            case 'arrow icon':
+                fillInTheGapsOverImageDragAndDropPage.dragHandle()
+                    .should('have.class', 'drag-arrows-icon');
+                break;
+            case 'none':
+                fillInTheGapsOverImageDragAndDropPage.dragHandle()
+                    .should('not.exist');
+                break;
+            default:
+                throw new Error('Invalid drag option');
+        }
+    },
+
+    /**
+     * Verifies the drag handle icon in the preview tab.
+     * @param {string} dragHandleOption - The drag handle option to verify.
+     */
+    verifyDragHandleIconPreviewTab: (dragHandleOption) => {
+        switch (dragHandleOption) {
+            case 'drag icon':
+                fillInTheGapsOverImageDragAndDropPage.previewTabQuestionWrapper()
+                    .within(() => {
+                        fillInTheGapsOverImageDragAndDropPage.dragHandle()
+                            .should('have.class', 'drag-icon-button');
+                    });
+                break;
+            case 'arrow icon':
+                fillInTheGapsOverImageDragAndDropPage.previewTabQuestionWrapper()
+                    .within(() => {
+                        fillInTheGapsOverImageDragAndDropPage.dragHandle()
+                            .should('have.class', 'drag-arrows-icon');
+                    });
+                break;
+            case 'none':
+                fillInTheGapsOverImageDragAndDropPage.previewTabQuestionWrapper()
+                    .within(() => {
+                        fillInTheGapsOverImageDragAndDropPage.dragHandle()
+                            .should('not.exist');
+                    });
+                break;
+            default:
+                throw new Error('Invalid drag option');
+        }
+    },
+
+    /**
+     * Verifies the background color of grid
+     * @param {string} colorValue - The expected background color value.
+     */
+    verifyDraggableOptionsFillColorSpecifyCorrectAnswerSection: (colorValue) => {
+        utilities.verifyCSS(draggableOptionContainer.draggableOption(), {
+            'background-color': colorValue
+        });
+    },
+
+    /**
+   * Verifies the background color of grid
+   * @param {string} colorValue - The expected background color value.
+   */
+    verifyDraggableOptionsFillColorPreviewTab: (colorValue) => {
+        fillInTheGapsOverImageDragAndDropPage.previewTabQuestionWrapper()
+            .within(() => {
+                utilities.verifyCSS(fillInTheGapsOverImageDragAndDropPage.draggableOption(), {
+                    'background-color': colorValue
+                });
+            });
+    },
+
+    /**
+     * Verifies the border color of grid
+     * @param {string} colorValue - The expected border color value.
+     */
+    verifyDraggableOptionsBorderColorSpecifyCorrectAnswer: (colorValue) => {
+        utilities.verifyCSS(fillInTheGapsOverImageDragAndDropPage.draggableOption(), {
+            'border': `1px solid ${colorValue}`
+        });
+    },
+
+    /**
+    * Verifies the border color of grid
+    * @param {string} colorValue - The expected border color value.
+    */
+    verifyDraggableOptionsBorderColorPreviewTab: (colorValue) => {
+        fillInTheGapsOverImageDragAndDropPage.previewTabQuestionWrapper()
+            .within(() => {
+                utilities.verifyCSS(fillInTheGapsOverImageDragAndDropPage.draggableOption(), {
+                    'border': `1px solid ${colorValue}`
+                });
+            });
+    },
 }
 
 const tests = {
@@ -583,6 +1127,9 @@ const tests = {
     ...backgroundImageUploadComponent.tests,
     ...imageCanvasComponent.tests,
     ...additionalSettingsAccessibilitySectionComponent.tests,
+    ...styleAndLayoutCustomizationAccordionComponent.tests,
+    ...figCommonStyleAndLayoutComponent.tests,
+    ...connectorStyleStyleAndLayoutCustomizationComponent.tests,
 
     verifyContentsOfSpecifyCorrectAnswerSection: () => {
         it('When user selects a scoring type then in the \'Correct\' accordion, all the contents should be displayed', () => {

package/cypress/pages/graphingPage.js

@@ -1665,6 +1665,10 @@ const steps = {
             });
     },
 
+    verifyCorrectIncorrectStatusMessageNotExists: () => {
+        utilities.verifyElementVisibilityState(graphingPage.correctIncorrectStatusMessageText(), 'notExist');
+    },
+
     verifyCorrectAnswerSectionNotExist: () => {
         utilities.verifyElementVisibilityState(utilities.getNthElement(graphingPage.graphCorrectAnswerSection(), 1), 'notExist');
     },