itemengine-cypress-automation 1.0.244 → 1.0.245

package/cypress/pages/matchingPage.js

@@ -1,6 +1,6 @@
 import constants from "../fixtures/constants";
 import utilities from "../support/helpers/utilities";
-import { createQuestionBasePage, questionInstructionsComponent, autoScoredScoringPreviewTab, scoringSectionBaseEditTab, draggableOptionContainer, draggableOptionsSectionComponent, correctIncorrectAnswerLabelComponent, maximumCapacityPerDropzoneComponent, optionsWrapperComponent, ckEditorToolbar, equationEditorFlyout, autoScoredStudentViewSettings, autoScoredSpecifyCorrectAnswerSection, commonComponents, randomizeOptionsComponent, autoScoredScoringSectionMultiResponseType, allowMultipleInstancesOfSameDraggableOptionComponent, studentViewSettingsLabelComponent, ariaLabelSectionComponent, additionalSettingsAccessibilitySectionComponent, gradingViewEnumerationComponent, additionalSettingsPanel, toolSettingsComponent } from "./components";
+import { createQuestionBasePage, questionInstructionsComponent, autoScoredScoringPreviewTab, scoringSectionBaseEditTab, draggableOptionContainer, draggableOptionsSectionComponent, correctIncorrectAnswerLabelComponent, maximumCapacityPerDropzoneComponent, optionsWrapperComponent, ckEditorToolbar, equationEditorFlyout, autoScoredStudentViewSettings, autoScoredSpecifyCorrectAnswerSection, commonComponents, randomizeOptionsComponent, autoScoredScoringSectionMultiResponseType, allowMultipleInstancesOfSameDraggableOptionComponent, studentViewSettingsLabelComponent, ariaLabelSectionComponent, additionalSettingsAccessibilitySectionComponent, gradingViewEnumerationComponent, additionalSettingsPanel, toolSettingsComponent, styleAndLayoutCustomizationAccordionComponent } from "./components";
 import { dialogBoxBase } from "./dialogBoxBase";
 const css = Cypress.env('css');
 const options = ['option 1', 'option 2', 'option 3'];
