itemengine-cypress-automation 1.0.202 → 1.0.203

package/cypress/pages/components/gridQuestionCommonComponent.js

@@ -1,11 +1,30 @@
 import constants from "../../fixtures/constants";
 import utilities from "../../support/helpers/utilities";
+import { dialogBoxBase } from "../dialogBoxBase";
+import { ariaLabelSectionComponent } from "./ariaLabelSectionComponent";
 import { autoScoredScoringPreviewTab } from "./autoScoredScoringPreviewTab";
 import { autoScoredScoringSectionMultiResponseType } from "./autoScoredScoringSectionMultiResponseType";
 import { autoScoredSpecifyCorrectAnswerSection } from "./autoScoredSpecifyCorrectAnswerSection";
+import { colorPopupComponent } from "./colorPopupComponent";
 import { commonComponents } from "./commonComponents";
+import { createQuestionBasePage } from "./createQuestionBasePage";
+import { specifyRowsAndColumnsComponent } from "./specifyRowsAndColumnsComponent";
 const css = Cypress.env('css');
 
+const enumerationOptions = {
+    'Numerical': ['1', '2', '3', '4'],
+    'Uppercase alphabet': ['A', 'B', 'C', 'D'],
+    'Lowercase alphabet': ['a', 'b', 'c', 'd'],
+    'uppercase roman numeral': ['I', 'II', 'III', 'IV'],
+    'lowercase roman numeral': ['i', 'ii', 'iii', 'iv'],
+};
+const optionAlignmentOptions = ['left', 'center', 'right'];
+const rowColumnOptions = ['No spacing', 'Small', 'Wide'];
+const columnDimensions = ['Auto', 'Custom'];
+const outerBorder = ['Outer', 'None'];
+const innerBorder = ['Inner', 'Horizontal', 'Vertical', 'None'];
+const modifiedColor = 'rgb(121, 61, 61)'
+
 const selectors = {
     editCellPropertyButton: () => cy.get('button[aria-label="More Action"]'),
     editCellPropertyList: () => cy.get('.ngie-action-cell-container [role="menu"]'),
@@ -18,11 +37,18 @@ const selectors = {
     optionCellPropertyInputField: () => cy.get('[title="Option text or image..."]'),
     tableRowSpecifyCorrectAnswerSection: () => cy.get('.correct-answer-accordion [class*="wrapper-row"]'),
     tableRowPreviewTab: () => cy.get('[class*="question-preview-wrapper"] [class*="wrapper-row"]'),
+    tableRowHeadersSpecifyCorrectAnswerSection: () => cy.get('.set-correct-ans-selection-grid .cell-content-text'),
+    tableRowHeadersPreviewTab: () => cy.get('.preview-selection-grid .cell-content-text'),
     questionsColumnPreviewTab: () => cy.get('[class*="question-preview-wrapper"] [class*="TableCellWrapper"][class*="col-0"]'),
     optionsButton: () => cy.get('[class*="PreviewSelectionButton"]'),
+    optionsButtonPreviewTab: () => cy.get('.preview-selection-grid [class*="PreviewSelectionButton"]'),
     gridPreviewTab: () => cy.get('.single-selection-grid-wrapper:visible'),
     gridSpecifyCorrectAnswerSection: () => cy.get('.set-correct-ans-selection-grid'),
     tableCell: () => cy.get('[class*="CellContainer"]'),
+    tableCellWrapperSpecifyCorrectAnswerSection: () => cy.get('.set-correct-ans-selection-grid [class*="TableCellWrapper"]'),
+    tableCellWrapperPreviewTab: () => cy.get('.preview-selection-grid [class*="TableCellWrapper"]'),
+    tableCellSpecifyCorrectAnswerSection: () => cy.get('.set-correct-ans-selection-grid [class*="CellContainer"]'),
+    tableCellPreviewTab: () => cy.get('.preview-selection-grid [class*="CellContainer"]'),
     correctAnswerGrid: () => cy.get('.correct-ans-selection-grid'),
     tableRow: () => cy.get('[class*="wrapper-row"]'),
     correctAnswersSectionLabel: () => cy.get('[class*="question-preview-wrapper"] [class*="CorrectAnswerHeader"]'),
@@ -52,7 +78,83 @@ const selectors = {
             return cy.get('[aria-labelledby*="Default-text-dropdown-label"] [role="option"]')
         }
     },
-    specifyRowsAndColumnsTableHelpText: () => cy.get('[class*="GridPropertiesstyles__HelperTextWrapper"]')
+    specifyRowsAndColumnsTableHelpText: () => cy.get('[class*="GridPropertiesstyles__HelperTextWrapper"]'),
+    //Additional settings
+    rowStyleAndLayoutTitle: () => cy.get('.row-style-additional-settings .additional-settings-heading-label'),
+    rowNumerationLabel: () => cy.get('.row-style-additional-settings #row-numeration-dropdown-label'),
+    rowNumerationDropdown: () => cy.get('.row-style-additional-settings #row-numeration-select'),
+    rowNumerationDropdownOptions: (ariaLabel = null) => {
+        if (ariaLabel) {
+            return cy.get(`[aria-labelledby*="row-numeration-dropdown-label"] .dropdown-menu-item[aria-label*="${ariaLabel}"]`)
+        } else {
+            return cy.get(`[aria-labelledby*="row-numeration-dropdown-label"] .dropdown-menu-item`)
+        }
+    },
+    numerationStyleLabel: () => cy.get('.row-style-additional-settings .additional-settings-label'),
+    numerationStyleOptions: () => cy.get('[class*="NumerationStyleWrapper"] button'),
+    rowNumerationSpecifyCorrectAnswerSection: () => cy.get('.selection-grid-wrapper [class*="__NumerationWrapper"]'),
+    rowNumerationPreviewTab: () => cy.get('.preview-selection-grid [class*="SelectionGridstyles__NumerationWrapper"]'),
+    optionAlignmentInCellLabel: () => cy.get('.option-alignment .options-label'),
+    optionAlignmentInCellButton: (ariaLabel = null) => {
+        if (ariaLabel) {
+            return cy.get(`.option-alignment button[aria-label*="${ariaLabel}"]`)
+        } else {
+            return cy.get(`.option-alignment button`)
+        }
+    },
+    //Style and layout customization
+    layoutLabel: () => cy.get('[class*="Layoutstyles__SectionWrapper"]'),
+    rowSpacingDropdownLabel: () => cy.get('#Row-spacing-dropdown-label'),
+    rowSpacingDropdown: () => cy.get('[aria-labelledby*="Row-spacing-dropdown-label"]'),
+    rowSpacingDropdownOptions: (ariaLabel = null) => {
+        if (ariaLabel) {
+            return cy.get(`[aria-labelledby*="Row-spacing-dropdown-label"] .dropdown-menu-item[aria-label*="${ariaLabel}"]`)
+        } else {
+            return cy.get(`[aria-labelledby*="Row-spacing-dropdown-label"] .dropdown-menu-item`)
+        }
+    },
+    columnSpacingDropdownLabel: () => cy.get('#Column-spacing-dropdown-label'),
+    columnSpacingDropdown: () => cy.get('[aria-labelledby*="Column-spacing-dropdown-label"]'),
+    columnSpacingDropdownOptions: (ariaLabel = null) => {
+        if (ariaLabel) {
+            return cy.get(`[aria-labelledby*="Column-spacing-dropdown-label"] .dropdown-menu-item[aria-label*="${ariaLabel}"]`)
+        } else {
+            return cy.get(`[aria-labelledby*="Column-spacing-dropdown-label"] .dropdown-menu-item`)
+        }
+    },
+    cellMinimumHeightLabel: () => cy.get('[for="cell minimum height"]'),
+    cellMinimumHeightInputField: () => cy.get('[id="cell minimum height"]'),
+    columnDimensionsLabel: () => cy.get('#column-dimensions-dropdown-label'),
+    columnDimensionsDropdown: () => cy.get('#column-dimensions-select'),
+    columnDimensionsDropdownOptions: (ariaLabel = null) => {
+        if (ariaLabel) {
+            return cy.get(`[aria-labelledby*="column-dimensions-dropdown-label"] .dropdown-menu-item[aria-label*="${ariaLabel}"]`)
+        } else {
+            return cy.get(`[aria-labelledby*="column-dimensions-dropdown-label"] .dropdown-menu-item`)
+        }
+    },
+    specifyForAllColumnsLabel: () => cy.get('.ngie-radio-label[aria-label="Specify for all columns"]'),
+    specifyForAllColumnsRadioButton: () => cy.get('[type="radio"][aria-label="Specify for all columns"]'),
+    specifyForFirstColumnOnlyLabel: () => cy.get('.ngie-radio-label[aria-label="Specify for first column only"]'),
+    specifyForFirstColumnOnlyRadioButton: () => cy.get('[type="radio"][aria-label="Specify for first column only"]'),
+    specifyForIndividualColumnsLabel: () => cy.get('.ngie-radio-label[aria-label="Specify for individual columns"]'),
+    specifyForIndividualColumnsRadioButton: () => cy.get('[type="radio"][aria-label="Specify for individual columns"]'),
+    columnWidthLabel: () => cy.get('.additional-settings-label[for*="width"]'),
+    columnWidthInputField: () => cy.get('input[id*="width"]'),
+    enableOuterBorderForQuestionLabel: () => cy.get('.grid-style-layout-wrapper .options-label').eq(0),
+    enableOuterBorderForQuestionOptions: (outerBorderOption) => cy.get(`.options-border-style button[aria-label*="Enable outer border"][value="${outerBorderOption}"]`),
+    innerBorderLabel: () => cy.get('.grid-style-layout-wrapper .options-label').eq(1),
+    innerBorderOptions: (innerBorderOption) => cy.get(`.options-border-style button[aria-label*="inner border"][value="${innerBorderOption}"]`),
+    applyToAllColumnsLabel: () => cy.get('label[aria-label="apply to all columns"]'),
+    applyToAllColumnsRadioButton: () => cy.get('input[value="applyToAll"]'),
+    applyToFirstColumnLabel: () => cy.get('label[aria-label="apply to first column only"]'),
+    applyToFirstColumnRadioButton: () => cy.get('input[value="applyToFirstColumnOnly"]'),
+    gridLabel: () => cy.get('[class*="Gridstyles__SectionWrapper"]'),
+    fillColorLabel: () => cy.get('.sub-section-label').eq(0),
+    borderColorLabel: () => cy.get('.sub-section-label').eq(1),
+    colorBlock: () => cy.get('.color-picker-block'),
+    editColorButton: () => cy.get('button[aria-label="edit color"]'),
+    colorBlockSelectedIcon: () => cy.get('[class*="BtnSelectionWrapper"] svg'),
 }
 
 const steps = {
@@ -853,7 +955,7 @@ const steps = {
         gridQuestionCommonComponent.editCellPropertyRow()
             .eq(0)
             .within(() => {
-                utilities.verifyElementVisibilityState(gridQuestionCommonComponent.tableCell().eq(columnIndex), 'visible');
+                utilities.verifyElementVisibilityState(gridQuestionCommonComponent.tableCell().eq(columnIndex), 'exist');
             });
     },
 
@@ -999,172 +1101,1063 @@ const steps = {
                         utilities.verifyElementVisibilityState(commonComponents.errorIcon(), 'notExist');
                     });
             });
-    }
-}
+    },
 
