itemengine-cypress-automation 1.0.155-migrationScripts-86e4c95.0 → 1.0.155

package/cypress/pages/gridFillPage.js

@@ -1,4 +1,4 @@
-import { commonComponents, autoScoredScoringSectionMultiResponseType, questionInputFieldComponent, correctIncorrectAnswerLabelComponent, questionInstructionsComponent, scoringSectionBaseEditTab, createQuestionBasePage, additionalSettingsPanel, autoScoredScoringPreviewTab, additionalSettingsAccessibilitySectionComponent, autoScoredStudentViewSettings, autoScoredSpecifyCorrectAnswerSection, studentViewSettingsLabelComponent } from "./components";
+import { commonComponents, autoScoredScoringSectionMultiResponseType, questionInputFieldComponent, correctIncorrectAnswerLabelComponent, questionInstructionsComponent, scoringSectionBaseEditTab, createQuestionBasePage, additionalSettingsPanel, autoScoredScoringPreviewTab, additionalSettingsAccessibilitySectionComponent, autoScoredStudentViewSettings, autoScoredSpecifyCorrectAnswerSection, studentViewSettingsLabelComponent, colorPopupComponent, backgroundImageUploadComponent, imageCanvasComponent, imageActionsComponent } from "./components";
 import { dialogBoxBase } from ".";
 import utilities from "../support/helpers/utilities";
 const css = Cypress.env('css');
