itemengine-cypress-automation 1.0.205-8thJuneFixes-5ad148f.0 → 1.0.206-12thJuneFixesAndRepoUpdate-5fe2304.0

package/cypress/pages/dragAndDropIntoCategoriesPage.js

@@ -1,4 +1,4 @@
-import { optionsWrapperComponent, createQuestionBasePage, autoScoredSpecifyCorrectAnswerSection, scoringSectionBaseEditTab, autoScoredScoringSectionMultiResponseType, questionInstructionsComponent, autoScoredStudentViewSettings, autoScoredScoringPreviewTab, commonComponents, ckEditorToolbar, equationEditorFlyout, randomizeOptionsComponent, allowMultipleInstancesOfSameDraggableOptionComponent, studentViewSettingsLabelComponent, additionalSettingsPanel, draggableOptionContainer, draggableOptionsSectionComponent, maximumCapacityPerDropzoneComponent, enableOuterBorderComponent, specifyRowsAndColumnsComponent, additionalSettingsAccessibilitySectionComponent } from "./components";
+import { optionsWrapperComponent, createQuestionBasePage, autoScoredSpecifyCorrectAnswerSection, scoringSectionBaseEditTab, autoScoredScoringSectionMultiResponseType, questionInstructionsComponent, autoScoredStudentViewSettings, autoScoredScoringPreviewTab, commonComponents, ckEditorToolbar, equationEditorFlyout, randomizeOptionsComponent, allowMultipleInstancesOfSameDraggableOptionComponent, studentViewSettingsLabelComponent, additionalSettingsPanel, draggableOptionContainer, draggableOptionsSectionComponent, maximumCapacityPerDropzoneComponent, enableOuterBorderComponent, specifyRowsAndColumnsComponent, additionalSettingsAccessibilitySectionComponent, styleAndLayoutCustomizationAccordionComponent, gradingViewEnumerationComponent, ariaLabelSectionComponent } from "./components";
 import utilities from "../support/helpers/utilities";
 import constants from "../fixtures/constants";
 const css = Cypress.env('css');