-const tests = {
-    verifyContentsOfSpecifyCorrectAnswerSection: () => {
-        it(`When the user selects any scoring type except for manual scored, then the question grid should be displayed in the specify correct answer section`, () => {
-            gridQuestionCommonComponent.steps.verifyTableCellPropertySpecifyCorrectAnswerSection({ row: 0, column: 0 }, 'None');
-            gridQuestionCommonComponent.steps.verifyTableCellPropertySpecifyCorrectAnswerSection({ row: 0, column: 1 }, 'Heading');
-            gridQuestionCommonComponent.steps.verifyTextInCellPropertyInputField({ row: 0, column: 1 }, 'True');
-            gridQuestionCommonComponent.steps.verifyTableCellPropertySpecifyCorrectAnswerSection({ row: 0, column: 2 }, 'Heading');
-            gridQuestionCommonComponent.steps.verifyTextInCellPropertyInputField({ row: 0, column: 2 }, 'False');
-            gridQuestionCommonComponent.steps.verifyTableCellPropertySpecifyCorrectAnswerSection({ row: 1, column: 0 }, 'Heading');
-            gridQuestionCommonComponent.steps.verifyTextInCellPropertyInputField({ row: 1, column: 0 }, 'Elephants are the only mammals that can\'t jump');
-            gridQuestionCommonComponent.steps.verifyTableCellPropertySpecifyCorrectAnswerSection({ row: 1, column: 1 }, 'Radio button');
-            gridQuestionCommonComponent.steps.verifyTableCellPropertySpecifyCorrectAnswerSection({ row: 2, column: 0 }, 'Subheading');
-            gridQuestionCommonComponent.steps.verifyTextInCellPropertyInputField({ row: 2, column: 0 }, 'Bats are blind and navigate by using echolocation');
-            gridQuestionCommonComponent.steps.verifyTextInCellPropertyInputField({ row: 3, column: 0 }, 'Whale are mammals');
-            gridQuestionCommonComponent.steps.verifyTextInCellPropertyInputField({ row: 4, column: 0 }, 'Tigers can jump upto 3 metres');
+    //Additional settings
+    expandRowNumerationDropdown: () => {
+        gridQuestionCommonComponent.rowNumerationDropdown()
+            .click();
+    },
 
-        });
+    /**
+     * This function selects an option from the row numeration dropdown
+     * @param {string} dropdownAriaLabel Aria-label of the dropdown option
+     */
+    selectOptionFromRowNumerationDropdown: (dropdownAriaLabel) => {
+        gridQuestionCommonComponent.rowNumerationDropdownOptions(dropdownAriaLabel)
+            .click();
     },
 
     /**
-     * Verifies the contents and functionality of the 'Specify correct answer' accordion for multiple selection questions.
-     * @param {{'Correct' | 'Alternative'}} accordionName - The name of the accordion to be used in the validation.
-     * @example - verifySpecifyCorrectAnswerAccordionContentsAndFunctionality('Correct');
+    * This function verifies selected state of an option from the row numeration dropdown
+    * @param {string} dropdownAriaLabel Aria-label of the dropdown option
+    */
+    verifyRowNumerationOptionSelected: (dropdownAriaLabel) => {
+        gridQuestionCommonComponent.rowNumerationDropdownOptions(dropdownAriaLabel)
+            .should('have.attr', 'aria-selected', 'true')
+    },
+
+    /**
+     * This function selects numeration style option
+     * @param {number} index of the numeration style option
      */
-    verifySpecifyCorrectAnswerAccordionContentsAndFunctionality: (accordionName) => {
-        it(`The user should be able to check an option in the ${accordionName} accordion`, () => {
-            gridQuestionCommonComponent.steps.setAnswerInSpecifyCorrectAnswerSection({ row: 1, column: 0 });
+    selectNumerationStyleOption: (index) => {
+        gridQuestionCommonComponent.numerationStyleOptions()
+            .eq(index)
+            .click();
+    },
+
+    /**
+     * This function verified the selected state of numeration style option
+     * @param {number} index of the numeration style
+     */
+    verifyNumerationStyleOptionSelected: (index) => {
+        gridQuestionCommonComponent.numerationStyleOptions()
+            .eq(index)
+            .should('have.attr', 'aria-selected', 'true')
+    },
+
+    /**
+     * This function verified the numeration on grid row
+     * @param {string[]} numerationArray array of numeration expected
+     */
+    verifyRowNumerationSpecifyCorrectAnswer: (numerationArray) => {
+        numerationArray.forEach((option, index) => {
+            gridQuestionCommonComponent.rowNumerationSpecifyCorrectAnswerSection()
+                .eq(index)
+                .should('have.text', option)
         });
+    },
 
-        it(`When the user has unchecked all the options in the ${accordionName} accordion, \'Error: Please set a correct answer.\' error message should be thrown along with an error icon on the \'${accordionName}\' accordion`, () => {
-            gridQuestionCommonComponent.steps.uncheckOptionInSpecifyCorrectAnswerSection({ row: 1, column: 0 });
-            utilities.verifyElementVisibilityState(commonComponents.errorMessage(), 'visible')
-            utilities.verifyInnerText(commonComponents.errorMessage(), 'Error: Please set a correct answer.');
-            if (accordionName == 'Correct') {
-                autoScoredSpecifyCorrectAnswerSection.correctAnswerAccordion()
-                    .within(() => {
-                        utilities.verifyElementVisibilityState(autoScoredSpecifyCorrectAnswerSection.specifyCorrectAnswerErrorIcon(), 'visible');
+    /**
+     * Verifies the border-radius CSS property of the row numeration section based on the given index.
+     *
+     * @param {number} index - The index representing the numeration style to verify.
+     */
+    verifyNumerationStyleSpecifyCorrectAnswer: (index) => {
+        switch (index) {
+            case 0:
+                gridQuestionCommonComponent.rowNumerationSpecifyCorrectAnswerSection()
+                    .each(($el) => {
+                        cy.wrap($el)
+                            .should('have.css', 'border-radius', '7px');
                     });
-            } else {
-                autoScoredSpecifyCorrectAnswerSection.alternativeAnswerAccordion()
-                    .within(() => {
-                        utilities.verifyElementVisibilityState(autoScoredSpecifyCorrectAnswerSection.specifyCorrectAnswerErrorIcon(), 'visible');
+                break;
+            case 1:
+                gridQuestionCommonComponent.rowNumerationSpecifyCorrectAnswerSection()
+                    .each(($el) => {
+                        cy.wrap($el)
+                            .should('have.css', 'border-radius', '0px');
                     });
-            };
-        });
-
-        autoScoredSpecifyCorrectAnswerSection.tests.verifyAutoScoredCorrectAnswerErrorMessageCSSAndA11y();
+                break;
+            case 2:
+                gridQuestionCommonComponent.rowNumerationSpecifyCorrectAnswerSection()
+                    .each(($el) => {
+                        cy.wrap($el)
+                            .should('have.css', 'border-radius', '50%');
+                    });
+                break;
+            default:
+                throw new Error(`Unsupported index: ${index}`);
+        }
+    },
 
-        it('When the user checks an option in the question grid, the error message should disappear', () => {
-            gridQuestionCommonComponent.steps.setAnswersForAllQuestionStemsInSpecifyCorrectAnswerSection([{ row: 1, column: 0 }, { row: 2, column: 1 }, { row: 3, column: 0 }, { row: 4, column: 1 }]);
-            commonComponents.steps.verifyErrorMessageIsNotDisplayed();
+    /**
+     * This function verified the numeration on grid row
+     * @param {string[]} numerationArray array of numeration expected
+     */
+    verifyRowNumerationPreviewTab: (numerationArray) => {
+        numerationArray.forEach((option, index) => {
+            gridQuestionCommonComponent.rowNumerationPreviewTab()
+                .eq(index)
+                .should('have.text', option)
         });
+    },
 
-        autoScoredSpecifyCorrectAnswerSection.tests.verifyAutoScoredPointsErrorMessageWhenPointsFieldIsEmpty(accordionName);
-
-        it('CSS of \'Correct\' accordion contents', { tags: 'css' }, () => {
-            gridQuestionCommonComponent.gridSpecifyCorrectAnswerSection()
-                .within(() => {
-                    utilities.verifyCSS(utilities.getNthElement(gridQuestionCommonComponent.tableCell().parent(), 1), {
-                        'background-color': css.color.matrixHeadingCellBg,
-                        'border-color': `${css.color.matrixCellBorder}`
+    /**
+     * Verifies the border-radius CSS property of the row numeration section based on the given index.
+     * @param {number} index - The index representing the numeration style to verify.
+     */
+    verifyNumerationStylePreviewTab: (index) => {
+        switch (index) {
+            case 0:
+                gridQuestionCommonComponent.rowNumerationPreviewTab()
+                    .each(($el) => {
+                        cy.wrap($el)
+                            .should('have.css', 'border-radius', '7px');
                     });
-                    utilities.verifyCSS(utilities.getNthElement(gridQuestionCommonComponent.tableCell().parent(), 6), {
-                        'background-color': css.color.matrixSubheadingCellBg,
-                        'border-color': `${css.color.matrixCellBorder}`
+                break;
+            case 1:
+                gridQuestionCommonComponent.rowNumerationPreviewTab()
+                    .each(($el) => {
+                        cy.wrap($el)
+                            .should('have.css', 'border-radius', '0px');
                     });
-                    utilities.verifyCSS(utilities.getNthElement(gridQuestionCommonComponent.tableCell().parent(), 9), {
-                        'background-color': css.color.defaultBackground,
-                        'border-color': `${css.color.matrixCellBorder}`
+                break;
+            case 2:
+                gridQuestionCommonComponent.rowNumerationPreviewTab()
+                    .each(($el) => {
+                        cy.wrap($el)
+                            .should('have.css', 'border-radius', '50%');
                     });
-                    utilities.verifyCSS(utilities.getNthElement(gridQuestionCommonComponent.optionsButton, 0), {
-                        'background-color': css.color.matrixHeadingCellBg,
-                        'color': `${css.color.matrixCellBorder}`
+                break;
+            default:
+                throw new Error(`Unsupported index: ${index}`);
+        }
+    },
+
+    /**
+     * This function selects alignment option
+     * @param {string} option alignment option to be selected
+     */
+    selectAlignmentOption: (option) => {
+        gridQuestionCommonComponent.optionAlignmentInCellButton(option)
+            .click();
+    },
+
+    /**
+     * This function verifies alignment option selected state
+     * @param {string} option alignment option to be selected
+     */
+    verifyOptionAlignmentInCellButtonSelected: (option) => {
+        gridQuestionCommonComponent.optionAlignmentInCellButton(option)
+            .should('have.attr', 'aria-selected', 'true');
+    },
+
+    /**
+     * This function verifies the alignment of the options
+     * @param {("left"|"right"|"center")} alignmentType of the options
+     */
+    verifyOptionAlignmentInCellSpecifyCorrectAnswerSection: (alignmentType) => {
+        switch (alignmentType) {
+            case 'left':
+                gridQuestionCommonComponent.optionsButton()
+                    .each(($el) => {
+                        cy.wrap($el)
+                            .should('have.css', 'justify-content', 'flex-start')
                     });
-                    utilities.verifyCSS(utilities.getNthElement(gridQuestionCommonComponent.optionsButton, 0).find('svg'), {
-                        'color': css.color.activeButtons
+                break;
+            case 'center':
+                gridQuestionCommonComponent.optionsButton()
+                    .each(($el) => {
+                        cy.wrap($el)
+                            .should('have.css', 'justify-content', 'center')
                     });
-                    utilities.verifyCSS(utilities.getNthElement(gridQuestionCommonComponent.tableCell(), 1).find('.question-text-wrapper'), {
-                        'color': css.color.text,
-                        'font-size': css.fontSize.heading,
-                        'font-weight': css.fontWeight.bold
+                break;
+            case 'right':
+                gridQuestionCommonComponent.optionsButton()
+                    .each(($el) => {
+                        cy.wrap($el)
+                            .should('have.css', 'justify-content', 'flex-end')
                     });
-                    utilities.verifyCSS(utilities.getNthElement(gridQuestionCommonComponent.tableCell(), 6).find('.question-text-wrapper'), {
-                        'color': css.color.text,
-                        'font-size': css.fontSize.default,
-                        'font-weight': css.fontWeight.bold
+                break;
+            default:
+                throw new Error(`Unsupported alignment option: ${alignmentType}`);
+        }
+    },
+
+    /**
+     * This function verifies the alignment of the options
+     * @param {("left"|"right"|"center")} alignmentType of the options
+     */
+    verifyOptionAlignmentInCellPreviewTab: (alignmentType) => {
+        switch (alignmentType) {
+            case 'left':
+                gridQuestionCommonComponent.optionsButtonPreviewTab()
+                    .each(($el) => {
+                        cy.wrap($el)
+                            .should('have.css', 'justify-content', 'flex-start')
                     });
-                    utilities.verifyCSS(utilities.getNthElement(gridQuestionCommonComponent.tableCell(), 9).find('.question-text-wrapper'), {
-                        'color': css.color.text,
-                        'font-size': css.fontSize.default,
-                        'font-weight': css.fontWeight.regular
+                break;
+            case 'center':
+                gridQuestionCommonComponent.optionsButtonPreviewTab()
+                    .each(($el) => {
+                        cy.wrap($el)
+                            .should('have.css', 'justify-content', 'center')
                     });
-                });
-        });
+                break;
+            case 'right':
+                gridQuestionCommonComponent.optionsButtonPreviewTab()
+                    .each(($el) => {
+                        cy.wrap($el)
+                            .should('have.css', 'justify-content', 'flex-end')
+                    });
+                break;
+            default:
+                throw new Error(`Unsupported alignment option: ${alignmentType}`);
+        }
+    },
 
-        it('Accessibility of \'Correct\' accordion contents', { tags: 'a11y' }, () => {
-            cy.checkAccessibility(gridQuestionCommonComponent.tableCell().parents('.correct-answer-accordion'));
-        });
+    /**
+     * This function verifies aria-label of the table row
+     * @param {string} ariaLabel of the table row
+     */
+    verifyRowHeaderAriaLabelSpecifyCorrectAnswerSection: (ariaLabel) => {
+        gridQuestionCommonComponent.tableRowHeadersSpecifyCorrectAnswerSection()
+            .should('have.attr', 'aria-label', ariaLabel)
     },
 
     /**
-     * Verifies the contents of the 'Default options' dropdown
-     * @param {{'Multiple selection grid' | 'Single selection grid'}} questionType - The name of the question type to be used for validation.
-     * @example - verifyDefaultOptionLabelAndDropdown('Multiple selection grid');
+     * This function verifies aria-label of the table row
+     * @param {string} ariaLabel of the table row
      */
-    verifyDefaultOptionLabelAndDropdown: (questionType) => {
-        const cellPropertyArray = (questionType === 'Multiple selection grid') ?
-            ['Checkboxes', 'Checkboxes with text', 'No checkboxes'] :
-            ['Radio buttons', 'Radio buttons with text', 'No radio buttons'];
+    verifyRowHeaderAriaLabelPreviewTab: (ariaLabel) => {
+        gridQuestionCommonComponent.tableRowHeadersPreviewTab()
+            .should('have.attr', 'aria-label', ariaLabel)
+    },
 
-        it(`'Default option' label and dropdown should be displayed and in 'Default option' dropdown '${cellPropertyArray[0]}' option should be selected by default`, () => {
-            utilities.verifyInnerText(gridQuestionCommonComponent.defaultOptionLabel(), 'Default option');
-            utilities.verifyInnerText(gridQuestionCommonComponent.defaultOptionDropdown(), cellPropertyArray[0]);
-            utilities.verifyElementVisibilityState(gridQuestionCommonComponent.defaultOptionDropdown(), 'visible');
-        });
+    expandRowSpacingDropdown: () => {
+        gridQuestionCommonComponent.rowSpacingDropdown()
+            .click();
+    },
 
-        it(`Clicking on default option dropdown should open a list of default option types - ${cellPropertyArray}`, () => {
-            gridQuestionCommonComponent.steps.expandDefaultOptionDropdown()
-            utilities.verifyElementVisibilityState(gridQuestionCommonComponent.defaultOptionDropdownListOptions().eq(0), 'visible')
-            cellPropertyArray.forEach((option, count) => {
-                utilities.verifyInnerText(utilities.getNthElement(gridQuestionCommonComponent.defaultOptionDropdownListOptions(), count), option);
-            });
-        });
+    /**
+     * This function selects row spacing option
+     * @param {string} rowSpacingOption of the row spacing
+     */
+    selectRowSpacingDropdownOption: (rowSpacingOption) => {
+        gridQuestionCommonComponent.rowSpacingDropdownOptions(rowSpacingOption)
+            .click();
+    },
 
-        it('CSS of default option type dropdown in active state', { tags: 'css' }, () => {
-            utilities.verifyCSS(gridQuestionCommonComponent.defaultOptionDropdownListOptions().eq(0), {
-                'color': css.color.liText,
-                'font-size': css.fontSize.default,
-                'font-weight': css.fontWeight.regular,
-                'background-color': css.color.liTextSelectedBg
-            })
-            utilities.verifyCSS(gridQuestionCommonComponent.defaultOptionDropdownListOptions().eq(1), {
-                'background-color': css.color.transparent
-            });
-        });
+    /**
+     * This function verified the selected state of row spacing option
+     * @param {string} rowSpacingOption of the row spacing
+     */
+    verifyRowSpacingOptionSelected: (rowSpacingOption) => {
+        gridQuestionCommonComponent.rowSpacingDropdownOptions(rowSpacingOption)
+            .should('have.attr', 'aria-selected', 'true');
+    },
 
-        it('Accessibility of default option type dropdown in active state', { tags: 'a11y' }, () => {
-            cy.checkAccessibility(commonComponents.dropdownList())
-        });
+    /**
+     * This function verifies the row spacing 
+     * @param {("No spacing"|"Small"|"Wide")} spacing of the rows
+     */
+    verifyTableRowSpacingSpecifyCorrectAnswerSection: (spacing) => {
+        switch (spacing) {
+            case 'No spacing':
+                gridQuestionCommonComponent.tableRowSpecifyCorrectAnswerSection()
+                    .each(($el) => {
+                        cy.wrap($el)
+                            .should('have.css', 'margin-bottom', '0px');
+                    });
+                break;
+            case 'Small':
+                gridQuestionCommonComponent.tableRowSpecifyCorrectAnswerSection()
+                    .each(($el) => {
+                        cy.wrap($el)
+                            .should('have.css', 'margin-bottom', '8px');
+                    });
+                break;
+            case 'Wide':
+                gridQuestionCommonComponent.tableRowSpecifyCorrectAnswerSection()
+                    .each(($el) => {
+                        cy.wrap($el)
+                            .should('have.css', 'margin-bottom', '24px');
+                    });
+                break;
+            default:
+                throw new Error(`Unsupported spacing option: ${spacing}`);
+        }
+    },
 
-        it('On selecting an option from the default option dropdown, the dropdown should close', () => {
-            gridQuestionCommonComponent.steps.selectOptionFromDefaultOptionDropdown(cellPropertyArray[1]);
-            utilities.verifyElementVisibilityState(commonComponents.dropdownList(), 'notExist');
-        });
+    /**
+     * This function verifies the row spacing 
+     * @param {("No spacing"|"Small"|"Wide")} spacing of the rows
+     */
+    verifyTableRowSpacingPreviewTab: (spacing) => {
+        switch (spacing) {
+            case 'No spacing':
+                gridQuestionCommonComponent.tableRowPreviewTab()
+                    .each(($el) => {
+                        cy.wrap($el)
+                            .should('have.css', 'margin-bottom', '0px');
+                    });
+                break;
+            case 'Small':
+                gridQuestionCommonComponent.tableRowPreviewTab()
+                    .each(($el) => {
+                        cy.wrap($el)
+                            .should('have.css', 'margin-bottom', '8px');
+                    });
+                break;
+            case 'Wide':
+                gridQuestionCommonComponent.tableRowPreviewTab()
+                    .each(($el) => {
+                        cy.wrap($el)
+                            .should('have.css', 'margin-bottom', '24px');
+                    });
+                break;
+            default:
+                throw new Error(`Unsupported spacing option: ${spacing}`);
+        }
+    },
 
-        it('CSS of default option section', { tags: 'css' }, () => {
-            utilities.verifyCSS(gridQuestionCommonComponent.defaultOptionLabel(), {
-                'color': css.color.labels,
-                'font-size': css.fontSize.normal,
-                'font-weight': css.fontWeight.semibold
-            });
-            utilities.verifyCSS(gridQuestionCommonComponent.defaultOptionDropdown().find('.dropdown-label-text'), {
-                'color': css.color.liText,
-                'font-size': css.fontSize.default,
-                'font-weight': css.fontWeight.regular
-            });
-        });
+    expandColumnSpacingDropdown: () => {
+        gridQuestionCommonComponent.columnSpacingDropdown()
+            .click();
     },
 
-    verifyDefaultTextLabelAndDropdown: () => {
-        const defaultTextDropdown = ['True / false', 'Yes / no', 'Agree / disagree', 'Custom'];
-        it(`\'Default text\' label and dropdown should be displayed and in \'Default text\' dropdown \'${defaultTextDropdown[0]}\' option should be selected by default`, () => {
-            utilities.verifyInnerText(gridQuestionCommonComponent.defaultTextLabel(), 'Default text');
+    /**
+     * This function selects row spacing option
+     * @param {string} rowSpacingOption of the row spacing
+     */
+    selectColumnSpacingDropdownOption: (rowSpacingOption) => {
+        gridQuestionCommonComponent.columnSpacingDropdownOptions(rowSpacingOption)
+            .click();
+    },
+
+    /**
+     * This function verified the selected state of row spacing option
+     * @param {string} rowSpacingOption of the row spacing
+     */
+    verifyColumnSpacingOptionSelected: (rowSpacingOption) => {
+        gridQuestionCommonComponent.columnSpacingDropdownOptions(rowSpacingOption)
+            .should('have.attr', 'aria-selected', 'true');
+    },
+
+    /**
+     * This function verifies the row spacing 
+     * @param {("No spacing"|"Small"|"Wide")} spacing of the rows
+     */
+    verifyTableColumnSpacingSpecifyCorrectAnswerSection: (spacing) => {
+        switch (spacing) {
+            case 'No spacing':
+                gridQuestionCommonComponent.tableRowSpecifyCorrectAnswerSection()
+                    .each(($el) => {
+                        cy.wrap($el)
+                            .should('have.css', 'column-gap', '0px');
+                    });
+                break;
+            case 'Small':
+                gridQuestionCommonComponent.tableRowSpecifyCorrectAnswerSection()
+                    .each(($el) => {
+                        cy.wrap($el)
+                            .should('have.css', 'column-gap', '8px');
+                    });
+                break;
+            case 'Wide':
+                gridQuestionCommonComponent.tableRowSpecifyCorrectAnswerSection()
+                    .each(($el) => {
+                        cy.wrap($el)
+                            .should('have.css', 'column-gap', '24px');
+                    });
+                break;
+            default:
+                throw new Error(`Unsupported spacing option: ${spacing}`);
+        }
+    },
+
+    /**
+     * This function verifies the row spacing 
+     * @param {("No spacing"|"Small"|"Wide")} spacing of the rows
+     */
+    verifyTableColumnSpacingPreviewTab: (spacing) => {
+        switch (spacing) {
+            case 'No spacing':
+                gridQuestionCommonComponent.tableRowPreviewTab()
+                    .each(($el) => {
+                        cy.wrap($el)
+                            .should('have.css', 'column-gap', '0px');
+                    });
+                break;
+            case 'Small':
+                gridQuestionCommonComponent.tableRowPreviewTab()
+                    .each(($el) => {
+                        cy.wrap($el)
+                            .should('have.css', 'column-gap', '8px');
+                    });
+                break;
+            case 'Wide':
+                gridQuestionCommonComponent.tableRowPreviewTab()
+                    .each(($el) => {
+                        cy.wrap($el)
+                            .should('have.css', 'column-gap', '24px');
+                    });
+                break;
+            default:
+                throw new Error(`Unsupported spacing option: ${spacing}`);
+        }
+    },
+
+    /**
+     * This function enters text in cell height input field
+     * @param {number} cellHeight of the rows
+     */
+    enterTextInCellMinimumHeightInputField: (cellHeight) => {
+        gridQuestionCommonComponent.cellMinimumHeightInputField()
+            .clear()
+            .type(cellHeight)
+            .should('have.value', cellHeight);
+        gridQuestionCommonComponent.cellMinimumHeightInputField()
+            .blur();
+    },
+
+    /**
+     * This function verifies text in cell height input field
+     * @param {number} cellHeight of the rows
+     */
+    verifyCellMinimumHeightInputField: (cellHeight) => {
+        gridQuestionCommonComponent.cellMinimumHeightInputField()
+            .should('have.value', cellHeight);
+    },
+
+    /**
+     * This function verifies cell height specify correct answer section
+     * @param {number} cellHeight of the rows
+     */
+    verifyCellMinimumHeightSpecifyCorrectAnswer: (cellHeight) => {
+        gridQuestionCommonComponent.tableRowHeadersSpecifyCorrectAnswerSection()
+            .each(($el) => {
+                cy.wrap($el)
+                    .should('have.css', 'min-height', `${cellHeight}px`)
+            });
+    },
+
+    /**
+     * This function verifies cell height preview tab
+     * @param {number} cellHeight of the rows
+     */
+    verifyCellMinimumHeightPreviewTab: (cellHeight) => {
+        gridQuestionCommonComponent.tableRowHeadersPreviewTab()
+            .each(($el) => {
+                cy.wrap($el)
+                    .should('have.css', 'min-height', `${cellHeight}px`)
+            });
+    },
+
+    expandColumnDimensionsDropdown: () => {
+        gridQuestionCommonComponent.columnDimensionsDropdown()
+            .click();
+    },
+
+    /**
+     * This function verified the selected state of column dimension dropdown
+     * @param {string} columnDimensionsOption of the column dimension dropdown
+     */
+    selectColumnDimensionsDropdownOption: (columnDimensionsOption) => {
+        gridQuestionCommonComponent.columnDimensionsDropdownOptions(columnDimensionsOption)
+            .click();
+    },
+
+    /**
+     * This function verified the selected state of column dimension dropdown
+     * @param {string} columnDimensionsOption of the column dimension dropdown
+     */
+    verifyColumnDimensionsDropdownOptionSelected: (columnDimensionsOption) => {
+        gridQuestionCommonComponent.columnDimensionsDropdownOptions(columnDimensionsOption)
+            .should('have.attr', 'aria-selected', 'true');
+    },
+
+    /**
+     * This function verifies the dimension of the column
+     * @param {("Auto"|"Custom")} dimension of the column
+     */
+    verifyColumnDimensionsSpecifyCorrectAnswer: (dimension) => {
+        switch (dimension) {
+            case 'Auto':
+                gridQuestionCommonComponent.tableRowHeadersSpecifyCorrectAnswerSection()
+                    .each(($el) => {
+                        cy.wrap($el)
+                            .should('not.have.css', 'width', '225px');
+                    });
+                break;
+            case 'Custom':
+                gridQuestionCommonComponent.tableRowHeadersSpecifyCorrectAnswerSection()
+                    .each(($el) => {
+                        cy.wrap($el)
+                            .should('have.css', 'width', '225px');
+                    });
+                break;
+            default:
+                throw new Error(`Unsupported spacing option: ${dimension}`);
+        }
+    },
+
+    /**
+    * This function verifies the dimension of the column
+    * @param {("Auto"|"Custom")} dimension of the column
+    */
+    verifyColumnDimensionsPreviewTab: (dimension) => {
+        switch (dimension) {
+            case 'Auto':
+                gridQuestionCommonComponent.tableRowHeadersPreviewTab()
+                    .each(($el) => {
+                        cy.wrap($el)
+                            .should('not.have.css', 'width', '225px');
+                    });
+                break;
+            case 'Custom':
+                gridQuestionCommonComponent.tableRowHeadersPreviewTab()
+                    .each(($el) => {
+                        cy.wrap($el)
+                            .should('have.css', 'width', '225px');
+                    });
+                break;
+            default:
+                throw new Error(`Unsupported spacing option: ${dimension}`);
+        }
+    },
+
+    /**
+     * This function verifies selected state of radio button
+     * @param {("Specify for all columns"|"Specify for first column only"|"Specify for individual columns")} radioButton in custom dimensions section
+     */
+    verifyCustomDimensionsRadioButtonSelected: (radioButton) => {
+        switch (radioButton) {
+            case 'Specify for all columns':
+                gridQuestionCommonComponent.specifyForAllColumnsRadioButton()
+                    .should('be.checked');
+                break;
+            case 'Specify for first column only':
+                gridQuestionCommonComponent.specifyForFirstColumnOnlyRadioButton()
+                    .should('be.checked');
+                break;
+            case 'Specify for individual columns':
+                gridQuestionCommonComponent.specifyForIndividualColumnsRadioButton()
+                    .should('be.checked');
+                break;
+            default:
+                throw new Error(`Unsupported dimension option: ${radioButton}`);
+        }
+    },
+
+    /**
+     * This function verifies selected state of radio button
+     * @param {{"Specify for all columns"|"Specify for first column only"|"Specify for individual columns"}} radioButton in custom dimensions section
+     */
+    selectCustomDimensionsRadioButton: (radioButton) => {
+        switch (radioButton) {
+            case 'Specify for all columns':
+                gridQuestionCommonComponent.specifyForAllColumnsRadioButton()
+                    .click()
+                    .should('be.checked');
+                break;
+            case 'Specify for first column only':
+                gridQuestionCommonComponent.specifyForFirstColumnOnlyRadioButton()
+                    .click()
+                    .should('be.checked');
+                break;
+            case 'Specify for individual columns':
+                gridQuestionCommonComponent.specifyForIndividualColumnsRadioButton()
+                    .click()
+                    .should('be.checked');
+                break;
+            default:
+                throw new Error(`Unsupported dimension option: ${radioButton}`);
+        }
+    },
+
+    verifyTableColumnWidthSpecifyCorrectAnswer: (index, width) => {
+        gridQuestionCommonComponent.tableCellSpecifyCorrectAnswerSection()
+            .eq(index)
+            .should('have.css', 'width', `${width}px`);
+    },
+
+    verifyTableColumnDoeNotHaveSpecifiedWidthSpecifyCorrectAnswer: (index, width) => {
+        gridQuestionCommonComponent.tableCellSpecifyCorrectAnswerSection()
+            .eq(index)
+            .should('not.have.css', 'width', `${width}px`);
+    },
+
+    verifyColumnWidthInputField: (index, width) => {
+        gridQuestionCommonComponent.columnWidthInputField()
+            .eq(index)
+            .should('have.value', width);
+    },
+
+    enterTextInColumnWidthInputField: (index, width) => {
+        gridQuestionCommonComponent.columnWidthInputField()
+            .eq(index)
+            .clear()
+            .type(width);
+        gridQuestionCommonComponent.columnWidthInputField()
+            .eq(index)
+            .blur();
+    },
+
+    verifyTableColumnWidthPreviewTab: (index, width) => {
+        gridQuestionCommonComponent.tableCellPreviewTab()
+            .eq(index)
+            .should('have.css', 'width', `${width}px`);
+    },
+
+    verifyTableColumnDoeNotHaveSpecifiedWidthPreviewTab: (index, width) => {
+        gridQuestionCommonComponent.tableCellPreviewTab()
+            .eq(index)
+            .should('not.have.css', 'width', `${width}px`);
+    },
+
+    /**
+    * This function verified the selected state of outer border option
+    * @param {string} outerBorderOption
+    */
+    verifyOuterBorderOptionSelected: (outerBorderOption) => {
+        gridQuestionCommonComponent.enableOuterBorderForQuestionOptions(outerBorderOption)
+            .should('have.attr', 'aria-pressed', 'true');
+    },
+
+    /**
+    * This function verified the selected state of outer border option
+    * @param {string} outerBorderOption
+    */
+    selectOuterBorderOption: (outerBorderOption) => {
+        gridQuestionCommonComponent.enableOuterBorderForQuestionOptions(outerBorderOption)
+            .click();
+    },
+
+    verifyTableOuterBorderSpecifyCorrectAnswer: (outerBorder) => {
+        switch (outerBorder) {
+            case 'Outer':
+                gridQuestionCommonComponent.tableCellWrapperSpecifyCorrectAnswerSection()
+                    .eq(0)
+                    .should('have.css', 'border-bottom-width', '1px')
+                    .should('have.css', 'border-left-width', '1px')
+                    .should('have.css', 'border-top-width', '0px')
+                    .should('have.css', 'border-right-width', '1px');
+                break;
+            case 'None':
+                gridQuestionCommonComponent.tableCellWrapperSpecifyCorrectAnswerSection()
+                    .eq(0)
+                    .should('have.css', 'border-bottom-width', '0px')
+                    .should('have.css', 'border-left-width', '0px')
+                    .should('have.css', 'border-top-width', '1px')
+                    .should('have.css', 'border-right-width', '1px');
+                break;
+            default:
+                throw new Error(`Unsupported outer border option: ${outerBorder}`);
+        }
+    },
+
+    verifyTableOuterBorderPreviewTab: (outerBorder) => {
+        switch (outerBorder) {
+            case 'Outer':
+                gridQuestionCommonComponent.tableCellWrapperPreviewTab()
+                    .eq(0)
+                    .should('have.css', 'border-bottom-width', '1px')
+                    .should('have.css', 'border-left-width', '1px')
+                    .should('have.css', 'border-top-width', '0px')
+                    .should('have.css', 'border-right-width', '1px');
+                break;
+            case 'None':
+                gridQuestionCommonComponent.tableCellWrapperPreviewTab()
+                    .eq(0)
+                    .should('have.css', 'border-bottom-width', '0px')
+                    .should('have.css', 'border-left-width', '0px')
+                    .should('have.css', 'border-top-width', '1px')
+                    .should('have.css', 'border-right-width', '1px');
+                break;
+            default:
+                throw new Error(`Unsupported outer border option: ${outerBorder}`);
+        }
+    },
+
+    /**
+   * This function verified the selected state of inner border option
+   * @param {("inner"|"horizontal"|"vertical"|"none")} innerBorderOption
+   */
+    verifyInnerBorderOptionSelected: (innerBorderOption) => {
+        gridQuestionCommonComponent.innerBorderOptions(innerBorderOption.toLowerCase())
+            .should('have.attr', 'aria-pressed', 'true');
+    },
+
+    /**
+    * This function verified the selected state of inner border option
+    * @param {string} innerBorderOption
+    */
+    selectInnerBorderOption: (innerBorderOption) => {
+        gridQuestionCommonComponent.innerBorderOptions(innerBorderOption.toLowerCase())
+            .click();
+    },
+
+    verifyTableInnerBorderSpecifyCorrectAnswer: (innerBorderOption) => {
+        switch (innerBorderOption) {
+            case 'Inner':
+                gridQuestionCommonComponent.tableCellWrapperSpecifyCorrectAnswerSection()
+                    .eq(0)
+                    .should('have.css', 'border-bottom-width', '1px')
+                    .should('have.css', 'border-left-width', '1px')
+                    .should('have.css', 'border-top-width', '0px')
+                    .should('have.css', 'border-right-width', '1px');
+                break;
+            case 'Horizontal':
+                gridQuestionCommonComponent.tableCellWrapperSpecifyCorrectAnswerSection()
+                    .eq(0)
+                    .should('have.css', 'border-bottom-width', '0px')
+                    .should('have.css', 'border-left-width', '1px')
+                    .should('have.css', 'border-top-width', '1px')
+                    .should('have.css', 'border-right-width', '0px');
+                break;
+            case 'Vertical':
+                gridQuestionCommonComponent.tableCellWrapperSpecifyCorrectAnswerSection()
+                    .eq(0)
+                    .should('have.css', 'border-bottom-width', '0px')
+                    .should('have.css', 'border-left-width', '1px')
+                    .should('have.css', 'border-top-width', '0px')
+                    .should('have.css', 'border-right-width', '1px');
+                break;
+            case 'Vertical - apply to first column':
+                gridQuestionCommonComponent.tableCellWrapperSpecifyCorrectAnswerSection()
+                    .eq(0)
+                    .should('have.css', 'border-bottom-width', '0px')
+                    .should('have.css', 'border-left-width', '1px')
+                    .should('have.css', 'border-top-width', '0px')
+                    .should('have.css', 'border-right-width', '1px');
+                gridQuestionCommonComponent.tableCellWrapperSpecifyCorrectAnswerSection()
+                    .eq(1)
+                    .should('have.css', 'border-bottom-width', '0px')
+                    .should('have.css', 'border-left-width', '0px')
+                    .should('have.css', 'border-top-width', '0px')
+                    .should('have.css', 'border-right-width', '0px');
+                break;
+            case 'None':
+                gridQuestionCommonComponent.tableCellWrapperSpecifyCorrectAnswerSection()
+                    .eq(0)
+                    .should('have.css', 'border-bottom-width', '0px')
+                    .should('have.css', 'border-left-width', '1px')
+                    .should('have.css', 'border-top-width', '0px')
+                    .should('have.css', 'border-right-width', '0px');
+                break;
+        }
+    },
+
+    verifyApplyToAllColumnsRadioButtonSelectedState: () => {
+        gridQuestionCommonComponent.applyToAllColumnsRadioButton()
+            .should('be.checked');
+    },
+
+    checkApplyToFirstColumnRadioButton: () => {
+        gridQuestionCommonComponent.applyToFirstColumnRadioButton()
+            .click()
+            .should('be.checked');
+    },
+
+    verifyTableInnerBorderPreviewTab: (innerBorderOption) => {
+        switch (innerBorderOption) {
+            case 'Inner':
+                gridQuestionCommonComponent.tableCellWrapperPreviewTab()
+                    .eq(0)
+                    .should('have.css', 'border-bottom-width', '1px')
+                    .should('have.css', 'border-left-width', '1px')
+                    .should('have.css', 'border-top-width', '0px')
+                    .should('have.css', 'border-right-width', '1px');
+                break;
+            case 'Horizontal':
+                gridQuestionCommonComponent.tableCellWrapperPreviewTab()
+                    .eq(0)
+                    .should('have.css', 'border-bottom-width', '0px')
+                    .should('have.css', 'border-left-width', '1px')
+                    .should('have.css', 'border-top-width', '1px')
+                    .should('have.css', 'border-right-width', '0px');
+                break;
+            case 'Vertical':
+                gridQuestionCommonComponent.tableCellWrapperPreviewTab()
+                    .eq(0)
+                    .should('have.css', 'border-bottom-width', '0px')
+                    .should('have.css', 'border-left-width', '1px')
+                    .should('have.css', 'border-top-width', '0px')
+                    .should('have.css', 'border-right-width', '1px');
+                break;
+            case 'Vertical - apply to first column':
+                gridQuestionCommonComponent.tableCellWrapperPreviewTab()
+                    .eq(0)
+                    .should('have.css', 'border-bottom-width', '0px')
+                    .should('have.css', 'border-left-width', '1px')
+                    .should('have.css', 'border-top-width', '0px')
+                    .should('have.css', 'border-right-width', '1px');
+                gridQuestionCommonComponent.tableCellWrapperPreviewTab()
+                    .eq(1)
+                    .should('have.css', 'border-bottom-width', '0px')
+                    .should('have.css', 'border-left-width', '0px')
+                    .should('have.css', 'border-top-width', '0px')
+                    .should('have.css', 'border-right-width', '0px');
+                break;
+            case 'None':
+                gridQuestionCommonComponent.tableCellWrapperPreviewTab()
+                    .eq(0)
+                    .should('have.css', 'border-bottom-width', '0px')
+                    .should('have.css', 'border-left-width', '1px')
+                    .should('have.css', 'border-top-width', '0px')
+                    .should('have.css', 'border-right-width', '0px');
+                break;
+        }
+    },
+
+    /**
+    * Clicks on the edit color button.
+    * @param {number} buttonIndex - The index of the edit color button.
+    */
+    editColor: (buttonIndex) => {
+        utilities.getNthElement(gridQuestionCommonComponent.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(gridQuestionCommonComponent.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(gridQuestionCommonComponent.colorBlock(), blockIndex)
+            .should('have.class', 'selected-button-icon')
+            .within(() => {
+                utilities.verifyElementVisibilityState(gridQuestionCommonComponent.colorBlockSelectedIcon(), 'visible');
+            });
+    },
+
+    /**
+     * Verifies the background color of grid
+     * @param {string} colorValue - The expected background color value.
+     */
+    verifyGridFillColorSpecifyCorrectAnswerSection: (colorValue) => {
+        utilities.verifyCSS(gridQuestionCommonComponent.tableCellWrapperSpecifyCorrectAnswerSection(), {
+            'background-color': colorValue
+        });
+    },
+
+    /**
+    * Verifies the background color of grid
+    * @param {string} colorValue - The expected background color value.
+    */
+    verifyGridFillColorPreviewTab: (colorValue) => {
+        utilities.verifyCSS(gridQuestionCommonComponent.tableCellWrapperPreviewTab(), {
+            'background-color': colorValue
+        });
+    },
+
+    /**
+     * Verifies the border color of grid
+     * @param {string} colorValue - The expected border color value.
+     */
+    verifyGridBorderColorSpecifyCorrectAnswer: (colorValue) => {
+        utilities.verifyCSS(gridQuestionCommonComponent.tableCellWrapperSpecifyCorrectAnswerSection(), {
+            'border-color': colorValue
+        });
+    },
+
+    /**
+    * Verifies the border color of grid
+    * @param {string} colorValue - The expected border color value.
+    */
+    verifyGridBorderColorPreviewTab: (colorValue) => {
+        utilities.verifyCSS(gridQuestionCommonComponent.tableCellWrapperPreviewTab(), {
+            'border-color': colorValue
+        });
+    },
+
+    /**
+    * Selects a color block by index.
+    * @param {number} blockIndex - The index of the color block to select.
+    */
+    selectColorBlock: (blockIndex) => {
+        utilities.getNthElement(gridQuestionCommonComponent.colorBlock(), blockIndex)
+            .click();
+    }
+}
+
+const tests = {
+    verifyContentsOfSpecifyCorrectAnswerSection: () => {
+        it(`When the user selects any scoring type except for manual scored, then the question grid should be displayed in the specify correct answer section`, () => {
+            gridQuestionCommonComponent.steps.verifyTableCellPropertySpecifyCorrectAnswerSection({ row: 0, column: 0 }, 'None');
+            gridQuestionCommonComponent.steps.verifyTableCellPropertySpecifyCorrectAnswerSection({ row: 0, column: 1 }, 'Heading');
+            gridQuestionCommonComponent.steps.verifyTextInCellPropertyInputField({ row: 0, column: 1 }, 'True');
+            gridQuestionCommonComponent.steps.verifyTableCellPropertySpecifyCorrectAnswerSection({ row: 0, column: 2 }, 'Heading');
+            gridQuestionCommonComponent.steps.verifyTextInCellPropertyInputField({ row: 0, column: 2 }, 'False');
+            gridQuestionCommonComponent.steps.verifyTableCellPropertySpecifyCorrectAnswerSection({ row: 1, column: 0 }, 'Heading');
+            gridQuestionCommonComponent.steps.verifyTextInCellPropertyInputField({ row: 1, column: 0 }, 'Elephants are the only mammals that can\'t jump');
+            gridQuestionCommonComponent.steps.verifyTableCellPropertySpecifyCorrectAnswerSection({ row: 1, column: 1 }, 'Radio button');
+            gridQuestionCommonComponent.steps.verifyTableCellPropertySpecifyCorrectAnswerSection({ row: 2, column: 0 }, 'Subheading');
+            gridQuestionCommonComponent.steps.verifyTextInCellPropertyInputField({ row: 2, column: 0 }, 'Bats are blind and navigate by using echolocation');
+            gridQuestionCommonComponent.steps.verifyTextInCellPropertyInputField({ row: 3, column: 0 }, 'Whale are mammals');
+            gridQuestionCommonComponent.steps.verifyTextInCellPropertyInputField({ row: 4, column: 0 }, 'Tigers can jump upto 3 metres');
+
+        });
+    },
+
+    /**
+     * Verifies the contents and functionality of the 'Specify correct answer' accordion for multiple selection questions.
+     * @param {{'Correct' | 'Alternative'}} accordionName - The name of the accordion to be used in the validation.
+     * @example - verifySpecifyCorrectAnswerAccordionContentsAndFunctionality('Correct');
+     */
+    verifySpecifyCorrectAnswerAccordionContentsAndFunctionality: (accordionName) => {
+        it(`The user should be able to check an option in the ${accordionName} accordion`, () => {
+            gridQuestionCommonComponent.steps.setAnswerInSpecifyCorrectAnswerSection({ row: 1, column: 0 });
+        });
+
+        it(`When the user has unchecked all the options in the ${accordionName} accordion, \'Error: Please set a correct answer.\' error message should be thrown along with an error icon on the \'${accordionName}\' accordion`, () => {
+            gridQuestionCommonComponent.steps.uncheckOptionInSpecifyCorrectAnswerSection({ row: 1, column: 0 });
+            utilities.verifyElementVisibilityState(commonComponents.errorMessage(), 'visible')
+            utilities.verifyInnerText(commonComponents.errorMessage(), 'Error: Please set a correct answer.');
+            if (accordionName == 'Correct') {
+                autoScoredSpecifyCorrectAnswerSection.correctAnswerAccordion()
+                    .within(() => {
+                        utilities.verifyElementVisibilityState(autoScoredSpecifyCorrectAnswerSection.specifyCorrectAnswerErrorIcon(), 'visible');
+                    });
+            } else {
+                autoScoredSpecifyCorrectAnswerSection.alternativeAnswerAccordion()
+                    .within(() => {
+                        utilities.verifyElementVisibilityState(autoScoredSpecifyCorrectAnswerSection.specifyCorrectAnswerErrorIcon(), 'visible');
+                    });
+            };
+        });
+
+        autoScoredSpecifyCorrectAnswerSection.tests.verifyAutoScoredCorrectAnswerErrorMessageCSSAndA11y();
+
+        it('When the user checks an option in the question grid, the error message should disappear', () => {
+            gridQuestionCommonComponent.steps.setAnswersForAllQuestionStemsInSpecifyCorrectAnswerSection([{ row: 1, column: 0 }, { row: 2, column: 1 }, { row: 3, column: 0 }, { row: 4, column: 1 }]);
+            commonComponents.steps.verifyErrorMessageIsNotDisplayed();
+        });
+
+        autoScoredSpecifyCorrectAnswerSection.tests.verifyAutoScoredPointsErrorMessageWhenPointsFieldIsEmpty(accordionName);
+
+        it(`CSS of \'${accordionName}\' accordion contents`, { tags: 'css' }, () => {
+            gridQuestionCommonComponent.gridSpecifyCorrectAnswerSection()
+                .within(() => {
+                    utilities.verifyCSS(utilities.getNthElement(gridQuestionCommonComponent.tableCell().parent(), 1), {
+                        'background-color': css.color.matrixHeadingCellBg,
+                        'border-color': `${css.color.matrixCellBorder}`
+                    });
+                    utilities.verifyCSS(utilities.getNthElement(gridQuestionCommonComponent.tableCell().parent(), 6), {
+                        'background-color': css.color.matrixSubheadingCellBg,
+                        'border-color': `${css.color.matrixCellBorder}`
+                    });
+                    utilities.verifyCSS(utilities.getNthElement(gridQuestionCommonComponent.tableCell().parent(), 9), {
+                        'background-color': css.color.defaultBackground,
+                        'border-color': `${css.color.matrixCellBorder}`
+                    });
+                    utilities.verifyCSS(utilities.getNthElement(gridQuestionCommonComponent.optionsButton, 0), {
+                        'background-color': css.color.matrixHeadingCellBg,
+                        'color': `${css.color.matrixCellBorder}`
+                    });
+                    utilities.verifyCSS(utilities.getNthElement(gridQuestionCommonComponent.optionsButton, 0).find('svg'), {
+                        'color': css.color.activeButtons
+                    });
+                    utilities.verifyCSS(utilities.getNthElement(gridQuestionCommonComponent.tableCell(), 1).find('.question-text-wrapper'), {
+                        'color': css.color.text,
+                        'font-size': css.fontSize.heading,
+                        'font-weight': css.fontWeight.bold
+                    });
+                    utilities.verifyCSS(utilities.getNthElement(gridQuestionCommonComponent.tableCell(), 6).find('.question-text-wrapper'), {
+                        'color': css.color.text,
+                        'font-size': css.fontSize.default,
+                        'font-weight': css.fontWeight.bold
+                    });
+                    utilities.verifyCSS(utilities.getNthElement(gridQuestionCommonComponent.tableCell(), 9).find('.question-text-wrapper'), {
+                        'color': css.color.text,
+                        'font-size': css.fontSize.default,
+                        'font-weight': css.fontWeight.regular
+                    });
+                });
+        });
+
+        it('Accessibility of \'Correct\' accordion contents', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(gridQuestionCommonComponent.tableCell().parents('.correct-answer-accordion'));
+        });
+    },
+
+    /**
+     * Verifies the contents of the 'Default options' dropdown
+     * @param {{'Multiple selection grid' | 'Single selection grid'}} questionType - The name of the question type to be used for validation.
+     * @example - verifyDefaultOptionLabelAndDropdown('Multiple selection grid');
+     */
+    verifyDefaultOptionLabelAndDropdown: (questionType) => {
+        const cellPropertyArray = (questionType === 'Multiple selection grid') ?
+            ['Checkboxes', 'Checkboxes with text', 'No checkboxes'] :
+            ['Radio buttons', 'Radio buttons with text', 'No radio buttons'];
+
+        it(`'Default option' label and dropdown should be displayed and in 'Default option' dropdown '${cellPropertyArray[0]}' option should be selected by default`, () => {
+            utilities.verifyInnerText(gridQuestionCommonComponent.defaultOptionLabel(), 'Default option');
+            utilities.verifyInnerText(gridQuestionCommonComponent.defaultOptionDropdown(), cellPropertyArray[0]);
+            utilities.verifyElementVisibilityState(gridQuestionCommonComponent.defaultOptionDropdown(), 'visible');
+        });
+
+        it(`Clicking on default option dropdown should open a list of default option types - ${cellPropertyArray}`, () => {
+            gridQuestionCommonComponent.steps.expandDefaultOptionDropdown()
+            utilities.verifyElementVisibilityState(gridQuestionCommonComponent.defaultOptionDropdownListOptions().eq(0), 'visible')
+            cellPropertyArray.forEach((option, count) => {
+                utilities.verifyInnerText(utilities.getNthElement(gridQuestionCommonComponent.defaultOptionDropdownListOptions(), count), option);
+            });
+        });
+
+        it('CSS of default option type dropdown in active state', { tags: 'css' }, () => {
+            utilities.verifyCSS(gridQuestionCommonComponent.defaultOptionDropdownListOptions().eq(0), {
+                'color': css.color.liText,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular,
+                'background-color': css.color.liTextSelectedBg
+            })
+            utilities.verifyCSS(gridQuestionCommonComponent.defaultOptionDropdownListOptions().eq(1), {
+                'background-color': css.color.transparent
+            });
+        });
+
+        it('Accessibility of default option type dropdown in active state', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(commonComponents.dropdownList())
+        });
+
+        it('On selecting an option from the default option dropdown, the dropdown should close', () => {
+            gridQuestionCommonComponent.steps.selectOptionFromDefaultOptionDropdown(cellPropertyArray[1]);
+            utilities.verifyElementVisibilityState(commonComponents.dropdownList(), 'notExist');
+        });
+
+        it('CSS of default option section', { tags: 'css' }, () => {
+            utilities.verifyCSS(gridQuestionCommonComponent.defaultOptionLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(gridQuestionCommonComponent.defaultOptionDropdown().find('.dropdown-label-text'), {
+                'color': css.color.liText,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+        });
+    },
+
+    verifyDefaultTextLabelAndDropdown: () => {
+        const defaultTextDropdown = ['True / false', 'Yes / no', 'Agree / disagree', 'Custom'];
+        it(`\'Default text\' label and dropdown should be displayed and in \'Default text\' dropdown \'${defaultTextDropdown[0]}\' option should be selected by default`, () => {
+            utilities.verifyInnerText(gridQuestionCommonComponent.defaultTextLabel(), 'Default text');
             utilities.verifyInnerText(gridQuestionCommonComponent.defaultTextDropdown(), defaultTextDropdown[0]);
             utilities.verifyElementVisibilityState(gridQuestionCommonComponent.defaultTextDropdown(), 'visible');
         });
@@ -1333,6 +2326,715 @@ const tests = {
             });
         });
     },
+
+    verifyRowNumerationContents: () => {
+        const enumerationOptions = ['Numerical', 'Uppercase alphabet', 'Lowercase alphabet', 'Uppercase roman numeral', 'Lowercase roman numeral'];
+        it('\'Row style and layout\' label should be displayed', () => {
+            utilities.verifyInnerText(gridQuestionCommonComponent.rowStyleAndLayoutTitle(), 'Row style and layout');
+        });
+
+        it('\'Row numeration\' label and dropdown should be displayed and by default \'None\' should be selected', () => {
+            utilities.verifyInnerText(gridQuestionCommonComponent.rowNumerationLabel(), 'Row numeration');
+            utilities.verifyInnerText(gridQuestionCommonComponent.rowNumerationDropdown(), 'None');
+        });
+
+        it('By default, \'Numeration style\' label and options should not be displayed', () => {
+            utilities.verifyElementVisibilityState(gridQuestionCommonComponent.numerationStyleLabel(), 'notExist');
+            utilities.verifyElementVisibilityState(gridQuestionCommonComponent.numerationStyleOptions(), 'notExist');
+        });
+
+        it(`When user expands the dropdown ${enumerationOptions.join(', ')} should be displayed and by default None should be selected`, () => {
+            gridQuestionCommonComponent.steps.expandRowNumerationDropdown();
+            enumerationOptions.forEach((dropdownOption, index) => {
+                utilities.verifyInnerText(utilities.getNthElement(gridQuestionCommonComponent.rowNumerationDropdownOptions(), index), dropdownOption)
+            });
+            utilities.verifyInnerText(utilities.getNthElement(gridQuestionCommonComponent.rowNumerationDropdownOptions(), 5), 'None');
+            gridQuestionCommonComponent.steps.verifyRowNumerationOptionSelected('None');
+        });
+
+        it('When the user selects any option other than \'None\' then a \'Numeration style\' label should be displayed with 3 options', () => {
+            gridQuestionCommonComponent.steps.selectOptionFromRowNumerationDropdown('Uppercase alphabet');
+            utilities.verifyInnerText(gridQuestionCommonComponent.numerationStyleLabel(), 'Numeration style');
+            utilities.verifyElementVisibilityState(gridQuestionCommonComponent.numerationStyleOptions(), 'visible');
+            utilities.verifyElementCount(gridQuestionCommonComponent.numerationStyleOptions(), 3);
+        });
+
+        it('By default the first numeration style should be selected', () => {
+            gridQuestionCommonComponent.steps.verifyNumerationStyleOptionSelected(0);
+        });
+    },
+
+    verifyRowNumerationEditTabFunctionality: () => {
+        it('When \'None\' option is selected then row numeration should not be displayed', () => {
+            utilities.verifyElementVisibilityState(gridQuestionCommonComponent.rowNumerationSpecifyCorrectAnswerSection(), 'notExist');
+        });
+
+        Object.keys(enumerationOptions).forEach(option => {
+            it(`When "${option}" option is selected in the dropdown, then in the specify correct answer section grid, numeration should be displayed`, () => {
+                gridQuestionCommonComponent.steps.expandRowNumerationDropdown();
+                gridQuestionCommonComponent.steps.selectOptionFromRowNumerationDropdown(option);
+                gridQuestionCommonComponent.steps.verifyRowNumerationSpecifyCorrectAnswer(enumerationOptions[option]);
+            });
+        });
+
+        it('By default, the numbers displayed should be according to the first numeration style', () => {
+            gridQuestionCommonComponent.steps.verifyNumerationStyleSpecifyCorrectAnswer(0);
+        });
+
+        it('When user selects other numeration style options they should be reflected in the specify correct answer section grid', () => {
+            gridQuestionCommonComponent.steps.selectNumerationStyleOption(1);
+            gridQuestionCommonComponent.steps.verifyNumerationStyleSpecifyCorrectAnswer(1);
+            gridQuestionCommonComponent.steps.selectNumerationStyleOption(2);
+            gridQuestionCommonComponent.steps.verifyNumerationStyleSpecifyCorrectAnswer(2);
+        });
+    },
+
+    verifyRowNumerationPreviewTabFunctionality: () => {
+        it('When \'None\' option is selected then row numeration should not be displayed', () => {
+            createQuestionBasePage.steps.switchToPreviewTab();
+            utilities.verifyElementVisibilityState(gridQuestionCommonComponent.rowNumerationPreviewTab(), 'notExist');
+            createQuestionBasePage.steps.switchToEditTab();
+        });
+
+        Object.keys(enumerationOptions).forEach(option => {
+            it(`When "${option}" option is selected in the dropdown, then in the preview tab grid, numeration should be displayed`, () => {
+                gridQuestionCommonComponent.steps.expandRowNumerationDropdown();
+                gridQuestionCommonComponent.steps.selectOptionFromRowNumerationDropdown(option);
+                createQuestionBasePage.steps.switchToPreviewTab();
+                gridQuestionCommonComponent.steps.verifyRowNumerationPreviewTab(enumerationOptions[option]);
+                createQuestionBasePage.steps.switchToEditTab();
+            });
+        });
+
+        it('By default, the numbers displayed should be according to the first numeration style', () => {
+            createQuestionBasePage.steps.switchToPreviewTab();
+            gridQuestionCommonComponent.steps.verifyNumerationStylePreviewTab(0);
+        });
+
+        it('When user selects other numeration style options they should be reflected in the preview tab grid', () => {
+            createQuestionBasePage.steps.switchToEditTab();
+            gridQuestionCommonComponent.steps.selectNumerationStyleOption(1);
+            createQuestionBasePage.steps.switchToPreviewTab();
+            gridQuestionCommonComponent.steps.verifyNumerationStylePreviewTab(1);
+            createQuestionBasePage.steps.switchToEditTab();
+            gridQuestionCommonComponent.steps.selectNumerationStyleOption(2);
+            createQuestionBasePage.steps.switchToPreviewTab();
+            gridQuestionCommonComponent.steps.verifyNumerationStylePreviewTab(2);
+        });
+    },
+
+    verifyOptionAlignmentInCellContentsAndFunctionalityEditTab: () => {
+        it('\'Option alignment in cell\' label should be displayed', () => {
+            utilities.verifyInnerText(gridQuestionCommonComponent.optionAlignmentInCellLabel(), 'Option alignment in cell');
+        });
+
+        it(`${optionAlignmentOptions} toggle options should be displayed and by default \'Center\' should be selected`, () => {
+            optionAlignmentOptions.forEach((option) => {
+                utilities.verifyElementVisibilityState(gridQuestionCommonComponent.optionAlignmentInCellButton(option), 'visible');
+            });
+            gridQuestionCommonComponent.steps.verifyOptionAlignmentInCellButtonSelected('center');
+            gridQuestionCommonComponent.steps.verifyOptionAlignmentInCellSpecifyCorrectAnswerSection('center');
+        });
+
+        optionAlignmentOptions.forEach(option => {
+            it(`When the user selects ${option} then the options in the grid should be aligned according to the option`, () => {
+                gridQuestionCommonComponent.steps.selectAlignmentOption(option);
+                gridQuestionCommonComponent.steps.verifyOptionAlignmentInCellSpecifyCorrectAnswerSection(option);
+            });
+        });
+    },
+
+    verifyOptionAlignmentInCellFunctionalityPreviewTab: () => {
+        it(`By default options should be \'Center\' aligned`, () => {
+            gridQuestionCommonComponent.steps.verifyOptionAlignmentInCellPreviewTab('center');
+        });
+
+        optionAlignmentOptions.forEach(option => {
+            it(`When the user selects ${option} then the options in the grid should be aligned according to the option`, () => {
+                createQuestionBasePage.steps.switchToEditTab();
+                gridQuestionCommonComponent.steps.selectAlignmentOption(option);
+                createQuestionBasePage.steps.switchToPreviewTab();
+                gridQuestionCommonComponent.steps.verifyOptionAlignmentInCellPreviewTab(option);
+            });
+        });
+    },
+
+    verifyARIALabelContentsAndFunctionalityEditTab: () => {
+        ariaLabelSectionComponent.tests.verifyAriaLabelSectionContents('row headers');
+
+        it('When the users adds a new row header, the count of the aria label text input fields should update accordingly', () => {
+            specifyRowsAndColumnsComponent.steps.increaseRowInputStepperCount(1);
+            utilities.verifyElementCount(ariaLabelSectionComponent.ariaLabelInputField(), 3);
+            ariaLabelSectionComponent.steps.verifyAriaLabelTextInputFields(2);
+        });
+
+        it('When the user deletes any row header, the count of the aria label texts input fields should update accordingly', () => {
+            specifyRowsAndColumnsComponent.steps.decreaseRowInputStepperCount(1);
+            utilities.verifyElementCount(ariaLabelSectionComponent.ariaLabelInputField(), 2);
+            ariaLabelSectionComponent.steps.verifyAriaLabelTextInputFields(0);
+            ariaLabelSectionComponent.steps.verifyAriaLabelTextInputFields(1);
+        });
+
+        it('When the user sets aria label, then in the answer input fields of the specify correct answer section, the aria labels should not change', () => {
+            ariaLabelSectionComponent.steps.enterTextInAriaLabelInputField(0, 'Select correct option');
+            gridQuestionCommonComponent.steps.verifyRowHeaderAriaLabelSpecifyCorrectAnswerSection(0, 'Select correct option');
+            gridQuestionCommonComponent.steps.verifyRowHeaderAriaLabelSpecifyCorrectAnswerSection(1, 'Response 2');
+        });
+    },
+
+    verifyARIALabelFunctionalityPreviewTab: () => {
+        it('When the user has not set \'ARIA label\' input field, then default aria labels should be present for the answer input fields in the preview tab', () => {
+            gridQuestionCommonComponent.steps.verifyRowHeaderAriaLabelPreviewTab(0, 'Response 1');
+            gridQuestionCommonComponent.steps.verifyRowHeaderAriaLabelPreviewTab(1, 'Response 2');
+        });
+
+        it('When the user has set \'ARIA label\', then it should be present for the answer input fields in the preview tab', () => {
+            createQuestionBasePage.steps.switchToEditTab();
+            ariaLabelSectionComponent.steps.enterTextInAriaLabelInputField(0, 'Select correct option');
+            createQuestionBasePage.steps.switchToPreviewTab();
+            gridQuestionCommonComponent.steps.verifyRowHeaderAriaLabelPreviewTab(0, 'Select correct option');
+            gridQuestionCommonComponent.steps.verifyRowHeaderAriaLabelPreviewTab(1, 'Response 2');
+        });
+
+        it('Accessibility of input field in preview tab when custom \'ARIA label\' is set', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(commonComponents.previewTabQuestionWrapper());
+        });
+
+        it('When the user clears the set value in the \'ARIA label\' input field, then the default aria labels should be present for the answer input fields in the preview tab', () => {
+            createQuestionBasePage.steps.switchToEditTab();
+            ariaLabelSectionComponent.steps.clearTextInAriaLabelInputField(0);
+            createQuestionBasePage.steps.switchToPreviewTab();
+            gridQuestionCommonComponent.steps.verifyRowHeaderAriaLabelPreviewTab(0, 'Response 1');
+            gridQuestionCommonComponent.steps.verifyRowHeaderAriaLabelPreviewTab(1, 'Response 2');
+        });
+    },
+
+    verifyRowAndColumnSpacingContentAndFunctionalityEditTab: () => {
+        it('\'Row spacing\' label and dropdown should be displayed and by default \'No spacing\' option is selected', () => {
+            utilities.verifyInnerText(gridQuestionCommonComponent.rowSpacingDropdownLabel(), 'Row spacing');
+            utilities.verifyInnerText(gridQuestionCommonComponent.rowSpacingDropdown(), 'No spacing');
+            utilities.verifyElementVisibilityState(gridQuestionCommonComponent.rowSpacingDropdown(), 'visible');
+        });
+
+        it(`When user expands \'Row spacing\' then ${rowColumnOptions} should be displayed then \'No spacing\' option is selected`, () => {
+            gridQuestionCommonComponent.steps.expandRowSpacingDropdown();
+            rowColumnOptions.forEach((option, index) => {
+                utilities.verifyInnerText(utilities.getNthElement(gridQuestionCommonComponent.rowSpacingDropdownOptions(), index), option);
+            });
+            gridQuestionCommonComponent.steps.verifyRowSpacingOptionSelected('No spacing');
+            gridQuestionCommonComponent.steps.selectRowSpacingDropdownOption('No spacing');
+            utilities.verifyElementVisibilityState(commonComponents.dropdownList(), 'notExist');
+        });
+
+        rowColumnOptions.forEach((option) => {
+            it(`When user selects \'Row spacing\' ${option} option then ${option} spacing should be displayed between the row options`, () => {
+                gridQuestionCommonComponent.steps.expandRowSpacingDropdown();
+                gridQuestionCommonComponent.steps.selectRowSpacingDropdownOption(option);
+                gridQuestionCommonComponent.steps.verifyTableRowSpacingSpecifyCorrectAnswerSection(option);
+            });
+        });
+
+        it('\'Column spacing\' label and dropdown should be displayed and by default \'No spacing\' option is selected', () => {
+            utilities.verifyInnerText(gridQuestionCommonComponent.columnSpacingDropdownLabel(), 'Column spacing');
+            utilities.verifyInnerText(gridQuestionCommonComponent.columnSpacingDropdown(), 'No spacing');
+            utilities.verifyElementVisibilityState(gridQuestionCommonComponent.columnSpacingDropdown(), 'visible');
+        });
+
+        it(`When user expands \'Column spacing\' then ${rowColumnOptions} should be displayed then \'No spacing\' option is selected`, () => {
+            gridQuestionCommonComponent.steps.expandColumnSpacingDropdown();
+            rowColumnOptions.forEach((option, index) => {
+                utilities.verifyInnerText(utilities.getNthElement(gridQuestionCommonComponent.columnSpacingDropdownOptions(), index), option);
+            });
+            gridQuestionCommonComponent.steps.verifyColumnSpacingOptionSelected('No spacing');
+            gridQuestionCommonComponent.steps.selectColumnSpacingDropdownOption('No spacing');
+            utilities.verifyElementVisibilityState(commonComponents.dropdownList(), 'notExist');
+        });
+
+        rowColumnOptions.forEach((option) => {
+            it(`When user selects \'Column spacing\' ${option} option then ${option} spacing should be displayed between the columns`, () => {
+                gridQuestionCommonComponent.steps.expandColumnSpacingDropdown();
+                gridQuestionCommonComponent.steps.selectColumnSpacingDropdownOption(option);
+                gridQuestionCommonComponent.steps.verifyTableColumnSpacingSpecifyCorrectAnswerSection(option);
+            });
+        });
+    },
+
+    verifyRowAndColumnSpacingFunctionalityPreviewTab: () => {
+        rowColumnOptions.forEach((option) => {
+            it(`When user selects \'Row spacing\' ${option} option then ${option} spacing should be displayed between the row options`, () => {
+                gridQuestionCommonComponent.steps.expandRowSpacingDropdown();
+                gridQuestionCommonComponent.steps.selectRowSpacingDropdownOption(option);
+                createQuestionBasePage.steps.switchToPreviewTab();
+                gridQuestionCommonComponent.steps.verifyTableRowSpacingPreviewTab(option);
+                createQuestionBasePage.steps.switchToEditTab();
+            });
+        });
+
+        rowColumnOptions.forEach((option) => {
+            it(`When user selects \'Column spacing\' ${option} option then ${option} spacing should be displayed between the columns`, () => {
+                gridQuestionCommonComponent.steps.expandColumnSpacingDropdown();
+                gridQuestionCommonComponent.steps.selectColumnSpacingDropdownOption(option);
+                createQuestionBasePage.steps.switchToPreviewTab();
+                gridQuestionCommonComponent.steps.verifyTableColumnSpacingPreviewTab(option);
+                createQuestionBasePage.steps.switchToEditTab();
+            });
+        });
+    },
+
+    verifyCellMinimumHeightContentAndFunctionalityEditTab: () => {
+        it('\'Cell minimum height\' label and input field should be displayed and input field should be prefilled with 96px by default', () => {
+            utilities.verifyInnerText(gridQuestionCommonComponent.cellMinimumHeightLabel(), 'Cell minimum height');
+            gridQuestionCommonComponent.steps.verifyCellMinimumHeightInputField('96');
+        });
+
+        it('By default the minimum cell height of the table cells should be 96px', () => {
+            gridQuestionCommonComponent.steps.verifyCellMinimumHeightSpecifyCorrectAnswer('96');
+        });
+
+        it('User should not be able to enter a value below 54px and above 320px', () => {
+            gridQuestionCommonComponent.steps.enterTextInCellMinimumHeightInputField(20);
+            gridQuestionCommonComponent.steps.verifyCellMinimumHeightInputField('54');
+            gridQuestionCommonComponent.steps.verifyCellMinimumHeightSpecifyCorrectAnswer('54');
+            gridQuestionCommonComponent.steps.enterTextInCellMinimumHeightInputField(800);
+            gridQuestionCommonComponent.steps.verifyCellMinimumHeightInputField('320');
+            gridQuestionCommonComponent.steps.verifyCellMinimumHeightSpecifyCorrectAnswer('320');
+        });
+
+        it('When user edits the input field value it should be reflected in the table cells', () => {
+            gridQuestionCommonComponent.steps.enterTextInCellMinimumHeightInputField(200);
+            gridQuestionCommonComponent.steps.verifyCellMinimumHeightSpecifyCorrectAnswer('200');
+        });
+    },
+
+    verifyCellMinimumHeightFunctionalityPreviewTab: () => {
+        it('By default the minimum cell height of the table cells should be 96px', () => {
+            createQuestionBasePage.steps.switchToPreviewTab();
+            gridQuestionCommonComponent.steps.verifyCellMinimumHeightPreviewTab('96');
+        });
+
+        it('When user edits the input field value it should be reflected in the table cells', () => {
+            createQuestionBasePage.steps.switchToEditTab();
+            gridQuestionCommonComponent.steps.enterTextInCellMinimumHeightInputField(200);
+            createQuestionBasePage.steps.switchToPreviewTab();
+            gridQuestionCommonComponent.steps.verifyCellMinimumHeightPreviewTab('200');
+        });
+    },
+
+    verifyColumnDimensionsContentsAndFunctionalityPreviewTab: () => {
+        it('\'Column dimensions\' label and dropdown should be displayed and by default \'Auto\' option is selected', () => {
+            utilities.verifyInnerText(gridQuestionCommonComponent.columnDimensionsLabel(), 'Column dimensions');
+            utilities.verifyInnerText(gridQuestionCommonComponent.columnDimensionsDropdown(), 'Auto');
+        });
+
+        it(`When user expands \'Column dimensions\' then ${columnDimensions} should be displayed then \'Auto\' option is selected`, () => {
+            gridQuestionCommonComponent.steps.expandColumnDimensionsDropdown();
+            columnDimensions.forEach((option, index) => {
+                utilities.verifyInnerText(utilities.getNthElement(gridQuestionCommonComponent.columnDimensionsDropdownOptions(), index), option);
+            });
+            gridQuestionCommonComponent.steps.verifyColumnDimensionsDropdownOptionSelected('Auto');
+            gridQuestionCommonComponent.steps.selectColumnDimensionsDropdownOption('Auto');
+            utilities.verifyElementVisibilityState(commonComponents.dropdownList(), 'notExist')
+        });
+
+        columnDimensions.forEach((option) => {
+            it(`When user selects \'Column dimensions\' ${option} option then ${option} spacing should be displayed between the columns`, () => {
+                gridQuestionCommonComponent.steps.expandColumnDimensionsDropdown();
+                gridQuestionCommonComponent.steps.selectColumnDimensionsDropdownOption(option);
+                gridQuestionCommonComponent.steps.verifyColumnDimensionsSpecifyCorrectAnswer(option);
+            });
+        });
+
+        it(`When user selects ${columnDimensions[1]} then Specify for all columns, Specify for first column only, Specify for individual columns radio buttons should be displayed`, () => {
+            utilities.verifyInnerText(gridQuestionCommonComponent.specifyForAllColumnsLabel(), 'Specify for all columns');
+            utilities.verifyElementVisibilityState(gridQuestionCommonComponent.specifyForAllColumnsRadioButton(), 'exist');
+            utilities.verifyInnerText(gridQuestionCommonComponent.specifyForFirstColumnOnlyLabel(), 'Specify for first column only');
+            utilities.verifyElementVisibilityState(gridQuestionCommonComponent.specifyForFirstColumnOnlyRadioButton(), 'exist');
+            utilities.verifyInnerText(gridQuestionCommonComponent.specifyForIndividualColumnsLabel(), 'Specify for individual columns');
+            utilities.verifyElementVisibilityState(gridQuestionCommonComponent.specifyForIndividualColumnsRadioButton(), 'exist');
+        });
+
+        it('By default, \'Specify for all columns\' should be selected and \'Column width (px)\' label and input field should be displayed with 225 by default', () => {
+            gridQuestionCommonComponent.steps.verifyCustomDimensionsRadioButtonSelected('Specify for all columns');
+            utilities.verifyInnerText(gridQuestionCommonComponent.columnWidthLabel(), 'Column width (px)');
+            gridQuestionCommonComponent.steps.verifyColumnWidthInputField(0, '225');
+        });
+
+        it('User should not be able to enter value below 108 and above 320 in the \'Column width (px)\' input field', () => {
+            gridQuestionCommonComponent.steps.enterTextInColumnWidthInputField(0, 90);
+            gridQuestionCommonComponent.steps.verifyColumnWidthInputField(0, '108');
+            gridQuestionCommonComponent.steps.enterTextInColumnWidthInputField(0, 400);
+            gridQuestionCommonComponent.steps.verifyColumnWidthInputField(0, '320');
+        });
+
+        it('When the user edits the \'Column width (px)\' input field value then it should be reflected in the specify correct answer section', () => {
+            gridQuestionCommonComponent.steps.enterTextInColumnWidthInputField(0, 160);
+            gridQuestionCommonComponent.steps.verifyColumnWidthInputField(0, '160');
+            gridQuestionCommonComponent.steps.verifyTableColumnWidthSpecifyCorrectAnswer(0, '160');
+            gridQuestionCommonComponent.steps.verifyTableColumnWidthSpecifyCorrectAnswer(1, '160');
+            gridQuestionCommonComponent.steps.verifyTableColumnWidthSpecifyCorrectAnswer(2, '160');
+        });
+
+        it('When the user selects Specify for first column only \'Column width (px)\' label and input field should be displayed', () => {
+            gridQuestionCommonComponent.steps.selectCustomDimensionsRadioButton('Specify for first column only');
+            gridQuestionCommonComponent.steps.verifyCustomDimensionsRadioButtonSelected('Specify for first column only');
+            utilities.verifyInnerText(gridQuestionCommonComponent.columnWidthLabel(), 'Column width (px)');
+        });
+
+        it('When the user edits the \'Column width (px)\' input field value then it should be reflected in the specify correct answer section only for the first column', () => {
+            gridQuestionCommonComponent.steps.enterTextInColumnWidthInputField(0, 200);
+            gridQuestionCommonComponent.steps.verifyColumnWidthInputField(0, '200');
+            gridQuestionCommonComponent.steps.verifyTableColumnWidthSpecifyCorrectAnswer(0, '200');
+            gridQuestionCommonComponent.steps.verifyTableColumnDoeNotHaveSpecifiedWidthSpecifyCorrectAnswer(1, '200');
+            gridQuestionCommonComponent.steps.verifyTableColumnDoeNotHaveSpecifiedWidthSpecifyCorrectAnswer(2, '200');
+        });
+
+        it('When the user selects Specify for individual columns \'Column 1 width (px)\' label and input field should be displayed for the columns', () => {
+            gridQuestionCommonComponent.steps.selectCustomDimensionsRadioButton('Specify for individual columns');
+            gridQuestionCommonComponent.steps.verifyCustomDimensionsRadioButtonSelected('Specify for individual columns');
+            utilities.verifyInnerText(utilities.getNthElement(gridQuestionCommonComponent.columnWidthLabel(), 0), 'Column 1 width (px)');
+            utilities.verifyInnerText(utilities.getNthElement(gridQuestionCommonComponent.columnWidthLabel(), 1), 'Column 2 width (px)');
+            utilities.verifyInnerText(utilities.getNthElement(gridQuestionCommonComponent.columnWidthLabel(), 2), 'Column 3 width (px)');
+            utilities.verifyElementCount(gridQuestionCommonComponent.columnWidthLabel(), 3);
+            utilities.verifyElementCount(gridQuestionCommonComponent.columnWidthInputField(), 3);
+        });
+
+        it('When the user adds a new column the label field and input field for the column should be displayed', () => {
+            specifyRowsAndColumnsComponent.steps.increaseColumnInputStepperCount(1)
+            utilities.verifyElementCount(gridQuestionCommonComponent.columnWidthLabel(), 4);
+            utilities.verifyElementCount(gridQuestionCommonComponent.columnWidthInputField(), 4);
+        });
+
+        it('When the user deletes a column the label field and input field for the column should not be displayed', () => {
+            specifyRowsAndColumnsComponent.steps.decreaseColumnInputStepperCount(1);
+            utilities.verifyElementCount(gridQuestionCommonComponent.columnWidthLabel(), 3);
+            utilities.verifyElementCount(gridQuestionCommonComponent.columnWidthInputField(), 3);
+        });
+
+        it('When the user edits the input field then the column width should update for the specified column', () => {
+            gridQuestionCommonComponent.steps.enterTextInColumnWidthInputField(0, 200);
+            gridQuestionCommonComponent.steps.verifyColumnWidthInputField(0, '200');
+            gridQuestionCommonComponent.steps.enterTextInColumnWidthInputField(1, 210);
+            gridQuestionCommonComponent.steps.verifyColumnWidthInputField(1, '210');
+            gridQuestionCommonComponent.steps.enterTextInColumnWidthInputField(2, 240);
+            gridQuestionCommonComponent.steps.verifyColumnWidthInputField(2, '240');
+            gridQuestionCommonComponent.steps.verifyTableColumnWidthSpecifyCorrectAnswer(0, '200');
+            gridQuestionCommonComponent.steps.verifyTableColumnWidthSpecifyCorrectAnswer(1, '210');
+            gridQuestionCommonComponent.steps.verifyTableColumnWidthSpecifyCorrectAnswer(2, '240');
+        });
+    },
+
+    verifyColumnDimensionsFunctionalityPreviewTab: () => {
+        columnDimensions.forEach((option) => {
+            it(`When user selects \'Column dimensions\' ${option} option then ${option} spacing should be displayed between the columns`, () => {
+                gridQuestionCommonComponent.steps.expandColumnDimensionsDropdown();
+                gridQuestionCommonComponent.steps.selectColumnDimensionsDropdownOption(option);
+                createQuestionBasePage.steps.switchToPreviewTab();
+                gridQuestionCommonComponent.steps.verifyColumnDimensionsPreviewTab(option);
+                createQuestionBasePage.steps.switchToEditTab();
+            });
+        });
+
+        it('When the user selects \'Specify for all columns\' radio button edits the \'Column width (px)\' input field value then it should be reflected in the preview tab', () => {
+            gridQuestionCommonComponent.steps.enterTextInColumnWidthInputField(0, 160);
+            gridQuestionCommonComponent.steps.verifyColumnWidthInputField(0, '160');
+            createQuestionBasePage.steps.switchToPreviewTab();
+            gridQuestionCommonComponent.steps.verifyTableColumnWidthPreviewTab(0, '160');
+            gridQuestionCommonComponent.steps.verifyTableColumnWidthPreviewTab(1, '160');
+            gridQuestionCommonComponent.steps.verifyTableColumnWidthPreviewTab(2, '160');
+        });
+
+        it('When the user selects \'Specify for first column\' radio button edits the \'Column width (px)\' input field value then it should be reflected in the preview tab only for the first column', () => {
+            createQuestionBasePage.steps.switchToEditTab();
+            gridQuestionCommonComponent.steps.selectCustomDimensionsRadioButton('Specify for first column only');
+            gridQuestionCommonComponent.steps.verifyCustomDimensionsRadioButtonSelected('Specify for first column only');
+            gridQuestionCommonComponent.steps.enterTextInColumnWidthInputField(0, 200);
+            gridQuestionCommonComponent.steps.verifyColumnWidthInputField(0, '200');
+            createQuestionBasePage.steps.switchToPreviewTab();
+            gridQuestionCommonComponent.steps.verifyTableColumnWidthPreviewTab(0, '200');
+            gridQuestionCommonComponent.steps.verifyTableColumnDoeNotHaveSpecifiedWidthPreviewTab(1, '200');
+            gridQuestionCommonComponent.steps.verifyTableColumnDoeNotHaveSpecifiedWidthPreviewTab(2, '200');
+        });
+
+        it('When the user selects \'Specify for individual columns\' radio button edits the input field then the column width should update for the specified column', () => {
+            createQuestionBasePage.steps.switchToEditTab();
+            gridQuestionCommonComponent.steps.selectCustomDimensionsRadioButton('Specify for individual columns');
+            gridQuestionCommonComponent.steps.verifyCustomDimensionsRadioButtonSelected('Specify for individual columns');
+            gridQuestionCommonComponent.steps.enterTextInColumnWidthInputField(0, 200);
+            gridQuestionCommonComponent.steps.verifyColumnWidthInputField(0, '200');
+            gridQuestionCommonComponent.steps.enterTextInColumnWidthInputField(1, 210);
+            gridQuestionCommonComponent.steps.verifyColumnWidthInputField(1, '210');
+            gridQuestionCommonComponent.steps.enterTextInColumnWidthInputField(2, 240);
+            gridQuestionCommonComponent.steps.verifyColumnWidthInputField(2, '240');
+            createQuestionBasePage.steps.switchToPreviewTab();
+            gridQuestionCommonComponent.steps.verifyTableColumnWidthPreviewTab(0, '200');
+            gridQuestionCommonComponent.steps.verifyTableColumnWidthPreviewTab(1, '210');
+            gridQuestionCommonComponent.steps.verifyTableColumnWidthPreviewTab(2, '240');
+        });
+    },
+
+    verifyFillColorContentsAndFunctionalityEditTab: () => {
+        it('Grid label should be displayed', () => {
+            utilities.verifyInnerText(gridQuestionCommonComponent.gridLabel(), 'Grid');
+        });
+
+        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(gridQuestionCommonComponent.fillColorLabel(), 'Fill color');
+            gridQuestionCommonComponent.steps.verifyColorBlockColor(0, css.color.defaultBackground);
+            gridQuestionCommonComponent.steps.verifyColorBlockSelectedState(0);
+            gridQuestionCommonComponent.steps.verifyColorBlockColor(1, css.color.none);
+            utilities.verifyInnerText(utilities.getNthElement(gridQuestionCommonComponent.editColorButton(), 0), 'Edit color');
+            utilities.verifyElementVisibilityState(gridQuestionCommonComponent.editColorButton(), 'visible');
+        });
+
+        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(gridQuestionCommonComponent.colorBlock(), 0)
+                .verifyTooltip('#FFFFFF');
+            utilities.getNthElement(gridQuestionCommonComponent.colorBlock(), 1)
+                .verifyTooltip('None');
+        });
+
+        it('By default, the first color option should be in selected state', () => {
+            gridQuestionCommonComponent.steps.verifyColorBlockSelectedState(0);
+        });
+
+        it('When the default color block is in selected state in the \'Fill color\' section, then the background color of the grid in the specify correct answer section should be the default selected color', () => {
+            gridQuestionCommonComponent.steps.verifyGridFillColorSpecifyCorrectAnswerSection(css.color.defaultBackground);
+        });
+
+        it('When the user selects the \'None\' color block, it should get in selected state and the no background color should be present for the grid in the specify correct answer section', () => {
+            gridQuestionCommonComponent.steps.selectColorBlock(1);
+            gridQuestionCommonComponent.steps.verifyGridFillColorSpecifyCorrectAnswerSection(css.color.transparent);
+        });
+
+        it('When the user clicks on the \'Edit color\' button, modifies color for the selected color block, then the background color of the grid in the specify correct answer section should be the modified selected color', () => {
+            gridQuestionCommonComponent.steps.editColor(0);
+            colorPopupComponent.steps.clickInColorSaturationPalette();
+            colorPopupComponent.steps.clickOnOkButton();
+            gridQuestionCommonComponent.steps.verifyGridFillColorSpecifyCorrectAnswerSection(modifiedColor);
+        });
+    },
+
+    verifyFillColorFunctionalityPreviewTab: () => {
+        it('When the default color block is in selected state in the \'Fill color\' section, then the background color of the grid in the preview tab should be the default selected color', () => {
+            createQuestionBasePage.steps.switchToPreviewTab();
+            gridQuestionCommonComponent.steps.verifyGridFillColorPreviewTab(css.color.defaultBackground);
+        });
+
+        it('When the user selects the \'None\' color block, it should get in selected state and the no background color should be present for the grid in the preview tab', () => {
+            createQuestionBasePage.steps.switchToEditTab();
+            gridQuestionCommonComponent.steps.selectColorBlock(1);
+            createQuestionBasePage.steps.switchToPreviewTab();
+            gridQuestionCommonComponent.steps.verifyGridFillColorPreviewTab(css.color.transparent);
+        });
+
+        it('When the user clicks on the \'Edit color\' button, modifies color for the selected color block, then the color block should get updated accordingly', () => {
+            createQuestionBasePage.steps.switchToEditTab();
+            gridQuestionCommonComponent.steps.editColor(0);
+            colorPopupComponent.steps.clickInColorSaturationPalette();
+            colorPopupComponent.steps.clickOnOkButton();
+            createQuestionBasePage.steps.switchToPreviewTab();
+            gridQuestionCommonComponent.steps.verifyGridFillColorPreviewTab(modifiedColor);
+        });
+    },
+
+    verifyBorderColorContentsAndFunctionalityEditTab: () => {
+        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(gridQuestionCommonComponent.borderColorLabel(), 'Border color');
+            utilities.verifyInnerText(utilities.getNthElement(gridQuestionCommonComponent.editColorButton(), 1), 'Edit color');
+            utilities.verifyElementVisibilityState(gridQuestionCommonComponent.editColorButton(), 'visible');
+            gridQuestionCommonComponent.steps.verifyColorBlockColor(2, css.color.activeComponentBorder);
+            gridQuestionCommonComponent.steps.verifyColorBlockSelectedState(2);
+            gridQuestionCommonComponent.steps.verifyColorBlockColor(3, css.color.none);
+        });
+
+        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(gridQuestionCommonComponent.colorBlock(), 2)
+                .verifyTooltip('#5200FF');
+            utilities.getNthElement(gridQuestionCommonComponent.colorBlock(), 3)
+                .verifyTooltip('None');
+        });
+
+        it('By default, the first color option should be in selected state', () => {
+            gridQuestionCommonComponent.steps.verifyColorBlockSelectedState(2);
+        });
+
+        it('When the default color block is in selected state in the \'Border color\' section, then the border color of the grid in the specify correct answer section should be the default selected color', () => {
+            gridQuestionCommonComponent.steps.verifyGridBorderColorSpecifyCorrectAnswer(css.color.activeComponentBorder);
+        });
+
+        it('When the user selects the \'None\' color block, it should get in selected state and the no border color should be present for the grid in the specify correct answer section', () => {
+            gridQuestionCommonComponent.steps.selectColorBlock(3);
+            gridQuestionCommonComponent.steps.verifyGridBorderColorSpecifyCorrectAnswer(css.color.transparent);
+        });
+
+        it('When the user clicks on the \'Edit color\' button, modifies color for the selected color block, then the border color of the grid in the specify correct answer section should be the modified selected color', () => {
+            gridQuestionCommonComponent.steps.editColor(1);
+            colorPopupComponent.steps.clickInColorSaturationPalette();
+            colorPopupComponent.steps.clickOnOkButton();
+            gridQuestionCommonComponent.steps.verifyGridBorderColorSpecifyCorrectAnswer(modifiedColor);
+        });
+    },
+
+    verifyBorderColorFunctionalityPreviewTab: () => {
+        it('When the default color block is in selected state in the \'Fill color\' section, then the border color of the grid in the preview tab should be the default selected color', () => {
+            gridQuestionCommonComponent.steps.verifyGridBorderColorPreviewTab(css.color.activeComponentBorder);
+        });
+
+        it('When the user selects the \'None\' color block, it should get in selected state and the no border color should be present for the grid in the preview tab', () => {
+            createQuestionBasePage.steps.switchToEditTab();
+            gridQuestionCommonComponent.steps.selectColorBlock(3);
+            createQuestionBasePage.steps.switchToPreviewTab();
+            gridQuestionCommonComponent.steps.verifyGridBorderColorPreviewTab(css.color.transparent);
+        });
+
+        it('When the user clicks on the \'Edit color\' button, modifies color for the selected color block, then the color block should get updated accordingly', () => {
+            createQuestionBasePage.steps.switchToEditTab();
+            gridQuestionCommonComponent.steps.editColor(1);
+            colorPopupComponent.steps.clickInColorSaturationPalette();
+            colorPopupComponent.steps.clickOnOkButton();
+            createQuestionBasePage.steps.switchToPreviewTab();
+            gridQuestionCommonComponent.steps.verifyGridBorderColorPreviewTab(modifiedColor);
+        });
+    },
+
+    verifyColorPopupUpdateColorFunctionality: () => {
+        it('When the user moves the color picker in the color saturation palette, color in the selected color block and the hex code should change, color in the hue color palette and the opacity value should not change', () => {
+            gridQuestionCommonComponent.steps.editColor(0);
+            colorPopupComponent.steps.clickInColorSaturationPalette();
+            colorPopupComponent.steps.verifySelectedColorBlock('rgb(118, 59, 59)');
+            colorPopupComponent.steps.verifySaturationPaletteColor('rgb(119, 60, 60)');
+            colorPopupComponent.steps.verifyHuePaletteColor('rgb(255, 0, 0)');
+            colorPopupComponent.steps.verifyHexValue('#763b3b');
+            colorPopupComponent.steps.verifyOpacityGradientPaletteColor('rgb(119, 60, 60)');
+        });
+
+        it('When the user moves the color picker in the color hue palette, color in the selected color block, the hex code and the saturation color palette should change and the opacity value should not change', () => {
+            colorPopupComponent.steps.clickInColorHuePalette();
+            colorPopupComponent.steps.verifySelectedColorBlock('rgb(59, 118, 118)');
+            colorPopupComponent.steps.verifyHuePaletteColor('rgb(0, 255, 255)');
+            colorPopupComponent.steps.verifyHexValue('#3b7676');
+            colorPopupComponent.steps.verifyOpacityGradientPaletteColor('rgb(60, 119, 119)');
+        });
+
+        it('When the user changes the color using hex code, the color in color saturation palette and color hue palette should change and the opacity value should not change', () => {
+            colorPopupComponent.steps.addInputToHexInputField('#ff0000');
+            colorPopupComponent.steps.verifyHexValue('#ff0000');
+            colorPopupComponent.steps.verifySaturationPaletteColor('rgb(255, 0, 0)');
+            colorPopupComponent.steps.verifyHuePaletteColor('rgb(255, 0, 0)');
+            colorPopupComponent.steps.verifyOpacityGradientPaletteColor('rgb(255, 0, 0)');
+        });
+    },
+
+    verifyColorPopupCancelOkButtonFunctionality: () => {
+        it('When the user modifies the selected color in the color popup and clicks on \'Cancel\' button, then the popup should close, the color block should not change and the modifications in the color popup should not persist', () => {
+            gridQuestionCommonComponent.steps.editColor(0);
+            colorPopupComponent.steps.addInputToHexInputField('#ff0000');
+            colorPopupComponent.steps.clickOnOpacityGradientHuePalette();
+            colorPopupComponent.steps.clickOnCancelButton();
+            utilities.verifyElementVisibilityState(dialogBoxBase.dialogBox(), 'notExist');
+            gridQuestionCommonComponent.steps.verifyColorBlockColor(0, css.color.defaultBackground);
+        });
+
+        it('When the user modifies the selected color in the color popup and clicks on \'Ok\' button, then the popup should close, the color block should change to the new selected color and the modifications in the color popup should persist', () => {
+            cy.log('Pre-step: clicking on the edit color button')
+            gridQuestionCommonComponent.steps.editColor(0);
+            colorPopupComponent.steps.addInputToHexInputField('#ff0000');
+            colorPopupComponent.steps.clickOnOpacityGradientHuePalette();
+            colorPopupComponent.steps.clickOnOkButton();
+            utilities.verifyElementVisibilityState(dialogBoxBase.dialogBox(), 'notExist');
+            gridQuestionCommonComponent.steps.verifyColorBlockColor(0, 'rgba(255, 0, 0, 0.5)');
+        });
+    },
+
+    verifyEnableOuterBorderContentAndFunctionalityEditTab: () => {
+        it('\'Enable outer border for question\' label should be displayed along with 2 options - Outer and None', () => {
+            utilities.verifyInnerText(gridQuestionCommonComponent.enableOuterBorderForQuestionLabel(), 'Enable outer border for question');
+            outerBorder.forEach((option) => {
+                utilities.verifyElementVisibilityState(gridQuestionCommonComponent.enableOuterBorderForQuestionOptions(option.toLowerCase()), 'exist');
+            });
+        });
+
+        it('By default outer option should be selected and an outer border should be displayed for the table', () => {
+            gridQuestionCommonComponent.steps.verifyOuterBorderOptionSelected('outer');
+            gridQuestionCommonComponent.steps.verifyTableOuterBorderSpecifyCorrectAnswer('Outer');
+        });
+
+        it('When user selects \'None\' option an outer border should not be displayed for the table', () => {
+            gridQuestionCommonComponent.steps.selectOuterBorderOption('none');
+            gridQuestionCommonComponent.steps.verifyOuterBorderOptionSelected('none');
+            gridQuestionCommonComponent.steps.verifyTableOuterBorderSpecifyCorrectAnswer('None');
+        });
+    },
+
+    verifyEnableOuterBorderFunctionalityPreviewTab: () => {
+        it('By default an outer border should be displayed for the table', () => {
+            gridQuestionCommonComponent.steps.verifyOuterBorderOptionSelected('outer');
+            createQuestionBasePage.steps.switchToPreviewTab();
+            gridQuestionCommonComponent.steps.verifyTableOuterBorderPreviewTab('Outer');
+        });
+
+        it('When user selects \'None\' option an outer border should not be displayed for the table', () => {
+            createQuestionBasePage.steps.switchToEditTab();
+            gridQuestionCommonComponent.steps.selectOuterBorderOption('none');
+            gridQuestionCommonComponent.steps.verifyOuterBorderOptionSelected('none');
+            createQuestionBasePage.steps.switchToPreviewTab();
+            gridQuestionCommonComponent.steps.verifyTableOuterBorderPreviewTab('None');
+        });
+    },
+
+    verifyInnerBorderContentAndFunctionalityEditTab: () => {
+        it(`\'Inner border\' label should be displayed along with 4 options - ${innerBorder}`, () => {
+            utilities.verifyInnerText(gridQuestionCommonComponent.innerBorderLabel(), 'Inner border');
+            innerBorder.forEach((option) => {
+                utilities.verifyElementVisibilityState(gridQuestionCommonComponent.innerBorderOptions(option.toLowerCase()), 'exist');
+            });
+        });
+
+        it('By default inner option should be selected and an inner borders should be displayed for the table', () => {
+            gridQuestionCommonComponent.steps.verifyInnerBorderOptionSelected('inner');
+            gridQuestionCommonComponent.steps.verifyTableInnerBorderSpecifyCorrectAnswer('inner');
+        });
+
+        innerBorder.forEach((option) => {
+            it(`When user selects ${option} option an ${option} border should be displayed for the table`, () => {
+                gridQuestionCommonComponent.steps.selectInnerBorderOption(option);
+                gridQuestionCommonComponent.steps.verifyTableInnerBorderSpecifyCorrectAnswer(option);
+            });
+        });
+
+        it('When user selects vertical option then radio buttons should be displayed - Apply to all columns and Apply to first column only and by default Apply to all columns should be checked', () => {
+            gridQuestionCommonComponent.steps.selectInnerBorderOption('vertical');
+            utilities.verifyInnerText(gridQuestionCommonComponent.applyToAllColumnsLabel(), 'Apply to all columns');
+            utilities.verifyElementVisibilityState(gridQuestionCommonComponent.applyToAllColumnsRadioButton(), 'exist');
+            utilities.verifyInnerText(gridQuestionCommonComponent.applyToFirstColumnLabel(), 'Apply to first column only');
+            utilities.verifyElementVisibilityState(gridQuestionCommonComponent.applyToFirstColumnRadioButton(), 'exist');
+            gridQuestionCommonComponent.steps.verifyApplyToAllColumnsRadioButtonSelectedState();
+        });
+
+        it('When user selects Apply to first column radio button then the table should be updated accordingly', () => {
+            gridQuestionCommonComponent.steps.checkApplyToFirstColumnRadioButton();
+            gridQuestionCommonComponent.steps.verifyTableInnerBorderSpecifyCorrectAnswer('Vertical - apply to first column');
+        });
+    },
+
+    verifyInnerBorderFunctionalityPreviewTab: () => {
+        innerBorder.forEach((option) => {
+            it(`When user selects ${option} option an ${option} border should be displayed for the table`, () => {
+                gridQuestionCommonComponent.steps.selectInnerBorderOption(option);
+                createQuestionBasePage.steps.switchToPreviewTab();
+                gridQuestionCommonComponent.steps.verifyTableInnerBorderPreviewTab(option);
+                createQuestionBasePage.steps.switchToEditTab();
+            });
+        });
+
+        it('When user selects Apply to first column radio button then the table should be updated accordingly', () => {
+            createQuestionBasePage.steps.switchToEditTab();
+            gridQuestionCommonComponent.steps.selectInnerBorderOption('vertical');
+            gridQuestionCommonComponent.steps.checkApplyToFirstColumnRadioButton();
+            createQuestionBasePage.steps.switchToPreviewTab();
+            gridQuestionCommonComponent.steps.verifyTableInnerBorderPreviewTab('Vertical - apply to first column');
+        });
+    }
 }
 
 export const gridQuestionCommonComponent = {