@@ -115,6 +115,71 @@ const selectors = {
     warningMessageContainer: () => cy.get('[class*="DropzoneLimitErrorMessagestyles__ErrorWrapper"]'),
     dropzoneColumnAndPromptHeaderWrapperPreviewTab: () => cy.get('.edit-question-preview-wrapper [class*="ClozeWithDragAndDropstyles__ResponseHeaderWrapper"]'),
     connectorIconPreviewTab: () => cy.get('.edit-question-preview-wrapper  [class*="ClozeWithDragAndDropstyles__ShowIconWrapper"]'),
+
+    //Style and layout
+    optionRowContainerSpecifyCorrectAnswerSection: () => cy.get('.match-list-response-wrapper'),
+    optionRowContainerPreviewTab: () => cy.get('.match-list-response-container'),
+    layoutLabel: () => cy.get('[class*="Layoutstyles__SectionWrapper"]'),
+    rowSpacingDropdownLabel: () => cy.get('#Row-spacing-dropdown-label'),
+    rowSpacingDropdown: () => cy.get('[aria-labelledby*="Row-spacing-dropdown-label"]').eq(0),
+    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"]').eq(0),
+    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`)
+        }
+    },
+    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-grid-wrapper .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"]'),
+    optionsPreviewTab: () => cy.get('[class*="CellDropZonestyles__DraggableItemWrapper"]'),
+    optionPanelWrapper: () => cy.get('.option-drag-and-drop'),
+    dropzoneCellSpecifyCorrectAnswerSection: () => cy.get('.correct-answer-accordion [class*="droppable-area"] .grading-style-with-enumeration'),
+    dropzoneCellPreviewTab: () => cy.get('.edit-question-preview-wrapper [class*="droppable-area"] .grading-style-with-enumeration')
 }
 
 const steps = {
@@ -139,6 +204,7 @@ const steps = {
     ...additionalSettingsPanel.steps,
     ...gradingViewEnumerationComponent.steps,
     ...ariaLabelSectionComponent.steps,
+    ...styleAndLayoutCustomizationAccordionComponent.steps,
 
     //Edit tab
     addPrompt: () => {
@@ -1629,7 +1695,545 @@ const steps = {
             default:
                 throw new Error('Invalid option');
         }
-    }
+    },
+
+    expandRowSpacingDropdown: () => {
+        matchingPage.rowSpacingDropdown()
+            .click();
+    },
+
+    /**
+     * This function selects row spacing option
+     * @param {string} rowSpacingOption of the row spacing
+     */
+    selectRowSpacingDropdownOption: (rowSpacingOption) => {
+        matchingPage.rowSpacingDropdownOptions(rowSpacingOption)
+            .click();
+    },
+
+    /**
+     * This function verified the selected state of row spacing option
+     * @param {string} rowSpacingOption of the row spacing
+     */
+    verifyRowSpacingOptionSelected: (rowSpacingOption) => {
+        matchingPage.rowSpacingDropdownOptions(rowSpacingOption)
+            .should('have.attr', 'aria-selected', 'true');
+    },
+
+    /**
+     * This function verifies the row spacing 
+     * @param {("Normal"|"Small"|"Wide")} spacing of the rows
+     */
+    verifyRowSpacingSpecifyCorrectAnswerSection: (spacing) => {
+        switch (spacing) {
+            case 'Normal':
+                matchingPage.optionRowContainerSpecifyCorrectAnswerSection()
+                    .eq(0)
+                    .should('have.css', 'margin-bottom', '24px');
+                break;
+            case 'Small':
+                matchingPage.optionRowContainerSpecifyCorrectAnswerSection()
+                    .eq(0)
+                    .should('have.css', 'margin-bottom', '16px');
+                break;
+            case 'Wide':
+                matchingPage.optionRowContainerSpecifyCorrectAnswerSection()
+                    .eq(0)
+                    .should('have.css', 'margin-bottom', '32px');
+                break;
+            default:
+                throw new Error(`Unsupported spacing option: ${spacing}`);
+        }
+    },
+
+    expandColumnSpacingDropdown: () => {
+        matchingPage.columnSpacingDropdown()
+            .click();
+    },
+
+    /**
+     * This function verified the selected state of row spacing option
+     * @param {string} rowSpacingOption of the row spacing
+     */
+    verifyColumnSpacingOptionSelected: (rowSpacingOption) => {
+        matchingPage.columnSpacingDropdownOptions(rowSpacingOption)
+            .should('have.attr', 'aria-selected', 'true');
+    },
+
+    /**
+     * This function selects row spacing option
+     * @param {string} rowSpacingOption of the row spacing
+     */
+    selectColumnSpacingDropdownOption: (rowSpacingOption) => {
+        matchingPage.columnSpacingDropdownOptions(rowSpacingOption)
+            .click();
+    },
+
+    /**
+     * This function verifies the row spacing 
+     * @param {("Normal"|"Small"|"Wide")} spacing of the rows
+     */
+    verifyColumnSpacingSpecifyCorrectAnswerSection: (spacing) => {
+        switch (spacing) {
+            case 'Normal':
+                matchingPage.connectorIcon()
+                    .each(($el) => {
+                        cy.wrap($el)
+                            .should('have.css', 'width', '32px');
+                    });
+                break;
+            case 'Small':
+                matchingPage.connectorIcon()
+                    .each(($el) => {
+                        cy.wrap($el)
+                            .should('have.css', 'width', '24px');
+                    });
+                break;
+            case 'Wide':
+                matchingPage.connectorIcon()
+                    .each(($el) => {
+                        cy.wrap($el)
+                            .should('have.css', 'width', '48px');
+                    });
+                break;
+            default:
+                throw new Error(`Unsupported spacing option: ${spacing}`);
+        }
+    },
+
+    /**
+     * This function verifies the row spacing 
+     * @param {("Normal"|"Small"|"Wide")} spacing of the rows
+     */
+    verifyRowSpacingPreviewTab: (spacing) => {
+        switch (spacing) {
+            case 'Normal':
+                matchingPage.optionRowContainerPreviewTab()
+                    .eq(0)
+                    .should('have.css', 'margin-bottom', '24px');
+                break;
+            case 'Small':
+                matchingPage.optionRowContainerPreviewTab()
+                    .eq(0)
+                    .should('have.css', 'margin-bottom', '16px');
+                break;
+            case 'Wide':
+                matchingPage.optionRowContainerPreviewTab()
+                    .eq(0)
+                    .should('have.css', 'margin-bottom', '32px');
+                break;
+            default:
+                throw new Error(`Unsupported spacing option: ${spacing}`);
+        }
+    },
+
+    /**
+     * This function verifies the row spacing 
+     * @param {("Normal"|"Small"|"Wide")} spacing of the rows
+     */
+    verifyColumnSpacingPreviewTab: (spacing) => {
+        switch (spacing) {
+            case 'Normal':
+                matchingPage.connectorIconPreviewTab()
+                    .each(($el) => {
+                        cy.wrap($el)
+                            .should('have.css', 'width', '32px');
+                    });
+                break;
+            case 'Small':
+                matchingPage.connectorIconPreviewTab()
+                    .each(($el) => {
+                        cy.wrap($el)
+                            .should('have.css', 'width', '24px');
+                    });
+                break;
+            case 'Wide':
+                matchingPage.connectorIconPreviewTab()
+                    .each(($el) => {
+                        cy.wrap($el)
+                            .should('have.css', 'width', '48px');
+                    });
+                break;
+            default:
+                throw new Error(`Unsupported spacing option: ${spacing}`);
+        }
+    },
+
+    expandDropzoneDimensionsDropdown: () => {
+        matchingPage.dropzoneDimensionsDropdown()
+            .click();
+    },
+
+    /**
+     * This function verified the selected state of column dimension dropdown
+     * @param {string} dropzoneDimensionsOption of the column dimension dropdown
+     */
+    verifyDropzoneDimensionsDropdownOptionSelected: (dropzoneDimensionsOption) => {
+        matchingPage.dropzoneDimensionsDropdownOptions(dropzoneDimensionsOption)
+            .should('have.attr', 'aria-selected', 'true');
+    },
+
+    /**
+     * This function verified the selected state of column dimension dropdown
+     * @param {string} dropzoneDimensionsOption of the column dimension dropdown
+     */
+    selectDropzoneDimensionsDropdownOption: (dropzoneDimensionsOption) => {
+        matchingPage.dropzoneDimensionsDropdownOptions(dropzoneDimensionsOption)
+            .click();
+    },
+
+    /**
+     * This function verifies the dimension of the column
+     * @param {("Auto"|"Custom")} dimension of the column
+     */
+    verifyDropzoneDimensionsSpecifyCorrectAnswer: (dimension) => {
+        switch (dimension) {
+            case 'Auto':
+                matchingPage.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':
+                matchingPage.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}`);
+        }
+    },
+
+
+    /**
+     * 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':
+                matchingPage.specifyForAllDropzoneColumnsRadioButton()
+                    .should('be.checked');
+                break;
+            case 'Specify for first dropzone column only':
+                matchingPage.specifyForFirstDropzoneColumnOnlyRadioButton()
+                    .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) => {
+        matchingPage.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) => {
+        matchingPage.dropzoneWidthInputField()
+            .eq(index)
+            .clear()
+            .type(width);
+        matchingPage.dropzoneWidthInputField()
+            .eq(index)
+            .click();
+        cy.wait(2000);
+        matchingPage.dropzoneWidthInputField()
+            .eq(index)
+            .blur();
+    },
+
+    /**
+      * 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) => {
+        matchingPage.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) => {
+        matchingPage.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':
+                matchingPage.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':
+                matchingPage.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}`);
+        }
+    },
+
+    /**
+     * 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) => {
+        matchingPage.dropzoneCellPreviewTab()
+            .eq(index)
+            .invoke('css', 'width')
+            .then((width) => {
+                const actualWidth = parseFloat(width);
+                expect(actualWidth).to.be.closeTo(expectedWidth, 1);
+            });
+    },
+
+    /**
+     * 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':
+                matchingPage.specifyForAllDropzoneColumnsRadioButton()
+                    .click()
+                    .should('be.checked');
+                break;
+            case 'Specify for first dropzone column only':
+                matchingPage.specifyForFirstDropzoneColumnOnlyRadioButton()
+                    .click()
+                    .should('be.checked');
+                break;
+            default:
+                throw new Error(`Unsupported dimension option: ${radioButton}`);
+        }
+    },
+
+    /**
+     * 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) => {
+        matchingPage.dropzoneCellPreviewTab()
+            .eq(index)
+            .invoke('css', 'width')
+            .then((width) => {
+                const actualWidth = parseFloat(width);
+                expect(actualWidth).to.not.be.closeTo(expectedWidth, 1);
+            });
+    },
+
+    /**
+     * 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(matchingPage.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(matchingPage.colorBlock(), blockIndex)
+            .should('have.class', 'selected-button-icon')
+            .within(() => {
+                utilities.verifyElementVisibilityState(matchingPage.colorBlockSelectedIcon(), 'visible');
+            });
+    },
+
+    /**
+     * Verifies the background color of grid
+     * @param {string} colorValue - The expected background color value.
+     */
+    verifyFillColorSpecifyCorrectAnswerSection: (colorValue) => {
+        utilities.verifyCSS(matchingPage.dropzoneCellSpecifyCorrectAnswerSection(), {
+            'background-color': colorValue
+        });
+    },
+
+    /**
+    * Verifies the background color of grid
+    * @param {string} colorValue - The expected background color value.
+    */
+    verifyFillColorPreviewTab: (colorValue) => {
+        utilities.verifyCSS(matchingPage.dropzoneCellPreviewTab(), {
+            'background-color': colorValue
+        });
+    },
+
+    /**
+    * Selects a color block by index.
+    * @param {number} blockIndex - The index of the color block to select.
+    */
+    selectColorBlock: (blockIndex) => {
+        utilities.getNthElement(matchingPage.colorBlock(), blockIndex)
+            .click();
+    },
+
+    /**
+    * Clicks on the edit color button.
+    * @param {number} buttonIndex - The index of the edit color button.
+    */
+    editColor: (buttonIndex) => {
+        utilities.getNthElement(matchingPage.editColorButton(), buttonIndex)
+            .click();
+    },
+
+    /**
+     * Verifies the border color of grid
+     * @param {string} colorValue - The expected border color value.
+     */
+    verifyBorderColorSpecifyCorrectAnswer: (colorValue) => {
+        utilities.verifyCSS(matchingPage.dropzoneCellSpecifyCorrectAnswerSection(), {
+            'border-left-color': colorValue
+        });
+    },
+
+    /**
+    * Verifies the border color of grid
+    * @param {string} colorValue - The expected border color value.
+    */
+    verifyBorderColorPreviewTab: (colorValue) => {
+        utilities.verifyCSS(matchingPage.dropzoneCellPreviewTab(), {
+            'border-left-color': colorValue
+        });
+    },
+
+    /**
+     * Verifies the border style of the dropzone in the "Specify Correct Answer" section.
+     * @param {string} borderStyle - The expected border style.
+     */
+    verifyDropzoneBorderStyleSpecifyCorrectAnswer: (borderStyle) => {
+        matchingPage.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) => {
+        matchingPage.dropzoneCellPreviewTab()
+            .should('have.css', 'border-left-style', borderStyle);
+    },
+
+    /**
+     * Verifies that the specified dropzone border style option is selected.
+     * @param {string} borderStyleOption - The border style option to verify.
+     */
+    verifyDropzoneBorderStyleSelected: (borderStyleOption) => {
+        matchingPage.dropzoneBorderStyleOptions(borderStyleOption.toLowerCase())
+            .should('have.attr', 'aria-pressed', 'true');
+    },
+
+    /**
+     * Selects a dropzone border style option.
+     * @param {string} borderStyleOption - The border style option to select.
+     */
+    selectDropzoneBorderStyleOption: (borderStyleOption) => {
+        matchingPage.dropzoneBorderStyleOptions(borderStyleOption.toLowerCase())
+            .click();
+    },
+
+    /**
+     * 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);
+    },
+
+    /**
+     * Selects a draggable options border style option.
+     * @param {string} borderStyleOption - The border style option to select.
+     */
+    selectDraggableOptionsBorderStyleOption: (borderStyleOption) => {
+        matchingPage.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) => {
+        matchingPage.draggableOptionsBorderStyleOptions(borderStyleOption.toLowerCase())
+            .should('have.attr', 'aria-pressed', 'true');
+    },
+
+    /**
+     * Verifies the border style of the draggable options in the preview tab.
+     * @param {string} borderStyle - The expected border style.
+     */
+    verifyDraggableOptionsBorderStylePreviewTab: (borderStyle) => {
+        matchingPage.optionsContainerPreviewTab()
+            .within(() => {
+                draggableOptionContainer.draggableOption()
+                    .should('have.css', 'border-top-style', borderStyle);
+            });
+    },
 }
 
 const tests = {
@@ -1652,6 +2256,7 @@ const tests = {
     ...allowMultipleInstancesOfSameDraggableOptionComponent.tests,
     ...autoScoredStudentViewSettings.tests,
     ...questionInstructionsComponent.tests,
+    ...styleAndLayoutCustomizationAccordionComponent.tests,
 
     verifyContentsOfSpecifyCorrectAnswerSection: () => {
         it('When user selects a scoring type then in the \'Correct\' accordion, all the contents should be displayed', () => {
@@ -2041,22 +2646,24 @@ const tests = {
             matchingPage.steps.clickAndDropOptionInDropzoneSpecifyCorrectAnswerSection([{ optionText: 'Petals', dropzoneIndex: 0 }]);
         });
 
-        it(`When the user has removed all the options from the dropzone in the ${accordionName} accordion,  should not be thrown any error in  \'${accordionName}\' accordion`, () => {
+        it(`When the user has removed all the options from the dropzone in the ${accordionName} accordion, \'Error: Please set a correct answer.\' error message should be thrown along with an error icon on the \'${accordionName}\' accordion`, () => {
             matchingPage.steps.clickAndDropOptionInOptionsContainerInSpecifyCorrectAnswerSection('Petals');
-            commonComponents.steps.verifyErrorMessageIsNotDisplayed();
+            utilities.verifyElementVisibilityState(commonComponents.errorMessage(), 'visible')
+            utilities.verifyInnerText(commonComponents.errorMessage(), 'Error: Please set a correct answer.');
             if (accordionName == 'Correct') {
                 autoScoredSpecifyCorrectAnswerSection.correctAnswerAccordion()
                     .within(() => {
-                        utilities.verifyElementVisibilityState(autoScoredSpecifyCorrectAnswerSection.specifyCorrectAnswerErrorIcon(), 'notExist');
+                        utilities.verifyElementVisibilityState(autoScoredSpecifyCorrectAnswerSection.specifyCorrectAnswerErrorIcon(), 'visible');
                     });
             } else {
                 autoScoredSpecifyCorrectAnswerSection.alternativeAnswerAccordion()
                     .within(() => {
-                        utilities.verifyElementVisibilityState(autoScoredSpecifyCorrectAnswerSection.specifyCorrectAnswerErrorIcon(), 'notExist');
+                        utilities.verifyElementVisibilityState(autoScoredSpecifyCorrectAnswerSection.specifyCorrectAnswerErrorIcon(), 'visible');
                     });
             };
         });
 
+        autoScoredSpecifyCorrectAnswerSection.tests.verifyAutoScoredCorrectAnswerErrorMessageCSSAndA11y();
 
         it('CSS of the dropzone border', { tags: 'css' }, () => {
             utilities.verifyCSS(matchingPage.dropzoneSpecifyCorrectAnswerSection().eq(0), {