itemengine-cypress-automation 1.0.166-migrationScripts-b8c79a0.0 → 1.0.167-repoUpdate10April-1465c8c.0

package/cypress/e2e/ILC/MultipleSelectionGridNew/editTabBasicSection.js

@@ -0,0 +1,1033 @@
+import { multipleSelectionGridPage } from "../../../pages";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import utilities from "../../../support/helpers/utilities";
+const css = Cypress.env('css');
+
+describe('Create item page - Multiple selection grid: Question instructions, Specify rows and columns section', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Question instructions input field - Edit tab', () => {
+        abortEarlySetup();
+        before(() => {
+            multipleSelectionGridPage.steps.navigateToCreateQuestion('multiple selection grid');
+            cy.barsPreLoaderWait();
+        });
+
+        multipleSelectionGridPage.tests.verifyQuestionInstructionsInputFieldEditTab();
+    });
+
+    describe('Question instructions input field - Preview tab', () => {
+        abortEarlySetup();
+        before(() => {
+            multipleSelectionGridPage.steps.navigateToCreateQuestion('multiple selection grid');
+            cy.barsPreLoaderWait();
+        });
+
+        multipleSelectionGridPage.tests.verifyQuestionInstructionsInputFieldPreviewTab();
+    });
+
+    describe('Specify columns and rows - Columns and Options rows input steppers, Enable row heading checkbox - Contents and specify columns and rows table', () => {
+        abortEarlySetup();
+        before(() => {
+            multipleSelectionGridPage.steps.navigateToCreateQuestion('multiple selection grid');
+            cy.barsPreLoaderWait();
+        });
+
+        multipleSelectionGridPage.tests.verifySpecifyColumnsAndRowsDefaultInputSteppers();
+
+        it('\'Columns\' and \'Option rows\' headings and their input stepper should be displayed and default the value for \'Columns\' and \'Option rows\' should be set to 3 and 4 respectively', () => {
+            utilities.verifyInnerText(multipleSelectionGridPage.columnsInputStepperLabel(), 'Columns');
+            utilities.verifyElementVisibilityState(multipleSelectionGridPage.columnsInputStepperLabel(), 'visible');
+            utilities.verifyInnerText(multipleSelectionGridPage.rowsInputStepperLabel(), 'Option rows');
+            utilities.verifyElementVisibilityState(multipleSelectionGridPage.rowsInputStepperLabel(), 'visible');
+            utilities.verifyElementVisibilityState(multipleSelectionGridPage.columnsInputStepperWrapper(), 'visible');
+            utilities.verifyElementVisibilityState(multipleSelectionGridPage.rowsInputStepperWrapper(), 'visible');
+            multipleSelectionGridPage.steps.verifyColumnInputStepperIncreaseDecreaseButton();
+            multipleSelectionGridPage.steps.verifyRowInputStepperIncreaseDecreaseButton();
+            multipleSelectionGridPage.steps.verifyColumnInputStepperCountInputFieldValue(3);
+            multipleSelectionGridPage.steps.verifyRowsInputStepperCountInputFieldValue(4);
+        });
+
+        it('\'Enable row heading\' label and checkbox should be displayed and by default it should be checked', () => {
+            utilities.verifyInnerText(multipleSelectionGridPage.enableRowHeadingLabel(), 'Enable row heading');
+            utilities.verifyElementVisibilityState(multipleSelectionGridPage.enableRowHeadingLabel(), 'visible');
+            utilities.verifyElementVisibilityState(multipleSelectionGridPage.enableRowHeadingCheckbox(), 'exist');
+            multipleSelectionGridPage.steps.verifyEnableRowHeadingCheckboxCheckedState();
+        });
+
+        it('User should be able to uncheck the \'Enable row heading\' checkbox', () => {
+            multipleSelectionGridPage.steps.uncheckEnableRowHeadingCheckbox();
+        });
+
+        it('When user has unchecked the \'Enable row heading\' checkbox, then column input stepper value should not change and header row should not be displayed in the edit cell category table', () => {
+            multipleSelectionGridPage.steps.verifyRowsInputStepperCountInputFieldValue(4);
+            multipleSelectionGridPage.steps.verifyRowsCountInEditCellPropertyTable(4);
+            multipleSelectionGridPage.steps.verifyEditCellCategoryTableCellProperty({ row: 0, column: 0 }, 'Text');
+            multipleSelectionGridPage.steps.verifyEditCellCategoryTableCellProperty({ row: 0, column: 1 }, 'Checkbox');
+            multipleSelectionGridPage.steps.verifyEditCellCategoryTableCellProperty({ row: 0, column: 2 }, 'Checkbox');
+        });
+
+        //Columns and rows input steppers functionality
+        it('When user increases the number of columns in the column input stepper using the increase button, then the count of input stepper and the number of columns in the table displayed in \'Specify columns and rows\' section should increase', () => {
+            multipleSelectionGridPage.steps.increaseColumnInputStepperCount(1);
+            multipleSelectionGridPage.steps.verifyColumnInputStepperCountInputFieldValue(4);
+            multipleSelectionGridPage.steps.verifyColumnsCountInEditCellPropertyTable(4);
+        });
+
+        it('When user has increased the number of columns to more than 3, then the \'Default text\' label and dropdown should not be displayed', () => {
+            utilities.verifyElementVisibilityState(multipleSelectionGridPage.defaultTextLabel(), 'notExist');
+            utilities.verifyElementVisibilityState(multipleSelectionGridPage.defaultTextDropdown(), 'notExist');
+        });
+
+        it('When user decreases the number of rows in the option row input stepper using the decrease button, then the count of input stepper and the number of rows in the table displayed in \'Specify columns and rows\' section should decrease', () => {
+            multipleSelectionGridPage.steps.decreaseRowInputStepperCount(1);
+            multipleSelectionGridPage.steps.verifyRowsInputStepperCountInputFieldValue(3);
+            multipleSelectionGridPage.steps.verifyRowsCountInEditCellPropertyTable(3);
+        });
+
+        it('User should be able to edit the number of rows and columns by directly giving an input in the input steppers and the table should be updated', () => {
+            multipleSelectionGridPage.steps.addInputToColumnInputStepper(5);
+            multipleSelectionGridPage.steps.addInputToRowInputStepper(5);
+            multipleSelectionGridPage.steps.verifyColumnsCountInEditCellPropertyTable(5);
+            multipleSelectionGridPage.steps.verifyRowsCountInEditCellPropertyTable(5);
+        });
+
+        it('When the user increases the number of rows to 25 using the input stepper increase button, then the increase button should get disabled', () => {
+            multipleSelectionGridPage.steps.increaseRowInputStepperCount(20);
+            multipleSelectionGridPage.steps.verifyRowsInputStepperCountInputFieldValue(25);
+            multipleSelectionGridPage.steps.verifyRowsCountInEditCellPropertyTable(25);
+            multipleSelectionGridPage.steps.verifyRowInputStepperIncreaseButtonIsDisabled();
+        });
+
+        it('When the user decreases the number of columns to 1 using the input stepper decrease button, then the decrease button should get disabled', () => {
+            multipleSelectionGridPage.steps.decreaseColumnInputStepperCount(4);
+            multipleSelectionGridPage.steps.verifyColumnInputStepperCountInputFieldValue(1);
+            multipleSelectionGridPage.steps.verifyColumnsCountInEditCellPropertyTable(1);
+            multipleSelectionGridPage.steps.verifyColumnInputStepperDecreaseButtonIsDisabled();
+        });
+
+        it('When the user gives an input value lower than 1 i.e. 0 in the rows input stepper, then the columns value should be reset to 1', () => {
+            multipleSelectionGridPage.steps.addInputToRowInputStepper(0);
+            multipleSelectionGridPage.steps.verifyRowsInputStepperCountInputFieldValue(1);
+        });
+
+        it('When the user gives an input value greater than 25 in the columns input stepper, then the columns value should be reset to 25', () => {
+            multipleSelectionGridPage.steps.addInputToColumnInputStepper(30);
+            multipleSelectionGridPage.steps.verifyColumnInputStepperCountInputFieldValue(25);
+        });
+
+        it('When \'Enable row heading\' checkbox is checked, then header row should be displayed in the table and row input stepper count should not change', () => {
+            cy.log('Pre-step: Setting columns and rows value to default state');
+            multipleSelectionGridPage.steps.addInputToColumnInputStepper(3);
+            multipleSelectionGridPage.steps.addInputToRowInputStepper(4);
+            multipleSelectionGridPage.steps.checkEnableRowHeadingCheckbox();
+            multipleSelectionGridPage.steps.verifyRowsInputStepperCountInputFieldValue(4);
+            multipleSelectionGridPage.steps.verifyRowsCountInEditCellPropertyTable(5);
+            multipleSelectionGridPage.steps.verifyEditCellCategoryTableCellProperty({ row: 0, column: 0 }, 'None');
+            multipleSelectionGridPage.steps.verifyEditCellCategoryTableCellProperty({ row: 0, column: 1 }, 'Heading');
+            multipleSelectionGridPage.steps.verifyEditCellCategoryTableCellProperty({ row: 0, column: 2 }, 'Heading');
+        });
+
+        it('When the number of columns do not exceed the table viewport, then the left and right pagination button should not be displayed in the \'Specify columns and rows\' table', () => {
+            utilities.verifyElementVisibilityState(multipleSelectionGridPage.editCellPropertyTableLeftPaginationButton(), 'notExist');
+            utilities.verifyElementVisibilityState(multipleSelectionGridPage.editCellPropertyTableRightPaginationButton(), 'notExist');
+        });
+
+        it('When user has added columns such that they exceed the table viewport, then the left and right pagination button should be displayed in the \'Specify columns and rows\' table', () => {
+            multipleSelectionGridPage.steps.addInputToColumnInputStepper(8);
+            utilities.verifyElementVisibilityState(multipleSelectionGridPage.editCellPropertyTableLeftPaginationButton(), 'visible');
+            utilities.verifyElementVisibilityState(multipleSelectionGridPage.editCellPropertyTableRightPaginationButton(), 'visible');
+        });
+
+        it('By default the left pagination button should be disabled in \'Specify columns and rows\' table', () => {
+            utilities.verifyElementDisabled(multipleSelectionGridPage.editCellPropertyTableLeftPaginationButton());
+        });
+
+        it('When user clicks on the right pagination button, then the table should be scrolled by one column towards its right and the left pagination button should now be enabled and the first column should still be visible', () => {
+            cy.log('Pre-step: Setting number of columns to 15');
+            multipleSelectionGridPage.steps.addInputToColumnInputStepper(15);
+            multipleSelectionGridPage.steps.clickOnRightPaginationButtonEditCellPropertyTable();
+            multipleSelectionGridPage.steps.clickOnRightPaginationButtonEditCellPropertyTable();
+            multipleSelectionGridPage.steps.clickOnRightPaginationButtonEditCellPropertyTable();
+            multipleSelectionGridPage.steps.clickOnRightPaginationButtonEditCellPropertyTable();
+            multipleSelectionGridPage.steps.verifyColumnIsVisibleInEditCellPropertyTable(0);
+            multipleSelectionGridPage.steps.verifyColumnIsVisibleInEditCellPropertyTable(8);
+            multipleSelectionGridPage.steps.verifyColumnIsNotVisibleInEditCellPropertyTable(1);
+            utilities.verifyElementNotDisabled(multipleSelectionGridPage.editCellPropertyTableLeftPaginationButton());
+        });
+
+        it('When user has navigated to the rightmost column of the table, then the right pagination button should be disabled', () => {
+            for (let index = 0; index < 4; index++) {
+                multipleSelectionGridPage.steps.clickOnRightPaginationButtonEditCellPropertyTable();
+            }
+            utilities.verifyElementDisabled(multipleSelectionGridPage.editCellPropertyTableRightPaginationButton());
+        });
+
+        it('When user clicks on the left pagination button, then the table should be scrolled by one column towards its left and the right pagination button should be enabled', () => {
+            multipleSelectionGridPage.steps.clickOnLeftPaginationButtonEditCellPropertyTable();
+            multipleSelectionGridPage.steps.verifyColumnIsVisibleInEditCellPropertyTable(8);
+            multipleSelectionGridPage.steps.verifyColumnIsNotVisibleInEditCellPropertyTable(14);
+            utilities.verifyElementNotDisabled(multipleSelectionGridPage.editCellPropertyTableRightPaginationButton());
+        });
+
+        it('When user has navigated towards the left using the left pagination button, then the right pagination button should be enabled again', () => {
+            for (let index = 10; index < 15; index++) {
+                multipleSelectionGridPage.steps.clickOnLeftPaginationButtonEditCellPropertyTable();
+            }
+            utilities.verifyElementDisabled(multipleSelectionGridPage.editCellPropertyTableLeftPaginationButton());
+        });
+
+        it('When the number of columns is reduced such that they do not exceed the table viewport,  then the then the left and right pagination button should not be displayed in the \'Specify columns and rows\' table', () => {
+            multipleSelectionGridPage.steps.addInputToColumnInputStepper(7);
+            utilities.verifyElementVisibilityState(multipleSelectionGridPage.editCellPropertyTableLeftPaginationButton(), 'notExist');
+            utilities.verifyElementVisibilityState(multipleSelectionGridPage.editCellPropertyTableRightPaginationButton(), 'notExist');
+        });
+
+        it('When user sets the number of columns to 3, then the \'Default text\' label and dropdown should be displayed again', () => {
+            multipleSelectionGridPage.steps.addInputToColumnInputStepper(3);
+            utilities.verifyElementVisibilityState(multipleSelectionGridPage.defaultTextLabel(), 'visible');
+            utilities.verifyElementVisibilityState(multipleSelectionGridPage.defaultTextDropdown(), 'visible');
+        });
+
+        it('CSS of \'Enable row heading checkbox\'', { tags: 'css' }, () => {
+            utilities.verifyCSS(multipleSelectionGridPage.enableRowHeadingLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(multipleSelectionGridPage.enableRowHeadingCheckbox().parent().find('g').eq(1), {
+                'fill': css.color.activeButtons
+            });
+        });
+
+        //A11y covered in test function
+    });
+
+    describe('Specify columns and rows -  Columns and Options rows input steppers, Enable row heading checkbox - Specify correct answer table', () => {
+        abortEarlySetup();
+        before(() => {
+            multipleSelectionGridPage.steps.navigateToCreateQuestion('multiple selection grid');
+            cy.barsPreLoaderWait();
+        });
+
+        it('When \'Enable row heading\' checkbox is checked, then header row should be displayed in the specify correct answer table', () => {
+            multipleSelectionGridPage.steps.verifyTableCellPropertySpecifyCorrectAnswerSection({ row: 0, column: 0 }, 'None');
+            multipleSelectionGridPage.steps.verifyTableCellPropertySpecifyCorrectAnswerSection({ row: 0, column: 1 }, 'Heading');
+            multipleSelectionGridPage.steps.verifyTableCellPropertySpecifyCorrectAnswerSection({ row: 0, column: 2 }, 'Heading');
+            multipleSelectionGridPage.steps.verifyRowsCountInSpecifyCorrectAnswerSectionTable(5);
+            multipleSelectionGridPage.steps.verifyRowsInputStepperCountInputFieldValue(4);
+        });
+
+        it('When \'Enable row heading\' checkbox is unchecked, then header row should not be displayed in the specify correct answer table and row input stepper value should not change', () => {
+            multipleSelectionGridPage.steps.uncheckEnableRowHeadingCheckbox();
+            multipleSelectionGridPage.steps.verifyTableCellPropertySpecifyCorrectAnswerSection({ row: 0, column: 0 }, 'Text');
+            multipleSelectionGridPage.steps.verifyTableCellPropertySpecifyCorrectAnswerSection({ row: 0, column: 1 }, 'Checkbox');
+            multipleSelectionGridPage.steps.verifyTableCellPropertySpecifyCorrectAnswerSection({ row: 0, column: 2 }, 'Checkbox');
+            multipleSelectionGridPage.steps.verifyRowsCountInSpecifyCorrectAnswerSectionTable(4);
+            multipleSelectionGridPage.steps.verifyRowsInputStepperCountInputFieldValue(4);
+        });
+
+        it('When user increases the number of columns in the column input stepper using the increase button, then number of columns should also increase in the table displayed in \'Specify correct answer\' section', () => {
+            multipleSelectionGridPage.steps.increaseColumnInputStepperCount(1);
+            multipleSelectionGridPage.steps.verifyColumnsCountInSpecifyCorrectAnswerSectionTable(4);
+        });
+
+        it('When user decreases the number of columns in the column input stepper using the decrease button, then number of columns should also decrease in the table displayed in \'Specify correct answer\' section', () => {
+            multipleSelectionGridPage.steps.decreaseColumnInputStepperCount(1);
+            multipleSelectionGridPage.steps.verifyColumnsCountInSpecifyCorrectAnswerSectionTable(3);
+        });
+
+        it('When user increases the number of rows in the row input stepper using the increase button, then number of rows should also increase in the table displayed in \'Specify correct answer\' section', () => {
+            multipleSelectionGridPage.steps.increaseRowInputStepperCount(1);
+            multipleSelectionGridPage.steps.verifyRowsCountInSpecifyCorrectAnswerSectionTable(5);
+        });
+
+        it('When user decreases the number of rows in the row input stepper using the decrease button, then number of rows should also decrease in the table displayed in \'Specify correct answer\' section', () => {
+            multipleSelectionGridPage.steps.decreaseRowInputStepperCount(1);
+            multipleSelectionGridPage.steps.verifyRowsCountInSpecifyCorrectAnswerSectionTable(4);
+        });
+
+        it('When user updates the number of rows and columns by directly giving an input in the input steppers, then the number of rows and columns should also be updated in the table displayed in \'Specify correct answer\' section', () => {
+            multipleSelectionGridPage.steps.addInputToColumnInputStepper(5);
+            multipleSelectionGridPage.steps.addInputToRowInputStepper(5);
+            multipleSelectionGridPage.steps.verifyColumnsCountInSpecifyCorrectAnswerSectionTable(5);
+            multipleSelectionGridPage.steps.verifyRowsCountInSpecifyCorrectAnswerSectionTable(5);
+        });
+
+        it('When the number of columns do not exceed the table viewport, then the left and right pagination button should not be displayed in the \'Specify correct answer\' table', () => {
+            cy.log('Pre-step: Setting the number of columns to 6');
+            multipleSelectionGridPage.steps.addInputToColumnInputStepper(6);
+            utilities.verifyElementVisibilityState(multipleSelectionGridPage.leftPaginationButtonSpecifyCorrectAnswerSection(), 'notExist');
+            utilities.verifyElementVisibilityState(multipleSelectionGridPage.rightPaginationButtonSpecifyCorrectAnswerSection(), 'notExist');
+        });
+
+        it('When user has added columns such that they exceed the table viewport, then the left and right pagination button should be displayed in the \'Specify correct answer\' table', () => {
+            multipleSelectionGridPage.steps.addInputToColumnInputStepper(8);
+            utilities.verifyElementVisibilityState(multipleSelectionGridPage.leftPaginationButtonSpecifyCorrectAnswerSection(), 'visible');
+            utilities.verifyElementVisibilityState(multipleSelectionGridPage.rightPaginationButtonSpecifyCorrectAnswerSection(), 'visible');
+        });
+
+        it('By default the left pagination button should be disabled in both \'Specify columns and rows\' and \'Specify correct answer\' tables', () => {
+            utilities.verifyElementDisabled(multipleSelectionGridPage.leftPaginationButtonSpecifyCorrectAnswerSection());
+        });
+
+        it('When user clicks on right pagination button in specify correct answer, then the table should scroll to the right and left pagination button should be enabled', () => {
+            multipleSelectionGridPage.steps.clickOnRightPaginationButtonSpecifyCorrectAnswerSection();
+            multipleSelectionGridPage.steps.verifyColumnIsVisibleInSpecifyCorrectAnswerTable(7);
+            utilities.verifyElementNotDisabled(multipleSelectionGridPage.leftPaginationButtonSpecifyCorrectAnswerSection());
+        });
+
+        it('When the number of columns is reduced such that they do not exceed the table viewport, then the then the left and right pagination button should not be displayed in the \'Specify correct answer\' table', () => {
+            multipleSelectionGridPage.steps.addInputToColumnInputStepper(6);
+            utilities.verifyElementVisibilityState(multipleSelectionGridPage.leftPaginationButtonSpecifyCorrectAnswerSection(), 'notExist');
+            utilities.verifyElementVisibilityState(multipleSelectionGridPage.rightPaginationButtonSpecifyCorrectAnswerSection(), 'notExist');
+        });
+    });
+
+    describe('Specify columns and rows - Columns and Rows input steppers - Preview tab', () => {
+        abortEarlySetup();
+        before(() => {
+            multipleSelectionGridPage.steps.navigateToCreateQuestion('multiple selection grid');
+            cy.barsPreLoaderWait();
+            multipleSelectionGridPage.steps.switchToPreviewTab();
+        });
+
+        it('When \'Enable row heading\' checkbox is checked, then header row should be displayed in the preview tab table', () => {
+            multipleSelectionGridPage.steps.verifyTableCellPropertyPreviewTab({ row: 0, column: 0 }, 'None');
+            multipleSelectionGridPage.steps.verifyTableCellPropertyPreviewTab({ row: 0, column: 1 }, 'Heading');
+            multipleSelectionGridPage.steps.verifyTableCellPropertyPreviewTab({ row: 0, column: 2 }, 'Heading');
+            multipleSelectionGridPage.steps.verifyRowsCountInPreviewTabTable(5);
+        });
+
+        it('When \'Enable row heading\' checkbox is unchecked, then header row should not be displayed in the preview table and row input stepper value should not change', () => {
+            multipleSelectionGridPage.steps.switchToEditTab();
+            multipleSelectionGridPage.steps.uncheckEnableRowHeadingCheckbox();
+            multipleSelectionGridPage.steps.switchToPreviewTab();
+            multipleSelectionGridPage.steps.verifyTableCellPropertyPreviewTab({ row: 0, column: 0 }, 'Text');
+            multipleSelectionGridPage.steps.verifyTableCellPropertyPreviewTab({ row: 0, column: 1 }, 'Checkbox');
+            multipleSelectionGridPage.steps.verifyTableCellPropertyPreviewTab({ row: 0, column: 2 }, 'Checkbox');
+            multipleSelectionGridPage.steps.verifyRowsCountInPreviewTabTable(4);
+        });
+
+        it('When user increases the number of columns in the column input stepper using the increase button, then the number of columns in the table displayed in preview tab should increase', () => {
+            multipleSelectionGridPage.steps.switchToEditTab();
+            multipleSelectionGridPage.steps.increaseColumnInputStepperCount(1);
+            multipleSelectionGridPage.steps.switchToPreviewTab();
+            multipleSelectionGridPage.steps.verifyColumnsCountInPreviewTabTable(4);
+        });
+
+        it('When user decreases the number of columns in the column input stepper using the decrease button, then the number of columns in the table displayed in preview tab should decrease', () => {
+            multipleSelectionGridPage.steps.switchToEditTab();
+            multipleSelectionGridPage.steps.decreaseColumnInputStepperCount(1);
+            multipleSelectionGridPage.steps.switchToPreviewTab();
+            multipleSelectionGridPage.steps.verifyColumnsCountInPreviewTabTable(3);
+        });
+
+        it('When user increases the number of rows in the row input stepper using the increase button, then the number of rows in the table displayed in preview tab should increase', () => {
+            multipleSelectionGridPage.steps.switchToEditTab();
+            multipleSelectionGridPage.steps.increaseRowInputStepperCount(1);
+            multipleSelectionGridPage.steps.switchToPreviewTab();
+            multipleSelectionGridPage.steps.verifyRowsCountInPreviewTabTable(5);
+        });
+
+        it('When user decreases the number of rows in the row input stepper using the decrease button, then the number of rows in the table displayed in preview tab should decrease', () => {
+            multipleSelectionGridPage.steps.switchToEditTab();
+            multipleSelectionGridPage.steps.decreaseRowInputStepperCount(1);
+            multipleSelectionGridPage.steps.switchToPreviewTab();
+            multipleSelectionGridPage.steps.verifyRowsCountInPreviewTabTable(4);
+        });
+
+        it('When user changes the number of rows by directly giving an input in rows input steppers, then the added number of rows should be reflected in preview tab', () => {
+            multipleSelectionGridPage.steps.switchToEditTab();
+            multipleSelectionGridPage.steps.addInputToRowInputStepper(7);
+            multipleSelectionGridPage.steps.switchToPreviewTab();
+            multipleSelectionGridPage.steps.verifyRowsCountInPreviewTabTable(7);
+        });
+
+        it('When user changes the number of columns by directly giving an input in columns input steppers, then the added number of columns should be reflected in preview tab', () => {
+            multipleSelectionGridPage.steps.switchToEditTab();
+            multipleSelectionGridPage.steps.addInputToColumnInputStepper(6);
+            multipleSelectionGridPage.steps.switchToPreviewTab();
+            multipleSelectionGridPage.steps.verifyColumnsCountInPreviewTabTable(6);
+        });
+
+        it('When the number of columns do not exceed the table viewport, then the left and right pagination button should not be displayed in the preview tab table', () => {
+            utilities.verifyElementVisibilityState(multipleSelectionGridPage.leftPaginationButtonPreviewTab(), 'notExist');
+            utilities.verifyElementVisibilityState(multipleSelectionGridPage.rightPaginationButtonPreviewTab(), 'notExist');
+        });
+
+        it('When the user has added columns such that they exceed the table viewport, then the left and right pagination button should be displayed in the preview tab table', () => {
+            multipleSelectionGridPage.steps.switchToEditTab();
+            multipleSelectionGridPage.steps.addInputToColumnInputStepper(8);
+            multipleSelectionGridPage.steps.switchToPreviewTab();
+            utilities.verifyElementVisibilityState(multipleSelectionGridPage.leftPaginationButtonPreviewTab(), 'visible');
+            utilities.verifyElementVisibilityState(multipleSelectionGridPage.rightPaginationButtonPreviewTab(), 'visible');
+        });
+
+        it('By default the left pagination button should be disabled', () => {
+            utilities.verifyElementDisabled(multipleSelectionGridPage.leftPaginationButtonPreviewTab());
+        });
+
+        it('When user clicks on right pagination button in preview tab, then the table should scroll to the right and left pagination button should be enabled', () => {
+            multipleSelectionGridPage.steps.clickOnRightPaginationButtonPreviewTab();
+            multipleSelectionGridPage.steps.verifyColumnIsVisibleInPreviewTabTable(7);
+            utilities.verifyElementNotDisabled(multipleSelectionGridPage.leftPaginationButtonPreviewTab());
+        });
+
+        it('When number of columns are reduced such that they do not exceed the table viewport, then the then the left and right pagination button should not be displayed in the preview tab table', () => {
+            multipleSelectionGridPage.steps.switchToEditTab();
+            multipleSelectionGridPage.steps.addInputToColumnInputStepper(6);
+            multipleSelectionGridPage.steps.switchToPreviewTab();
+            utilities.verifyElementVisibilityState(multipleSelectionGridPage.leftPaginationButtonPreviewTab(), 'notExist');
+            utilities.verifyElementVisibilityState(multipleSelectionGridPage.rightPaginationButtonPreviewTab(), 'notExist');
+        });
+    });
+
+    describe('Specify columns and rows - Default option dropdown, Default text dropdown, Same checkbox text in each column - Contents and edit tab functionality', () => {
+        abortEarlySetup();
+        before(() => {
+            multipleSelectionGridPage.steps.navigateToCreateQuestion('multiple selection grid');
+            cy.barsPreLoaderWait();
+        });
+
+        multipleSelectionGridPage.tests.verifyDefaultOptionLabelAndDropdown('Multiple selection grid');
+
+        multipleSelectionGridPage.tests.verifyDefaultTextLabelAndDropdown();
+
+        it('When default options dropdown is set to \'Checkboxes\', then the answer cells in the edit tab grids should be set to checkbox category', () => {
+            multipleSelectionGridPage.steps.expandDefaultOptionDropdown();
+            multipleSelectionGridPage.steps.selectOptionFromDefaultOptionDropdown('Checkboxes');
+            for (let rowIndex = 1; rowIndex < 5; rowIndex++) {
+                multipleSelectionGridPage.steps.verifyEditCellCategoryTableCellProperty({ row: rowIndex, column: 1 }, 'Checkbox');
+                multipleSelectionGridPage.steps.verifyEditCellCategoryTableCellProperty({ row: rowIndex, column: 2 }, 'Checkbox');
+                multipleSelectionGridPage.steps.verifyTableCellPropertySpecifyCorrectAnswerSection({ row: rowIndex, column: 1 }, 'Checkbox');
+                multipleSelectionGridPage.steps.verifyTableCellPropertySpecifyCorrectAnswerSection({ row: rowIndex, column: 2 }, 'Checkbox');
+            };
+        });
+
+        it('When user selects \'Checkboxes with text\' option in the default option dropdown, then the answer cells in the edit tab grids should be set to checkbox with text category', () => {
+            multipleSelectionGridPage.steps.expandDefaultOptionDropdown();
+            multipleSelectionGridPage.steps.selectOptionFromDefaultOptionDropdown('Checkboxes with text');
+            for (let rowIndex = 0; rowIndex < 4; rowIndex++) {
+                multipleSelectionGridPage.steps.verifyEditCellCategoryTableCellProperty({ row: rowIndex, column: 1 }, 'Checkbox with text');
+                multipleSelectionGridPage.steps.verifyEditCellCategoryTableCellProperty({ row: rowIndex, column: 2 }, 'Checkbox with text');
+                multipleSelectionGridPage.steps.verifyTableCellPropertySpecifyCorrectAnswerSection({ row: rowIndex, column: 1 }, 'Checkbox with text');
+                multipleSelectionGridPage.steps.verifyTableCellPropertySpecifyCorrectAnswerSection({ row: rowIndex, column: 2 }, 'Checkbox with text');
+            };
+        });
+
+        it('When user has selected \'Checkboxes with text\' option in the default option dropdown, then \'Enable row heading\' checkbox should be unchecked and header row should not be displayed', () => {
+            multipleSelectionGridPage.steps.verifyEnableRowHeadingCheckboxUncheckedState();
+            multipleSelectionGridPage.steps.verifyRowsCountInEditCellPropertyTable(4);
+            multipleSelectionGridPage.steps.verifyEditCellCategoryTableCellProperty({ row: 0, column: 0 }, 'Text');
+            multipleSelectionGridPage.steps.verifyEditCellCategoryTableCellProperty({ row: 0, column: 1 }, 'Checkbox with text');
+            multipleSelectionGridPage.steps.verifyEditCellCategoryTableCellProperty({ row: 0, column: 2 }, 'Checkbox with text');
+        });
+
+        it('When user has selected \'Checkboxes with text\' option in the default option dropdown, then \'Same checkbox text in each column\' checkbox and label should be displayed in checked state', () => {
+            utilities.verifyElementVisibilityState(multipleSelectionGridPage.sameCheckboxTextInEachColumnCheckbox(), 'exist');
+            utilities.verifyInnerText(multipleSelectionGridPage.sameCheckboxTextInEachColumnCheckboxLabel(), 'Same checkbox text in each column');
+            utilities.verifyElementVisibilityState(multipleSelectionGridPage.sameCheckboxTextInEachColumnCheckboxLabel(), 'visible');
+            multipleSelectionGridPage.steps.verifySameCheckboxTextInColumnCheckboxCheckedState();
+        });
+
+        it('When \'Same checkbox text in each column\' checkbox is checked, then the cells in each column should have the same text in all edit tab grids', () => {
+            for (let rowIndex = 0; rowIndex < 4; rowIndex++) {
+                multipleSelectionGridPage.steps.verifyTextInCellPropertyInputField({ row: rowIndex, column: 1 }, 'True');
+                multipleSelectionGridPage.steps.verifyTextInCellPropertyInputField({ row: rowIndex, column: 2 }, 'False');
+                multipleSelectionGridPage.steps.verifyTextInGridCellSpecifyCorrectAnswerSection({ row: rowIndex, column: 1 }, 'True');
+                multipleSelectionGridPage.steps.verifyTextInGridCellSpecifyCorrectAnswerSection({ row: rowIndex, column: 2 }, 'False');
+            };
+        });
+
+        it('When the user unchecks \'Same checkbox text in each column\' checkbox, then the default text in each column cell should be removed and \'Default text\' dropdown should change to \'Custom\'', () => {
+            multipleSelectionGridPage.steps.uncheckSameCheckboxTextInColumnCheckbox();
+            for (let rowIndex = 0; rowIndex < 4; rowIndex++) {
+                multipleSelectionGridPage.steps.verifyTextInCellPropertyInputField({ row: rowIndex, column: 1 }, '');
+                multipleSelectionGridPage.steps.verifyTextInCellPropertyInputField({ row: rowIndex, column: 2 }, '');
+                multipleSelectionGridPage.steps.verifyTextInGridCellSpecifyCorrectAnswerSection({ row: rowIndex, column: 1 }, '');
+                multipleSelectionGridPage.steps.verifyTextInGridCellSpecifyCorrectAnswerSection({ row: rowIndex, column: 2 }, '');
+            };
+            utilities.verifyInnerText(multipleSelectionGridPage.defaultTextDropdown(), 'Custom');
+        });
+
+        it('When the user checks the \'Same checkbox text in each column\' checkbox again, then the cells in each column should have the same text in all edit tab grids', () => {
+            multipleSelectionGridPage.steps.checkSameCheckboxTextInColumnCheckbox();
+            for (let rowIndex = 0; rowIndex < 4; rowIndex++) {
+                multipleSelectionGridPage.steps.verifyTextInCellPropertyInputField({ row: rowIndex, column: 1 }, 'True');
+                multipleSelectionGridPage.steps.verifyTextInCellPropertyInputField({ row: rowIndex, column: 2 }, 'False');
+                multipleSelectionGridPage.steps.verifyTextInGridCellSpecifyCorrectAnswerSection({ row: rowIndex, column: 1 }, 'True');
+                multipleSelectionGridPage.steps.verifyTextInGridCellSpecifyCorrectAnswerSection({ row: rowIndex, column: 2 }, 'False');
+            };
+        });
+
+        it('When user selects \'Checkboxes\' option in default option dropdown, then then the answer cells in the edit tab grids should be set to checkbox category, \'Same checkbox text in each column\' checkbox should not be displayed and \'Enable row heading\' checkbox should be checked again', () => {
+            multipleSelectionGridPage.steps.expandDefaultOptionDropdown();
+            multipleSelectionGridPage.steps.selectOptionFromDefaultOptionDropdown('Checkboxes');
+            multipleSelectionGridPage.steps.verifyEditCellCategoryTableCellProperty({ row: 0, column: 0 }, 'None');
+            multipleSelectionGridPage.steps.verifyEditCellCategoryTableCellProperty({ row: 0, column: 1 }, 'Heading');
+            multipleSelectionGridPage.steps.verifyEditCellCategoryTableCellProperty({ row: 0, column: 2 }, 'Heading');
+            multipleSelectionGridPage.steps.verifyEditCellCategoryTableCellProperty({ row: 1, column: 0 }, 'Text');
+            multipleSelectionGridPage.steps.verifyEditCellCategoryTableCellProperty({ row: 2, column: 0 }, 'Text');
+            multipleSelectionGridPage.steps.verifyEditCellCategoryTableCellProperty({ row: 3, column: 0 }, 'Text');
+            multipleSelectionGridPage.steps.verifyEditCellCategoryTableCellProperty({ row: 4, column: 0 }, 'Text');
+            for (let rowIndex = 1; rowIndex < 5; rowIndex++) {
+                multipleSelectionGridPage.steps.verifyEditCellCategoryTableCellProperty({ row: rowIndex, column: 1 }, 'Checkbox');
+                multipleSelectionGridPage.steps.verifyEditCellCategoryTableCellProperty({ row: rowIndex, column: 2 }, 'Checkbox');
+                multipleSelectionGridPage.steps.verifyTableCellPropertySpecifyCorrectAnswerSection({ row: rowIndex, column: 1 }, 'Checkbox');
+                multipleSelectionGridPage.steps.verifyTableCellPropertySpecifyCorrectAnswerSection({ row: rowIndex, column: 2 }, 'Checkbox');
+            };
+            utilities.verifyElementVisibilityState(multipleSelectionGridPage.sameCheckboxTextInEachColumnCheckboxLabel(), 'notExist');
+            utilities.verifyElementVisibilityState(multipleSelectionGridPage.sameCheckboxTextInEachColumnCheckbox(), 'notExist');
+            multipleSelectionGridPage.steps.verifyEnableRowHeadingCheckboxCheckedState();
+        });
+
+        it('User should be able to select \'No checkboxes\' option in default option dropdown, then the answer cells in the edit tab grids should be set to \'No checkboxes\'', () => {
+            multipleSelectionGridPage.steps.expandDefaultOptionDropdown();
+            multipleSelectionGridPage.steps.selectOptionFromDefaultOptionDropdown('No checkboxes');
+            for (let rowIndex = 0; rowIndex < 4; rowIndex++) {
+                multipleSelectionGridPage.steps.verifyEditCellCategoryTableCellProperty({ row: rowIndex, column: 1 }, 'No checkbox');
+                multipleSelectionGridPage.steps.verifyEditCellCategoryTableCellProperty({ row: rowIndex, column: 2 }, 'No checkbox');
+                multipleSelectionGridPage.steps.verifyTableCellPropertySpecifyCorrectAnswerSection({ row: rowIndex, column: 1 }, 'No checkbox');
+                multipleSelectionGridPage.steps.verifyTableCellPropertySpecifyCorrectAnswerSection({ row: rowIndex, column: 2 }, 'No checkbox');
+            };
+        });
+
+        it('When user has selected \'No checkboxes\' option in the default option dropdown, then \'Enable row heading\' checkbox should be unchecked and header row should not be displayed', () => {
+            multipleSelectionGridPage.steps.verifyEnableRowHeadingCheckboxUncheckedState();
+            multipleSelectionGridPage.steps.verifyRowsCountInEditCellPropertyTable(4);
+            multipleSelectionGridPage.steps.verifyEditCellCategoryTableCellProperty({ row: 0, column: 0 }, 'Text');
+            multipleSelectionGridPage.steps.verifyEditCellCategoryTableCellProperty({ row: 0, column: 1 }, 'No checkbox');
+            multipleSelectionGridPage.steps.verifyEditCellCategoryTableCellProperty({ row: 0, column: 2 }, 'No checkbox');
+        });
+
+        it('When user has selected \'No checkboxes\' option, then \'Same checkbox text in each column\' checkbox should be displayed in unchecked state', () => {
+            multipleSelectionGridPage.steps.verifySameCheckboxTextInColumnCheckboxUncheckedState();
+        });
+
+        it('When user has selected \'No checkboxes\' option in the default option dropdown, then there should be a blank text field in each answer cell and default text dropdown should be set to custom option', () => {
+            for (let rowIndex = 0; rowIndex < 4; rowIndex++) {
+                multipleSelectionGridPage.steps.verifyTextInCellPropertyInputField({ row: rowIndex, column: 1 }, '');
+                multipleSelectionGridPage.steps.verifyTextInCellPropertyInputField({ row: rowIndex, column: 2 }, '');
+                multipleSelectionGridPage.steps.verifyTextInGridCellSpecifyCorrectAnswerSection({ row: rowIndex, column: 1 }, '');
+                multipleSelectionGridPage.steps.verifyTextInGridCellSpecifyCorrectAnswerSection({ row: rowIndex, column: 2 }, '');
+            };
+            utilities.verifyInnerText(multipleSelectionGridPage.defaultTextDropdown(), 'Custom');
+        });
+
+        it('When the user checks the \'Same checkbox text in each column\' checkbox, then the cells in each column should have the same default text in all edit tab grids', () => {
+            multipleSelectionGridPage.steps.checkSameCheckboxTextInColumnCheckbox();
+            for (let rowIndex = 0; rowIndex < 4; rowIndex++) {
+                multipleSelectionGridPage.steps.verifyTextInCellPropertyInputField({ row: rowIndex, column: 1 }, 'True');
+                multipleSelectionGridPage.steps.verifyTextInCellPropertyInputField({ row: rowIndex, column: 2 }, 'False');
+                multipleSelectionGridPage.steps.verifyTextInGridCellSpecifyCorrectAnswerSection({ row: rowIndex, column: 1 }, 'True');
+                multipleSelectionGridPage.steps.verifyTextInGridCellSpecifyCorrectAnswerSection({ row: rowIndex, column: 2 }, 'False');
+            };
+        });
+
+        it('When the user unchecks \'Same checkbox text in each column\' checkbox, then the default text in each column cell should be removed', () => {
+            multipleSelectionGridPage.steps.uncheckSameCheckboxTextInColumnCheckbox();
+            for (let rowIndex = 0; rowIndex < 4; rowIndex++) {
+                multipleSelectionGridPage.steps.verifyTextInCellPropertyInputField({ row: rowIndex, column: 1 }, '');
+                multipleSelectionGridPage.steps.verifyTextInCellPropertyInputField({ row: rowIndex, column: 2 }, '');
+                multipleSelectionGridPage.steps.verifyTextInGridCellSpecifyCorrectAnswerSection({ row: rowIndex, column: 1 }, '');
+                multipleSelectionGridPage.steps.verifyTextInGridCellSpecifyCorrectAnswerSection({ row: rowIndex, column: 2 }, '');
+            };
+        });
+
+        it('When \'Same checkbox text in each column\' checkbox is checked and user selects \'Yes / no\' option in default text dropdown, then the selected option text should be displayed in each column each column', () => {
+            multipleSelectionGridPage.steps.checkSameCheckboxTextInColumnCheckbox();
+            multipleSelectionGridPage.steps.expandDefaultTextDropdown();
+            multipleSelectionGridPage.steps.selectOptionFromDefaultTextDropdown('Yes / no');
+            for (let rowIndex = 0; rowIndex < 4; rowIndex++) {
+                multipleSelectionGridPage.steps.verifyTextInCellPropertyInputField({ row: rowIndex, column: 1 }, 'Yes');
+                multipleSelectionGridPage.steps.verifyTextInCellPropertyInputField({ row: rowIndex, column: 2 }, 'No');
+                multipleSelectionGridPage.steps.verifyTextInGridCellSpecifyCorrectAnswerSection({ row: rowIndex, column: 1 }, 'Yes');
+                multipleSelectionGridPage.steps.verifyTextInGridCellSpecifyCorrectAnswerSection({ row: rowIndex, column: 2 }, 'No');
+            };
+        });
+
+        it('When \'Same checkbox text in each column\' checkbox is checked and user selects \'Agree / Disagree\' option in default text dropdown, then the selected option text should be displayed in each column each column', () => {
+            multipleSelectionGridPage.steps.expandDefaultTextDropdown();
+            multipleSelectionGridPage.steps.selectOptionFromDefaultTextDropdown('Agree / Disagree');
+            for (let rowIndex = 0; rowIndex < 4; rowIndex++) {
+                multipleSelectionGridPage.steps.verifyTextInCellPropertyInputField({ row: rowIndex, column: 1 }, 'Agree');
+                multipleSelectionGridPage.steps.verifyTextInCellPropertyInputField({ row: rowIndex, column: 2 }, 'Disagree');
+                multipleSelectionGridPage.steps.verifyTextInGridCellSpecifyCorrectAnswerSection({ row: rowIndex, column: 1 }, 'Agree');
+                multipleSelectionGridPage.steps.verifyTextInGridCellSpecifyCorrectAnswerSection({ row: rowIndex, column: 2 }, 'Disagree');
+            };
+        });
+
+        it('When user edits the text in any column, then the updated text should be displayed in all the cells of that corresponding column and default text dropdown should displayed the custom option as selected', () => {
+            multipleSelectionGridPage.steps.enterTextInCellPropertyInputField({ row: 0, column: 2 }, 'Updated text');
+            for (let rowIndex = 0; rowIndex < 4; rowIndex++) {
+                multipleSelectionGridPage.steps.verifyTextInCellPropertyInputField({ row: rowIndex, column: 1 }, 'Agree');
+                multipleSelectionGridPage.steps.verifyTextInCellPropertyInputField({ row: rowIndex, column: 2 }, 'Updated text');
+                multipleSelectionGridPage.steps.verifyTextInGridCellSpecifyCorrectAnswerSection({ row: rowIndex, column: 1 }, 'Agree');
+                multipleSelectionGridPage.steps.verifyTextInGridCellSpecifyCorrectAnswerSection({ row: rowIndex, column: 2 }, 'Updated text');
+                utilities.verifyInnerText(multipleSelectionGridPage.defaultTextDropdown(), 'Custom');
+            };
+        });
+
+        it('CSS of \'Same checkbox text in each column\' checkbox and label', () => {
+            utilities.verifyCSS(multipleSelectionGridPage.sameCheckboxTextInEachColumnCheckboxLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(multipleSelectionGridPage.sameCheckboxTextInEachColumnCheckbox().parent().find('g').eq(1), {
+                'fill': css.color.activeButtons
+            });
+        });
+    });
+
+    describe('Specify columns and rows - Default option dropdown, Default text dropdown, Same checkbox text in each column - preview tab functionality', () => {
+        abortEarlySetup();
+        before(() => {
+            multipleSelectionGridPage.steps.navigateToCreateQuestion('multiple selection grid');
+            cy.barsPreLoaderWait();
+        });
+
+        it('When default options dropdown is set to \'Checkboxes\', then the answer cells in the preview tab grid should be set to checkbox category', () => {
+            multipleSelectionGridPage.steps.switchToPreviewTab();
+            for (let rowIndex = 1; rowIndex < 5; rowIndex++) {
+                multipleSelectionGridPage.steps.verifyTableCellPropertyPreviewTab({ row: rowIndex, column: 1 }, 'Checkbox');
+                multipleSelectionGridPage.steps.verifyTableCellPropertyPreviewTab({ row: rowIndex, column: 2 }, 'Checkbox');
+            };
+        });
+
+        it('When user selects \'Checkboxes with text\' option in the default option dropdown, then the answer cells in the preview tab grid should be set to checkbox with text category', () => {
+            multipleSelectionGridPage.steps.switchToEditTab();
+            multipleSelectionGridPage.steps.expandDefaultOptionDropdown();
+            multipleSelectionGridPage.steps.selectOptionFromDefaultOptionDropdown('Checkboxes with text');
+            multipleSelectionGridPage.steps.switchToPreviewTab();
+            for (let rowIndex = 0; rowIndex < 4; rowIndex++) {
+                multipleSelectionGridPage.steps.verifyTableCellPropertyPreviewTab({ row: rowIndex, column: 1 }, 'Checkbox with text');
+                multipleSelectionGridPage.steps.verifyTableCellPropertyPreviewTab({ row: rowIndex, column: 2 }, 'Checkbox with text');
+            };
+        });
+
+        it('When user has selected \'Checkboxes with text\' option in the default option dropdown, then \'Enable row heading\' checkbox should be unchecked and header row should not be displayed', () => {
+            multipleSelectionGridPage.steps.verifyRowsCountInPreviewTabTable(4);
+            multipleSelectionGridPage.steps.verifyTableCellPropertyPreviewTab({ row: 0, column: 0 }, 'Text');
+            multipleSelectionGridPage.steps.verifyTableCellPropertyPreviewTab({ row: 0, column: 1 }, 'Checkbox with text');
+            multipleSelectionGridPage.steps.verifyTableCellPropertyPreviewTab({ row: 0, column: 2 }, 'Checkbox with text');
+        });
+
+        it('When \'Same checkbox text in each column\' checkbox is checked, then the cells in each column should have the same text in all preview tab grid', () => {
+            for (let rowIndex = 0; rowIndex < 4; rowIndex++) {
+                multipleSelectionGridPage.steps.verifyTextInGridCellPreviewTab({ row: rowIndex, column: 1 }, 'True');
+                multipleSelectionGridPage.steps.verifyTextInGridCellPreviewTab({ row: rowIndex, column: 2 }, 'False');
+            };
+        });
+
+        it('When the user unchecks \'Same checkbox text in each column\' checkbox, then the default text in each column cell should be removed', () => {
+            multipleSelectionGridPage.steps.switchToEditTab();
+            multipleSelectionGridPage.steps.uncheckSameCheckboxTextInColumnCheckbox();
+            multipleSelectionGridPage.steps.switchToPreviewTab();
+            for (let rowIndex = 0; rowIndex < 4; rowIndex++) {
+                multipleSelectionGridPage.steps.verifyTextInGridCellPreviewTab({ row: rowIndex, column: 1 }, '');
+                multipleSelectionGridPage.steps.verifyTextInGridCellPreviewTab({ row: rowIndex, column: 2 }, '');
+            };
+        });
+
+        it('When the user checks the \'Same checkbox text in each column\' checkbox again, then the cells in each column should have the same text in all preview tab grid', () => {
+            multipleSelectionGridPage.steps.switchToEditTab();
+            multipleSelectionGridPage.steps.checkSameCheckboxTextInColumnCheckbox();
+            multipleSelectionGridPage.steps.switchToPreviewTab();
+            for (let rowIndex = 0; rowIndex < 4; rowIndex++) {
+                multipleSelectionGridPage.steps.verifyTextInGridCellPreviewTab({ row: rowIndex, column: 1 }, 'True');
+                multipleSelectionGridPage.steps.verifyTextInGridCellPreviewTab({ row: rowIndex, column: 2 }, 'False');
+            };
+        });
+
+        it('When user selects \'Checkboxes\' option in default option dropdown, then then the answer cells in the preview tab grid should be set to checkbox category', () => {
+            multipleSelectionGridPage.steps.switchToEditTab();
+            multipleSelectionGridPage.steps.expandDefaultOptionDropdown();
+            multipleSelectionGridPage.steps.selectOptionFromDefaultOptionDropdown('Checkboxes');
+            multipleSelectionGridPage.steps.switchToPreviewTab();
+            multipleSelectionGridPage.steps.verifyTableCellPropertyPreviewTab({ row: 0, column: 0 }, 'None');
+            multipleSelectionGridPage.steps.verifyTableCellPropertyPreviewTab({ row: 0, column: 1 }, 'Heading');
+            multipleSelectionGridPage.steps.verifyTableCellPropertyPreviewTab({ row: 0, column: 2 }, 'Heading');
+            multipleSelectionGridPage.steps.verifyTableCellPropertyPreviewTab({ row: 1, column: 0 }, 'Text');
+            multipleSelectionGridPage.steps.verifyTableCellPropertyPreviewTab({ row: 2, column: 0 }, 'Text');
+            multipleSelectionGridPage.steps.verifyTableCellPropertyPreviewTab({ row: 3, column: 0 }, 'Text');
+            multipleSelectionGridPage.steps.verifyTableCellPropertyPreviewTab({ row: 4, column: 0 }, 'Text');
+            for (let rowIndex = 1; rowIndex < 5; rowIndex++) {
+                multipleSelectionGridPage.steps.verifyTableCellPropertyPreviewTab({ row: rowIndex, column: 1 }, 'Checkbox');
+                multipleSelectionGridPage.steps.verifyTableCellPropertyPreviewTab({ row: rowIndex, column: 2 }, 'Checkbox');
+            };
+        });
+
+        it('User should be able to select \'No checkboxes\' option in default option dropdown, then the answer cells in the preview tab grid should be set to \'No checkboxes\'', () => {
+            multipleSelectionGridPage.steps.switchToEditTab();
+            multipleSelectionGridPage.steps.expandDefaultOptionDropdown();
+            multipleSelectionGridPage.steps.selectOptionFromDefaultOptionDropdown('No checkboxes');
+            multipleSelectionGridPage.steps.switchToPreviewTab();
+            for (let rowIndex = 0; rowIndex < 4; rowIndex++) {
+                multipleSelectionGridPage.steps.verifyTableCellPropertyPreviewTab({ row: rowIndex, column: 1 }, 'No checkbox');
+                multipleSelectionGridPage.steps.verifyTableCellPropertyPreviewTab({ row: rowIndex, column: 2 }, 'No checkbox');
+            };
+        });
+
+        it('When user has selected \'No checkboxes\' option in the default option dropdown, then \'Enable row heading\' checkbox should be unchecked and header row should not be displayed', () => {
+            multipleSelectionGridPage.steps.verifyEditCellCategoryTableCellProperty({ row: 0, column: 0 }, 'Text');
+            multipleSelectionGridPage.steps.verifyTableCellPropertyPreviewTab({ row: 0, column: 1 }, 'No checkbox');
+            multipleSelectionGridPage.steps.verifyTableCellPropertyPreviewTab({ row: 0, column: 2 }, 'No checkbox');
+        });
+
+        it('When user has selected \'No checkboxes\' option in the default option dropdown, then there should be a blank text field in each answer cell', () => {
+            for (let rowIndex = 0; rowIndex < 4; rowIndex++) {
+                multipleSelectionGridPage.steps.verifyTextInGridCellPreviewTab({ row: rowIndex, column: 1 }, '');
+                multipleSelectionGridPage.steps.verifyTextInGridCellPreviewTab({ row: rowIndex, column: 2 }, '');
+            };
+        });
+
+        it('When the user checks the \'Same checkbox text in each column\' checkbox, then the cells in each column should have the same default text in all preview tab grid', () => {
+            multipleSelectionGridPage.steps.switchToEditTab();
+            multipleSelectionGridPage.steps.checkSameCheckboxTextInColumnCheckbox();
+            multipleSelectionGridPage.steps.switchToPreviewTab();
+            for (let rowIndex = 0; rowIndex < 4; rowIndex++) {
+                multipleSelectionGridPage.steps.verifyTextInGridCellPreviewTab({ row: rowIndex, column: 1 }, 'True');
+                multipleSelectionGridPage.steps.verifyTextInGridCellPreviewTab({ row: rowIndex, column: 2 }, 'False');
+            };
+        });
+
+        it('When the user unchecks \'Same checkbox text in each column\' checkbox, then the default text in each column cell should be removed', () => {
+            multipleSelectionGridPage.steps.switchToEditTab();
+            multipleSelectionGridPage.steps.uncheckSameCheckboxTextInColumnCheckbox();
+            multipleSelectionGridPage.steps.switchToPreviewTab();
+            for (let rowIndex = 0; rowIndex < 4; rowIndex++) {
+                multipleSelectionGridPage.steps.verifyTextInGridCellPreviewTab({ row: rowIndex, column: 1 }, '');
+                multipleSelectionGridPage.steps.verifyTextInGridCellPreviewTab({ row: rowIndex, column: 2 }, '');
+            };
+        });
+
+        it('When \'Same checkbox text in each column\' checkbox is checked and user selects \'Yes / no\' option in default text dropdown, then the selected option text should be displayed in each column each column', () => {
+            multipleSelectionGridPage.steps.switchToEditTab();
+            multipleSelectionGridPage.steps.checkSameCheckboxTextInColumnCheckbox();
+            multipleSelectionGridPage.steps.expandDefaultTextDropdown();
+            multipleSelectionGridPage.steps.selectOptionFromDefaultTextDropdown('Yes / no');
+            multipleSelectionGridPage.steps.switchToPreviewTab();
+            for (let rowIndex = 0; rowIndex < 4; rowIndex++) {
+                multipleSelectionGridPage.steps.verifyTextInGridCellPreviewTab({ row: rowIndex, column: 1 }, 'Yes');
+                multipleSelectionGridPage.steps.verifyTextInGridCellPreviewTab({ row: rowIndex, column: 2 }, 'No');
+            };
+        });
+
+        it('When \'Same checkbox text in each column\' checkbox is checked and user selects \'Agree / Disagree\' option in default text dropdown, then the selected option text should be displayed in each column each column', () => {
+            multipleSelectionGridPage.steps.switchToEditTab();
+            multipleSelectionGridPage.steps.expandDefaultTextDropdown();
+            multipleSelectionGridPage.steps.selectOptionFromDefaultTextDropdown('Agree / Disagree');
+            multipleSelectionGridPage.steps.switchToPreviewTab();
+            for (let rowIndex = 0; rowIndex < 4; rowIndex++) {
+                multipleSelectionGridPage.steps.verifyTextInGridCellPreviewTab({ row: rowIndex, column: 1 }, 'Agree');
+                multipleSelectionGridPage.steps.verifyTextInGridCellPreviewTab({ row: rowIndex, column: 2 }, 'Disagree');
+            };
+        });
+
+        it('When user edits the text in any column, then the updated text should be displayed in all the cells of that corresponding column in preview tab', () => {
+            multipleSelectionGridPage.steps.switchToEditTab();
+            multipleSelectionGridPage.steps.enterTextInCellPropertyInputField({ row: 0, column: 2 }, 'Updated text');
+            multipleSelectionGridPage.steps.switchToPreviewTab();
+            for (let rowIndex = 0; rowIndex < 4; rowIndex++) {
+                multipleSelectionGridPage.steps.verifyTextInGridCellPreviewTab({ row: rowIndex, column: 1 }, 'Agree');
+                multipleSelectionGridPage.steps.verifyTextInGridCellPreviewTab({ row: rowIndex, column: 2 }, 'Updated text');
+            };
+        });
+    });
+
+    describe('Specify columns and rows - table cell property menu - Contents, specify columns and rows section and specify correct answer section', () => {
+        abortEarlySetup();
+        before(() => {
+            multipleSelectionGridPage.steps.navigateToCreateQuestion('multiple selection grid');
+            cy.barsPreLoaderWait();
+        });
+
+        it('\'You can add the question(s) in the first column.\' help text should be displayed above the table', () => {
+            utilities.verifyInnerText(multipleSelectionGridPage.specifyRowsAndColumnsTableHelpText(), 'You can add the question(s) in the first column.');
+            utilities.verifyElementVisibilityState(multipleSelectionGridPage.specifyRowsAndColumnsTableHelpText(), 'visible');
+        });
+
+        //Default states
+        it('A table based on the default settings of columns and rows should be displayed in the \'Specify columns and rows\' section', () => {
+            multipleSelectionGridPage.steps.verifyEditCellCategoryTableCellProperty({ row: 0, column: 0 }, 'None');
+            multipleSelectionGridPage.steps.verifyEditCellCategoryTableCellProperty({ row: 0, column: 1 }, 'Heading');
+            multipleSelectionGridPage.steps.verifyEditCellCategoryTableCellProperty({ row: 0, column: 2 }, 'Heading');
+            for (let rowIndex = 1; rowIndex < 5; rowIndex++) {
+                multipleSelectionGridPage.steps.verifyEditCellCategoryTableCellProperty({ row: rowIndex, column: 0 }, 'Text');
+            }
+            multipleSelectionGridPage.steps.verifyTextInCellPropertyInputField({ row: 0, column: 1 }, 'True');
+            multipleSelectionGridPage.steps.verifyTextInCellPropertyInputField({ row: 0, column: 2 }, 'False');
+            for (let rowIndex = 1; rowIndex < 5; rowIndex++) {
+                multipleSelectionGridPage.steps.verifyEditCellCategoryTableCellProperty({ row: rowIndex, column: 1 }, 'Checkbox');
+                multipleSelectionGridPage.steps.verifyEditCellCategoryTableCellProperty({ row: rowIndex, column: 2 }, 'Checkbox');
+            };
+        });
+
+        it('A table based on the default settings of columns and rows should be displayed in the \'Specify correct answer\' section', () => {
+            multipleSelectionGridPage.steps.verifyTableCellPropertySpecifyCorrectAnswerSection({ row: 0, column: 0 }, 'None');
+            multipleSelectionGridPage.steps.verifyTableCellPropertySpecifyCorrectAnswerSection({ row: 0, column: 1 }, 'Heading');
+            multipleSelectionGridPage.steps.verifyTableCellPropertySpecifyCorrectAnswerSection({ row: 0, column: 2 }, 'Heading');
+            for (let rowIndex = 1; rowIndex < 5; rowIndex++) {
+                multipleSelectionGridPage.steps.verifyTableCellPropertySpecifyCorrectAnswerSection({ row: rowIndex, column: 0 }, 'Text');
+            }
+            multipleSelectionGridPage.steps.verifyTextInGridCellSpecifyCorrectAnswerSection({ row: 0, column: 1 }, 'True');
+            multipleSelectionGridPage.steps.verifyTextInGridCellSpecifyCorrectAnswerSection({ row: 0, column: 2 }, 'False');
+            for (let rowIndex = 1; rowIndex < 5; rowIndex++) {
+                multipleSelectionGridPage.steps.verifyTableCellPropertySpecifyCorrectAnswerSection({ row: rowIndex, column: 1 }, 'Checkbox');
+                multipleSelectionGridPage.steps.verifyTableCellPropertySpecifyCorrectAnswerSection({ row: rowIndex, column: 2 }, 'Checkbox');
+            };
+        });
+
+        multipleSelectionGridPage.tests.verifyHeaderRowCellPropertyMenu();
+
+        multipleSelectionGridPage.tests.verifyFirstColumnCellPropertyMenu();
+
+        multipleSelectionGridPage.tests.verifyOptionCellPropertyMenu();
+
+        it('When user sets a cell as \'Heading\' then, empty input field should be displayed in the cell with placeholder text \'Enter text here...\' and user should be able to give input in the cell', () => {
+            multipleSelectionGridPage.steps.modifyTableCellProperty({ row: 0, column: 0 }, 'Heading');
+            multipleSelectionGridPage.steps.verifyEditCellCategoryTableCellProperty({ row: 0, column: 0 }, 'Heading');
+            multipleSelectionGridPage.steps.verifyTextInCellPropertyInputField({ row: 0, column: 0 }, '');
+            multipleSelectionGridPage.steps.verifyPlaceholderTextInCellPropertyInputField({ row: 0, column: 0 }, 'Enter text here...');
+            multipleSelectionGridPage.steps.enterTextInCellPropertyInputField({ row: 0, column: 0 }, 'Heading');
+            multipleSelectionGridPage.steps.verifyTextInCellPropertyInputField({ row: 0, column: 0 }, 'Heading');
+        });
+
+        it('When user sets a cell as \'Subheading\' then, empty input field should be displayed in the cell with placeholder text \'Enter text here...\' and user should be able to give input in the cell', () => {
+            multipleSelectionGridPage.steps.modifyTableCellProperty({ row: 1, column: 0 }, 'Subheading');
+            multipleSelectionGridPage.steps.verifyEditCellCategoryTableCellProperty({ row: 1, column: 0 }, 'Subheading');
+            multipleSelectionGridPage.steps.verifyTextInCellPropertyInputField({ row: 1, column: 0 }, '');
+            multipleSelectionGridPage.steps.verifyPlaceholderTextInCellPropertyInputField({ row: 1, column: 0 }, 'Enter text here...');
+            multipleSelectionGridPage.steps.enterTextInCellPropertyInputField({ row: 1, column: 0 }, 'Subheading');
+            multipleSelectionGridPage.steps.verifyTextInCellPropertyInputField({ row: 1, column: 0 }, 'Subheading');
+        });
+
+        it('When user sets a cell as \'Text\' then, empty input field should be displayed in the cell with placeholder text \'Enter text here...\' and user should be able to give input in the cell', () => {
+            multipleSelectionGridPage.steps.modifyTableCellProperty({ row: 2, column: 0 }, 'Text');
+            multipleSelectionGridPage.steps.verifyEditCellCategoryTableCellProperty({ row: 2, column: 0 }, 'Text');
+            multipleSelectionGridPage.steps.verifyTextInCellPropertyInputField({ row: 2, column: 0 }, '');
+            multipleSelectionGridPage.steps.verifyPlaceholderTextInCellPropertyInputField({ row: 2, column: 0 }, 'Enter text here...');
+            multipleSelectionGridPage.steps.enterTextInCellPropertyInputField({ row: 2, column: 0 }, 'Text');
+            multipleSelectionGridPage.steps.verifyTextInCellPropertyInputField({ row: 2, column: 0 }, 'Text');
+        });
+
+        it('When user sets a cell as \'None\' then, input field should not be displayed in the cell', () => {
+            multipleSelectionGridPage.steps.modifyTableCellProperty({ row: 0, column: 1 }, 'None');
+            multipleSelectionGridPage.steps.verifyEditCellCategoryTableCellProperty({ row: 0, column: 1 }, 'None');
+            multipleSelectionGridPage.steps.verifyCellPropertyInputFieldNotExists({ row: 0, column: 1 });
+        });
+
+        it('When user sets a cell as \'Checkbox\' then, input field should not be displayed in the cell', () => {
+            multipleSelectionGridPage.steps.modifyTableCellPropertyForOptionCells({ row: 1, column: 1 }, 'Checkbox');
+            multipleSelectionGridPage.steps.verifyEditCellCategoryTableCellProperty({ row: 1, column: 1 }, 'Checkbox');
+            multipleSelectionGridPage.steps.verifyCellPropertyInputFieldNotExists({ row: 1, column: 1 });
+        });
+
+        it('When user sets a cell as \'Checkbox with text\' then, empty input field should be displayed in the cell with placeholder text \'Option text or image...\', user should be able to give input in the cell', () => {
+            multipleSelectionGridPage.steps.modifyTableCellPropertyForOptionCells({ row: 1, column: 2 }, 'Checkbox with text');
+            multipleSelectionGridPage.steps.verifyEditCellCategoryTableCellProperty({ row: 1, column: 2 }, 'Checkbox with text');
+            multipleSelectionGridPage.steps.verifyPlaceholderTextInCellPropertyInputField({ row: 1, column: 2 }, 'Option text or image...');
+            multipleSelectionGridPage.steps.enterTextInCellPropertyInputField({ row: 1, column: 2 }, 'Checkbox with text');
+            multipleSelectionGridPage.steps.verifyTextInCellPropertyInputField({ row: 1, column: 2 }, 'Checkbox with text');
+        });
+
+        it('When user sets a cell as \'No checkbox\' then, empty input field should be displayed in the cell with placeholder text \'Enter text here...\', user should be able to give input in the cell', () => {
+            multipleSelectionGridPage.steps.modifyTableCellPropertyForOptionCells({ row: 2, column: 1 }, 'No checkbox');
+            multipleSelectionGridPage.steps.verifyEditCellCategoryTableCellProperty({ row: 2, column: 1 }, 'No checkbox');
+            multipleSelectionGridPage.steps.verifyPlaceholderTextInCellPropertyInputField({ row: 2, column: 1 }, 'Option text or image...');
+            multipleSelectionGridPage.steps.enterTextInCellPropertyInputField({ row: 2, column: 1 }, 'No checkbox');
+            multipleSelectionGridPage.steps.verifyTextInCellPropertyInputField({ row: 2, column: 1 }, 'No checkbox');
+        });
+
+        it('The updated cell properties should be reflected in the specify correct answer table', () => {
+            multipleSelectionGridPage.steps.verifyTableCellPropertySpecifyCorrectAnswerSection({ row: 0, column: 0 }, 'Heading');
+            multipleSelectionGridPage.steps.verifyTextInGridCellSpecifyCorrectAnswerSection({ row: 0, column: 0 }, 'Heading');
+            multipleSelectionGridPage.steps.verifyTableCellPropertySpecifyCorrectAnswerSection({ row: 1, column: 0 }, 'Subheading');
+            multipleSelectionGridPage.steps.verifyTextInGridCellSpecifyCorrectAnswerSection({ row: 1, column: 0 }, 'Subheading');
+            multipleSelectionGridPage.steps.verifyTableCellPropertySpecifyCorrectAnswerSection({ row: 2, column: 0 }, 'Text');
+            multipleSelectionGridPage.steps.verifyTextInGridCellSpecifyCorrectAnswerSection({ row: 2, column: 0 }, 'Text');
+            multipleSelectionGridPage.steps.verifyTableCellPropertySpecifyCorrectAnswerSection({ row: 0, column: 1 }, 'None');
+            multipleSelectionGridPage.steps.verifyTableCellPropertySpecifyCorrectAnswerSection({ row: 1, column: 1 }, 'Checkbox');
+            multipleSelectionGridPage.steps.verifyTableCellPropertySpecifyCorrectAnswerSection({ row: 1, column: 2 }, 'Checkbox with text');
+            multipleSelectionGridPage.steps.verifyTextInGridCellSpecifyCorrectAnswerSection({ row: 1, column: 2 }, 'Checkbox with text');
+            multipleSelectionGridPage.steps.verifyTableCellPropertySpecifyCorrectAnswerSection({ row: 2, column: 1 }, 'No checkbox');
+            multipleSelectionGridPage.steps.verifyTextInGridCellSpecifyCorrectAnswerSection({ row: 2, column: 1 }, 'No checkbox');
+            multipleSelectionGridPage.steps.verifyAnswerOptionButtonIsNotDisplayedInCellSpecifyCorrectAnswerSection({ row: 2, column: 1 });
+        });
+
+        it('CSS of table in \'Specify columns and rows\' section', { tags: 'css' }, () => {
+            utilities.verifyCSS(multipleSelectionGridPage.specifyRowsAndColumnsTableHelpText(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.getNthElement(multipleSelectionGridPage.editCellPropertyRow(), 0)
+                .within(() => {
+                    //Heading cell
+                    utilities.verifyCSS(multipleSelectionGridPage.tableCell().eq(0).parent(), {
+                        'background-color': css.color.matrixHeadingCellBg,
+                        'border-color': css.color.figDefaultComponentBorder
+                    });
+                    utilities.verifyCSS(multipleSelectionGridPage.cellPropertyInputField().eq(0), {
+                        'color': css.color.text,
+                        'font-size': css.fontSize.default,
+                        'font-weight': css.fontWeight.regular
+                    });
+                    //None cell
+                    utilities.verifyCSS(multipleSelectionGridPage.tableCell().eq(1).parent(), {
+                        'background-color': css.color.defaultBackground,
+                        'border-color': css.color.figDefaultComponentBorder
+                    });
+                    utilities.verifyCSS(multipleSelectionGridPage.tableCell().eq(1).find('path').eq(0), {
+                        'stroke': css.color.cellIcon
+                    });
+                });
+            utilities.getNthElement(multipleSelectionGridPage.editCellPropertyRow(), 1)
+                .within(() => {
+                    //Subheading cell
+                    utilities.verifyCSS(multipleSelectionGridPage.tableCell().eq(0).parent(), {
+                        'background-color': css.color.matrixSubheadingCellBg,
+                        'border-color': css.color.figDefaultComponentBorder
+                    });
+                    utilities.verifyCSS(multipleSelectionGridPage.cellPropertyInputField().eq(0), {
+                        'color': css.color.text,
+                        'font-size': css.fontSize.default,
+                        'font-weight': css.fontWeight.regular
+                    });
+                    //Checkbox cell
+                    utilities.verifyCSS(multipleSelectionGridPage.tableCell().eq(1).parent(), {
+                        'background-color': css.color.defaultBackground,
+                        'border-color': css.color.figDefaultComponentBorder
+                    });
+                    utilities.verifyCSS(multipleSelectionGridPage.tableCell().eq(1).find('g').eq(2), {
+                        'fill': css.color.cellIcon
+                    });
+                    //Checkbox with text cell
+                    utilities.verifyCSS(multipleSelectionGridPage.tableCell().eq(2).parent(), {
+                        'background-color': css.color.defaultBackground,
+                        'border-color': css.color.figDefaultComponentBorder
+                    });
+                    utilities.verifyCSS(multipleSelectionGridPage.tableCell().eq(2).find('g').eq(2), {
+                        'fill': css.color.cellIcon
+                    });
+                    utilities.verifyCSS(multipleSelectionGridPage.cellPropertyInputField().eq(2), {
+                        'color': css.color.text,
+                        'font-size': css.fontSize.default,
+                        'font-weight': css.fontWeight.regular
+                    });
+                });
+            utilities.getNthElement(multipleSelectionGridPage.editCellPropertyRow(), 2)
+                .within(() => {
+                    //Text cell
+                    utilities.verifyCSS(multipleSelectionGridPage.tableCell().eq(0).parent(), {
+                        'background-color': css.color.defaultBackground,
+                        'border-color': css.color.figDefaultComponentBorder
+                    });
+                    utilities.verifyCSS(multipleSelectionGridPage.cellPropertyInputField().eq(0), {
+                        'color': css.color.text,
+                        'font-size': css.fontSize.default,
+                        'font-weight': css.fontWeight.regular
+                    });
+                    //No checkbox cell
+                    utilities.verifyCSS(multipleSelectionGridPage.tableCell().eq(1).parent(), {
+                        'background-color': css.color.defaultBackground,
+                        'border-color': css.color.figDefaultComponentBorder
+                    });
+                    utilities.verifyCSS(multipleSelectionGridPage.cellPropertyInputField().eq(1), {
+                        'color': css.color.text,
+                        'font-size': css.fontSize.default,
+                        'font-weight': css.fontWeight.regular
+                    });
+                });
+        });
+
+        //A11y is covered in above describes
+    });
+
+    describe('Specify columns and rows - \'Set first row cells as heading\', \'Set first column cells as heading\' and table cell type menu - Preview tab', () => {
+        abortEarlySetup();
+        before(() => {
+            multipleSelectionGridPage.steps.navigateToCreateQuestion('multiple selection grid');
+            cy.barsPreLoaderWait();
+            multipleSelectionGridPage.steps.switchToPreviewTab();
+        });
+
+        it('A table based on the default settings of specify columns and rows section should be displayed in the preview tab', () => {
+            multipleSelectionGridPage.steps.verifyTableCellPropertyPreviewTab({ row: 0, column: 0 }, 'None');
+            multipleSelectionGridPage.steps.verifyTableCellPropertyPreviewTab({ row: 0, column: 1 }, 'Heading');
+            multipleSelectionGridPage.steps.verifyTableCellPropertyPreviewTab({ row: 0, column: 2 }, 'Heading');
+            for (let rowIndex = 1; rowIndex < 5; rowIndex++) {
+                multipleSelectionGridPage.steps.verifyTableCellPropertyPreviewTab({ row: rowIndex, column: 0 }, 'Text');
+            }
+            multipleSelectionGridPage.steps.verifyTextInGridCellPreviewTab({ row: 0, column: 1 }, 'True');
+            multipleSelectionGridPage.steps.verifyTextInGridCellPreviewTab({ row: 0, column: 2 }, 'False');
+            for (let rowIndex = 1; rowIndex < 5; rowIndex++) {
+                multipleSelectionGridPage.steps.verifyTableCellPropertyPreviewTab({ row: rowIndex, column: 1 }, 'Checkbox');
+                multipleSelectionGridPage.steps.verifyTableCellPropertyPreviewTab({ row: rowIndex, column: 2 }, 'Checkbox');
+            };
+        });
+
+        it('When user sets a cell as \'Heading\' and gives an input in its input field, then these changes should be reflected in the preview tab table cell', () => {
+            multipleSelectionGridPage.steps.switchToEditTab();
+            multipleSelectionGridPage.steps.modifyTableCellProperty({ row: 0, column: 0 }, 'Heading');
+            multipleSelectionGridPage.steps.enterTextInCellPropertyInputField({ row: 0, column: 0 }, 'Heading');
+            multipleSelectionGridPage.steps.switchToPreviewTab();
+            multipleSelectionGridPage.steps.verifyTableCellPropertyPreviewTab({ row: 0, column: 0 }, 'Heading');
+            multipleSelectionGridPage.steps.verifyTextInGridCellPreviewTab({ row: 0, column: 0 }, 'Heading');
+        });
+
+        it('When user sets a cell as \'Subheading\' and gives an input in its input field, then these changes should be reflected in the preview tab table cell', () => {
+            multipleSelectionGridPage.steps.switchToEditTab();
+            multipleSelectionGridPage.steps.modifyTableCellProperty({ row: 1, column: 0 }, 'Subheading');
+            multipleSelectionGridPage.steps.enterTextInCellPropertyInputField({ row: 1, column: 0 }, 'Subheading');
+            multipleSelectionGridPage.steps.switchToPreviewTab();
+            multipleSelectionGridPage.steps.verifyTableCellPropertyPreviewTab({ row: 1, column: 0 }, 'Subheading');
+            multipleSelectionGridPage.steps.verifyTextInGridCellPreviewTab({ row: 1, column: 0 }, 'Subheading');
+        });
+
+        it('When user sets a cell as \'Text\' and gives an input in its input field, then these changes should be reflected in the preview tab table cell', () => {
+            multipleSelectionGridPage.steps.switchToEditTab();
+            multipleSelectionGridPage.steps.modifyTableCellProperty({ row: 2, column: 0 }, 'Text');
+            multipleSelectionGridPage.steps.enterTextInCellPropertyInputField({ row: 2, column: 0 }, 'Text');
+            multipleSelectionGridPage.steps.switchToPreviewTab();
+            multipleSelectionGridPage.steps.verifyTableCellPropertyPreviewTab({ row: 2, column: 0 }, 'Text');
+            multipleSelectionGridPage.steps.verifyTextInGridCellPreviewTab({ row: 2, column: 0 }, 'Text');
+        });
+
+        it('When user sets a cell as \'None\' then this should be reflected in the preview tab table cell', () => {
+            multipleSelectionGridPage.steps.switchToEditTab();
+            multipleSelectionGridPage.steps.modifyTableCellProperty({ row: 0, column: 1 }, 'None');
+            multipleSelectionGridPage.steps.switchToPreviewTab();
+            multipleSelectionGridPage.steps.verifyTableCellPropertyPreviewTab({ row: 0, column: 1 }, 'None');
+        });
+
+        it('When user sets a cell as \'Checkbox\' then this should be reflected in the preview tab table cell', () => {
+            multipleSelectionGridPage.steps.switchToEditTab();
+            multipleSelectionGridPage.steps.modifyTableCellPropertyForOptionCells({ row: 1, column: 1 }, 'Checkbox');
+            multipleSelectionGridPage.steps.switchToPreviewTab();
+            multipleSelectionGridPage.steps.verifyTableCellPropertyPreviewTab({ row: 1, column: 1 }, 'Checkbox');
+        });
+
+        it('When user sets a cell as \'Checkbox with text\' and gives an input in its input field, then these changes should be reflected in the preview tab table cell', () => {
+            multipleSelectionGridPage.steps.switchToEditTab();
+            multipleSelectionGridPage.steps.modifyTableCellPropertyForOptionCells({ row: 1, column: 2 }, 'Checkbox with text');
+            multipleSelectionGridPage.steps.enterTextInCellPropertyInputField({ row: 1, column: 2 }, 'Checkbox with text');
+            multipleSelectionGridPage.steps.switchToPreviewTab();
+            multipleSelectionGridPage.steps.verifyTableCellPropertyPreviewTab({ row: 1, column: 2 }, 'Checkbox with text');
+            multipleSelectionGridPage.steps.verifyTextInGridCellPreviewTab({ row: 1, column: 2 }, 'Checkbox with text');
+        });
+
+        it('When user sets a cell as \'No checkbox\' and gives an input in its input field, then these changes should be reflected in the preview tab table cell', () => {
+            multipleSelectionGridPage.steps.switchToEditTab();
+            multipleSelectionGridPage.steps.modifyTableCellPropertyForOptionCells({ row: 2, column: 1 }, 'No checkbox');
+            multipleSelectionGridPage.steps.enterTextInCellPropertyInputField({ row: 2, column: 1 }, 'No checkbox');
+            multipleSelectionGridPage.steps.switchToPreviewTab();
+            multipleSelectionGridPage.steps.verifyTableCellPropertyPreviewTab({ row: 2, column: 1 }, 'No checkbox');
+            multipleSelectionGridPage.steps.verifyTextInGridCellPreviewTab({ row: 2, column: 1 }, 'No checkbox');
+        });
+    });
+});