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

package/cypress/pages/components/figCommonStyleAndLayoutComponent.js

@@ -0,0 +1,318 @@
+import utilities from "../../support/helpers/utilities"
+import { commonComponents } from "./commonComponents";
+import { questionInputFieldComponent } from "./questionInputFieldComponent"
+const css = Cypress.env('css');
+
+const selectors = {
+    componentContainerLabel: () => cy.get('[class*="styles__SectionWrapper"][class*="label"]'),
+    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"]'),
+    borderStyleLabel: () => cy.get('[class*="styles__LabelWrapper"].options-label'),
+    dashedBorderStyleToggleButton: () => cy.get('[data-ngie-testid="dashed-toggle-button"]').eq(0),
+    dottedBorderStyleToggleButton: () => cy.get('[data-ngie-testid="dotted-toggle-button"]').eq(0),
+    solidBorderStyleToggleButton: () => cy.get('[data-ngie-testid="solid-toggle-button"]').eq(0),
+    noneBorderStyleToggleButton: () => cy.get('[data-ngie-testid="none-toggle-button"]').eq(0),
+    colorBlockSelectedIcon: () => cy.get('[class*="BtnSelectionWrapper"] svg'),
+}
+
+const steps = {
+    /**
+     * Verifies the background color of a response area element.
+     * @param {number} responseAreaIndex - The index of the response area to verify.
+     * @param {string} colorValue - The expected background color value.
+     */
+    verifyResponseAreaFillColor: (responseAreaIndex, colorValue) => {
+        utilities.verifyCSS(utilities.getNthElement(questionInputFieldComponent.responseArea().find('.cke_widget_element'), responseAreaIndex), {
+            'background-color': colorValue
+        });
+    },
+
+    /**
+     * Verifies the border color of a response area element.
+     * @param {number} responseAreaIndex - The index of the response area to verify.
+     * @param {string} colorValue - The expected border color value.
+     */
+    verifyResponseAreaBorderColor: (responseAreaIndex, colorValue) => {
+        utilities.verifyCSS(utilities.getNthElement(questionInputFieldComponent.responseArea().find('.cke_widget_element'), responseAreaIndex), {
+            'border': colorValue
+        });
+    },
+
+    /**
+     * Verifies the border style of a response area element.
+     * @param {number} responseAreaIndex - The index of the response area to verify.
+     * @param {string} borderStyle - The expected border style value.
+     */
+    verifyResponseAreaBorderStyle: (responseAreaIndex, borderStyle) => {
+        const styleName = borderStyle.toLowerCase();
+        utilities.verifyCSS(utilities.getNthElement(questionInputFieldComponent.responseArea().find('.cke_widget_element'), responseAreaIndex), {
+            'border-style': styleName
+        });
+    },
+
+    /**
+     * Clicks on the edit color button.
+     * @param {number} buttonIndex - The index of the edit color button.
+     */
+    editColor: (buttonIndex) => {
+        utilities.getNthElement(figCommonStyleAndLayoutComponent.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(figCommonStyleAndLayoutComponent.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(figCommonStyleAndLayoutComponent.colorBlock(), blockIndex)
+            .should('have.class', 'selected-button-icon')
+            .within(() => {
+                utilities.verifyElementVisibilityState(figCommonStyleAndLayoutComponent.colorBlockSelectedIcon(), 'visible');
+            });
+    },
+
+    /**
+     * Selects a border style toggle button and verifies it has the selected class.
+     * @param {('Dashed' | 'Dotted' | 'Solid' | 'None')} button - The border style to select.
+     * @throws {Error} Throws an error if an invalid border style is provided.
+     */
+    selectBorderStyleToggleButton: (button) => {
+        switch (button) {
+            case 'Dashed':
+                figCommonStyleAndLayoutComponent.dashedBorderStyleToggleButton()
+                    .click()
+                    .should('have.class', 'ngie-toggle-button-selected');
+                break;
+            case 'Dotted':
+                figCommonStyleAndLayoutComponent.dottedBorderStyleToggleButton()
+                    .click()
+                    .should('have.class', 'ngie-toggle-button-selected');
+                break;
+            case 'Solid':
+                figCommonStyleAndLayoutComponent.solidBorderStyleToggleButton()
+                    .click()
+                    .should('have.class', 'ngie-toggle-button-selected');
+                break;
+            case 'None':
+                figCommonStyleAndLayoutComponent.noneBorderStyleToggleButton()
+                    .click()
+                    .should('have.class', 'ngie-toggle-button-selected');
+                break;
+            default:
+                throw new Error('Invalid border style');
+        }
+    },
+
+    /**
+     * Verifies the selected state of a border style toggle button.
+     * @param {('Dashed' | 'Dotted' | 'Solid' | 'None')} button - The border style to verify.
+     * @throws {Error} Throws an error if an invalid border style is provided.
+     */
+    verifyBorderStyleToggleButtonSelectedState: (button) => {
+        switch (button) {
+            case 'Dashed':
+                figCommonStyleAndLayoutComponent.dashedBorderStyleToggleButton()
+                    .should('have.class', 'ngie-toggle-button-selected');
+                break;
+            case 'Dotted':
+                figCommonStyleAndLayoutComponent.dottedBorderStyleToggleButton()
+                    .should('have.class', 'ngie-toggle-button-selected');
+                break;
+            case 'Solid':
+                figCommonStyleAndLayoutComponent.solidBorderStyleToggleButton()
+                    .should('have.class', 'ngie-toggle-button-selected');
+                break;
+            case 'None':
+                figCommonStyleAndLayoutComponent.noneBorderStyleToggleButton()
+                    .should('have.class', 'ngie-toggle-button-selected');
+                break;
+            default:
+                throw new Error('Invalid border style');
+        }
+    },
+
+    /**
+     * Selects a color block by index.
+     * @param {number} blockIndex - The index of the color block to select.
+     */
+    selectColorBlock: (blockIndex) => {
+        utilities.getNthElement(figCommonStyleAndLayoutComponent.colorBlock(), blockIndex)
+            .click();
+    }
+}
+
+const tests = {
+    verifyFillColorSectionContents: () => {
+        it('"Fill color" label and two color blocks and an "Edit color" button should be displayed. The selected color block should be of color "rgb(245, 248, 255)" and the other color block should have "No color"', () => {
+            utilities.verifyInnerText(figCommonStyleAndLayoutComponent.fillColorLabel(), 'Fill color');
+            figCommonStyleAndLayoutComponent.steps.verifyColorBlockColor(0, css.color.optionsBg);
+            figCommonStyleAndLayoutComponent.steps.verifyColorBlockSelectedState(0);
+            figCommonStyleAndLayoutComponent.steps.verifyColorBlockColor(1, css.color.none);
+            utilities.verifyInnerText(utilities.getNthElement(figCommonStyleAndLayoutComponent.editColorButton(), 0), 'Edit color');
+            utilities.verifyElementVisibilityState(figCommonStyleAndLayoutComponent.editColorButton(), 'visible');
+        });
+    },
+
+    verifyBorderColorSectionContents: () => {
+        it('"Border color" label and two color blocks and an "Edit color" button should be displayed. The selected color block should be of color "rgb(82, 0, 255) and the other color block should have "No color"', () => {
+            utilities.verifyInnerText(figCommonStyleAndLayoutComponent.borderColorLabel(), 'Border color');
+            utilities.verifyInnerText(utilities.getNthElement(figCommonStyleAndLayoutComponent.editColorButton(), 1), 'Edit color');
+            utilities.verifyElementVisibilityState(figCommonStyleAndLayoutComponent.editColorButton(), 'visible');
+            figCommonStyleAndLayoutComponent.steps.verifyColorBlockColor(2, css.color.activeComponentBorder);
+            figCommonStyleAndLayoutComponent.steps.verifyColorBlockSelectedState(2);
+            figCommonStyleAndLayoutComponent.steps.verifyColorBlockColor(3, css.color.none);
+        });
+    },
+
+    /**
+     * Verifies the contents of the "Border style" section.
+     * This function checks that the "Border style" label and four toggle buttons
+     * ("Dashed", "Dotted", "Solid", "None") are displayed, and that the specified
+     * toggle button is in the selected state by default.
+     * @param {string} selectedStyle - The style that should be selected by default. It should be one of 'Dashed', 'Dotted', 'Solid', or 'None'.
+     */
+    verifyBorderStyleSectionContents: (selectedStyle) => {
+        it(`"Border style" label and four toggle buttons should be displayed - "Dashed", "Dotted", "Solid", "None". By default ${selectedStyle} button should be in selected state`, () => {
+            utilities.verifyInnerText(figCommonStyleAndLayoutComponent.borderStyleLabel(), 'Border style');
+            utilities.verifyInnerText(figCommonStyleAndLayoutComponent.dashedBorderStyleToggleButton(), 'Dashed');
+            utilities.verifyElementVisibilityState(figCommonStyleAndLayoutComponent.dashedBorderStyleToggleButton(), 'visible');
+            utilities.verifyInnerText(figCommonStyleAndLayoutComponent.dottedBorderStyleToggleButton(), 'Dotted');
+            utilities.verifyElementVisibilityState(figCommonStyleAndLayoutComponent.dottedBorderStyleToggleButton(), 'visible');
+            utilities.verifyInnerText(figCommonStyleAndLayoutComponent.solidBorderStyleToggleButton(), 'Solid');
+            utilities.verifyElementVisibilityState(figCommonStyleAndLayoutComponent.solidBorderStyleToggleButton(), 'visible');
+            figCommonStyleAndLayoutComponent.steps.verifyBorderStyleToggleButtonSelectedState(selectedStyle);
+            utilities.verifyInnerText(figCommonStyleAndLayoutComponent.noneBorderStyleToggleButton(), 'None');
+            utilities.verifyElementVisibilityState(figCommonStyleAndLayoutComponent.noneBorderStyleToggleButton(), 'visible');
+        });
+    },
+
+    verifyFillColorTooltips: () => {
+        it('When the user hovers over the color blocks in the "Fill color" section, hex code of the selected color should be displayed in a tooltip', () => {
+            utilities.getNthElement(figCommonStyleAndLayoutComponent.colorBlock(), 0).verifyTooltip('#F5F8FF');
+            utilities.getNthElement(figCommonStyleAndLayoutComponent.colorBlock(), 1).verifyTooltip('None');
+        });
+    },
+
+    verifyBorderColorTooltips: () => {
+        it('When the user hovers over the color blocks in the "Border color" section, hex code of the selected color should be displayed in a tooltip', () => {
+            utilities.getNthElement(figCommonStyleAndLayoutComponent.colorBlock(), 2).verifyTooltip('#5200FF');
+            utilities.getNthElement(figCommonStyleAndLayoutComponent.colorBlock(), 3).verifyTooltip('None');
+        });
+    },
+
+    /**
+     * Verifies the CSS and accessibility (a11y) of the "Style and layout customization accordion contents".
+     * This function performs the following checks:
+     * 1. Verifies the CSS properties of various elements within the "Style and layout customization accordion contents".
+     * 2. Checks the accessibility of the accordion contents.
+     * 3. Verifies the CSS properties of elements in their hover state.
+     * @param {string} selectedStyle - The border style that should be in the selected state by default. It should be either 'Solid' or 'Dashed'.
+     */
+    verifyStyleAndLayoutCustomizationAccordionContentsCSSAndA11y: (selectedStyle) => {
+        it('CSS of "Style and layout customization accordion contents"', { tags: 'css' }, () => {
+            utilities.verifyCSS(figCommonStyleAndLayoutComponent.componentContainerLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(figCommonStyleAndLayoutComponent.fillColorLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(figCommonStyleAndLayoutComponent.borderColorLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(utilities.getNthElement(figCommonStyleAndLayoutComponent.colorBlock(), 0), {
+                'background-color': css.color.optionsBg,
+                'border': `1px solid ${css.color.figDefaultComponentBorder}`
+            });
+            utilities.verifyCSS(utilities.getNthElement(figCommonStyleAndLayoutComponent.editColorButton(), 0), {
+                'color': css.color.activeButtons,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular,
+                'background-color': css.color.transparent
+            });
+            utilities.verifyCSS(figCommonStyleAndLayoutComponent.borderStyleLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(figCommonStyleAndLayoutComponent.dottedBorderStyleToggleButton(), {
+                'color': css.color.secondaryBtn,
+                'background-color': css.color.secondaryBtnBg,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular,
+                'border': `1px solid ${css.color.figDefaultComponentBorder}`
+            });
+            let selectedToggleButton;
+            if (selectedStyle == 'Solid') {
+                selectedToggleButton = figCommonStyleAndLayoutComponent.solidBorderStyleToggleButton();
+            } else {
+                selectedToggleButton = figCommonStyleAndLayoutComponent.dashedBorderStyleToggleButton();
+            }
+            utilities.verifyCSS(selectedToggleButton, {
+                'color': css.color.defaultBackground,
+                'background-color': css.color.secondaryBtnBg,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular,
+                'border': `2px solid ${css.color.secondaryBtnActive}`
+            });
+        });
+
+        it('Accessibility of "Style and layout customization accordion contents"', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(figCommonStyleAndLayoutComponent.componentContainerLabel().parents('.ngie-accordion-detail'))
+        });
+
+        it('CSS of "Style and layout customization accordion contents" - hover state', { tags: 'css' }, () => {
+            utilities.triggerMouseover(utilities.getNthElement(figCommonStyleAndLayoutComponent.colorBlock(), 0));
+            utilities.verifyElementVisibilityState(commonComponents.tooltipText(), 'visible');
+            utilities.verifyCSS(commonComponents.tooltipText(), {
+                'background-color': css.color.tooltipBg,
+                'color': css.color.whiteText,
+                'font-size': css.fontSize.small,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.triggerMouseout(utilities.getNthElement(figCommonStyleAndLayoutComponent.colorBlock(), 0));
+            utilities.verifyElementVisibilityState(commonComponents.tooltipText(), 'notExist');
+            utilities.hoverOverElement(utilities.getNthElement(figCommonStyleAndLayoutComponent.editColorButton(), 0));
+            utilities.verifyCSS(utilities.getNthElement(figCommonStyleAndLayoutComponent.editColorButton(), 0), {
+                'background-color': css.color.optionsBg,
+                'color': css.color.activeButtons,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.hoverAwayFromElement();
+            utilities.hoverOverElement(figCommonStyleAndLayoutComponent.dottedBorderStyleToggleButton());
+            utilities.verifyCSS(figCommonStyleAndLayoutComponent.dottedBorderStyleToggleButton(), {
+                'color': css.color.secondaryBtn,
+                'background-color': css.color.secondaryBtnBg,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular,
+                'border': `2px solid ${css.color.secondaryBtnBorder}`
+            });
+            utilities.hoverAwayFromElement();
+        });
+    }
+}
+
+export const figCommonStyleAndLayoutComponent = {
+    ...selectors,
+    steps,
+    tests,
+}

package/cypress/pages/components/fillInTheGapsDropdownCommonComponent.js

@@ -666,7 +666,44 @@ const steps = {
         fillInTheGapsDropdownCommonComponent.dropdownSpecifyCorrectAnswerSection()
             .eq(inputFieldIndex)
             .should('have.attr', 'aria-label', ariaLabel)
-    }
+    },
+
+    /**
+     * Verifies the background color of the dropdown at the specified index.
+     *
+     * @param {number} dropdownIndex - The index of the dropdown to verify.
+     * @param {string} colorValue - The expected background color value in CSS format.
+     */
+    verifyDropdownFillColor: (dropdownIndex, colorValue) => {
+        utilities.verifyCSS(utilities.getNthElement(fillInTheGapsDropdownCommonComponent.dropdownPreviewTab(), dropdownIndex), {
+            'background-color': colorValue
+        });
+    },
+
+    /**
+     * Verifies the border color of the dropdown at the specified index.
+     *
+     * @param {number} dropdownIndex - The index of the dropdown to verify.
+     * @param {string} borderValue - The expected border color value in CSS format.
+     */
+    verifyDropdownBorderColor: (dropdownIndex, borderValue) => {
+        utilities.verifyCSS(utilities.getNthElement(fillInTheGapsDropdownCommonComponent.dropdownPreviewTab(), dropdownIndex), {
+            'border': borderValue
+        });
+    },
+
+    /**
+     * Verifies the border style of the dropdown at the specified index.
+     *
+     * @param {number} dropdownIndex - The index of the dropdown to verify.
+     * @param {string} borderStyle - The expected border style value in CSS format.
+     */
+    verifyDropdownBorderStyle: (dropdownIndex, borderStyle) => {
+        const styleName = borderStyle.toLowerCase();
+        utilities.verifyCSS(utilities.getNthElement(fillInTheGapsDropdownCommonComponent.dropdownPreviewTab(), dropdownIndex), {
+            'border-style': styleName
+        });
+    },
 }
 
 const tests = {

package/cypress/pages/components/fillInTheGapsTextCommonComponent.js

@@ -851,6 +851,40 @@ const steps = {
         fillInTheGapsTextCommonComponent.answerInputFieldSpecifyCorrectAnswerSection()
             .eq(inputFieldIndex)
             .should('have.attr', 'aria-label', ariaLabel)
+    },
+
+    /**
+     * Verifies the background color of the answer input field at the specified index.
+     * @param {number} responseAreaIndex - The index of the response area to verify.
+     * @param {string} colorValue - The expected background color value in CSS format.
+     */
+    verifyAnswerInputFieldFillColor: (responseAreaIndex, colorValue) => {
+        utilities.verifyCSS(utilities.getNthElement(fillInTheGapsTextCommonComponent.answerInputFieldPreviewTab().parent('.response-input-field'), responseAreaIndex), {
+            'background-color': colorValue
+        });
+    },
+
+    /**
+     * 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.
+     */
+    verifyAnswerInputFieldBorderColor: (responseAreaIndex, borderValue) => {
+        utilities.verifyCSS(utilities.getNthElement(fillInTheGapsTextCommonComponent.answerInputFieldPreviewTab().parent('.response-input-field'), responseAreaIndex), {
+            'border': borderValue
+        });
+    },
+
+    /**
+     * Verifies the border style of the answer input field at the specified index.
+     * @param {number} responseAreaIndex - The index of the response area to verify.
+     * @param {string} borderStyle - The expected border style value in CSS format.
+     */
+    verifyAnswerInputFieldBorderStyle: (responseAreaIndex, borderStyle) => {
+        const styleName = borderStyle.toLowerCase();
+        utilities.verifyCSS(utilities.getNthElement(fillInTheGapsTextCommonComponent.answerInputFieldPreviewTab().parent('.response-input-field'), responseAreaIndex), {
+            'border-style': styleName
+        });
     }
 }
 

package/cypress/pages/components/gridQuestionCommonComponent.js

@@ -983,6 +983,7 @@ const steps = {
     verifyCellPropertyMenuOptionIsSelected: (cellType) => {
         gridQuestionCommonComponent.editCellPropertyListOption()
             .contains(`${cellType}`, { matchCase: false })
+            .parents('[role="menuitem"]')
             .should('have.class', 'Mui-selected');
     },
 

package/cypress/pages/components/imageCanvasComponent.js

@@ -314,6 +314,8 @@ const steps = {
         imageCanvasComponent.canvasHeightInputField()
             .clear()
             .type(height);
+        imageCanvasComponent.canvasHeightInputField()
+            .blur();
     },
 
     /**

package/cypress/pages/components/index.js

@@ -72,5 +72,7 @@ export * from './numberLineCommonComponent';
 export * from './limitNumberOfRetakeComponent';
 export * from './allowTeachersToDownloadStudentResponseComponent';
 export * from './singleMultipleSelectionModeComponent';
+export * from './figCommonStyleAndLayoutComponent'
 export * from './showAvailableOptionsToStudents';
-export * from './showStudentMaximumNumberOfPossibleSelections';
+export * from './showStudentMaximumNumberOfPossibleSelections';
+export * from './draggableOptionsStyleAndLayoutComponent';

package/cypress/pages/components/optionsWrapperComponent.js

@@ -147,8 +147,7 @@ const steps = {
     addTextInputToOptionsInputFieldWithImage: (index) => {
         optionsWrapperComponent.optionsInputField()
             .eq(index)
-            .type('Petals')
-            .should('have.text', '​​​​​​​Petals');
+            .type('Petals');
     },
 
     /**

package/cypress/pages/fillInTheGapsDragAndDropPage.js

@@ -1,7 +1,7 @@
 import constants from "../fixtures/constants";
 import utilities from "../support/helpers/utilities";
 const css = Cypress.env('css');
-import { createQuestionBasePage, optionsWrapperComponent, autoScoredScoringPreviewTab, scoringSectionBaseEditTab, questionInputFieldComponent, fillInTheGapsDragAndDropCommonComponents, correctIncorrectAnswerLabelComponent, questionInstructionsComponent, autoScoredStudentViewSettings, ckEditorToolbar, equationEditorFlyout, draggableOptionContainer, autoScoredScoringSectionMultiResponseType, autoScoredSpecifyCorrectAnswerSection, commonComponents, draggableOptionsSectionComponent, studentViewSettingsLabelComponent, randomizeOptionsComponent, enableOuterBorderComponent, allowMultipleInstancesOfSameDraggableOptionComponent, additionalSettingsPanel, responseAreaSettingsPopupComponent } from "./components"
+import { createQuestionBasePage, optionsWrapperComponent, autoScoredScoringPreviewTab, scoringSectionBaseEditTab, questionInputFieldComponent, fillInTheGapsDragAndDropCommonComponents, correctIncorrectAnswerLabelComponent, questionInstructionsComponent, autoScoredStudentViewSettings, ckEditorToolbar, equationEditorFlyout, draggableOptionContainer, autoScoredScoringSectionMultiResponseType, autoScoredSpecifyCorrectAnswerSection, commonComponents, draggableOptionsSectionComponent, studentViewSettingsLabelComponent, randomizeOptionsComponent, enableOuterBorderComponent, allowMultipleInstancesOfSameDraggableOptionComponent, additionalSettingsPanel, responseAreaSettingsPopupComponent, styleAndLayoutCustomizationAccordionComponent, figCommonStyleAndLayoutComponent, draggableOptionsStyleAndLayoutComponent } from "./components"
 
 //TODO update option container selectors when https://redmine.zeuslearning.com/issues/563159 is resolved
 const selectors = {
@@ -20,6 +20,9 @@ const selectors = {
     ...enableOuterBorderComponent,
     ...responseAreaSettingsPopupComponent,
     ...additionalSettingsPanel,
+    ...styleAndLayoutCustomizationAccordionComponent,
+    ...figCommonStyleAndLayoutComponent,
+    ...draggableOptionsStyleAndLayoutComponent,
     //Dropzone settings popup
     dropzoneSettingsWordWrapLabel: () => cy.get('[data-ngie-testid="word-wrap-checkbox"] [class*="label"]'),
     dropzoneSettingsWordWrapCheckbox: () => cy.get('[data-ngie-testid="word-wrap-checkbox"] input'),
@@ -76,6 +79,9 @@ const steps = {
     ...allowMultipleInstancesOfSameDraggableOptionComponent.steps,
     ...additionalSettingsPanel.steps,
     ...responseAreaSettingsPopupComponent.steps,
+    ...styleAndLayoutCustomizationAccordionComponent.steps,
+    ...figCommonStyleAndLayoutComponent.steps,
+    ...draggableOptionsStyleAndLayoutComponent.steps,
     /**
      * Sets options in dropzone in the Preview Tab based on the provided optionsObject.
      * @param {Object} optionsObject - An object where keys are option texts and values are dropzone indices.
@@ -732,6 +738,157 @@ const steps = {
         fillInTheGapsDragAndDropPage.partialEqualWeightsPointsPerResponseScore()
             .should('have.text', pointsPerResponse);
     },
+
+    /**
+     * Verifies the placement of the draggable option panel.
+     * @param {('Bottom' | 'Top' | 'Left' | 'Right')} panelPlacement - The placement of the draggable option panel. 
+     * @throws {Error} If an invalid panel placement is provided.
+     */
+    verifyDraggableOptionPanelPlacement: (panelPlacement) => {
+        const draggableOptionPanelWrapper = draggableOptionContainer.optionsContainerPreviewTab().parents('.preview-container')
+        switch (panelPlacement) {
+            case 'Bottom':
+                draggableOptionPanelWrapper
+                    .should('have.class', 'placement-bottom');
+                break;
+            case 'Top':
+                draggableOptionPanelWrapper
+                    .should('have.class', 'placement-top');
+                break;
+            case 'Left':
+                draggableOptionPanelWrapper
+                    .should('have.class', 'placement-left');
+                break;
+            case 'Right':
+                draggableOptionPanelWrapper
+                    .should('have.class', 'placement-right');
+                break;
+            default:
+                throw new Error('Invalid placement');
+        }
+    },
+
+    /**
+     * Verifies the alignment of the draggable options.
+     * @param {('Left' | 'Center' | 'Right')} optionAlignment - The alignment of the draggable options.
+     * @throws {Error} If an invalid option alignment is provided.
+     */
+    verifyDraggableOptionAlignment: (optionAlignment) => {
+        const draggableOptionListWrapper = draggableOptionContainer.draggableOption().parents('.draggable-items-grid')
+        switch (optionAlignment) {
+            case 'Left':
+                draggableOptionListWrapper
+                    .should('have.class', 'option-left-align');
+                break;
+            case 'Center':
+                draggableOptionListWrapper
+                    .should('have.class', 'option-center-align');
+                break;
+            case 'Right':
+                draggableOptionListWrapper
+                    .should('have.class', 'option-right-align');
+                break;
+            default:
+                throw new Error('Invalid option alignment');
+        }
+    },
+
+    /**
+     * Verifies the fill color of a draggable option.
+     * @param {number} optionIndex - The index of the draggable option.
+     * @param {string} colorValue - The expected background color value of the draggable option.
+     */
+    verifyDraggableOptionFillColor: (optionIndex, colorValue) => {
+        utilities.verifyCSS(utilities.getNthElement(draggableOptionContainer.draggableOption(), optionIndex), {
+            'background-color': colorValue
+        });
+    },
+
+    /**
+     * Verifies the border color of a draggable option.
+     * @param {number} optionIndex - The index of the draggable option.
+     * @param {string} borderValue - The expected border value of the draggable option.
+     */
+    verifyDraggableOptionBorderColor: (optionIndex, borderValue) => {
+        utilities.verifyCSS(utilities.getNthElement(draggableOptionContainer.draggableOption(), optionIndex), {
+            'border': borderValue
+        });
+    },
+
+    /**
+     * Verifies the border style of a draggable option.
+     * @param {number} optionIndex - The index of the draggable option.
+     * @param {string} borderStyle - The expected border style of the draggable option.
+     */
+    verifyDraggableOptionBorderStyle: (optionIndex, borderStyle) => {
+        const styleName = borderStyle.toLowerCase();
+        utilities.verifyCSS(utilities.getNthElement(draggableOptionContainer.draggableOption(), optionIndex), {
+            'border-style': styleName
+        });
+    },
+
+    /**
+     * Verifies the drag handle icon of the draggable options.
+     * @param {('Default' | 'Arrows' | 'None')} dragIcon - The type of drag icon.
+     * @throws {Error} If an incorrect drag icon is provided.
+     */
+    verifyDraggableOptionDragHandleIcon: (dragIcon) => {
+        draggableOptionContainer.draggableOption()
+            .each(($element) => {
+                cy.wrap($element)
+                    .within(() => {
+                        switch (dragIcon) {
+                            case 'Default':
+                                draggableOptionContainer.draggableOptionDragIcon()
+                                    .should('have.class', 'drag-icon-button');
+                                break;
+                            case 'Arrows':
+                                draggableOptionContainer.draggableOptionDragIcon()
+                                    .should('have.class', 'drag-arrows-icon');
+                                break;
+                            case 'None':
+                                utilities.verifyElementVisibilityState(draggableOptionContainer.draggableOptionDragIcon(), 'notExist');
+                                break;
+                            default:
+                                throw new Error('Incorrect drag icon');
+                        }
+                    });
+            });
+    },
+
+    /**
+     * Verifies the background color of the dropzone at the specified index.
+     * @param {number} dropzoneIndex - The index of the response area to verify.
+     * @param {string} colorValue - The expected background color value in CSS format.
+     */
+    verifyDropzoneFillColor: (dropzoneIndex, colorValue) => {
+        utilities.verifyCSS(utilities.getNthElement(fillInTheGapsDragAndDropPage.dropzonePreviewTab(), dropzoneIndex), {
+            'background-color': colorValue
+        });
+    },
+
+    /**
+     * Verifies the border color of the dropzone at the specified index.
+     * @param {number} dropzoneIndex - The index of the response area to verify.
+     * @param {string} borderValue - The expected border color value in CSS format.
+     */
+    verifyDropzoneBorderColor: (dropzoneIndex, borderValue) => {
+        utilities.verifyCSS(utilities.getNthElement(fillInTheGapsDragAndDropPage.dropzonePreviewTab(), dropzoneIndex), {
+            'border': borderValue
+        });
+    },
+
+    /**
+     * Verifies the border style of the dropzone at the specified index.
+     * @param {number} dropzoneIndex - The index of the response area to verify.
+     * @param {string} borderStyle - The expected border style value in CSS format.
+     */
+    verifyDropzoneBorderStyle: (dropzoneIndex, borderStyle) => {
+        const styleName = borderStyle.toLowerCase();
+        utilities.verifyCSS(utilities.getNthElement(fillInTheGapsDragAndDropPage.dropzonePreviewTab(), dropzoneIndex), {
+            'border-style': styleName
+        });
+    }
 }
 
 const tests = {
@@ -752,7 +909,9 @@ const tests = {
     ...questionInstructionsComponent.tests,
     ...questionInputFieldComponent.tests,
     ...additionalSettingsPanel.tests,
-
+    ...styleAndLayoutCustomizationAccordionComponent.tests,
+    ...figCommonStyleAndLayoutComponent.tests,
+    ...draggableOptionsStyleAndLayoutComponent.tests,
     verifyContentsOfSpecifyCorrectAnswerSection: () => {
         it('When user selects a scoring type then in the \'Correct\' accordion, all the contents should be displayed', () => {
             utilities.verifyElementCount(fillInTheGapsDragAndDropPage.dropzoneSpecifyCorrectAnswerSection(), 3);