@@ -10,9 +10,27 @@ const selectors = {
     ...autoScoredScoringSectionMultiResponseType,
     ...autoScoredSpecifyCorrectAnswerSection,
     ...correctIncorrectAnswerLabelComponent,
-    ...commonComponents,
     ...autoScoredScoringPreviewTab,
-
+    ...backgroundImageUploadComponent,
+    ...dialogBoxBase,
+    ...imageCanvasComponent,
+    ...imageActionsComponent,
+
+    //grid layout
+    gridLayoutLabel: () => cy.get('[class*="GridFillstyles__CanvasParameterLabelWrapper"]'),
+    selectLayoutLabel: () => cy.get('.layout-accordian-cls [class*="GridFillstyles__CanvasInputLabelWrapper"]'),
+    openTheGridSelectorDropdownButton: () => cy.get('.layout-accordian-cls .ngie-accordion-summary'),
+    openTheGridSelectorDropdownButtonLabel: () => cy.get('.layout-accordian-cls .ngie-accordion-summary .label-properties'),
+    gridInOpenTheGridSelectorDropdownContainer: () => cy.get('.add-rows-cols-grid-container'),
+    cellInOpenTheGridSelectorAccordion: () => cy.get('.add-rows-cols-grid-container [class*="GridFillstyles__CellContainer"]'),
+    cellHeightLabel: () => cy.get('[class*="WidthHeightWrapper"] [class*="CanvasInputLabelWrapper"]').eq(0),
+    cellHeightInputField: () => cy.get('[class*="WidthHeightWrapper"] input').eq(0),
+    cellWidthLabel: () => cy.get('[class*="WidthHeightWrapper"] [class*="CanvasInputLabelWrapper"]').eq(1),
+    cellWidthInputField: () => cy.get('[class*="WidthHeightWrapper"] input').eq(1),
+    makeResponsiveLabel: () => cy.get('.mobile-responsive-wrapper .MuiFormControlLabel-label'),
+    makeResponsiveCheckbox: () => cy.get('.mobile-responsive-wrapper input'),
+    makeResponsiveCheckboxIcon: () => cy.get('.mobile-responsive-wrapper .MuiSwitch-thumb'),
+    whatIsThisLabel: () => cy.get('.what-is-wrapper [class*="StyledLink"]'),
     columnsInputField: () => cy.get('[class*="GridFillstyles__RowsColWrapper"] .input-stepper-textfield').eq(0),
     columnsLabel: () => cy.get('[class*="GridFillstyles__RowsColWrapper"] [class*="GridFillstyles__CanvasInputLabelWrapper"]').eq(0),
     columnsIncreaseButton: () => cy.get('[class*="GridFillstyles__RowsColWrapper"] [aria-label="Increase count"]').eq(0),
@@ -21,9 +39,10 @@ const selectors = {
     rowsLabel: () => cy.get('[class*="GridFillstyles__RowsColWrapper"] [class*="GridFillstyles__CanvasInputLabelWrapper"]').eq(1),
     rowsIncreaseButton: () => cy.get('[class*="GridFillstyles__RowsColWrapper"] [aria-label="Increase count"]').eq(1),
     rowsDecreaseButton: () => cy.get('[class*="GridFillstyles__RowsColWrapper"] [aria-label="Decrease count"]').eq(1),
+
     cellInEditTab: () => cy.get('[class*="GridFillResponsestyles__CellContainer"]'),
-    matchExactPositionLabel: () => cy.get('[data-ngie-testid="match-exact-position-of-cells-checkbox"] [class*="label"]'),
-    matchExactPositionCheckbox: () => cy.get('[data-ngie-testid="match-exact-position-of-cells-checkbox"] input'),
+    matchExactPositionLabel: () => cy.get('[data-ngie-testid="exact-match-position-of-cells-checkbox"] .MuiFormControlLabel-label'),
+    matchExactPositionCheckbox: () => cy.get('[data-ngie-testid="exact-match-position-of-cells-checkbox"] input'),
     cellInSpecifyCorrectAnswerSection: () => cy.get('[class*="GridFillstyles__SetCorrectAnswerWrapper"] [class*="GridFillResponsestyles__CellContainer"]'),
     rowsWrapperSpecifyCorrectAnswerSection: () => cy.get('[class*="GridFillstyles__SetCorrectAnswerWrapper"] [class*="GridFillResponsestyles__RowContainer"]'),
     correctAnswerAccordion: () => cy.get('.correct-answer-accordion'),
@@ -35,27 +54,27 @@ const selectors = {
     penaltyPointsForEachIncorrectCellInputField: () => cy.get('input[aria-label="Penalty points for each incorrect cell"]'),
     specifyPointsForEachIncorrectCellRadioButton: () => cy.get('input[aria-label*="Specify points for each incorrect"]'),
     cellShadeCountInputField: () => cy.get('.grid-fill-response-wrapper [aria-label="labeling"]'),
-    matchExactPositionOfCellsCheckbox: () => cy.get('input[aria-label="Match exact position of cells"]'),
     gridSpecifyCorrectAnswerSection: () => cy.get('[class*="AnswerAccordionstyles__AnswerPanel"] [class*="GridFillResponsestyles__GridWrapper"]'),
     gridRow: () => cy.get('[class*="GridFillResponsestyles__RowContainer"]'),
     cellShadeCountLabel: () => cy.get('[class*="GridFillResponsestyles__CellFillCountLabel"]'),
     cellShadeCountInputField: () => cy.get('.cell-count-cls input'),
-    penaltyPointsForEachIncorrectCellInputField: () => cy.get('input[aria-label="Penalty points for each incorrect cell"]'),
-    //student view settings
-    maxSelectedCellLabel: () => cy.get('[class*="MaxSelectedCellsstyles__MaxCellsLabel"]'),
-    maxSelectedCellInputField: () => cy.get('input[aria-label="Max selected cells"]'),
+    paginationButtonWrapperSpecifyCorrectAnswerSection: () => cy.get('.correct-answer-accordion  [class*="PaginationControlWrapper"]'),
+    paginationTextSpecifyCorrectAnswerSection: () => cy.get('.correct-answer-accordion [class*="PaginationControlWrapper"] [class*="PaginationDetails"]'),
+    previousPaginationButtonSpecifyCorrectAnswerSection: () => cy.get('.correct-answer-accordion [class*="PaginationControlWrapper"] [class*="PaginationControl"]').eq(0),
+    nextPaginationButtonSpecifyCorrectAnswerSection: () => cy.get('.correct-answer-accordion [class*="PaginationControlWrapper"] [class*="PaginationControl"]').eq(1),
+
     //Customize layout accordion
     customizeLayoutAccordionButton: () => cy.get('.customize-layout-wrapper-cls .ngie-accordion-summary'),
     customizeLayoutLabel: () => cy.get('[class*="AdditionalGridFillSettingsstyles__StyledLabel"]'),
     customizeLayoutAccordionChevronButton: () => cy.get('.customize-layout-wrapper-cls [class*="MuiAccordionSummary-expandIconWrapper "]'),
-    shadeTheCellLabel: () => cy.get('[class*="AdditionalGridFillSettingsstyles__LabelTextWrapper"]'),
     shadeCellButton: () => cy.get('.single-select-toggle-group button').eq(0),
     hideCellButton: () => cy.get('.single-select-toggle-group button').eq(1),
-    shadedCellIcon: () => cy.get('[class*="GridFillResponsestyles__CellHideFillIconWrapper"] g[id*="Group"]'),
-    hiddenCellIcon: () => cy.get('[class*="GridFillResponsestyles__CellHideFillIconWrapper"] #Hide_cell'),
-    gridCustomizeLayoutSection: () => cy.get('.customize-layout-wrapper-cls [class*="GridFillResponsestyles__GridWrapper"]'),
     cellInCustomizeLayout: () => cy.get('[id*="Response-cell"]'),
     rowsWrapperCustomizeLayout: () => cy.get('.customize-layout-wrapper-cls [class*="GridFillResponsestyles__RowContainer"]'),
+    paginationTextCustomizeLayoutSection: () => cy.get('.customize-layout-wrapper-cls [class*="PaginationControlWrapper"] [class*="PaginationDetails"]'),
+    paginationButtonWrapperCustomizeLayout: () => cy.get('.customize-layout-wrapper-cls  [class*="PaginationControlWrapper"]'),
+    previousPaginationButtonCustomizeLayout: () => cy.get('.customize-layout-wrapper-cls  [class*="PaginationControl"]').eq(1),
+    nextPaginationButtonCustomizeLayout: () => cy.get('.customize-layout-wrapper-cls  [class*="PaginationControl"]').eq(2),
     lockShadedCellsCheckbox: () => cy.get('[data-ngie-testid="lock-shaded-cells-checkbox"] input'),
     lockShadedCellsLabel: () => cy.get('[data-ngie-testid="lock-shaded-cells-checkbox"] [class*="label"]'),
     outlineCellOnHoverCheckbox: () => cy.get('[data-ngie-testid="outline-cell-on-hover-checkbox"] input'),
@@ -72,6 +91,89 @@ const selectors = {
     dottedToggleButton: () => cy.get('.single-select-toggle-group-double button').eq(5),
     outerGridBorderTitle: () => cy.get('[class*="CustomizedGridstyles__SwitchLabelWrapper"]'),
     outerGridBorderSwitch: () => cy.get('[class*="CustomizedGridstyles__OuterGridWrapper"] [class*="MuiSwitch-switchBase"]'),
+    penaltyPointsForEachIncorrectCellInputField: () => cy.get('input[aria-label="Penalty points for each incorrect cell"]'),
+    //student view settings
+    maxSelectedCellLabel: () => cy.get('[class*="MaxSelectedCellsstyles__MaxCellsLabel"]'),
+    maxSelectedCellInputField: () => cy.get('input[aria-label="Max selected cells"]'),
+    //Customize layout accordion
+    customizeLayoutAccordionButton: () => cy.get('.customize-layout-wrapper-cls .ngie-accordion-summary'),
+    customizeLayoutLabel: () => cy.get('[class*="AdditionalGridFillSettingsstyles__StyledLabel"]'),
+    customizeLayoutAccordionChevronButton: () => cy.get('.customize-layout-wrapper-cls [class*="MuiAccordionSummary-expandIconWrapper "]'),
+    shadeTheCellLabel: () => cy.get('[class*="AdditionalGridFillSettingsstyles__LabelTextWrapper"]'),
+    shadeCellButton: () => cy.get('.single-select-toggle-group button').eq(0),
+    hideCellButton: () => cy.get('.single-select-toggle-group button').eq(1),
+    shadedCellIcon: () => cy.get('[class*="GridFillResponsestyles__CellHideFillIconWrapper"] g[id*="Group"]'),
+    hiddenCellIcon: () => cy.get('[class*="GridFillResponsestyles__CellHideFillIconWrapper"] #Hide_cell'),
+    gridCustomizeLayoutSection: () => cy.get('.customize-layout-wrapper-cls [class*="GridFillResponsestyles__GridWrapper"]'),
+    cellInCustomizeLayout: () => cy.get('[id*="Response-cell"]'),
+    rowsWrapperCustomizeLayout: () => cy.get('.customize-layout-wrapper-cls [class*="GridFillResponsestyles__RowContainer"]'),
+    penaltyPointsForEachIncorrectCellInputField: () => cy.get('input[aria-label="Penalty points for each incorrect cell"]'),
+    //Fill type section
+    fillTypeLabel: () => cy.get('[class*="CustomizedGridstyles__LabelTextWrapper"]'),
+    colorBlock: () => cy.get('.color-picker-block'),
+    colorRadioButton: () => cy.get('[class*="RadioGroupstyles__RadioOptionWrapper"] .radio-btn').eq(0),
+    colorLabel: () => cy.get('[class*="RadioGroupstyles__RadioOptionWrapper"] label').eq(0),
+    imageRadioButton: () => cy.get('[class*="RadioGroupstyles__RadioOptionWrapper"] .radio-btn').eq(1),
+    imageLabel: () => cy.get('[class*="RadioGroupstyles__RadioOptionWrapper"] label').eq(1),
+    defaultLabel: () => cy.get('[class*=ColorStateComponentstyles__ColorStateLabel]').eq(0),
+    defaultGridColorWrapper: () => cy.get('[class*=ColorStateWrapper]').eq(0),
+    defaultFillColorLabel: () => cy.get('[class*="ColorTypeWrapper"]').eq(0),
+    defaultBorderColorLabel: () => cy.get('[class*="ColorTypeWrapper"]').eq(1),
+    defaultFillColorOpacityLabel: () => cy.get('[class*=ColorStateComponentstyles__OpacityLabel]').eq(0),
+    defaultBorderColorOpacityLabel: () => cy.get('[class*=ColorStateComponentstyles__OpacityLabel]').eq(1),
+    defaultFillColorHexCodeLabel: () => cy.get('[class*=ColorStateComponentstyles__HexColorLabel]').eq(0),
+    defaultBorderColorHexCodeLabel: () => cy.get('[class*=ColorStateComponentstyles__HexColorLabel]').eq(1),
+    defaultFillColorBlock: () => cy.get('.color-picker-block').eq(0),
+    defaultBorderColorBlock: () => cy.get('.color-picker-block').eq(1),
+    //Hover
+    hoverLabel: () => cy.get('[class*=ColorStateComponentstyles__ColorStateLabel]').eq(1),
+    hoverGridColorWrapper: () => cy.get('[class*=ColorStateWrapper]').eq(1),
+    hoverFillColorLabel: () => cy.get('[class*="ColorTypeWrapper"]').eq(2),
+    hoverBorderColorLabel: () => cy.get('[class*="ColorTypeWrapper"]').eq(3),
+    hoverFillColorOpacityLabel: () => cy.get('[class*=ColorStateComponentstyles__OpacityLabel]').eq(2),
+    hoverBorderColorOpacityLabel: () => cy.get('[class*=ColorStateComponentstyles__OpacityLabel]').eq(3),
+    hoverFillColorHexCodeLabel: () => cy.get('[class*=ColorStateComponentstyles__HexColorLabel]').eq(2),
+    hoverBorderColorHexCodeLabel: () => cy.get('[class*=ColorStateComponentstyles__HexColorLabel]').eq(3),
+    hoverFillColorBlock: () => cy.get('.color-picker-block').eq(2),
+    hoverBorderColorBlock: () => cy.get('.color-picker-block').eq(3),
+    //Active
+    filledLabel: () => cy.get('[class*=ColorStateComponentstyles__ColorStateLabel]').eq(2),
+    filledGridColorWrapper: () => cy.get('[class*=ColorStateWrapper]').eq(2),
+    filledFillColorLabel: () => cy.get('[class*="ColorTypeWrapper"]').eq(4),
+    filledBorderColorLabel: () => cy.get('[class*="ColorTypeWrapper"]').last(),
+    filledFillColorOpacityLabel: () => cy.get('[class*=ColorStateComponentstyles__OpacityLabel]').eq(4),
+    filledBorderColorOpacityLabel: () => cy.get('[class*=ColorStateComponentstyles__OpacityLabel]').last(),
+    filledFillColorHexCodeLabel: () => cy.get('[class*=ColorStateComponentstyles__HexColorLabel]').eq(4),
+    filledBorderColorHexCodeLabel: () => cy.get('[class*=ColorStateComponentstyles__HexColorLabel]').last(),
+    filledFillColorBlock: () => cy.get('.color-picker-block').eq(4),
+    filledBorderColorBlock: () => cy.get('.color-picker-block').last(),
+    applyPatternOnActiveStateLabel: () => cy.get('[data-ngie-testid="apply-pattern-on-active-state-checkbox"] [class*="label"]'),
+    applyPatternOnActiveStateCheckbox: () => cy.get('[data-ngie-testid="apply-pattern-on-active-state-checkbox"] input'),
+    //Color popup
+    setToNoColorButton: () => cy.get('.compact-popup-action-button-wrapper button').eq(0),
+    cancelButton: () => cy.get('.compact-popup-action-button-wrapper button').eq(1),
+    okButton: () => cy.get('.compact-popup-action-button-wrapper button').eq(2),
+    //Filled image
+    filledImageLabel: () => cy.get('[class*="Background"][class*="LabelWrapper"]').eq(0),
+    filledImageUploadLabel: () => cy.get('[class*="__LabelWrapper"][class*="Upload"]').eq(0),
+    filledImageChooseFileButton: () => cy.get('.choose-file-button').eq(0),
+    filledImageFileNameLabel: () => cy.get('[class*="__LabelWrapper"][class*="Upload"]').eq(1),
+    filledImageNoFileChosenLabel: () => cy.get('[class*="UploadImagestyles__SelectedFile-"]').eq(0),
+    filledImageInputTypeFile: () => cy.get('input[type="file"]').eq(0),
+    filledImageUploadedFileNameLabel: () => cy.get('[class*="styles__SelectedFileWithIcon"][class*="Upload"]').eq(0),
+    filledImageAltTextLabel: () => cy.get('[class*="UploadImagestyles__InputWrapper"] .text-label').eq(0),
+    filledImageAltTextInputField: () => cy.get('[class*="UploadImagestyles__InputWrapper"] input').eq(0),
+    filledImageDeleteImageButton: () => cy.get('[aria-label*="Delete-button"]').eq(0),
+    //Background image - Image properties
+    imagePropertiesLabel: () => cy.get('[class*="UploadImagestyles__SectionLabel"]'),
+    fillImageToGridCheckboxLabel: () => cy.get('[data-ngie-testid="fill-image-to-grid-checkbox"] .MuiFormControlLabel-label'),
+    fillImageToGridCheckbox: () => cy.get('[data-ngie-testid="fill-image-to-grid-checkbox"] input'),
+    backgroundImageAlternativeTextLabel: () => cy.get('[class*="UploadImagestyles__InputWrapper"] .text-label').last(),
+    backgroundImageAlternativeTextInputField: () => cy.get('[class*="UploadImagestyles__InputWrapper"] input').last(),
+    //student view settings
+    maxSelectedCellLabel: () => cy.get('[class*="MaxSelectedCellsstyles__MaxCellsLabel"]'),
+    maxSelectedCellInputField: () => cy.get('input[aria-label="Max selected cells"]'),
+    penaltyPointsForEachIncorrectCellInputField: () => cy.get('input[aria-label="Penalty points for each incorrect cell"]'),
 
     //Fill type section
     fillTypeLabel: () => cy.get('[class*="CustomizedGridstyles__LabelTextWrapper"]'),
@@ -80,6 +182,10 @@ const selectors = {
     gridWrapperPreviewTab: () => cy.get('[class*="GridFillResponsestyles__GridWrapper"]:visible'),
     cellInPreviewTab: () => cy.get('[class*="GridFillResponsestyles__CellContainer"]:visible'),
     rowsWrapperPreviewTab: () => cy.get('[class*="GridFillResponsestyles__RowContainer"]:visible'),
+    paginationButtonWrapperPreviewTab: () => cy.get('[class*="PaginationControlWrapper"]'),
+    paginationTextPreviewTab: () => cy.get(' [class*="PaginationControlWrapper"] [class*="PaginationDetails"]'),
+    previousPaginationButtonPreviewTab: () => cy.get(' [class*="PaginationControlWrapper"] [class*="PaginationControl"]').eq(2),
+    nextPaginationButtonPreviewTab: () => cy.get(' [class*="PaginationControlWrapper"] [class*="PaginationControl"]').eq(3),
     canvasTitlePreviewTab: () => cy.get('[class*="GridFillResponsestyles__CanvasTitleWrapper"]'),
     warningMessageContainer: () => cy.get('.disabled-wrapper-cls'),
     warningMessage: () => cy.get('.disabled-wrapper-cls [class*="DisabledTextWrapper"]'),
@@ -95,12 +201,15 @@ const steps = {
     ...autoScoredSpecifyCorrectAnswerSection.steps,
     ...dialogBoxBase.steps,
     ...autoScoredScoringSectionMultiResponseType.steps,
+    ...colorPopupComponent.steps,
     ...commonComponents.steps,
     ...additionalSettingsPanel.steps,
+    ...backgroundImageUploadComponent.steps,
+    ...imageCanvasComponent.steps,
 
     /**
-     * @param {number} value value of columns
-     * @description function enters value in columns input field
+     * @param {number} value The value to set in the columns input field.
+     * @description Sets the value in the columns input field.
      */
     setColumns: (value) => {
         gridFillPage.columnsInputField()
@@ -108,32 +217,42 @@ const steps = {
             .type('{selectall}')
             .type(value)
             .blur();
-        gridFillPage.columnsInputField()
-            .should('have.value', value);
     },
 
     /**
-     * Verifies the value of the columns input field.
-     * @param {number} value value of columns input field
+     * @param {number} value The expected value of the columns input field.
+     * @description Verifies the value of the columns input field.
      */
-    verifyColumnsInputField: (value) => {
+    verifyColumnsInputStepperCountInputFieldValue: (value) => {
         gridFillPage.columnsInputField()
             .should('have.value', value);
     },
 
-    decreaseColumnsCount: () => {
-        gridFillPage.columnsDecreaseButton()
-            .click();
+    /**
+     * @description Decreases the columns stepper count by a specified value.
+     * @param {number} count The value by which the columns stepper count is to be decreased.
+     */
+    decreaseColumnsInputStepperCount: (count) => {
+        for (let index = 0; index < count; index++) {
+            gridFillPage.columnsDecreaseButton()
+                .click();
+        };
     },
 
-    increaseColumnsCount: () => {
-        gridFillPage.columnsIncreaseButton()
-            .click();
+    /**
+     * @description Increases the columns stepper count by a specified value.
+     * @param {number} count value by which the columns stepper count is to be increased.
+     */
+    increaseColumnsInputStepperCount: (count) => {
+        for (let index = 0; index < count; index++) {
+            gridFillPage.columnsIncreaseButton()
+                .click();
+        };
     },
 
     /**
-     * @param {number} value value of rows
-     * @description function enters value in rows input field
+     * @param {number} value The value to set in the rows input field.
+     * @description Sets the value in the rows input field.
      */
     setRows: (value) => {
         gridFillPage.rowsInputField()
@@ -141,27 +260,64 @@ const steps = {
             .type('{selectall}')
             .type(value)
             .blur();
-        gridFillPage.rowsInputField()
-            .should('have.value', value);
     },
 
     /**
-     * Verifies the value of the rows input field.
-     * @param {number} value value of rows input field
+     * @param {number} value The expected value of the rows input field.
+     * @description Verifies the value of the rows input field.
      */
-    verifyRowsInputField: (value) => {
+    verifyRowsInputStepperCountInputFieldValue: (value) => {
         gridFillPage.rowsInputField()
             .should('have.value', value);
     },
 
-    decreaseRowsCount: () => {
-        gridFillPage.rowsDecreaseButton()
-            .click();
+    /**
+     * @description Decreases the rows stepper count by a specified value.
+     * @param {number} count The value by which the rows stepper count is to be decreased.
+     */
+    decreaseRowsInputStepperCount: (count) => {
+        for (let index = 0; index < count; index++) {
+            gridFillPage.rowsDecreaseButton()
+                .click();
+        };
     },
 
-    increaseRowsCount: () => {
-        gridFillPage.rowsIncreaseButton()
-            .click();
+    /**
+     * @description Increases the rows stepper count by a specified value.
+     * @param {number} count The value by which the rows stepper count is to be increased.
+     */
+    increaseRowsInputStepperCount: (count) => {
+        for (let index = 0; index < count; index++) {
+            gridFillPage.rowsIncreaseButton()
+                .click();
+        };
+    },
+
+    verifyColumnInputStepperIncreaseDecreaseButton: () => {
+        utilities.verifyElementVisibilityState(gridFillPage.columnsDecreaseButton(), 'visible');
+        utilities.verifyElementVisibilityState(gridFillPage.columnsIncreaseButton(), 'visible');
+
+    },
+
+    verifyRowInputStepperIncreaseDecreaseButton: () => {
+        utilities.verifyElementVisibilityState(gridFillPage.rowsIncreaseButton(), 'visible');
+        utilities.verifyElementVisibilityState(gridFillPage.rowsDecreaseButton(), 'visible');
+    },
+
+    verifyRowInputStepperIncreaseButtonIsDisabled: () => {
+        utilities.verifyElementDisabled(gridFillPage.rowsIncreaseButton());
+    },
+
+    verifyRowInputStepperDecreaseButtonIsDisabled: () => {
+        utilities.verifyElementDisabled(gridFillPage.rowsDecreaseButton());
+    },
+
+    verifyColumnInputStepperIncreaseButtonIsDisabled: () => {
+        utilities.verifyElementDisabled(gridFillPage.columnsIncreaseButton());
+    },
+
+    verifyColumnInputStepperDecreaseButtonIsDisabled: () => {
+        utilities.verifyElementDisabled(gridFillPage.columnsDecreaseButton());
     },
 
     clickOnCustomizeLayoutAccordionButton: () => {
@@ -745,6 +901,176 @@ const steps = {
             });
     },
 
+    expandOpenTheGridSelectorDropdown: () => {
+        gridFillPage.openTheGridSelectorDropdownButton()
+            .click()
+            .should('have.attr', 'aria-expanded', 'true');
+    },
+
+    collapseOpenTheGridSelectorDropdown: () => {
+        gridFillPage.openTheGridSelectorDropdownButton()
+            .click()
+            .should('have.attr', 'aria-expanded', 'false');
+    },
+
+    verifyOpenTheGridSelectorDropdownCollapsed: () => {
+        gridFillPage.openTheGridSelectorDropdownButton()
+            .should('have.attr', 'aria-expanded', 'false');
+    },
+
+    /**
+     * Verifies the grid size in the grid layout section using aria-label.
+     * @param {number} rowsNumber - The expected number of rows.
+     * @param {number} columns - The expected number of columns.
+     */
+    verifyGridSizeInGridLayoutSection: (rowsNumber, columns) => {
+        let maxRow = 0;
+        let maxCol = 0;
+        gridFillPage.cellInOpenTheGridSelectorAccordion()
+            .last()
+            .invoke('attr', 'aria-label').then(ariaLabel => {
+                const [row, col] = ariaLabel.match(/\d+/g).map(Number);
+                maxRow = row;
+                maxCol = col;
+                expect(maxRow).to.equal(rowsNumber);
+                expect(maxCol).to.equal(columns);
+            });
+    },
+
+    /**
+     * Verifies the selection state of cells in the grid.
+     * @param {number} expectedRow - The number of rows to verify.
+     * @param {number} expectedColumn - The number of columns to verify.
+     */
+    verifySelectedRowsAndColumns: (expectedRow, expectedColumn) => {
+        for (let i = 0; i < expectedRow; i++) {
+            for (let j = 0; j < expectedColumn; j++) {
+                cy.get(`.add-rows-cols-grid-container [id*="cell-${i}-${j}"]`)
+                    .invoke('attr', 'aria-label')
+                    .should('include', 'selected');
+                cy.get(`.add-rows-cols-grid-container [id*="cell-${i}-${j}"]`)
+                    .should('have.class', 'cell-container');
+            }
+        }
+        if (expectedRow < 20 && expectedColumn < 20) {
+            cy.get(`.add-rows-cols-grid-container [id*="cell-${expectedRow}-${expectedColumn}"]`)
+                .invoke('attr', 'aria-label')
+                .should('include', 'not selected');
+        }
+    },
+
+    /**
+     * Verifies the selection state of a cell in the interactive grid.
+     * @param {number} rowIndex - The index of the row of the cell to verify.
+     * @param {number} columnIndex - The index of the column of the cell to verify.
+     */ 
+    verifySelectedRowsAndColumnsInInteractiveState: (rowIndex, columnIndex) => {
+        gridFillPage.cellInOpenTheGridSelectorAccordion()
+            .filter(`[aria-label*="Row${rowIndex} Column${columnIndex}"]`)
+            .trigger('mouseover');
+        if (rowIndex !== null && columnIndex !== null) {
+            gridFillPage.cellInOpenTheGridSelectorAccordion()
+                .filter(`[aria-label*="Row${rowIndex} Column${columnIndex}"]`)
+                .should('have.class', 'cell-container')
+                .should('have.css', 'background-color', css.color.toggleButtonSelectedBg)
+        }
+        gridFillPage.cellInOpenTheGridSelectorAccordion()
+            .filter(`[aria-label*="Row${rowIndex} Column${columnIndex}"]`)
+            .trigger('mouseout');
+    },
+
+    /**
+    * Clicks on a cell in the open grid selector dropdown.
+    * @param {number} rowIndex - The index of the row of the cell to click on.
+    * @param {number} columnIndex - The index of the column of the cell to click on.
+    */
+    clickOnCellInOpenTheGridSelectorDropdown: (rowIndex, columnIndex) => {
+        gridFillPage.cellInOpenTheGridSelectorAccordion()
+            .filter(`[aria-label*="Row${rowIndex} Column${columnIndex}"]`)
+            .click();
+    },
+
+    /**
+     * Verifies the height property in the cell height input field.
+     * @param {number} height The expected height value.
+     */
+    verifyCellHeightInputField: (height) => {
+        gridFillPage.cellHeightInputField()
+            .should('have.value', height);
+    },
+
+    /**
+     * Updates the value in the cell height input field.
+     * @param {number} height The new height value to be entered.
+     */
+    updateValueInCellHeightInputField: (height) => {
+        gridFillPage.cellHeightInputField()
+            .clear()
+            .type(height)
+            .blur();
+    },
+
+    /**
+     * Updates the value in the cell width input field.
+     * @param {number} width The new width value to be entered.
+     */
+    updateValueInCellWidthInputField: (width) => {
+        gridFillPage.cellWidthInputField()
+            .clear()
+            .type(width)
+            .blur();
+    },
+
+    /**
+     * Verifies the width property in the cell width input field.
+     * @param {number} width The expected width value.
+     */
+    verifyCellWidthInputField: (width) => {
+        gridFillPage.cellWidthInputField()
+            .should('have.value', width);
+    },
+
+    verifyMakeResponsiveCheckboxChecked: () => {
+        gridFillPage.makeResponsiveCheckboxIcon()
+            .should('have.class', 'icon-ILC-tick-icon');
+    },
+
+    verifyMakeResponsiveCheckboxUnchecked: () => {
+        gridFillPage.makeResponsiveCheckboxIcon()
+            .should('have.class', 'icon-x-circle');
+    },
+
+    checkMakeResponsiveCheckbox: () => {
+        gridFillPage.makeResponsiveCheckboxIcon()
+            .click();
+        steps.verifyMakeResponsiveCheckboxChecked();
+    },
+
+    uncheckMakeResponsiveCheckbox: () => {
+        gridFillPage.makeResponsiveCheckboxIcon()
+            .click({ force: true });
+        steps.verifyMakeResponsiveCheckboxUnchecked();
+    },
+
+    /**
+     * Verifies the count of rows in the Customize Layout section
+     * @param {number} lengthRows The expected count of rows.
+     */
+    verifyRowsCountCustomizeLayout: (lengthRows) => {
+        utilities.verifyElementCount(gridFillPage.rowsWrapperCustomizeLayout(), lengthRows);
+    },
+
+    /**
+     * Verifies the count of columns in a row in the Customize Layout section.
+     * @param {number} columnsLength The expected count of cells in the row.
+     */
+    verifyColumnsCountCustomizeLayout: (lengthColumns) => {
+        utilities.getNthElement(gridFillPage.rowsWrapperCustomizeLayout(), 0)
+            .within(() => {
+                utilities.verifyElementCount(gridFillPage.cellInEditTab(), lengthColumns);
+            });
+    },
+
     verifyOutlineCellOnHoverCheckboxIsChecked: () => {
         gridFillPage.outlineCellOnHoverCheckbox()
             .should('be.checked');
@@ -797,6 +1123,25 @@ const steps = {
     },
 
     /**
+     * Verifies the count of rows in the Specify Correct Answer section.
+     * @param {number} lengthRows The expected count of rows.
+     */
+    verifyRowsCountSpecifyCorrectAnswer: (lengthRows) => {
+        utilities.verifyElementCount(gridFillPage.rowsWrapperSpecifyCorrectAnswerSection(), lengthRows);
+    },
+
+    /**
+    * Verifies the count of columns in a row in the Specify Correct Answer section.
+    * @param {number} columnsLength The expected count of cells in the row.
+    */
+    verifyColumnsCountSpecifyCorrectAnswer: (lengthColumns) => {
+        utilities.getNthElement(gridFillPage.rowsWrapperSpecifyCorrectAnswerSection(), 0)
+            .within(() => {
+                utilities.verifyElementCount(gridFillPage.cellInEditTab(), lengthColumns);
+            });
+    },
+
+    /** 
      * @description Verifies that cell does not show interactive state when hovered on in specify correct answer section
      * @param {number} rowIndex - The index of the row to verify.
      * @param {number} columnIndex - Index of column on the cell
@@ -814,6 +1159,117 @@ const steps = {
     },
 
     /**
+     * Verifies the height of the cell in the Customize Layout section.
+     * @param {number} height The expected height of the cell.
+     */
+    verifyCellHeightInCustomizeLayoutSection: (height) => {
+        utilities.getNthElement(gridFillPage.cellInCustomizeLayout(), 0)
+            .should('have.attr', 'height', height);
+    },
+
+    /**
+     * Verifies the width of the cell in the Customize Layout section.
+     * @param {number} width The expected width of the cell.
+     */
+    verifyCellWidthInCustomizeLayoutSection: (width) => {
+        utilities.getNthElement(gridFillPage.cellInCustomizeLayout(), 0)
+            .should('have.attr', 'width', width);
+    },
+
+    /**
+     * Verifies the height of the cell in the Specify Correct Answer section.
+     * @param {number} height The expected height of the cell.
+     */
+    verifyCellHeightInSpecifyCorrectAnswerSection: (height) => {
+        utilities.getNthElement(gridFillPage.cellInSpecifyCorrectAnswerSection(), 0)
+            .should('have.attr', 'height', height);
+    },
+
+    /**
+     * Verifies the width of the cell in the Specify Correct Answer section.
+     * @param {number} width The expected width of the cell.
+     */
+    verifyCellWidthInSpecifyCorrectAnswerSection: (width) => {
+        utilities.getNthElement(gridFillPage.cellInSpecifyCorrectAnswerSection(), 0)
+            .should('have.attr', 'width', width);
+    },
+
+    /**
+     * Verifies the height of the cell in the Preview tab.
+     * @param {number} height The expected height of the cell.
+     */
+    verifyCellHeightInPreviewTab: (height) => {
+        utilities.getNthElement(gridFillPage.cellInPreviewTab(), 0)
+            .should('have.attr', 'height', height);
+    },
+
+    /**
+     * Verifies the width of the cell in the preview tab
+     * @param {number} width The expected width of the cell.
+     */
+    verifyCellWidthInPreviewTab: (width) => {
+        utilities.getNthElement(gridFillPage.cellInPreviewTab(), 0)
+            .should('have.attr', 'width', width);
+    },
+
+    verifyPaginationButtonsNotExistCustomizeLayoutSection: () => {
+        utilities.verifyElementVisibilityState(gridFillPage.paginationButtonWrapperCustomizeLayout(), 'notExist');
+    },
+
+    verifyPaginationButtonsVisibleCustomizeLayoutSection: () => {
+        utilities.verifyElementVisibilityState(gridFillPage.previousPaginationButtonCustomizeLayout(), 'visible');
+        utilities.verifyElementVisibilityState(gridFillPage.nextPaginationButtonCustomizeLayout(), 'visible');
+    },
+
+    verifyPaginationButtonsNotExistSpecifyCorrectAnswerSection: () => {
+        utilities.verifyElementVisibilityState(gridFillPage.paginationButtonWrapperSpecifyCorrectAnswerSection(), 'notExist');
+    },
+
+    verifyPaginationButtonsVisibleSpecifyCorrectAnswerSection: () => {
+        utilities.verifyElementVisibilityState(gridFillPage.previousPaginationButtonSpecifyCorrectAnswerSection(), 'visible');
+        utilities.verifyElementVisibilityState(gridFillPage.nextPaginationButtonSpecifyCorrectAnswerSection(), 'visible');
+    },
+
+    navigateToPreviousPageCustomizeLayoutSection: () => {
+        gridFillPage.previousPaginationButtonCustomizeLayout()
+            .click();
+    },
+
+    navigateToNextPageCustomizeLayoutSection: () => {
+        gridFillPage.nextPaginationButtonCustomizeLayout()
+            .click();
+    },
+
+    navigateToPreviousPageSpecifyCorrectAnswerSection: () => {
+        gridFillPage.previousPaginationButtonSpecifyCorrectAnswerSection()
+            .click();
+    },
+
+    navigateToNextPageSpecifyCorrectAnswerSection: () => {
+        gridFillPage.nextPaginationButtonSpecifyCorrectAnswerSection()
+            .click();
+    },
+
+    navigateToPreviousPagePreviewTab: () => {
+        gridFillPage.previousPaginationButtonPreviewTab()
+            .click();
+    },
+
+    navigateToNextPagePreviewTab: () => {
+        gridFillPage.nextPaginationButtonPreviewTab()
+            .click();
+    },
+
+    verifyPaginationButtonsNotExistPreviewTab: () => {
+        utilities.verifyElementVisibilityState(gridFillPage.paginationButtonWrapperPreviewTab(), 'notExist');
+    },
+
+    verifyPaginationButtonsVisiblePreviewTab: () => {
+        utilities.verifyElementVisibilityState(gridFillPage.previousPaginationButtonPreviewTab(), 'visible');
+        utilities.verifyElementVisibilityState(gridFillPage.nextPaginationButtonPreviewTab(), 'visible');
+    },
+
+    /** 
      * @description Verifies that cell does not show interactive state when hovered on in preview tab
      * @param {number} rowIndex - The index of the row to verify.
      * @param {number} columnIndex - Index of column on the cell
@@ -883,7 +1339,7 @@ const steps = {
 
     /**
      * @description Add input to canvas title input field
-     * @param {string} titleText Text to be given as input in canvas title input field 
+     * @param {string} titleText Text to be given as input in canvas title input field
      */
     addInputToCanvasTitleInputField: (titleText) => {
         gridFillPage.canvasTitleInputField()
@@ -1216,70 +1672,637 @@ const steps = {
                 });
             });
     },
-    
-    /**
-   * @description verify the displayed penalty points for each incorrect cell
-   * @param {number} penaltyPoints displayed penalty points 
-   */
-    verifyPenaltyPointsForEachIncorrectCell: (penaltyPoints) => {
-        utilities.verifyInnerText(autoScoredScoringSectionMultiResponseType.penaltyPointsDetailsSectionAllottedPointsLabel(), `Penalty points for each incorrect cell: ${penaltyPoints}`);
+
+    verifyColorRadioButtonIsSelected: () => {
+        gridFillPage.colorRadioButton()
+            .should('have.class', 'Mui-checked');
     },
 
-    /**
-   * @description Verifies the penalty points value for each incorrect cell
-   * @param {number} points - The expected penalty points value for each incorrect cell
-   */
-    verifyPenaltyPointsForEachIncorrectCellValue: (points) => {
-        gridFillPage.penaltyPointsForEachIncorrectCellInputField()
-            .should('have.value', points);
+    verifyApplyPatternOnActiveStateCheckboxIsNotChecked: () => {
+        gridFillPage.applyPatternOnActiveStateCheckbox()
+            .should('not.be.checked');
     },
 
-    /**
-    * @description Allots penalty points for each incorrect text container
-    * @param {number} points - The penalty points to be allotted for each text container.
-    selectPenaltyPointsForEachIncorrectCell: () => {
-        gridFillPage.specifyPointsForEachIncorrectCellRadioButton()
-            .click();
+    uncheckApplyPatternOnActiveStateCheckbox: () => {
+        gridFillPage.applyPatternOnActiveStateCheckbox()
+            .click()
+            .should('not.be.checked');
+    },
+
+    checkApplyPatternOnActiveStateCheckbox: () => {
+        gridFillPage.applyPatternOnActiveStateCheckbox()
+            .click()
+            .should('be.checked');
     },
 
     /**
-    * @description Allots penalty points for each incorrect cell
-    * @param {number} points - The penalty points to be allotted for each cell.
+    * @param {string} color background color of color block
+    * @description this function verfies the background color of default fill color block
     */
-    allotPenaltyPointsForEachIncorrectCell: (points) => {
-        gridFillPage.penaltyPointsForEachIncorrectCellInputField()
-            .clear()
-            .type(`${points}`)
-            .should('have.value', points)
-            .blur();
+    verifyDefaultFillColorBlockColor: (color) => {
+        gridFillPage.defaultFillColorBlock()
+            .should('have.css', 'background-color', color);
     },
 
     /**
-     * Enters value into the input field for maximum cells selected.
-     * @param {number} value- The value to be entered into the input field.
+     * @param {string} color background color of color block
+     * @description this function verfies the background color of default border color block
      */
-    enterTextInMaxSelectedCellInputField: (value) => {
-        gridFillPage.maxSelectedCellInputField()
-            .clear()
-            .type(value)
-            .blur();
+    verifyDefaultBorderColorBlockColor: (color) => {
+        gridFillPage.defaultBorderColorBlock()
+            .should('have.css', 'background-color', color);
     },
 
     /**
-    * Enters value into the input field for maximum cells selected.
-    * @param {number} value- The value to be entered into the input field.
-    */
-    VerifyTextInMaxSelectedCellInputField: (value) => {
-        gridFillPage.maxSelectedCellInputField()
-            .should('have.value', value);
+     * @param {string} color background color of color block
+     * @description this function verfies the background color of fill color block
+     */
+    verifyFilledFillColorBlockColor: (color) => {
+        gridFillPage.filledFillColorBlock()
+            .should('have.css', 'background-color', color);
     },
 
     /**
-     * Verifies if the count of selected cells in the preview tab matches the expected value.
-     * @param {number} expectedValue - The expected count of selected cells.
+     * @param {string} color background color of color block
+     * @description this function verfies the background color of border color block
      */
-    verifySelectedCellCountPreviewTab: (expectedValue) => {
-        let count = 0;
+    verifyFilledBorderColorBlockColor: (color) => {
+        gridFillPage.filledBorderColorBlock()
+            .should('have.css', 'background-color', color);
+    },
+
+    /**
+     * @param {string} color background color of color block
+     * @description this function verfies the background color of hover fill color block
+     */
+    verifyHoverFillColorBlockColor: (color) => {
+        gridFillPage.hoverFillColorBlock()
+            .should('have.css', 'background-color', color);
+    },
+
+    /**
+     * @param {string} color background color of color block
+     * @description this function verfies the background color of hover border color block
+     */
+    verifyHoverBorderColorBlockColor: (color) => {
+        gridFillPage.hoverBorderColorBlock()
+            .should('have.css', 'background-color', color);
+    },
+
+    verifyPatternAppliedOnFilledState: () => {
+        utilities.verifyElementVisibilityState(gridFillPage.filledFillColorBlock().find('svg'), 'visible');
+    },
+
+    verifyPatternNotAppliedOnFilledState: () => {
+        utilities.verifyElementVisibilityState(gridFillPage.filledFillColorBlock().find('svg'), 'notExist');
+    },
+
+    verifyFillColorDefaultContentCSS: () => {
+        utilities.verifyCSS(gridFillPage.defaultLabel(), {
+            'color': css.color.labels,
+            'font-size': css.fontSize.normal,
+            'font-weight': css.fontWeight.semibold
+        });
+        const colorLabels = [gridFillPage.defaultFillColorLabel, gridFillPage.defaultBorderColorLabel]
+        for (let index = 0; index < colorLabels.length; index++) {
+            utilities.verifyCSS(colorLabels[index](), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.regular
+            });
+        };
+        const hexCodeLabels = [gridFillPage.defaultFillColorHexCodeLabel, gridFillPage.defaultBorderColorHexCodeLabel]
+        for (let index = 0; index < hexCodeLabels.length; index++) {
+            utilities.verifyCSS(hexCodeLabels[index](), {
+                'color': css.color.placeholderText,
+                'font-size': css.fontSize.small,
+                'font-weight': css.fontWeight.semibold
+            });
+        };
+        const opacityLabels = [gridFillPage.defaultFillColorOpacityLabel, gridFillPage.defaultBorderColorOpacityLabel]
+        for (let index = 0; index < opacityLabels.length; index++) {
+            utilities.verifyCSS(opacityLabels[index](), {
+                'color': css.color.placeholderText,
+                'font-size': css.fontSize.small,
+                'font-weight': css.fontWeight.regular
+            });
+        };
+    },
+
+    verifyFillColorHoverContentCSS: () => {
+        utilities.verifyCSS(gridFillPage.hoverLabel(), {
+            'color': css.color.labels,
+            'font-size': css.fontSize.normal,
+            'font-weight': css.fontWeight.semibold
+        });
+        const colorLabels = [gridFillPage.hoverFillColorLabel, gridFillPage.hoverBorderColorLabel]
+        for (let index = 0; index < colorLabels.length; index++) {
+            utilities.verifyCSS(colorLabels[index](), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.regular
+            });
+        };
+        const hexCodeLabels = [gridFillPage.hoverFillColorHexCodeLabel, gridFillPage.hoverBorderColorHexCodeLabel]
+        for (let index = 0; index < hexCodeLabels.length; index++) {
+            utilities.verifyCSS(hexCodeLabels[index](), {
+                'color': css.color.placeholderText,
+                'font-size': css.fontSize.small,
+                'font-weight': css.fontWeight.semibold
+            });
+        };
+        const opacityLabels = [gridFillPage.hoverFillColorOpacityLabel, gridFillPage.hoverBorderColorOpacityLabel]
+        for (let index = 0; index < opacityLabels.length; index++) {
+            utilities.verifyCSS(opacityLabels[index](), {
+                'color': css.color.placeholderText,
+                'font-size': css.fontSize.small,
+                'font-weight': css.fontWeight.regular
+            });
+        };
+    },
+
+    verifyFillColorFilledContentCSS: () => {
+        utilities.verifyCSS(gridFillPage.filledLabel(), {
+            'color': css.color.labels,
+            'font-size': css.fontSize.normal,
+            'font-weight': css.fontWeight.semibold
+        });
+        const colorLabels = [gridFillPage.filledFillColorLabel, gridFillPage.filledBorderColorLabel]
+        for (let index = 0; index < colorLabels.length; index++) {
+            utilities.verifyCSS(colorLabels[index](), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.regular
+            });
+        };
+        const hexCodeLabels = [gridFillPage.filledFillColorHexCodeLabel, gridFillPage.filledBorderColorHexCodeLabel]
+        for (let index = 0; index < hexCodeLabels.length; index++) {
+            utilities.verifyCSS(hexCodeLabels[index](), {
+                'color': css.color.placeholderText,
+                'font-size': css.fontSize.small,
+                'font-weight': css.fontWeight.semibold
+            });
+        };
+        const opacityLabels = [gridFillPage.filledFillColorOpacityLabel, gridFillPage.filledFillColorOpacityLabel]
+        for (let index = 0; index < opacityLabels.length; index++) {
+            utilities.verifyCSS(opacityLabels[index](), {
+                'color': css.color.placeholderText,
+                'font-size': css.fontSize.small,
+                'font-weight': css.fontWeight.regular
+            });
+        };
+    },
+
+    /**
+     * @param {string} fillColorBlock 'defaultFillColor' | 'defaultBorderColor' | 'hoverFillColor' | 'hoverBorderColor' | 'filledFillColor' | 'filledBorderColor'
+     * @description this function clicks on the fill color block
+     */
+    clickOnFillColorBlock: (fillColorBlock) => {
+        switch (fillColorBlock) {
+            case 'defaultFillColor':
+                gridFillPage.defaultFillColorBlock()
+                    .click();
+                break;
+            case 'defaultBorderColor':
+                gridFillPage.defaultBorderColorBlock()
+                    .click();
+                break;
+            case 'hoverFillColor':
+                gridFillPage.hoverFillColorBlock()
+                    .click();
+                break;
+            case 'hoverBorderColor':
+                gridFillPage.hoverBorderColorBlock()
+                    .click();
+                break;
+            case 'filledFillColor':
+                gridFillPage.filledFillColorBlock()
+                    .click();
+                break;
+            case 'filledBorderColor':
+                gridFillPage.filledBorderColorBlock()
+                    .click();
+                break;
+            default:
+                throw new Error('Invalid color block');
+        }
+    },
+
+    /**
+     * @param {string} hexCode hexcode label of color block
+     * @description this function verfies the hexcode label of default fill color block
+     */
+    verifyDefaultFillColorHexCodeLabel: (hexCode) => {
+        utilities.verifyInnerText(gridFillPage.defaultFillColorHexCodeLabel(), hexCode)
+    },
+
+    /**
+    * @param {string} opacityLabel opacity label of color block
+    * @description this function verfies the opacity label of default fill color block
+    */
+    verifyDefaultFillColorOpacityLabel: (opacityLabel) => {
+        utilities.verifyInnerText(gridFillPage.defaultFillColorOpacityLabel(), opacityLabel)
+    },
+
+    /**
+    * @param {string} hexCode hexcode label of color block
+    * @description this function verfies the hexcode label of default border color block
+    */
+    verifyDefaultBorderColorHexCodeLabel: (hexCode) => {
+        utilities.verifyInnerText(gridFillPage.defaultBorderColorHexCodeLabel(), hexCode)
+    },
+
+    /**
+    * @param {string} opacityLabel opacity label of color block
+    * @description this function verfies the opacity label of default border color block
+    */
+    verifyDefaultBorderColorOpacityLabel: (opacityLabel) => {
+        utilities.verifyInnerText(gridFillPage.defaultBorderColorOpacityLabel(), opacityLabel)
+    },
+
+    /**
+    * @param {string} hexCode hexcode label of color block
+    * @description this function verfies the hexcode label of hover fill color block
+    */
+    verifyHoverFillColorHexCodeLabel: (hexCode) => {
+        utilities.verifyInnerText(gridFillPage.hoverFillColorHexCodeLabel(), hexCode)
+    },
+
+    /**
+    * @param {string} opacityLabel opacity label of color block
+    * @description this function verfies the opacity label of hover fill color block
+    */
+    verifyHoverFillColorOpacityLabel: (opacityLabel) => {
+        utilities.verifyInnerText(gridFillPage.hoverFillColorOpacityLabel(), opacityLabel)
+    },
+
+    /**
+    * @param {string} hexCode hexcode label of color block
+    * @description this function verfies the hexcode label of hover border color block
+    */
+    verifyHoverBorderColorHexCodeLabel: (hexCode) => {
+        utilities.verifyInnerText(gridFillPage.hoverBorderColorHexCodeLabel(), hexCode)
+    },
+
+    /**
+    * @param {string} opacityLabel opacity label of color block
+    * @description this function verfies the opacity label of hover border color block
+    */
+    verifyHoverBorderColorOpacityLabel: (opacityLabel) => {
+        utilities.verifyInnerText(gridFillPage.hoverBorderColorOpacityLabel(), opacityLabel)
+    },
+
+    /**
+    * @param {string} color background color of color block
+    * @description this function verfies the background color of filled fill color block
+    */
+    verifyFilledFillColorBlockColor: (color) => {
+        gridFillPage.filledFillColorBlock()
+            .should('have.css', 'background-color', color);
+    },
+
+    /**
+    * @param {string} hexCode hexcode label of color block
+    * @description this function verfies the hexcode label of filled fill color block
+    */
+    verifyFilledFillColorHexCodeLabel: (hexCode) => {
+        utilities.verifyInnerText(gridFillPage.filledFillColorHexCodeLabel(), hexCode)
+    },
+
+    /**
+    * @param {string} opacityLabel opacity label of color block
+    * @description this function verfies the opacity label of active fill color block
+    */
+    verifyFilledFillColorOpacityLabel: (opacityLabel) => {
+        utilities.verifyInnerText(gridFillPage.filledFillColorOpacityLabel(), opacityLabel)
+    },
+
+    /**
+     * @param {string} color background color of color block
+     * @description this function verfies the background color of filled border color block
+     */
+    verifyFilledBorderColorBlockColor: (color) => {
+        gridFillPage.filledBorderColorBlock()
+            .should('have.css', 'background-color', color);
+    },
+
+    /**
+    * @param {string} hexCode hexcode label of color block
+    * @description this function verfies the hexcode label of filled fill color block
+    */
+    verifyFilledBorderColorHexCodeLabel: (hexCode) => {
+        utilities.verifyInnerText(gridFillPage.filledBorderColorHexCodeLabel(), hexCode)
+    },
+
+    /**
+    * @param {string} opacityLabel opacity label of color block
+    * @description this function verfies the opacity label of filled border color block
+    */
+    verifyFilledBorderColorOpacityLabel: (opacityLabel) => {
+        utilities.verifyInnerText(gridFillPage.filledBorderColorOpacityLabel(), opacityLabel)
+    },
+
+    /**
+     * @description Verify the default state CSS of grids in edit tab
+     * @param {string} fillColor selected fill color
+     * @param {string} BorderColor selected border color
+     */
+    verifyDefaultStateCSSForGridInEditTab: (fillColor, BorderColor) => {
+        utilities.verifyCSS(utilities.getNthElement(gridFillPage.cellInCustomizeLayout(), 0), {
+            'background-color': `${fillColor}`,
+            'border-color': `${BorderColor}`
+        });
+        utilities.verifyCSS(utilities.getNthElement(gridFillPage.cellInCustomizeLayout(), 14), {
+            'background-color': `${fillColor}`,
+            'border-color': `${BorderColor}`
+        });
+        utilities.verifyCSS(utilities.getNthElement(gridFillPage.cellInSpecifyCorrectAnswerSection(), 0), {
+            'background-color': `${fillColor}`,
+            'border-color': `${BorderColor}`
+        });
+        utilities.verifyCSS(utilities.getNthElement(gridFillPage.cellInSpecifyCorrectAnswerSection(), 14), {
+            'background-color': `${fillColor}`,
+            'border-color': `${BorderColor}`
+        });
+    },
+
+    /**
+     * @description Verify the default state CSS of grids in preview tab
+     * @param {string} fillColor selected fill color
+     * @param {string} BorderColor selected border color
+     */
+    verifyDefaultStateCSSForGridInPreviewTabTab: (fillColor, BorderColor) => {
+        utilities.verifyCSS(utilities.getNthElement(gridFillPage.cellInPreviewTab(), 0), {
+            'background-color': `${fillColor}`,
+            'border-color': `${BorderColor}`
+        });
+        utilities.verifyCSS(utilities.getNthElement(gridFillPage.cellInPreviewTab(), 14), {
+            'background-color': `${fillColor}`,
+            'border-color': `${BorderColor}`
+        });
+    },
+
+    /**
+     * @description Verify the hover state CSS of grids in edit tab
+     * @param {string} fillColor selected fill color
+     * @param {string} BorderColor selected border color
+     */
+    verifyHoverStateCSSForGridInEditTab: (fillColor, BorderColor) => {
+        utilities.hoverOverElement(utilities.getNthElement(gridFillPage.cellInCustomizeLayout(), 0));
+        utilities.verifyCSS(utilities.getNthElement(gridFillPage.cellInCustomizeLayout(), 0), {
+            'background-color': `${fillColor}`,
+            'border-color': `${BorderColor}`
+        });
+        utilities.triggerMouseout(utilities.getNthElement(gridFillPage.cellInCustomizeLayout(), 0));
+        utilities.hoverOverElement(utilities.getNthElement(gridFillPage.cellInSpecifyCorrectAnswerSection(), 0));
+        utilities.verifyCSS(utilities.getNthElement(gridFillPage.cellInSpecifyCorrectAnswerSection(), 0), {
+            'background-color': `${fillColor}`,
+            'border-color': `${BorderColor}`
+        });
+        utilities.triggerMouseout(utilities.getNthElement(gridFillPage.cellInSpecifyCorrectAnswerSection(), 0));
+    },
+
+    /**
+     * @description Verify the hover state CSS of grid in preview tab
+     * @param {string} fillColor selected fill color
+     * @param {string} BorderColor selected border color
+     */
+    verifyHoverStateCSSForGridInPreviewTab: (fillColor, BorderColor) => {
+        utilities.hoverOverElement(utilities.getNthElement(gridFillPage.cellInPreviewTab(), 0));
+        utilities.verifyCSS(utilities.getNthElement(gridFillPage.cellInPreviewTab(), 0), {
+            'background-color': `${fillColor}`,
+            'border-color': `${BorderColor}`
+        });
+        utilities.triggerMouseout(utilities.getNthElement(gridFillPage.cellInPreviewTab(), 0));
+    },
+
+    /**
+     * @description Verify the filled state CSS of grids in edit tab
+     * @param {string} fillColor selected fill color
+     * @param {string} BorderColor selected border color
+     */
+    verifyFilledStateCSSForGridInEditTab: (fillColor, BorderColor) => {
+        gridFillPage.steps.shadeCell(1, 1);
+        utilities.verifyCSS(utilities.getNthElement(gridFillPage.cellInCustomizeLayout(), 6), {
+            'background-color': `${fillColor}`,
+            'border-color': `${BorderColor}`
+        });
+        gridFillPage.steps.selectCellSpecifyCorrectAnswerSection(1, 2);
+        utilities.verifyCSS(utilities.getNthElement(gridFillPage.cellInSpecifyCorrectAnswerSection(), 7), {
+            'background-color': `${fillColor}`,
+            'border-color': `${BorderColor}`
+        });
+    },
+
+    /**
+     * @description Verify the filled state CSS of grid in preview tab
+     * @param {string} fillColor selected fill color
+     * @param {string} BorderColor selected border color
+     */
+    verifyFilledStateCSSForGridInPreviewTab: (fillColor, BorderColor) => {
+        gridFillPage.steps.selectCellPreviewTab(1, 1);
+        utilities.verifyCSS(utilities.getNthElement(gridFillPage.cellInCustomizeLayout(), 6), {
+            'background-color': `${fillColor}`,
+            'border-color': `${BorderColor}`
+        });
+    },
+
+    /**
+    * @description Verifies pattern is displayed in the cell in customize layout section
+    * @param {number} rowIndex - The index of the row to verify.
+    * @param {number} columnIndex - Index of column of the cell
+    */
+    verifyPatternIsDisplayedInCellInCustomizeLayoutSection: (rowIndex, columnIndex) => {
+        utilities.getNthElement(gridFillPage.rowsWrapperCustomizeLayout(), rowIndex)
+            .within(() => {
+                utilities.getNthElement(gridFillPage.cellInEditTab(), columnIndex)
+                    .find('#Pattern')
+                    .should('exist');
+            });
+    },
+
+    /**
+    * @description Verifies pattern is displayed in the cell in specify correct answer section
+    * @param {number} rowIndex - The index of the row to verify.
+    * @param {number} columnIndex - Index of column of the cell
+    */
+    verifyPatternIsDisplayedInCellInSpecifyCorrectAnswerSection: (rowIndex, columnIndex) => {
+        utilities.getNthElement(gridFillPage.rowsWrapperSpecifyCorrectAnswerSection(), rowIndex)
+            .within(() => {
+                utilities.getNthElement(gridFillPage.cellInEditTab(), columnIndex)
+                    .find('#Pattern')
+                    .should('exist');
+            });
+    },
+
+    /**
+   * @description Verifies pattern is displayed in the cell in preview tab
+   * @param {number} rowIndex - The index of the row to verify.
+   * @param {number} columnIndex - Index of column of the cell
+   */
+    verifyPatternIsDisplayedInCellInPreviewTab: (rowIndex, columnIndex) => {
+        utilities.getNthElement(gridFillPage.rowsWrapperPreviewTab(), rowIndex)
+            .within(() => {
+                utilities.getNthElement(gridFillPage.cellInPreviewTab(), columnIndex)
+                    .find('#Pattern')
+                    .should('exist');
+            });
+    },
+
+    /**
+    * @description Verifies pattern is not displayed in the cell in customize layout section
+    * @param {number} rowIndex - The index of the row to verify.
+    * @param {number} columnIndex - Index of column of the cell
+    */
+    verifyPatternIsNotDisplayedInCellInCustomizeLayoutSection: (rowIndex, columnIndex) => {
+        utilities.getNthElement(gridFillPage.rowsWrapperCustomizeLayout(), rowIndex)
+            .within(() => {
+                utilities.getNthElement(gridFillPage.cellInEditTab(), columnIndex)
+                    .find('#Pattern')
+                    .should('not.exist');
+            });
+    },
+
+    /**
+    * @description Verifies pattern is not displayed in the cell in specify correct answer section
+    * @param {number} rowIndex - The index of the row to verify.
+    * @param {number} columnIndex - Index of column of the cell
+    */
+    verifyPatternIsNotDisplayedInCellInSpecifyCorrectAnswerSection: (rowIndex, columnIndex) => {
+        utilities.getNthElement(gridFillPage.rowsWrapperSpecifyCorrectAnswerSection(), rowIndex)
+            .within(() => {
+                utilities.getNthElement(gridFillPage.cellInEditTab(), columnIndex)
+                    .find('#Pattern')
+                    .should('not.exist');
+            });
+    },
+
+    /**
+    * @description Verifies pattern is not displayed in the cell in preview tab
+    * @param {number} rowIndex - The index of the row to verify.
+    * @param {number} columnIndex - Index of column of the cell
+    */
+    verifyPatternIsNotDisplayedInCellInPreviewTab: (rowIndex, columnIndex) => {
+        utilities.getNthElement(gridFillPage.rowsWrapperPreviewTab(), rowIndex)
+            .within(() => {
+                utilities.getNthElement(gridFillPage.cellInPreviewTab(), columnIndex)
+                    .find('#Pattern')
+                    .should('not.exist');
+            });
+    },
+
+    clickOnResetColorButton: () => {
+        gridFillPage.resetButton()
+            .click();
+    },
+
+    verifyColorPopupCancelButton: () => {
+        utilities.verifyInnerText(gridFillPage.cancelButton(), 'Cancel');
+        utilities.verifyElementVisibilityState(gridFillPage.cancelButton(), 'visible');
+    },
+
+    verifyColorPopupOkButton: () => {
+        utilities.verifyInnerText(gridFillPage.okButton(), 'Ok');
+        utilities.verifyElementVisibilityState(gridFillPage.okButton(), 'visible');
+    },
+
+    clickOnCancelButton: () => {
+        gridFillPage.cancelButton()
+            .click();
+    },
+
+    clickOnOkButton: () => {
+        gridFillPage.okButton()
+            .click();
+    },
+
+    selectImageRadioButton: () => {
+        gridFillPage.imageRadioButton()
+            .click();
+    },
+
+    /**
+   * @description verify the displayed penalty points for each incorrect cell
+   * @param {number} penaltyPoints displayed penalty points 
+   */
+    verifyPenaltyPointsForEachIncorrectCell: (penaltyPoints) => {
+        utilities.verifyInnerText(autoScoredScoringSectionMultiResponseType.penaltyPointsDetailsSectionAllottedPointsLabel(), `Penalty points for each incorrect cell: ${penaltyPoints}`);
+    },
+
+    /**
+   * @description Verifies the penalty points value for each incorrect cell
+   * @param {number} points - The expected penalty points value for each incorrect cell
+   */
+    verifyPenaltyPointsForEachIncorrectCellValue: (points) => {
+        gridFillPage.penaltyPointsForEachIncorrectCellInputField()
+            .should('have.value', points);
+    },
+
+    /**
+    * @description Allots penalty points for each incorrect text container
+    * @param {number} points - The penalty points to be allotted for each text container.
+    */
+    selectPenaltyPointsForEachIncorrectCell: () => {
+        gridFillPage.specifyPointsForEachIncorrectCellRadioButton()
+            .click();
+    },
+
+    /**
+    * @param {string} file name of the file in fixtures/upload folder
+    * @description this function uploads a file
+    */
+    uploadFilledImageFile: (file) => {
+        gridFillPage.filledImageInputTypeFile()
+            .attachFile(`uploads/${file}`);
+    },
+
+    /**
+    * @param {*} fileName name of the filled image uploaded file
+    * @description function verifies uploaded file name
+    */
+    verifyFilledImageFileNameLabel: (fileName) => {
+        utilities.verifyInnerText(gridFillPage.filledImageUploadedFileNameLabel(), fileName);
+        utilities.verifyElementVisibilityState(gridFillPage.filledImageUploadedFileNameLabel(), 'visible');
+    },
+
+    /**
+    * @description Allots penalty points for each incorrect cell
+    * @param {number} points - The penalty points to be allotted for each cell.
+    */
+    allotPenaltyPointsForEachIncorrectCell: (points) => {
+        gridFillPage.penaltyPointsForEachIncorrectCellInputField()
+            .clear()
+            .type(`${points}`)
+            .should('have.value', points)
+            .blur();
+    },
+
+    /**
+     * Enters value into the input field for maximum cells selected.
+     * @param {number} value- The value to be entered into the input field.
+     */
+    enterTextInMaxSelectedCellInputField: (value) => {
+        gridFillPage.maxSelectedCellInputField()
+            .clear()
+            .type(value)
+            .blur();
+    },
+
+    /**
+    * Enters value into the input field for maximum cells selected.
+    * @param {number} value- The value to be entered into the input field.
+    */
+    VerifyTextInMaxSelectedCellInputField: (value) => {
+        gridFillPage.maxSelectedCellInputField()
+            .should('have.value', value);
+    },
+
+    /**
+     * Verifies if the count of selected cells in the preview tab matches the expected value.
+     * @param {number} expectedValue - The expected count of selected cells.
+     */
+    verifySelectedCellCountPreviewTab: (expectedValue) => {
+        let count = 0;
         gridFillPage.cellInPreviewTab()
             .each((cell) => {
                 cy.wrap(cell)
@@ -1297,6 +2320,504 @@ const steps = {
     clickOutsideGrid: () => {
         cy.get('body')
             .click();
+    },
+
+    /**
+     * @description Add input to filled image alt text input field
+     * @param {string} input Text input
+     */
+    addInputToFilledImageAltTextInputField: (input) => {
+        gridFillPage.filledImageAltTextInputField()
+            .clear()
+            .type(input)
+            .should('have.value', `${input}`);
+    },
+
+    clearFilledImageAltTextInputField: () => {
+        gridFillPage.filledImageAltTextInputField()
+            .clear();
+    },
+
+    /**
+    * @description Add input to background image alt text input field
+    * @param {string} input Text input
+    */
+    addInputToBackgroundImageAltTextInputField: (input) => {
+        gridFillPage.backgroundImageAlternativeTextInputField()
+            .clear()
+            .type(input)
+            .should('have.value', `${input}`);
+    },
+
+    clearBackgroundImageAltTextInputField: () => {
+        gridFillPage.backgroundImageAlternativeTextInputField()
+            .clear();
+    },
+
+    /**
+     * @description Add input to background image alt text input field
+     * @param {string} input Text input
+     */
+    addInputToBackgroundImageAltTextInputField: (input) => {
+        gridFillPage.backgroundImageAlternativeTextInputField()
+            .clear()
+            .type(input)
+            .should('have.value', `${input}`);
+    },
+
+    clearBackgroundImageAltTextInputField: () => {
+        gridFillPage.backgroundImageAlternativeTextInputField()
+            .clear();
+    },
+
+    /**
+    * @description Verify filled image is displayed in shaded cell in customize layout section
+    * @param {number} rowIndex - The index of the row containing the cell.
+    * @param {number} columnIndex - The index of the column containing the cell.
+    */
+    verifyFilledImageInShadedCellInCustomizeLayoutGrid: (rowIndex, columnIndex) => {
+        utilities.getNthElement(gridFillPage.rowsWrapperCustomizeLayout(), rowIndex)
+            .within(() => {
+                utilities.getNthElement(gridFillPage.cellInCustomizeLayout(), columnIndex)
+                    .find('img')
+                    .should('exist')
+            });
+    },
+
+    /**
+    * @description Verify filled image is displayed in shaded cell in specify correct answer section
+    * @param {number} rowIndex - The index of the row containing the cell.
+    * @param {number} columnIndex - The index of the column containing the cell.
+    */
+    verifyFilledImageInShadedCellInSpecifyCorrectAnswerGrid: (rowIndex, columnIndex) => {
+        utilities.getNthElement(gridFillPage.rowsWrapperSpecifyCorrectAnswerSection(), rowIndex)
+            .within(() => {
+                utilities.getNthElement(gridFillPage.cellInEditTab(), columnIndex)
+                    .find('img')
+                    .should('exist')
+            });
+    },
+
+    /**
+    * @description Verify filled image is displayed in selected cell in preview tab grid
+    * @param {number} rowIndex - The index of the row containing the cell.
+    * @param {number} columnIndex - The index of the column containing the cell.
+    */
+    verifyFilledImageInSelectedCellInPreviewTabGrid: (rowIndex, columnIndex) => {
+        utilities.getNthElement(gridFillPage.rowsWrapperPreviewTab(), rowIndex)
+            .within(() => {
+                utilities.getNthElement(gridFillPage.cellInPreviewTab(), columnIndex)
+                    .find('img')
+                    .should('exist')
+            });
+    },
+
+    /**
+    * @description Verify background image alternative text in edit tab grids
+    * @param {string} altText - Alternative text of the image
+    */
+    verifyBackgroundImageAltTextInEditTabGrids: (altText) => {
+        gridFillPage.gridCustomizeLayoutSection()
+            .parents('.grid-fill-response-wrapper')
+            .find('p')
+            .should('have.text', `${altText}`);
+        gridFillPage.gridSpecifyCorrectAnswerSection()
+            .parents('.grid-fill-response-wrapper')
+            .find('p')
+            .should('have.text', `${altText}`);
+    },
+
+    /**
+    * @description Verify background image alternative text in preview tab grids
+    * @param {string} altText - Alternative text of the image
+    */
+    verifyBackgroundImageAltTextInPreviewTabGrids: (altText) => {
+        gridFillPage.gridWrapperPreviewTab()
+            .parents('.grid-fill-response-wrapper')
+            .find('p')
+            .should('have.text', `${altText}`);
+    },
+
+    verifyBackgroundImageAltTextNotPresentInEditTabGrids: () => {
+        gridFillPage.gridCustomizeLayoutSection()
+            .parents('.grid-fill-response-wrapper')
+            .find('p')
+            .should('not.exist');
+        gridFillPage.gridSpecifyCorrectAnswerSection()
+            .parents('.grid-fill-response-wrapper')
+            .find('p')
+            .should('not.exist');
+    },
+
+    verifyBackgroundImageAltTextNotPresentInPreviewTabGrid: () => {
+        gridFillPage.gridWrapperPreviewTab()
+            .parents('.grid-fill-response-wrapper')
+            .find('p')
+            .should('not.exist');
+    },
+
+    /**
+    * @description Verify image alternative text in shaded cell of customize layout grid
+    * @param {number} rowIndex - The index of the row containing the cell.
+    * @param {number} columnIndex - The index of the column containing the cell.
+    * @param {string} altText - Alternative text of the image
+    */
+    verifyFilledImageAltTextInShadedCellInCustomizeLayoutGrid: (rowIndex, columnIndex, altText) => {
+        utilities.getNthElement(gridFillPage.rowsWrapperCustomizeLayout(), rowIndex)
+            .within(() => {
+                utilities.getNthElement(gridFillPage.cellInCustomizeLayout(), columnIndex)
+                    .find('img')
+                    .should('have.attr', 'alt', `${altText}`);
+            });
+    },
+
+    /**
+    * @description Verify image alternative text in shaded cell of specify correct answer section grid
+    * @param {number} rowIndex - The index of the row containing the cell.
+    * @param {number} columnIndex - The index of the column containing the cell.
+    * @param {string} altText - Alternative text of the image
+    */
+    verifyFilledImageAltTextInShadedCellInSpecifyCorrectAnswerGrid: (rowIndex, columnIndex, altText) => {
+        utilities.getNthElement(gridFillPage.rowsWrapperSpecifyCorrectAnswerSection(), rowIndex)
+            .within(() => {
+                utilities.getNthElement(gridFillPage.cellInEditTab(), columnIndex)
+                    .find('img')
+                    .should('have.attr', 'alt', `${altText}`);
+            });
+    },
+
+    /**
+    * @description Verify image alternative text in selected cell of preview tab grid
+    * @param {number} rowIndex - The index of the row containing the cell.
+    * @param {number} columnIndex - The index of the column containing the cell.
+    * @param {string} altText - Alternative text of the image
+    */
+    verifyFilledImageAltTextInShadedCellInPreviewTabGrid: (rowIndex, columnIndex, altText) => {
+        utilities.getNthElement(gridFillPage.rowsWrapperPreviewTab(), rowIndex)
+            .within(() => {
+                utilities.getNthElement(gridFillPage.cellInPreviewTab(), columnIndex)
+                    .find('img')
+                    .should('have.attr', 'alt', `${altText}`);
+            });
+    },
+
+    deleteFilledImage: () => {
+        gridFillPage.filledImageDeleteImageButton()
+            .click();
+    },
+
+    /**
+    * @description Verify filled image is not displayed in shaded cell in customize layout section
+    * @param {number} rowIndex - The index of the row containing the cell.
+    * @param {number} columnIndex - The index of the column containing the cell.
+    */
+    verifyFilledImageNotDisplayedInCellInCustomizeLayoutGrid: (rowIndex, columnIndex) => {
+        utilities.getNthElement(gridFillPage.rowsWrapperCustomizeLayout(), rowIndex)
+            .within(() => {
+                utilities.getNthElement(gridFillPage.cellInCustomizeLayout(), columnIndex)
+                    .find('img')
+                    .should('not.exist');
+            });
+    },
+
+    /**
+    * @description Verify filled image is not displayed in shaded cell in specify correct answer section
+    * @param {number} rowIndex - The index of the row containing the cell.
+    * @param {number} columnIndex - The index of the column containing the cell.
+    */
+    verifyFilledImageNotDisplayedInCellInSpecifyCorrectAnswerGrid: (rowIndex, columnIndex) => {
+        utilities.getNthElement(gridFillPage.rowsWrapperSpecifyCorrectAnswerSection(), rowIndex)
+            .within(() => {
+                utilities.getNthElement(gridFillPage.cellInEditTab(), columnIndex)
+                    .find('img')
+                    .should('not.exist');
+            });
+    },
+
+    /**
+    * @description Verify filled image is not displayed in selected cell in preview tab
+    * @param {number} rowIndex - The index of the row containing the cell.
+    * @param {number} columnIndex - The index of the column containing the cell.
+    */
+    verifyFilledImageNotDisplayedInCellInPreviewTabGrid: (rowIndex, columnIndex) => {
+        utilities.getNthElement(gridFillPage.rowsWrapperPreviewTab(), rowIndex)
+            .within(() => {
+                utilities.getNthElement(gridFillPage.cellInPreviewTab(), columnIndex)
+                    .find('img')
+                    .should('not.exist');
+            });
+    },
+
+    verifyBackgroundImageIsNotDisplayedInEditTabGrids: () => {
+        gridFillPage.gridCustomizeLayoutSection()
+            .then(($element) => {
+                const win = $element[0].ownerDocument.defaultView
+                const CSSStyleDeclaration = win.getComputedStyle($element[0], 'before')
+                const CSSStyleDeclarationValue = CSSStyleDeclaration.getPropertyValue('background-image')
+                expect(CSSStyleDeclarationValue).to.deep.eq('url((unknown))');
+            });
+        gridFillPage.gridSpecifyCorrectAnswerSection()
+            .then(($element) => {
+                const win = $element[0].ownerDocument.defaultView
+                const CSSStyleDeclaration = win.getComputedStyle($element[0], 'before')
+                const CSSStyleDeclarationValue = CSSStyleDeclaration.getPropertyValue('background-image')
+                expect(CSSStyleDeclarationValue).to.deep.eq('url((unknown))');
+            });
+    },
+
+    verifyBackgroundImageIsNotDisplayedInPreviewTabGrid: () => {
+        gridFillPage.gridWrapperPreviewTab()
+            .then(($element) => {
+                const win = $element[0].ownerDocument.defaultView
+                const CSSStyleDeclaration = win.getComputedStyle($element[0], 'before')
+                const CSSStyleDeclarationValue = CSSStyleDeclaration.getPropertyValue('background-image')
+                expect(CSSStyleDeclarationValue).to.deep.eq('url((unknown))');
+            });
+    },
+
+    verifyBackgroundImageIsDisplayedInEditTabGrids: () => {
+        gridFillPage.gridCustomizeLayoutSection()
+            .then(($element) => {
+                const win = $element[0].ownerDocument.defaultView
+                const CSSStyleDeclaration = win.getComputedStyle($element[0], 'before')
+                const CSSStyleDeclarationValue = CSSStyleDeclaration.getPropertyValue('background-image')
+                expect(CSSStyleDeclarationValue).to.include('url("https://itemengine-file-management.itemengine-qa.il-apps.com/');
+            });
+        gridFillPage.gridSpecifyCorrectAnswerSection()
+            .then(($element) => {
+                const win = $element[0].ownerDocument.defaultView
+                const CSSStyleDeclaration = win.getComputedStyle($element[0], 'before')
+                const CSSStyleDeclarationValue = CSSStyleDeclaration.getPropertyValue('background-image')
+                expect(CSSStyleDeclarationValue).to.include('url("https://itemengine-file-management.itemengine-qa.il-apps.com/');
+            });
+    },
+
+    verifyBackgroundImageIsDisplayedInPreviewTabGrid: () => {
+        gridFillPage.gridWrapperPreviewTab()
+            .then(($element) => {
+                const win = $element[0].ownerDocument.defaultView
+                const CSSStyleDeclaration = win.getComputedStyle($element[0], 'before')
+                const CSSStyleDeclarationValue = CSSStyleDeclaration.getPropertyValue('background-image')
+                expect(CSSStyleDeclarationValue).to.include('url("https://itemengine-file-management.itemengine-qa.il-apps.com/');
+            });
+    },
+
+    verifyFillImageToGridCheckboxIsChecked: () => {
+        gridFillPage.fillImageToGridCheckbox()
+            .should('be.checked');
+    },
+
+    uncheckFillImageToGridCheckbox: () => {
+        gridFillPage.fillImageToGridCheckbox()
+            .click()
+            .should('not.be.checked');
+    },
+
+    verifyImageFitsToGridInEditTab: () => {
+        gridFillPage.gridCustomizeLayoutSection()
+            .then(($element) => {
+                const win = $element[0].ownerDocument.defaultView
+                const CSSStyleDeclaration = win.getComputedStyle($element[0], 'before')
+                const CSSStyleDeclarationValue = CSSStyleDeclaration.getPropertyValue('background-size')
+                expect(CSSStyleDeclarationValue).to.deep.eq('100% 100%');
+            });
+        gridFillPage.gridSpecifyCorrectAnswerSection()
+            .then(($element) => {
+                const win = $element[0].ownerDocument.defaultView
+                const CSSStyleDeclaration = win.getComputedStyle($element[0], 'before')
+                const CSSStyleDeclarationValue = CSSStyleDeclaration.getPropertyValue('background-size')
+                expect(CSSStyleDeclarationValue).to.deep.eq('100% 100%');
+            });
+    },
+
+    verifyImageFitsToGridInPreviewTab: () => {
+        gridFillPage.gridWrapperPreviewTab()
+            .then(($element) => {
+                const win = $element[0].ownerDocument.defaultView
+                const CSSStyleDeclaration = win.getComputedStyle($element[0], 'before')
+                const CSSStyleDeclarationValue = CSSStyleDeclaration.getPropertyValue('background-size')
+                expect(CSSStyleDeclarationValue).to.deep.eq('100% 100%');
+            });
+    },
+
+    verifyDefaultImageInGridInEditTab: () => {
+        gridFillPage.gridCustomizeLayoutSection()
+            .then(($element) => {
+                const win = $element[0].ownerDocument.defaultView
+                const CSSStyleDeclaration = win.getComputedStyle($element[0], 'before')
+                const CSSStyleDeclarationValue = CSSStyleDeclaration.getPropertyValue('background-size')
+                expect(CSSStyleDeclarationValue).to.deep.eq('auto');
+            });
+        gridFillPage.gridSpecifyCorrectAnswerSection()
+            .then(($element) => {
+                const win = $element[0].ownerDocument.defaultView
+                const CSSStyleDeclaration = win.getComputedStyle($element[0], 'before')
+                const CSSStyleDeclarationValue = CSSStyleDeclaration.getPropertyValue('background-size')
+                expect(CSSStyleDeclarationValue).to.deep.eq('auto');
+            });
+    },
+
+    verifyDefaultImageInGridInPreviewTab: () => {
+        gridFillPage.gridWrapperPreviewTab()
+            .then(($element) => {
+                const win = $element[0].ownerDocument.defaultView
+                const CSSStyleDeclaration = win.getComputedStyle($element[0], 'before')
+                const CSSStyleDeclarationValue = CSSStyleDeclaration.getPropertyValue('background-size')
+                expect(CSSStyleDeclarationValue).to.deep.eq('auto');
+            });
+    },
+
+    verifyImageIsTopLeftAlignedInEditTabGrids: () => {
+        gridFillPage.gridCustomizeLayoutSection()
+            .then(($element) => {
+                const win = $element[0].ownerDocument.defaultView
+                const CSSStyleDeclaration = win.getComputedStyle($element[0], 'before')
+                const CSSStyleDeclarationValue = CSSStyleDeclaration.getPropertyValue('background-position')
+                expect(CSSStyleDeclarationValue).to.deep.eq('0% 0%');
+            });
+        gridFillPage.gridSpecifyCorrectAnswerSection()
+            .then(($element) => {
+                const win = $element[0].ownerDocument.defaultView
+                const CSSStyleDeclaration = win.getComputedStyle($element[0], 'before')
+                const CSSStyleDeclarationValue = CSSStyleDeclaration.getPropertyValue('background-position')
+                expect(CSSStyleDeclarationValue).to.deep.eq('0% 0%');
+            });
+    },
+
+    verifyImageIsTopLeftAlignedInPreviewTabGrid: () => {
+        gridFillPage.gridWrapperPreviewTab()
+            .then(($element) => {
+                const win = $element[0].ownerDocument.defaultView
+                const CSSStyleDeclaration = win.getComputedStyle($element[0], 'before')
+                const CSSStyleDeclarationValue = CSSStyleDeclaration.getPropertyValue('background-position')
+                expect(CSSStyleDeclarationValue).to.deep.eq('0% 0%');
+            });
+    },
+
+    verifyImageIsCenterAlignedInEditTabGrids: () => {
+        gridFillPage.gridCustomizeLayoutSection()
+            .then(($element) => {
+                const win = $element[0].ownerDocument.defaultView
+                const CSSStyleDeclaration = win.getComputedStyle($element[0], 'before')
+                const CSSStyleDeclarationValue = CSSStyleDeclaration.getPropertyValue('background-position')
+                expect(CSSStyleDeclarationValue).to.deep.eq('50% 50%');
+            });
+        gridFillPage.gridSpecifyCorrectAnswerSection()
+            .then(($element) => {
+                const win = $element[0].ownerDocument.defaultView
+                const CSSStyleDeclaration = win.getComputedStyle($element[0], 'before')
+                const CSSStyleDeclarationValue = CSSStyleDeclaration.getPropertyValue('background-position')
+                expect(CSSStyleDeclarationValue).to.deep.eq('50% 50%');
+            });
+    },
+
+    verifyImageIsCenterAlignedInPreviewTabGrid: () => {
+        gridFillPage.gridWrapperPreviewTab()
+            .then(($element) => {
+                const win = $element[0].ownerDocument.defaultView
+                const CSSStyleDeclaration = win.getComputedStyle($element[0], 'before')
+                const CSSStyleDeclarationValue = CSSStyleDeclaration.getPropertyValue('background-position')
+                expect(CSSStyleDeclarationValue).to.deep.eq('50% 50%');
+            });
+    },
+
+    verifyImageIsTopRightAlignedInEditTabGrids: () => {
+        gridFillPage.gridCustomizeLayoutSection()
+            .then(($element) => {
+                const win = $element[0].ownerDocument.defaultView
+                const CSSStyleDeclaration = win.getComputedStyle($element[0], 'before')
+                const CSSStyleDeclarationValue = CSSStyleDeclaration.getPropertyValue('background-position')
+                expect(CSSStyleDeclarationValue).to.deep.eq('100% 0%');
+            });
+        gridFillPage.gridSpecifyCorrectAnswerSection()
+            .then(($element) => {
+                const win = $element[0].ownerDocument.defaultView
+                const CSSStyleDeclaration = win.getComputedStyle($element[0], 'before')
+                const CSSStyleDeclarationValue = CSSStyleDeclaration.getPropertyValue('background-position')
+                expect(CSSStyleDeclarationValue).to.deep.eq('100% 0%');
+            });
+    },
+
+    verifyImageIsTopRightAlignedInPreviewTabGrid: () => {
+        gridFillPage.gridWrapperPreviewTab()
+            .then(($element) => {
+                const win = $element[0].ownerDocument.defaultView
+                const CSSStyleDeclaration = win.getComputedStyle($element[0], 'before')
+                const CSSStyleDeclarationValue = CSSStyleDeclaration.getPropertyValue('background-position')
+                expect(CSSStyleDeclarationValue).to.deep.eq('100% 0%');
+            });
+    },
+
+    /**
+     * @description verify opacity value for images in edit tab grids
+     * @param {string} opacityValue Value of opacity
+     */
+    verifyOpacityValueForGridImagesInEditTab: (opacityValue) => {
+        gridFillPage.gridCustomizeLayoutSection()
+            .then(($element) => {
+                const win = $element[0].ownerDocument.defaultView
+                const CSSStyleDeclaration = win.getComputedStyle($element[0], 'before')
+                const CSSStyleDeclarationValue = CSSStyleDeclaration.getPropertyValue('opacity')
+                expect(CSSStyleDeclarationValue).to.deep.eq(opacityValue);
+            });
+        gridFillPage.gridSpecifyCorrectAnswerSection()
+            .then(($element) => {
+                const win = $element[0].ownerDocument.defaultView
+                const CSSStyleDeclaration = win.getComputedStyle($element[0], 'before')
+                const CSSStyleDeclarationValue = CSSStyleDeclaration.getPropertyValue('opacity')
+                expect(CSSStyleDeclarationValue).to.deep.eq(opacityValue);
+            });
+    },
+
+    /**
+     * @description verify opacity value for images in preview tab grid
+     * @param {string} opacityValue Value of opacity
+     */
+    verifyOpacityValueForGridImageInPreviewTab: (opacityValue) => {
+        gridFillPage.gridWrapperPreviewTab()
+            .then(($element) => {
+                const win = $element[0].ownerDocument.defaultView
+                const CSSStyleDeclaration = win.getComputedStyle($element[0], 'before')
+                const CSSStyleDeclarationValue = CSSStyleDeclaration.getPropertyValue('opacity')
+                expect(CSSStyleDeclarationValue).to.deep.eq(opacityValue);
+            });
+    },
+
+    /**
+     * @description Verify grid background image dimensions in edit tab
+     * @param {string} width width of image in px 
+     * @param {string} height height of image in px
+     */
+    verifyGridBackgroundImageDimensionsInEditTab: (width, height) => {
+        gridFillPage.gridCustomizeLayoutSection()
+            .then(($element) => {
+                const win = $element[0].ownerDocument.defaultView
+                const CSSStyleDeclaration = win.getComputedStyle($element[0], 'before')
+                const CSSStyleDeclarationValue = CSSStyleDeclaration.getPropertyValue('background-size')
+                expect(CSSStyleDeclarationValue).to.deep.eq(`${width} ${height}`);
+            });
+        gridFillPage.gridSpecifyCorrectAnswerSection()
+            .then(($element) => {
+                const win = $element[0].ownerDocument.defaultView
+                const CSSStyleDeclaration = win.getComputedStyle($element[0], 'before')
+                const CSSStyleDeclarationValue = CSSStyleDeclaration.getPropertyValue('background-size')
+                expect(CSSStyleDeclarationValue).to.deep.eq(`${width} ${height}`);
+            });
+    },
+
+    /**
+    * @description Verify grid background image dimensions in preview tab
+    * @param {string} width width of image in px 
+    * @param {string} height height of image in px
+    */
+    verifyGridBackgroundImageDimensionsInPreviewTab: (width, height) => {
+        gridFillPage.gridWrapperPreviewTab()
+            .then(($element) => {
+                const win = $element[0].ownerDocument.defaultView
+                const CSSStyleDeclaration = win.getComputedStyle($element[0], 'before')
+                const CSSStyleDeclarationValue = CSSStyleDeclaration.getPropertyValue('background-size')
+                expect(CSSStyleDeclarationValue).to.deep.eq(`${width} ${height}`);
+            });
     }
 }
 
@@ -1312,6 +2833,7 @@ const tests = {
     ...additionalSettingsAccessibilitySectionComponent.tests,
     ...studentViewSettingsLabelComponent.tests,
     ...autoScoredStudentViewSettings.tests,
+    ...backgroundImageUploadComponent.tests,
 
     verifyContentsOfSpecifyCorrectAnswerSection: () => {
         it('When user selects a scoring type then in the \'Correct\' accordion, all the contents should be displayed', () => {
@@ -1380,7 +2902,6 @@ const tests = {
                     });
             } else {
                 autoScoredSpecifyCorrectAnswerSection.alternativeAnswerAccordion()
-                    .eq(1)
                     .within(() => {
                         utilities.verifyElementVisibilityState(autoScoredSpecifyCorrectAnswerSection.specifyCorrectAnswerErrorIcon(), 'visible');
                     });
@@ -1392,8 +2913,8 @@ const tests = {
             commonComponents.steps.verifyErrorMessageIsNotDisplayed();
         });
 
-        it(`\'Match exact position of cells\' label and checkbox should be displayed in the ${accordionName} accordion and the checkbox should be checked`, () => {
-            utilities.verifyInnerText(gridFillPage.matchExactPositionLabel(), 'Match exact position of cells');
+        it(`\'Exact match position of cells\' label and checkbox should be displayed in the ${accordionName} accordion and the checkbox should be checked`, () => {
+            utilities.verifyInnerText(gridFillPage.matchExactPositionLabel(), 'Exact match position of cells');
             utilities.verifyElementVisibilityState(gridFillPage.matchExactPositionLabel(), 'visible');
             utilities.verifyElementVisibilityState(gridFillPage.matchExactPositionCheckbox(), 'exist');
             gridFillPage.steps.verifyMatchExactPositionOfCellsCheckboxIsChecked();
@@ -1427,7 +2948,6 @@ const tests = {
                     });
             } else {
                 autoScoredSpecifyCorrectAnswerSection.alternativeAnswerAccordion()
-                    .eq(1)
                     .within(() => {
                         utilities.verifyElementVisibilityState(autoScoredSpecifyCorrectAnswerSection.specifyCorrectAnswerErrorIcon(), 'visible');
                     });