@@ -21,6 +21,9 @@ const selectors = {
     ...enableOuterBorderComponent,
     ...specifyRowsAndColumnsComponent,
     ...additionalSettingsPanel,
+    ...gradingViewEnumerationComponent,
+    ...ariaLabelSectionComponent,
+
     editCellPropertyButton: () => cy.get('button[aria-label="More Action"]'),
     editCellPropertyList: () => cy.get('.ngie-action-cell-container [role="menu"]'),
     editCellPropertyListOption: () => cy.get('[class*="MuiMenuItem"][role="menuitem"]'),
@@ -90,6 +93,68 @@ const selectors = {
     maxLimitInEachDropzoneHelpText: () => cy.get('[class*="Matrixstyles__MaxLimitWrapper"]'),
     dropzoneGridSpecifyCorrectAnswerSection: () => cy.get('[class*="Matrixstyles__TableWrapper"]'),
     dropzoneGridPreviewTab: () => cy.get('[class*="question-preview-wrapper"] [class*="Matrixstyles__TableWrapper"]'),
+
+    //Style and layout
+    layoutLabel: () => cy.get('[class*="Layoutstyles__SectionWrapper"]'),
+    rowSpacingDropdownLabel: () => cy.get('#Row-spacing-dropdown-label'),
+    rowSpacingDropdown: () => cy.get('[aria-labelledby*="Row-spacing-dropdown-label"]'),
+    rowSpacingDropdownOptions: (ariaLabel = null) => {
+        if (ariaLabel) {
+            return cy.get(`[aria-labelledby*="Row-spacing-dropdown-label"] .dropdown-menu-item[aria-label*="${ariaLabel}"]`)
+        } else {
+            return cy.get(`[aria-labelledby*="Row-spacing-dropdown-label"] .dropdown-menu-item`)
+        }
+    },
+    columnSpacingDropdownLabel: () => cy.get('#Column-spacing-dropdown-label'),
+    columnSpacingDropdown: () => cy.get('[aria-labelledby*="Column-spacing-dropdown-label"]'),
+    columnSpacingDropdownOptions: (ariaLabel = null) => {
+        if (ariaLabel) {
+            return cy.get(`[aria-labelledby*="Column-spacing-dropdown-label"] .dropdown-menu-item[aria-label*="${ariaLabel}"]`)
+        } else {
+            return cy.get(`[aria-labelledby*="Column-spacing-dropdown-label"] .dropdown-menu-item`)
+        }
+    },
+    dropzoneMinimumHeightLabel: () => cy.get('[for="Dropzone minimum height"]'),
+    dropzoneMinimumHeightInputField: () => cy.get('[id="Dropzone minimum height"]'),
+    dropzoneDimensionsLabel: () => cy.get('#Dropzone-dimensions-dropdown-label'),
+    dropzoneDimensionsDropdown: () => cy.get('#Dropzone-dimensions-select'),
+    dropzoneDimensionsDropdownOptions: (ariaLabel = null) => {
+        if (ariaLabel) {
+            return cy.get(`[aria-labelledby*="Dropzone-dimensions-dropdown-label"] .dropdown-menu-item[aria-label*="${ariaLabel}"]`)
+        } else {
+            return cy.get(`[aria-labelledby*="Dropzone-dimensions-dropdown-label"] .dropdown-menu-item`)
+        }
+    },
+    specifyForAllDropzoneColumnsLabel: () => cy.get('.ngie-radio-label[aria-label="Specify for all dropzone columns"]'),
+    specifyForAllDropzoneColumnsRadioButton: () => cy.get('[type="radio"][aria-label="Specify for all dropzone columns"]'),
+    specifyForFirstDropzoneColumnOnlyLabel: () => cy.get('.ngie-radio-label[aria-label="Specify for first dropzone column only"]'),
+    specifyForFirstDropzoneColumnOnlyRadioButton: () => cy.get('[type="radio"][aria-label="Specify for first dropzone column only"]'),
+    dropzoneWidthLabel: () => cy.get('.additional-settings-label[for*="width"]'),
+    dropzoneWidthInputField: () => cy.get('input[id*="width"]'),
+    dropzoneLabel: () => cy.get('[class*="Dropzonestyles__SectionWrapper"]'),
+    fillColorLabel: () => cy.get('.sub-section-label').eq(0),
+    borderColorLabel: () => cy.get('.sub-section-label').eq(1),
+    colorBlock: () => cy.get('.color-picker-block'),
+    editColorButton: () => cy.get('button[aria-label="edit color"]'),
+    colorBlockSelectedIcon: () => cy.get('[class*="BtnSelectionWrapper"] svg'),
+    dropzoneBorderStyleLabel: () => cy.get('.options-border-style .options-label').eq(0),
+    dropzoneBorderStyleOptions: (borderStyleOption) => cy.get('.options-border-style').eq(0).find(`.ngie-toggle-button-label-wrapper [aria-label*=${borderStyleOption}]`),
+    draggableOptionsBorderStyleLabel: () => cy.get('.options-border-style .options-label').eq(1),
+    draggableOptionsBorderStyleOptions: (borderStyleOption) => cy.get('.options-border-style').eq(1).find(`.ngie-toggle-button-label-wrapper [aria-label*=${borderStyleOption}]`),
+    draggableOptionsFillColorLabel: () => cy.get('.sub-section-label').eq(2),
+    draggableOptionsBorderColorLabel: () => cy.get('.sub-section-label').eq(3),
+    draggableOptionsLabel: () => cy.get('.draggable-options-label'),
+    dragHandleIconLabel: () => cy.get('[class*="__SubSectionLabel"]').eq(2),
+    dragHandle: () => cy.get('.draggable-item-wrapper [class*="drag"]'),
+    dragHandleOptions: () => cy.get('.drag-handle-icon-block'),
+    draggableOptionPanelPlacementLabel: () => cy.get('.draggable-option-panel-label'),
+    panelPlacementLabel: () => cy.get('.panel-placement-style .options-label'),
+    optionAlignmentInPanelLabel: () => cy.get('.option-alignment .options-label'),
+    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')
 }
 
 const steps = {
@@ -113,6 +178,10 @@ const steps = {
     ...commonComponents.steps,
     ...enableOuterBorderComponent.steps,
     ...specifyRowsAndColumnsComponent.steps,
+    ...styleAndLayoutCustomizationAccordionComponent.steps,
+    ...gradingViewEnumerationComponent.steps,
+    ...ariaLabelSectionComponent.steps,
+
     /**
      * @description Modifies the dropzone property based on the specified list option.
      * @param {("Heading" | "Subheading" | "Text" | "Dropzone" | "None")} listOption - The list option to set to the dropzone.
@@ -573,7 +642,7 @@ const steps = {
         dragAndDropIntoCategoriesPage.tableRowContainerSpecifyCorrectAnswerSection()
             .eq(0)
             .within(() => {
-                utilities.verifyElementCount(dragAndDropIntoCategoriesPage.tableCellContainerSpecifyCorrectAnswerSection(), numberOfColumns);
+                utilities.verifyElementCount(cy.wrap($element).find('[class*="styles__CellContainer"]'), numberOfColumns);
             });
     },
 
@@ -636,7 +705,7 @@ const steps = {
         dragAndDropIntoCategoriesPage.tableRowContainerPreviewTab()
             .eq(0)
             .within(($element) => {
-                utilities.verifyElementCount(cy.wrap($element).find('[class*="Matrixstyles__CellContainer"]'), numberOfColumns);
+                utilities.verifyElementCount(cy.wrap($element).find('[class*="styles__CellContainer"]'), numberOfColumns);
             });
     },
 
@@ -1285,6 +1354,891 @@ const steps = {
         dragAndDropIntoCategoriesPage.dropzoneGridPreviewTab()
             .should('have.class', 'active-area-on-tap');
     },
+
+    expandRowSpacingDropdown: () => {
+        dragAndDropIntoCategoriesPage.rowSpacingDropdown()
+            .click();
+    },
+
+    /**
+     * This function selects row spacing option
+     * @param {string} rowSpacingOption of the row spacing
+     */
+    selectRowSpacingDropdownOption: (rowSpacingOption) => {
+        dragAndDropIntoCategoriesPage.rowSpacingDropdownOptions(rowSpacingOption)
+            .click();
+    },
+
+    /**
+     * This function verified the selected state of row spacing option
+     * @param {string} rowSpacingOption of the row spacing
+     */
+    verifyRowSpacingOptionSelected: (rowSpacingOption) => {
+        dragAndDropIntoCategoriesPage.rowSpacingDropdownOptions(rowSpacingOption)
+            .should('have.attr', 'aria-selected', 'true');
+    },
+
+    expandColumnSpacingDropdown: () => {
+        dragAndDropIntoCategoriesPage.columnSpacingDropdown()
+            .click();
+    },
+
+    /**
+     * This function selects row spacing option
+     * @param {string} rowSpacingOption of the row spacing
+     */
+    selectColumnSpacingDropdownOption: (rowSpacingOption) => {
+        dragAndDropIntoCategoriesPage.columnSpacingDropdownOptions(rowSpacingOption)
+            .click();
+    },
+
+    /**
+     * This function verified the selected state of row spacing option
+     * @param {string} rowSpacingOption of the row spacing
+     */
+    verifyColumnSpacingOptionSelected: (rowSpacingOption) => {
+        dragAndDropIntoCategoriesPage.columnSpacingDropdownOptions(rowSpacingOption)
+            .should('have.attr', 'aria-selected', 'true');
+    },
+
+    /**
+     * This function verifies the row spacing 
+     * @param {("No spacing"|"Small"|"Wide")} spacing of the rows
+     */
+    verifyRowSpacingSpecifyCorrectAnswerSection: (spacing) => {
+        switch (spacing) {
+            case 'No spacing':
+                dragAndDropIntoCategoriesPage.tableRowContainerSpecifyCorrectAnswerSection()
+                    .eq(0)
+                    .should('have.css', 'margin-bottom', '0px');
+                break;
+            case 'Small':
+                dragAndDropIntoCategoriesPage.tableRowContainerSpecifyCorrectAnswerSection()
+                    .eq(0)
+                    .should('have.css', 'margin-bottom', '8px');
+                break;
+            case 'Wide':
+                dragAndDropIntoCategoriesPage.tableRowContainerSpecifyCorrectAnswerSection()
+                    .eq(0)
+                    .should('have.css', 'margin-bottom', '24px');
+                break;
+            default:
+                throw new Error(`Unsupported spacing option: ${spacing}`);
+        }
+    },
+
+    /**
+     * This function verifies the row spacing 
+     * @param {("No spacing"|"Small"|"Wide")} spacing of the rows
+     */
+    verifyRowSpacingPreviewTab: (spacing) => {
+        switch (spacing) {
+            case 'No spacing':
+                dragAndDropIntoCategoriesPage.tableRowContainerPreviewTab()
+                    .eq(0)
+                    .should('have.css', 'margin-bottom', '0px');
+                break;
+            case 'Small':
+                dragAndDropIntoCategoriesPage.tableRowContainerPreviewTab()
+                    .eq(0)
+                    .should('have.css', 'margin-bottom', '8px');
+                break;
+            case 'Wide':
+                dragAndDropIntoCategoriesPage.tableRowContainerPreviewTab()
+                    .eq(0)
+                    .should('have.css', 'margin-bottom', '24px');
+                break;
+            default:
+                throw new Error(`Unsupported spacing option: ${spacing}`);
+        }
+    },
+
+    /**
+     * This function verifies the row spacing 
+     * @param {("No spacing"|"Small"|"Wide")} spacing of the rows
+     */
+    verifyColumnSpacingSpecifyCorrectAnswerSection: (spacing) => {
+        switch (spacing) {
+            case 'No spacing':
+                dragAndDropIntoCategoriesPage.tableRowContainerSpecifyCorrectAnswerSection()
+                    .each(($el) => {
+                        cy.wrap($el)
+                            .should('have.css', 'row-gap', '0px');
+                    });
+                break;
+            case 'Small':
+                dragAndDropIntoCategoriesPage.tableRowContainerSpecifyCorrectAnswerSection()
+                    .each(($el) => {
+                        cy.wrap($el)
+                            .should('have.css', 'row-gap', '8px');
+                    });
+                break;
+            case 'Wide':
+                dragAndDropIntoCategoriesPage.tableRowContainerSpecifyCorrectAnswerSection()
+                    .each(($el) => {
+                        cy.wrap($el)
+                            .should('have.css', 'row-gap', '24px');
+                    });
+                break;
+            default:
+                throw new Error(`Unsupported spacing option: ${spacing}`);
+        }
+    },
+
+    /**
+     * This function verifies the row spacing 
+     * @param {("No spacing"|"Small"|"Wide")} spacing of the rows
+     */
+    verifyColumnSpacingPreviewTab: (spacing) => {
+        switch (spacing) {
+            case 'No spacing':
+                dragAndDropIntoCategoriesPage.tableRowContainerPreviewTab()
+                    .each(($el) => {
+                        cy.wrap($el)
+                            .should('have.css', 'row-gap', '0px');
+                    });
+                break;
+            case 'Small':
+                dragAndDropIntoCategoriesPage.tableRowContainerPreviewTab()
+                    .each(($el) => {
+                        cy.wrap($el)
+                            .should('have.css', 'row-gap', '8px');
+                    });
+                break;
+            case 'Wide':
+                dragAndDropIntoCategoriesPage.tableRowContainerPreviewTab()
+                    .each(($el) => {
+                        cy.wrap($el)
+                            .should('have.css', 'row-gap', '24px');
+                    });
+                break;
+            default:
+                throw new Error(`Unsupported spacing option: ${spacing}`);
+        }
+    },
+
+    /**
+    * This function enters text in cell height input field
+    * @param {number} cellHeight of the rows
+    */
+    enterTextInDropzoneMinimumHeightInputField: (cellHeight) => {
+        dragAndDropIntoCategoriesPage.dropzoneMinimumHeightInputField()
+            .clear()
+            .type(cellHeight)
+            .should('have.value', cellHeight);
+        dragAndDropIntoCategoriesPage.dropzoneMinimumHeightInputField()
+            .blur();
+    },
+
+    /**
+     * This function verifies text in cell height input field
+     * @param {number} cellHeight of the rows
+     */
+    verifyDropzoneMinimumHeightInputField: (cellHeight) => {
+        dragAndDropIntoCategoriesPage.dropzoneMinimumHeightInputField()
+            .should('have.value', cellHeight);
+    },
+
+    /**
+     * This function verifies cell height specify correct answer section
+     * @param {number} cellHeight of the rows
+     */
+    verifyDropzoneMinimumHeightSpecifyCorrectAnswer: (cellHeight) => {
+        dragAndDropIntoCategoriesPage.dropzoneCellSpecifyCorrectAnswerSection()
+            .each(($el) => {
+                cy.wrap($el)
+                    .should('have.css', 'min-height', `${cellHeight}px`)
+            });
+    },
+
+    /**
+     * This function verifies cell height preview tab
+     * @param {number} cellHeight of the rows
+     */
+    verifyDropzoneMinimumHeightPreviewTab: (cellHeight) => {
+        dragAndDropIntoCategoriesPage.dropzoneCellPreviewTab()
+            .each(($el) => {
+                cy.wrap($el)
+                    .should('have.css', 'min-height', `${cellHeight}px`)
+            });
+    },
+
+    expandDropzoneDimensionsDropdown: () => {
+        dragAndDropIntoCategoriesPage.dropzoneDimensionsDropdown()
+            .click();
+    },
+
+    /**
+     * This function verified the selected state of column dimension dropdown
+     * @param {string} dropzoneDimensionsOption of the column dimension dropdown
+     */
+    selectDropzoneDimensionsDropdownOption: (dropzoneDimensionsOption) => {
+        dragAndDropIntoCategoriesPage.dropzoneDimensionsDropdownOptions(dropzoneDimensionsOption)
+            .click();
+    },
+
+    /**
+     * This function verified the selected state of column dimension dropdown
+     * @param {string} dropzoneDimensionsOption of the column dimension dropdown
+     */
+    verifyDropzoneDimensionsDropdownOptionSelected: (dropzoneDimensionsOption) => {
+        dragAndDropIntoCategoriesPage.dropzoneDimensionsDropdownOptions(dropzoneDimensionsOption)
+            .should('have.attr', 'aria-selected', 'true');
+    },
+
+    /**
+     * This function verifies the dimension of the column
+     * @param {("Auto"|"Custom")} dimension of the column
+     */
+    verifyDropzoneDimensionsSpecifyCorrectAnswer: (dimension) => {
+        switch (dimension) {
+            case 'Auto':
+                dragAndDropIntoCategoriesPage.dropzoneCellSpecifyCorrectAnswerSection()
+                    .each(($el) => {
+                        cy.wrap($el)
+                            .invoke('css', 'width')
+                            .then((width) => {
+                                const actualWidth = parseFloat(width);
+                                expect(actualWidth).to.not.be.closeTo(225, 1);
+                            });
+                    });
+                break;
+            case 'Custom':
+                dragAndDropIntoCategoriesPage.dropzoneCellSpecifyCorrectAnswerSection()
+                    .each(($el) => {
+                        cy.wrap($el)
+                            .invoke('css', 'width')
+                            .then((width) => {
+                                const actualWidth = parseFloat(width);
+                                expect(actualWidth).to.be.closeTo(225, 1);
+                            });
+                    });
+                break;
+            default:
+                throw new Error(`Unsupported spacing option: ${dimension}`);
+        }
+    },
+
+    /**
+  * Verifies the width of a specified dropzone in the "Specify Correct Answer" section.
+  * @param {number} index - The index of the dropzone to check.
+  * @param {number} expectedWidth - The expected width of the dropzone.
+  */
+    verifyDropzoneWidthSpecifyCorrectAnswer: (index, expectedWidth) => {
+        dragAndDropIntoCategoriesPage.dropzoneCellSpecifyCorrectAnswerSection()
+            .eq(index)
+            .invoke('css', 'width')
+            .then((width) => {
+                const actualWidth = parseFloat(width);
+                expect(actualWidth).to.be.closeTo(expectedWidth, 1);
+            });
+    },
+
+    /**
+     * Verifies that a specified dropzone does not have a specific width in the "Specify Correct Answer" section.
+     * @param {number} index - The index of the dropzone to check.
+     * @param {number} expectedWidth - The width that the dropzone should not have.
+     */
+    verifyDropzoneDoeNotHaveSpecifiedWidthSpecifyCorrectAnswer: (index, expectedWidth) => {
+        dragAndDropIntoCategoriesPage.dropzoneCellSpecifyCorrectAnswerSection()
+            .eq(index)
+            .invoke('css', 'width')
+            .then((width) => {
+                const actualWidth = parseFloat(width);
+                expect(actualWidth).to.not.be.closeTo(expectedWidth, 1);
+            });
+    },
+
+    /**
+    * This function verifies the dimension of the column
+    * @param {("Auto"|"Custom")} dimension of the column
+    */
+    verifyDropzoneDimensionsPreviewTab: (dimension) => {
+        switch (dimension) {
+            case 'Auto':
+                dragAndDropIntoCategoriesPage.dropzoneCellPreviewTab()
+                    .each(($el) => {
+                        cy.wrap($el)
+                            .invoke('css', 'width')
+                            .then((width) => {
+                                const actualWidth = parseFloat(width);
+                                expect(actualWidth).to.not.be.closeTo(225, 1);
+                            });
+                    });
+                break;
+            case 'Custom':
+                dragAndDropIntoCategoriesPage.dropzoneCellPreviewTab()
+                    .each(($el) => {
+                        cy.wrap($el)
+                            .invoke('css', 'width')
+                            .then((width) => {
+                                const actualWidth = parseFloat(width);
+                                expect(actualWidth).to.be.closeTo(225, 1);
+                            });
+                    });
+                break;
+            default:
+                throw new Error(`Unsupported spacing option: ${dimension}`);
+        }
+    },
+
+    /**
+     * This function verifies selected state of radio button
+     * @param {("Specify for all columns"|"Specify for first column only")} radioButton in custom dimensions section
+     */
+    verifyCustomDimensionsRadioButtonSelected: (radioButton) => {
+        switch (radioButton) {
+            case 'Specify for all dropzone columns':
+                dragAndDropIntoCategoriesPage.specifyForAllDropzoneColumnsRadioButton()
+                    .should('be.checked');
+                break;
+            case 'Specify for first dropzone column only':
+                dragAndDropIntoCategoriesPage.specifyForFirstDropzoneColumnOnlyRadioButton()
+                    .should('be.checked');
+                break;
+            default:
+                throw new Error(`Unsupported dimension option: ${radioButton}`);
+        }
+    },
+
+    /**
+     * This function verifies selected state of radio button
+     * @param {{"Specify for all columns"|"Specify for first column only"}} radioButton in custom dimensions section
+     */
+    selectCustomDimensionsRadioButton: (radioButton) => {
+        switch (radioButton) {
+            case 'Specify for all dropzone columns':
+                dragAndDropIntoCategoriesPage.specifyForAllDropzoneColumnsRadioButton()
+                    .click()
+                    .should('be.checked');
+                break;
+            case 'Specify for first dropzone column only':
+                dragAndDropIntoCategoriesPage.specifyForFirstDropzoneColumnOnlyRadioButton()
+                    .click()
+                    .should('be.checked');
+                break;
+            default:
+                throw new Error(`Unsupported dimension option: ${radioButton}`);
+        }
+    },
+
+    /**
+ * Verifies the value of the width input field for a specified dropzone.
+ * @param {number} index - The index of the dropzone to check.
+ * @param {string} width - The expected width value in the input field.
+ */
+    verifyDropzoneWidthInputField: (index, width) => {
+        dragAndDropIntoCategoriesPage.dropzoneWidthInputField()
+            .eq(index)
+            .should('have.value', width);
+    },
+
+    /**
+     * Enters text into the width input field for a specified dropzone.
+     * @param {number} index - The index of the dropzone to modify.
+     * @param {string} width - The width value to enter into the input field.
+     */
+    enterTextInDropzoneWidthInputField: (index, width) => {
+        dragAndDropIntoCategoriesPage.dropzoneWidthInputField()
+            .eq(index)
+            .clear()
+            .type(width);
+        dragAndDropIntoCategoriesPage.dropzoneWidthInputField()
+            .eq(index)
+            .blur();
+    },
+
+    /**
+     * Verifies the width of a specified dropzone in the preview tab.
+     * @param {number} index - The index of the dropzone to check.
+     * @param {number} expectedWidth - The expected width of the dropzone.
+     */
+    verifyDropzoneWidthPreviewTab: (index, expectedWidth) => {
+        dragAndDropIntoCategoriesPage.dropzoneCellPreviewTab()
+            .eq(index)
+            .invoke('css', 'width')
+            .then((width) => {
+                const actualWidth = parseFloat(width);
+                expect(actualWidth).to.be.closeTo(expectedWidth, 1);
+            });
+    },
+
+    /**
+     * Verifies that a specified dropzone does not have a specific width in the preview tab.
+     * @param {number} index - The index of the dropzone to check.
+     * @param {number} expectedWidth - The width that the dropzone should not have.
+     */
+    verifyDropzoneDoeNotHaveSpecifiedWidthPreviewTab: (index, expectedWidth) => {
+        dragAndDropIntoCategoriesPage.dropzoneCellPreviewTab()
+            .eq(index)
+            .invoke('css', 'width')
+            .then((width) => {
+                const actualWidth = parseFloat(width);
+                expect(actualWidth).to.not.be.closeTo(expectedWidth, 1);
+            });
+    },
+
+    /**
+   * Clicks on the edit color button.
+   * @param {number} buttonIndex - The index of the edit color button.
+   */
+    editColor: (buttonIndex) => {
+        utilities.getNthElement(dragAndDropIntoCategoriesPage.editColorButton(), buttonIndex)
+            .click();
+    },
+
+    /**
+     * Verifies the color of a color block.
+     * @param {number} blockIndex - The index of the color block.
+     * @param {string} color - The expected background color of the color block.
+     */
+    verifyColorBlockColor: (blockIndex, color) => {
+        utilities.verifyCSS(utilities.getNthElement(dragAndDropIntoCategoriesPage.colorBlock(), blockIndex), {
+            'background-color': color
+        });
+    },
+
+    /**
+     * @param {number} blockIndex index of the color block in the style and layout customization section
+     * @description this function verifies the selected state of a block
+     */
+    verifyColorBlockSelectedState: (blockIndex) => {
+        utilities.getNthElement(dragAndDropIntoCategoriesPage.colorBlock(), blockIndex)
+            .should('have.class', 'selected-button-icon')
+            .within(() => {
+                utilities.verifyElementVisibilityState(dragAndDropIntoCategoriesPage.colorBlockSelectedIcon(), 'visible');
+            });
+    },
+
+    /**
+     * Verifies the background color of grid
+     * @param {string} colorValue - The expected background color value.
+     */
+    verifyFillColorSpecifyCorrectAnswerSection: (colorValue) => {
+        utilities.verifyCSS(dragAndDropIntoCategoriesPage.dropzoneCellSpecifyCorrectAnswerSection(), {
+            'background-color': colorValue
+        });
+    },
+
+    /**
+    * Verifies the background color of grid
+    * @param {string} colorValue - The expected background color value.
+    */
+    verifyFillColorPreviewTab: (colorValue) => {
+        utilities.verifyCSS(dragAndDropIntoCategoriesPage.dropzoneCellPreviewTab(), {
+            'background-color': colorValue
+        });
+    },
+
+    /**
+     * Verifies the border color of grid
+     * @param {string} colorValue - The expected border color value.
+     */
+    verifyBorderColorSpecifyCorrectAnswer: (colorValue) => {
+        utilities.verifyCSS(dragAndDropIntoCategoriesPage.dropzoneCellSpecifyCorrectAnswerSection(), {
+            'border-left-color': colorValue
+        });
+    },
+
+    /**
+    * Verifies the border color of grid
+    * @param {string} colorValue - The expected border color value.
+    */
+    verifyBorderColorPreviewTab: (colorValue) => {
+        utilities.verifyCSS(dragAndDropIntoCategoriesPage.dropzoneCellPreviewTab(), {
+            'border-left-color': colorValue
+        });
+    },
+
+    /**
+    * Selects a color block by index.
+    * @param {number} blockIndex - The index of the color block to select.
+    */
+    selectColorBlock: (blockIndex) => {
+        utilities.getNthElement(dragAndDropIntoCategoriesPage.colorBlock(), blockIndex)
+            .click();
+    },
+
+    /**
+ * Selects a dropzone border style option.
+ * @param {string} borderStyleOption - The border style option to select.
+ */
+    selectDropzoneBorderStyleOption: (borderStyleOption) => {
+        dragAndDropIntoCategoriesPage.dropzoneBorderStyleOptions(borderStyleOption.toLowerCase())
+            .click();
+    },
+
+    /**
+     * Verifies that the specified dropzone border style option is selected.
+     * @param {string} borderStyleOption - The border style option to verify.
+     */
+    verifyDropzoneBorderStyleSelected: (borderStyleOption) => {
+        dragAndDropIntoCategoriesPage.dropzoneBorderStyleOptions(borderStyleOption.toLowerCase())
+            .should('have.attr', 'aria-pressed', 'true');
+    },
+
+    /**
+     * Verifies the border style of the dropzone in the "Specify Correct Answer" section.
+     * @param {string} borderStyle - The expected border style.
+     */
+    verifyDropzoneBorderStyleSpecifyCorrectAnswer: (borderStyle) => {
+        dragAndDropIntoCategoriesPage.dropzoneCellSpecifyCorrectAnswerSection()
+            .should('have.css', 'border-left-style', borderStyle);
+    },
+
+    /**
+     * Verifies the border style of the dropzone in the preview tab.
+     * @param {string} borderStyle - The expected border style.
+     */
+    verifyDropzoneBorderStylePreviewTab: (borderStyle) => {
+        dragAndDropIntoCategoriesPage.dropzoneCellPreviewTab()
+            .should('have.css', 'border-left-style', borderStyle);
+    },
+
+    /**
+     * Selects a draggable options border style option.
+     * @param {string} borderStyleOption - The border style option to select.
+     */
+    selectDraggableOptionsBorderStyleOption: (borderStyleOption) => {
+        dragAndDropIntoCategoriesPage.draggableOptionsBorderStyleOptions(borderStyleOption.toLowerCase())
+            .click();
+    },
+
+    /**
+     * Verifies that the specified draggable options border style option is selected.
+     * @param {string} borderStyleOption - The border style option to verify.
+     */
+    verifyDraggableOptionsBorderStyleSelected: (borderStyleOption) => {
+        dragAndDropIntoCategoriesPage.draggableOptionsBorderStyleOptions(borderStyleOption.toLowerCase())
+            .should('have.attr', 'aria-pressed', 'true');
+    },
+
+    /**
+     * Verifies the border style of the draggable options in the "Specify Correct Answer" section.
+     * @param {string} borderStyle - The expected border style.
+     */
+    verifyDraggableOptionsBorderStyleSpecifyCorrectAnswer: (borderStyle) => {
+        draggableOptionContainer.draggableOption()
+            .should('have.css', 'border-top-style', borderStyle);
+    },
+
+    /**
+     * Verifies the border style of the draggable options in the preview tab.
+     * @param {string} borderStyle - The expected border style.
+     */
+    verifyDraggableOptionsBorderStylePreviewTab: (borderStyle) => {
+        dragAndDropIntoCategoriesPage.optionsContainerPreviewTab()
+            .within(() => {
+                draggableOptionContainer.draggableOption()
+                    .should('have.css', 'border-top-style', borderStyle);
+            });
+    },
+
+    /**
+     * Verifies that the specified drag handle option is selected.
+     * @param {number} index - The index of the drag handle option to verify.
+     */
+    verifyDragHandleOptionSelected: (index) => {
+        dragAndDropIntoCategoriesPage.dragHandleOptions()
+            .eq(index)
+            .should('have.attr', 'aria-pressed', 'true')
+            .within(() => {
+                dragAndDropIntoCategoriesPage.colorBlockSelectedIcon()
+                    .should('exist');
+            });
+    },
+
+    /**
+     * Selects a drag handle option.
+     * @param {number} index - The index of the drag handle option to select.
+     */
+    selectDragHandleOption: (index) => {
+        dragAndDropIntoCategoriesPage.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':
+                dragAndDropIntoCategoriesPage.dragHandle()
+                    .should('have.class', 'drag-icon-button ');
+                break;
+            case 'arrow icon':
+                dragAndDropIntoCategoriesPage.dragHandle()
+                    .should('have.class', 'drag-arrows-icon ');
+                break;
+            case 'none':
+                dragAndDropIntoCategoriesPage.dragHandle()
+                    .should('not.exist');
+                break;
+        }
+    },
+
+    /**
+     * 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':
+                dragAndDropIntoCategoriesPage.previewTabQuestionWrapper()
+                    .within(() => {
+                        dragAndDropIntoCategoriesPage.dragHandle()
+                            .should('have.class', 'drag-icon-button ');
+                    });
+                break;
+            case 'arrow icon':
+                dragAndDropIntoCategoriesPage.previewTabQuestionWrapper()
+                    .within(() => {
+                        dragAndDropIntoCategoriesPage.dragHandle()
+                            .should('have.class', 'drag-arrows-icon ');
+                    });
+                break;
+            case 'none':
+                dragAndDropIntoCategoriesPage.previewTabQuestionWrapper()
+                    .within(() => {
+                        dragAndDropIntoCategoriesPage.dragHandle()
+                            .should('not.exist');
+                    });
+                break;
+        }
+    },
+
+    /**
+     * 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) => {
+        dragAndDropIntoCategoriesPage.previewTabQuestionWrapper()
+            .within(() => {
+                utilities.verifyCSS(dragAndDropIntoCategoriesPage.draggableOption(), {
+                    'background-color': colorValue
+                });
+            });
+    },
+
+    /**
+     * Verifies the border color of grid
+     * @param {string} colorValue - The expected border color value.
+     */
+    verifyDraggableOptionsBorderColorSpecifyCorrectAnswer: (colorValue) => {
+        utilities.verifyCSS(dragAndDropIntoCategoriesPage.draggableOption(), {
+            'border': `1px solid ${colorValue}`
+        });
+    },
+
+    /**
+    * Verifies the border color of grid
+    * @param {string} colorValue - The expected border color value.
+    */
+    verifyDraggableOptionsBorderColorPreviewTab: (colorValue) => {
+        dragAndDropIntoCategoriesPage.previewTabQuestionWrapper()
+            .within(() => {
+                utilities.verifyCSS(dragAndDropIntoCategoriesPage.draggableOption(), {
+                    'border': `1px solid ${colorValue}`
+                });
+            });
+    },
+
+    /**
+    * Verifies if the specified panel placement option is selected.
+    * @param {string} placementOption - The panel placement option to verify.
+    */
+    verifyPanelPlacementOptionSelected: (placementOption) => {
+        dragAndDropIntoCategoriesPage.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) => {
+        dragAndDropIntoCategoriesPage.panelPlacementOptions(placementOption)
+            .click();
+    },
+
+    /**
+     * Verifies if the specified option alignment in panel is selected.
+     * @param {string} alignmentOption - The alignment option to verify.
+     */
+    verifyOptionAlignmentInPanelOptionSelected: (alignmentOption) => {
+        dragAndDropIntoCategoriesPage.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) => {
+        dragAndDropIntoCategoriesPage.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':
+                dragAndDropIntoCategoriesPage.optionPanelWrapper()
+                    .should('have.css', 'width', '844px')
+                    .and('have.css', 'padding-top', '32px')
+                    .and('have.css', 'padding-bottom', '16px')
+                break;
+            case 'Top':
+                dragAndDropIntoCategoriesPage.optionPanelWrapper()
+                    .should('have.css', 'width', '844px')
+                    .and('have.css', 'padding-top', '16px')
+                    .and('have.css', 'padding-bottom', '32px')
+                break;
+            case 'Left':
+                dragAndDropIntoCategoriesPage.optionPanelWrapper()
+                    .should('have.css', 'width', '200px')
+                    .and('have.css', 'padding-right', '24px')
+                    .and('have.css', 'padding-left', '8px')
+                break;
+            case 'Right':
+                dragAndDropIntoCategoriesPage.optionPanelWrapper()
+                    .should('have.css', 'width', '200px')
+                    .and('have.css', 'padding-right', '8px')
+                    .and('have.css', 'padding-left', '24px')
+                break;
+        }
+    },
+
+    /**
+     * Verifies the panel placement in the preview tab.
+     * @param {string} placementOption - The panel placement option to verify.
+     */
+    verifyPanelPlacementPreviewTab: (placementOption) => {
+        dragAndDropIntoCategoriesPage.previewTabQuestionWrapper()
+            .within(() => {
+                switch (placementOption) {
+                    case 'Bottom':
+                        dragAndDropIntoCategoriesPage.optionPanelWrapper()
+                            .should('have.css', 'width', '844px')
+                            .and('have.css', 'padding-top', '32px')
+                            .and('have.css', 'padding-bottom', '16px')
+                        break;
+                    case 'Top':
+                        dragAndDropIntoCategoriesPage.optionPanelWrapper()
+                            .should('have.css', 'width', '844px')
+                            .and('have.css', 'padding-top', '16px')
+                            .and('have.css', 'padding-bottom', '32px')
+                        break;
+                    case 'Left':
+                        dragAndDropIntoCategoriesPage.optionPanelWrapper()
+                            .should('have.css', 'width', '200px')
+                            .and('have.css', 'padding-right', '24px')
+                            .and('have.css', 'padding-left', '8px')
+                        break;
+                    case 'Right':
+                        dragAndDropIntoCategoriesPage.optionPanelWrapper()
+                            .should('have.css', 'width', '200px')
+                            .and('have.css', 'padding-right', '8px')
+                            .and('have.css', 'padding-left', '24px')
+                        break;
+                }
+            });
+    },
+
+    /**
+     * 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':
+                dragAndDropIntoCategoriesPage.optionsWrapper()
+                    .should('have.css', 'justify-content', 'flex-start');
+                break;
+            case 'Center':
+                dragAndDropIntoCategoriesPage.optionsWrapper()
+                    .should('have.css', 'justify-content', 'center');
+                break;
+            case 'Right':
+                dragAndDropIntoCategoriesPage.optionsWrapper()
+                    .should('have.css', 'justify-content', 'flex-end');
+                break;
+        }
+    },
+
+    /**
+     * 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':
+                dragAndDropIntoCategoriesPage.optionsWrapperPreviewTab()
+                    .should('have.css', 'justify-content', 'flex-start');
+                break;
+            case 'Center':
+                dragAndDropIntoCategoriesPage.optionsWrapperPreviewTab()
+                    .should('have.css', 'justify-content', 'center');
+                break;
+            case 'Right':
+                dragAndDropIntoCategoriesPage.optionsWrapperPreviewTab()
+                    .should('have.css', 'justify-content', 'flex-end');
+                break;
+        }
+    },
+
+    /**
+     * Verifies the aria-label attribute of the dropzone in the specify correct answer section.
+     * @param {number} index - The index of the dropzone.
+     * @param {string} ariaLabel - The expected aria-label value.
+     */
+    verifyDropzoneAriaLabelSpecifyCorrectAnswerSection: (index, ariaLabel) => {
+        dragAndDropIntoCategoriesPage.dropzoneCellSpecifyCorrectAnswerSection()
+            .eq(index)
+            .should('have.attr', 'aria-describedby', ariaLabel);
+    },
+
+    /**
+     * Verifies the aria-label attribute of the dropzone in the preview tab.
+     * @param {number} index - The index of the dropzone.
+     * @param {string} ariaLabel - The expected aria-label value.
+     */
+    verifyDropzoneAriaLabelPreviewTab: (index, ariaLabel) => {
+        dragAndDropIntoCategoriesPage.dropzoneCellPreviewTab()
+            .eq(index)
+            .should('have.attr', 'aria-describedby', ariaLabel);
+    },
+
+
+    /**
+     * Verifies the numeration of dropzone cells in the Preview Tab.
+     * @param {number[]} dropZoneCellIndexArray - An array of expected numerations for each dropzone cell.
+     */
+    verifyDropzoneCellNumerationPreviewTab: (numerationArray) => {
+        numerationArray.forEach((option, index) => {
+            dragAndDropIntoCategoriesPage.dropzoneCellPreviewTab()
+                .eq(index)
+                .within(() => {
+                    utilities.verifyInnerText(dragAndDropIntoCategoriesPage.dropzoneCellNumeration(), `${option}`);
+                });
+        });
+    },
 }
 
 const tests = {
@@ -1305,6 +2259,9 @@ const tests = {
     ...createQuestionBasePage.tests,
     ...additionalSettingsPanel.tests,
     ...additionalSettingsAccessibilitySectionComponent.tests,
+    ...styleAndLayoutCustomizationAccordionComponent.tests,
+    ...gradingViewEnumerationComponent.tests,
+    ...ariaLabelSectionComponent.tests,
     verifyContentsOfSpecifyCorrectAnswerSection: (scoringType) => {
         it(`When the user selects ${scoringType} from scoring type dropdown then the specify correct answer sections should be displayed`, () => {
             dragAndDropIntoCategoriesPage.steps.verifyTableCellPropertySpecifyCorrectAnswer(0, 'None');