itemengine-cypress-automation 1.0.78 → 1.0.80

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

@@ -0,0 +1,754 @@
+import { dragAndDropIntoCategoriesPage } from "../../../pages";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import utilities from "../../../support/helpers/utilities";
+const css = Cypress.env('css');
+
+const cellPropertyMenuOptions = ['Heading', 'Subheading', 'Text', 'Dropzone', 'None'];
+
+describe('Create item page - Drag and drop into categories: Question instructions, Specify rows and columns section', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Question instructions input field - Edit tab', () => {
+        abortEarlySetup();
+        before(() => {
+            dragAndDropIntoCategoriesPage.steps.navigateToCreateQuestion('drag and drop into categories');
+            cy.barsPreLoaderWait();
+        });
+
+        dragAndDropIntoCategoriesPage.tests.verifyQuestionInstructionsInputFieldEditTab();
+    });
+
+    describe('Question instructions input field - Preview tab', () => {
+        abortEarlySetup();
+        before(() => {
+            dragAndDropIntoCategoriesPage.steps.navigateToCreateQuestion('drag and drop into categories');
+            cy.barsPreLoaderWait();
+        });
+
+        dragAndDropIntoCategoriesPage.tests.verifyQuestionInstructionsInputFieldPreviewTab();
+    });
+
+    describe('Specify columns and rows - Columns and Rows input steppers - Contents and specify columns and rows table', () => {
+        abortEarlySetup();
+        before(() => {
+            dragAndDropIntoCategoriesPage.steps.navigateToCreateQuestion('drag and drop into categories');
+            cy.barsPreLoaderWait();
+        });
+
+        //Default settings
+        it('\'Specify columns and rows\' title should be displayed', () => {
+            utilities.verifyInnerText(dragAndDropIntoCategoriesPage.specifyColumnsAndRowsLabel(), 'Specify columns and rows');
+            utilities.verifyElementVisibilityState(dragAndDropIntoCategoriesPage.specifyColumnsAndRowsLabel(), 'visible');
+        });
+
+        it('\'Columns\' and \'Rows\' headings and their input stepper should be displayed and default the value for \'Columns\' and \'Rows\' should be set to 3 and 4 respectively', () => {
+            utilities.verifyInnerText(dragAndDropIntoCategoriesPage.columnsInputStepperLabel(), 'Columns');
+            utilities.verifyElementVisibilityState(dragAndDropIntoCategoriesPage.columnsInputStepperLabel(), 'visible');
+            utilities.verifyInnerText(dragAndDropIntoCategoriesPage.rowsInputStepperLabel(), 'Rows');
+            utilities.verifyElementVisibilityState(dragAndDropIntoCategoriesPage.rowsInputStepperLabel(), 'visible');
+            utilities.verifyElementVisibilityState(dragAndDropIntoCategoriesPage.columnsInputStepperWrapper(), 'visible');
+            utilities.verifyElementVisibilityState(dragAndDropIntoCategoriesPage.rowsInputStepperWrapper(), 'visible');
+            dragAndDropIntoCategoriesPage.steps.verifyColumnInputStepperIncreaseDecreaseButton();
+            dragAndDropIntoCategoriesPage.steps.verifyRowInputStepperIncreaseDecreaseButton();
+            dragAndDropIntoCategoriesPage.steps.verifyColumnInputStepperCountInputFieldValue(3);
+            dragAndDropIntoCategoriesPage.steps.verifyRowsInputStepperCountInputFieldValue(4);
+        });
+
+        //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', () => {
+            dragAndDropIntoCategoriesPage.steps.increaseColumnInputStepperCount(1);
+            dragAndDropIntoCategoriesPage.steps.verifyColumnInputStepperCountInputFieldValue(4);
+            dragAndDropIntoCategoriesPage.steps.verifyColumnsCountInSpecifyColumnsAndRowsTable(4);
+        });
+
+        it('When user decreases the number of rows in the 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', () => {
+            dragAndDropIntoCategoriesPage.steps.decreaseRowInputStepperCount(1);
+            dragAndDropIntoCategoriesPage.steps.verifyRowsInputStepperCountInputFieldValue(3);
+            dragAndDropIntoCategoriesPage.steps.verifyRowsCountInSpecifyColumnsAndRowsTable(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', () => {
+            dragAndDropIntoCategoriesPage.steps.addInputToColumnInputStepper(5);
+            dragAndDropIntoCategoriesPage.steps.addInputToRowInputStepper(5);
+            dragAndDropIntoCategoriesPage.steps.verifyColumnsCountInSpecifyColumnsAndRowsTable(5);
+            dragAndDropIntoCategoriesPage.steps.verifyRowsCountInSpecifyColumnsAndRowsTable(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', () => {
+            dragAndDropIntoCategoriesPage.steps.increaseRowInputStepperCount(20);
+            dragAndDropIntoCategoriesPage.steps.verifyRowsInputStepperCountInputFieldValue(25);
+            dragAndDropIntoCategoriesPage.steps.verifyRowsCountInSpecifyColumnsAndRowsTable(25);
+            dragAndDropIntoCategoriesPage.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', () => {
+            dragAndDropIntoCategoriesPage.steps.decreaseColumnInputStepperCount(4);
+            dragAndDropIntoCategoriesPage.steps.verifyColumnInputStepperCountInputFieldValue(1);
+            dragAndDropIntoCategoriesPage.steps.verifyColumnsCountInSpecifyColumnsAndRowsTable(1);
+            dragAndDropIntoCategoriesPage.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', () => {
+            dragAndDropIntoCategoriesPage.steps.addInputToRowInputStepper(0);
+            dragAndDropIntoCategoriesPage.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', () => {
+            dragAndDropIntoCategoriesPage.steps.addInputToColumnInputStepper(30);
+            dragAndDropIntoCategoriesPage.steps.verifyColumnInputStepperCountInputFieldValue(25);
+        });
+
+        it('When \'Set first row cells as heading\' checkbox is checked and user adds a column, then the added column should have its first row cell set as \'Heading\' and rest all should be set as \'Dropzone\'', () => {
+            cy.log('Pre-step: Decreasing number of rows and columns to 5');
+            dragAndDropIntoCategoriesPage.steps.addInputToRowInputStepper(5);
+            dragAndDropIntoCategoriesPage.steps.addInputToColumnInputStepper(5);
+            dragAndDropIntoCategoriesPage.steps.increaseColumnInputStepperCount(1);
+            dragAndDropIntoCategoriesPage.steps.verifySpecifyColumnsAndRowsSectionCellProperty(5, 'Heading');
+            for (let cellIndex = 11; cellIndex < 30; cellIndex += 6) {
+                dragAndDropIntoCategoriesPage.steps.verifySpecifyColumnsAndRowsSectionCellProperty(cellIndex, 'Dropzone');
+            };
+        });
+
+        it('When the user checks \'Set first column cells as heading\' checkbox and adds a row, then the added row should have its first column cell set as \'Heading\' and rest all should be set as \'Dropzone\'', () => {
+            dragAndDropIntoCategoriesPage.steps.checkSetFirstColumnCellsAsHeadingCheckbox();
+            dragAndDropIntoCategoriesPage.steps.increaseRowInputStepperCount(1);
+            dragAndDropIntoCategoriesPage.steps.verifySpecifyColumnsAndRowsSectionCellProperty(30, 'Heading');
+            for (let cellIndex = 31; cellIndex < 36; cellIndex++) {
+                dragAndDropIntoCategoriesPage.steps.verifySpecifyColumnsAndRowsSectionCellProperty(cellIndex, 'Dropzone');
+            };
+        });
+
+        it('When the user unchecks the \'Set first row cells as heading\' checkbox and adds a column, then the added column should have its first row cell set as \'Heading\' and rest all should be set as \'Dropzone\'', () => {
+            cy.log('Pre-step: Decreasing number of rows and columns to 5');
+            dragAndDropIntoCategoriesPage.steps.addInputToRowInputStepper(5);
+            dragAndDropIntoCategoriesPage.steps.addInputToColumnInputStepper(5);
+            dragAndDropIntoCategoriesPage.steps.uncheckSetFirstRowCellsAsHeadingCheckbox();
+            dragAndDropIntoCategoriesPage.steps.increaseColumnInputStepperCount(1);
+            dragAndDropIntoCategoriesPage.steps.verifySpecifyColumnsAndRowsSectionCellProperty(4, 'Heading');
+            dragAndDropIntoCategoriesPage.steps.verifySpecifyColumnsAndRowsSectionCellProperty(5, 'Heading');
+            for (let cellIndex = 11; cellIndex < 30; cellIndex += 6) {
+                dragAndDropIntoCategoriesPage.steps.verifySpecifyColumnsAndRowsSectionCellProperty(cellIndex, 'Dropzone');
+            };
+        });
+
+        it('When the user unchecks the \'Set first column cells as heading\' checkbox and adds a row, then the added row should have all the cells set as \'Dropzone\'', () => {
+            dragAndDropIntoCategoriesPage.steps.uncheckSetFirstColumnCellsAsHeadingCheckbox();
+            dragAndDropIntoCategoriesPage.steps.increaseRowInputStepperCount(1);
+            for (let cellIndex = 30; cellIndex < 36; cellIndex++) {
+                dragAndDropIntoCategoriesPage.steps.verifySpecifyColumnsAndRowsSectionCellProperty(cellIndex, 'Dropzone');
+            };
+        });
+
+        it('When there are less than 8 columns in the table, then the left and right arrow navigation button should not be displayed in the \'Specify columns and rows\' table', () => {
+            utilities.verifyElementVisibilityState(dragAndDropIntoCategoriesPage.leftArrowNavigationButton(), 'notExist');
+            utilities.verifyElementVisibilityState(dragAndDropIntoCategoriesPage.rightArrowNavigationButton(), 'notExist');
+        });
+
+        it('When the user adds 8 columns in the table, then the left and right arrow navigation button should be displayed in the \'Specify columns and rows\' table', () => {
+            dragAndDropIntoCategoriesPage.steps.addInputToColumnInputStepper(8);
+            utilities.verifyElementVisibilityState(dragAndDropIntoCategoriesPage.leftArrowNavigationButton(), 'visible');
+            utilities.verifyElementVisibilityState(dragAndDropIntoCategoriesPage.rightArrowNavigationButton(), 'visible');
+        });
+
+        it('By default the left arrow navigation button should be disabled in \'Specify columns and rows\' table', () => {
+            utilities.verifyElementDisabled(dragAndDropIntoCategoriesPage.leftArrowNavigationButton());
+        });
+
+        it('When user clicks on the right arrow navigation button, then the table should be scrolled by one column towards its right and the left arrow navigation button should now be enabled', () => {
+            cy.log('Pre-step: Setting number of columns to 15');
+            dragAndDropIntoCategoriesPage.steps.addInputToColumnInputStepper(15);
+            dragAndDropIntoCategoriesPage.steps.clickOnRightArrowNavigationButton();
+            dragAndDropIntoCategoriesPage.steps.verifyColumnIsVisibleInSpecifyColumnsAndRowsTable(8);
+            dragAndDropIntoCategoriesPage.steps.verifyColumnIsNotVisibleInSpecifyColumnsAndRowsTable(0);
+            utilities.verifyElementNotDisabled(dragAndDropIntoCategoriesPage.leftArrowNavigationButton());
+        });
+
+        it('When user has navigated to the rightmost column of the table, then the right arrow navigation button should be disabled', () => {
+            for (let index = 9; index < 15; index++) {
+                dragAndDropIntoCategoriesPage.steps.clickOnRightArrowNavigationButton();
+            }
+            utilities.verifyElementDisabled(dragAndDropIntoCategoriesPage.rightArrowNavigationButton());
+        });
+
+        it('When user clicks on the left arrow navigation button, then the table should be scrolled by one column towards its left and the right arrow navigation button should be enabled', () => {
+            dragAndDropIntoCategoriesPage.steps.clickOnLeftArrowNavigationButton();
+            dragAndDropIntoCategoriesPage.steps.verifyColumnIsVisibleInSpecifyColumnsAndRowsTable(8);
+            dragAndDropIntoCategoriesPage.steps.verifyColumnIsNotVisibleInSpecifyColumnsAndRowsTable(14);
+            utilities.verifyElementNotDisabled(dragAndDropIntoCategoriesPage.rightArrowNavigationButton());
+        });
+
+        it('When user has navigated towards the left using the left arrow navigation button, then the right arrow navigation button should be enabled again', () => {
+            for (let index = 10; index < 15; index++) {
+                dragAndDropIntoCategoriesPage.steps.clickOnLeftArrowNavigationButton();
+            }
+            utilities.verifyElementDisabled(dragAndDropIntoCategoriesPage.leftArrowNavigationButton());
+        });
+
+        it('When the number of columns is reduced to less than 8, then the then the left and right arrow navigation button should not be displayed in the \'Specify columns and rows\' table', () => {
+            dragAndDropIntoCategoriesPage.steps.addInputToColumnInputStepper(8);
+            utilities.verifyElementVisibilityState(dragAndDropIntoCategoriesPage.leftArrowNavigationButton(), 'notExist');
+            utilities.verifyElementVisibilityState(dragAndDropIntoCategoriesPage.rightArrowNavigationButton(), 'notExist');
+        });
+
+        it('CSS of \'Specify columns and rows\' Columns and Rows input steppers section\'', { tags: 'css' }, () => {
+            utilities.verifyCSS(dragAndDropIntoCategoriesPage.specifyColumnsAndRowsLabel(), {
+                'color': css.color.sectionHeading,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(dragAndDropIntoCategoriesPage.columnsInputStepperLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(dragAndDropIntoCategoriesPage.rowsInputStepperLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(dragAndDropIntoCategoriesPage.inputStepperCountInputField(), {
+                'color': css.color.text,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular,
+                'background-color': css.color.defaultBackground
+            });
+            utilities.verifyCSS(dragAndDropIntoCategoriesPage.inputStepperIncreaseButton().find('path'), {
+                'stroke': css.color.activeButtons
+            });
+            utilities.verifyCSS(dragAndDropIntoCategoriesPage.inputStepperDecreaseButton().find('path'), {
+                'stroke': css.color.activeButtons
+            });
+        });
+
+        it('Accessibility of \'Specify columns and rows\' Columns and Rows input steppers section\'', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(dragAndDropIntoCategoriesPage.specifyColumnsAndRowsLabel().parents('[class*="AddCategoriesAndRowsstyles__AddCategoriesAndRowsWrapper"]'));
+        });
+    });
+
+    describe('Specify columns and rows - Columns and Rows input steppers - Specify correct answer table', () => {
+        abortEarlySetup();
+        before(() => {
+            dragAndDropIntoCategoriesPage.steps.navigateToCreateQuestion('drag and drop into categories');
+            cy.barsPreLoaderWait();
+        });
+
+        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', () => {
+            dragAndDropIntoCategoriesPage.steps.increaseColumnInputStepperCount(1);
+            dragAndDropIntoCategoriesPage.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', () => {
+            dragAndDropIntoCategoriesPage.steps.decreaseColumnInputStepperCount(1);
+            dragAndDropIntoCategoriesPage.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', () => {
+            dragAndDropIntoCategoriesPage.steps.increaseRowInputStepperCount(1);
+            dragAndDropIntoCategoriesPage.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', () => {
+            dragAndDropIntoCategoriesPage.steps.decreaseRowInputStepperCount(1);
+            dragAndDropIntoCategoriesPage.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', () => {
+            dragAndDropIntoCategoriesPage.steps.addInputToColumnInputStepper(5);
+            dragAndDropIntoCategoriesPage.steps.addInputToRowInputStepper(5);
+            dragAndDropIntoCategoriesPage.steps.verifyColumnsCountInSpecifyCorrectAnswerSectionTable(5);
+            dragAndDropIntoCategoriesPage.steps.verifyRowsCountInSpecifyCorrectAnswerSectionTable(5);
+        });
+
+        it('When there are less than 8 columns in the table, then the left and right arrow navigation button should not be displayed in the \'Specify correct answer\' table', () => {
+            cy.log('Pre-step: Setting the number of columns to 7');
+            dragAndDropIntoCategoriesPage.steps.addInputToColumnInputStepper(7);
+            utilities.verifyElementVisibilityState(dragAndDropIntoCategoriesPage.leftArrowNavigationButtonSpecifyCorrectAnswerSection(), 'notExist');
+            utilities.verifyElementVisibilityState(dragAndDropIntoCategoriesPage.rightArrowNavigationButtonSpecifyCorrectAnswerSection(), 'notExist');
+        });
+
+        it('When the user adds 8 columns in the table, then the left and right arrow navigation button should be displayed in the \'Specify correct answer\' table', () => {
+            dragAndDropIntoCategoriesPage.steps.addInputToColumnInputStepper(8);
+            utilities.verifyElementVisibilityState(dragAndDropIntoCategoriesPage.leftArrowNavigationButtonSpecifyCorrectAnswerSection(), 'visible');
+            utilities.verifyElementVisibilityState(dragAndDropIntoCategoriesPage.rightArrowNavigationButtonSpecifyCorrectAnswerSection(), 'visible');
+        });
+
+        it('By default the left arrow navigation button should be disabled in both \'Specify columns and rows\' and \'Specify correct answer\' tables', () => {
+            utilities.verifyElementDisabled(dragAndDropIntoCategoriesPage.leftArrowNavigationButtonSpecifyCorrectAnswerSection());
+        });
+
+        it('When the number of columns is reduced to less than 8, then the then the left and right arrow navigation button should not be displayed in the \'Specify correct answer\' table', () => {
+            dragAndDropIntoCategoriesPage.steps.addInputToColumnInputStepper(7);
+            utilities.verifyElementVisibilityState(dragAndDropIntoCategoriesPage.leftArrowNavigationButtonSpecifyCorrectAnswerSection(), 'notExist');
+            utilities.verifyElementVisibilityState(dragAndDropIntoCategoriesPage.rightArrowNavigationButtonSpecifyCorrectAnswerSection(), 'notExist');
+        });
+    });
+
+    describe('Specify columns and rows - Columns and Rows input steppers - Preview tab', () => {
+        abortEarlySetup();
+        before(() => {
+            dragAndDropIntoCategoriesPage.steps.navigateToCreateQuestion('drag and drop into categories');
+            cy.barsPreLoaderWait();
+        });
+
+        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', () => {
+            dragAndDropIntoCategoriesPage.steps.increaseColumnInputStepperCount(1);
+            dragAndDropIntoCategoriesPage.steps.switchToPreviewTab();
+            dragAndDropIntoCategoriesPage.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', () => {
+            dragAndDropIntoCategoriesPage.steps.switchToEditTab();
+            dragAndDropIntoCategoriesPage.steps.decreaseColumnInputStepperCount(1);
+            dragAndDropIntoCategoriesPage.steps.switchToPreviewTab();
+            dragAndDropIntoCategoriesPage.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', () => {
+            dragAndDropIntoCategoriesPage.steps.switchToEditTab();
+            dragAndDropIntoCategoriesPage.steps.increaseRowInputStepperCount(1);
+            dragAndDropIntoCategoriesPage.steps.switchToPreviewTab();
+            dragAndDropIntoCategoriesPage.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', () => {
+            dragAndDropIntoCategoriesPage.steps.switchToEditTab();
+            dragAndDropIntoCategoriesPage.steps.decreaseRowInputStepperCount(1);
+            dragAndDropIntoCategoriesPage.steps.switchToPreviewTab();
+            dragAndDropIntoCategoriesPage.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', () => {
+            dragAndDropIntoCategoriesPage.steps.switchToEditTab();
+            dragAndDropIntoCategoriesPage.steps.addInputToRowInputStepper(7);
+            dragAndDropIntoCategoriesPage.steps.switchToPreviewTab();
+            dragAndDropIntoCategoriesPage.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', () => {
+            dragAndDropIntoCategoriesPage.steps.switchToEditTab();
+            dragAndDropIntoCategoriesPage.steps.addInputToColumnInputStepper(7);
+            dragAndDropIntoCategoriesPage.steps.switchToPreviewTab();
+            dragAndDropIntoCategoriesPage.steps.verifyRowsCountInPreviewTabTable(7);
+        });
+
+        it('When there are less than 8 columns in the table, then the left and right arrow navigation button should not be displayed in the preview tab table', () => {
+            dragAndDropIntoCategoriesPage.steps.switchToPreviewTab();
+            utilities.verifyElementVisibilityState(dragAndDropIntoCategoriesPage.leftArrowNavigationButtonPreviewTab(), 'notExist');
+            utilities.verifyElementVisibilityState(dragAndDropIntoCategoriesPage.rightArrowNavigationButtonPreviewTab(), 'notExist');
+        });
+
+        it('When the user has added 8 columns in the table, then the left and right arrow navigation button should be displayed in the preview tab table', () => {
+            dragAndDropIntoCategoriesPage.steps.switchToEditTab();
+            dragAndDropIntoCategoriesPage.steps.addInputToColumnInputStepper(8);
+            dragAndDropIntoCategoriesPage.steps.switchToPreviewTab();
+            utilities.verifyElementVisibilityState(dragAndDropIntoCategoriesPage.leftArrowNavigationButtonPreviewTab(), 'visible');
+            utilities.verifyElementVisibilityState(dragAndDropIntoCategoriesPage.rightArrowNavigationButtonPreviewTab(), 'visible');
+        });
+
+        it('By default the left arrow navigation button should be disabled', () => {
+            utilities.verifyElementDisabled(dragAndDropIntoCategoriesPage.leftArrowNavigationButtonPreviewTab());
+        });
+    });
+
+    describe('Specify columns and rows - \'Set first row cells as heading\', \'Set first column cells as heading\' and table cell type menu - Contents and specify columns and rows section', () => {
+        abortEarlySetup();
+        before(() => {
+            dragAndDropIntoCategoriesPage.steps.navigateToCreateQuestion('drag and drop into categories');
+            cy.barsPreLoaderWait();
+        });
+
+        //Default states
+        it('\'Set first row cells as heading\' and \'Set first column cells as heading\' labels and checkboxes should be displayed and by default \'Set first row cells as heading\' checkbox should be checked', () => {
+            utilities.verifyInnerText(dragAndDropIntoCategoriesPage.setFirstRowCellsAsHeadingLabel(), 'Set first row cells as heading');
+            utilities.verifyElementVisibilityState(dragAndDropIntoCategoriesPage.setFirstRowCellsAsHeadingLabel(), 'visible');
+            utilities.verifyElementVisibilityState(dragAndDropIntoCategoriesPage.setFirstRowCellsAsHeadingCheckbox(), 'exist');
+            dragAndDropIntoCategoriesPage.steps.verifySetFirstRowCellsAsHeadingCheckboxIsChecked();
+            utilities.verifyInnerText(dragAndDropIntoCategoriesPage.setFirstColumnCellsAsHeadingLabel(), 'Set first column cells as heading');
+            utilities.verifyElementVisibilityState(dragAndDropIntoCategoriesPage.setFirstColumnCellsAsHeadingLabel(), 'visible');
+            dragAndDropIntoCategoriesPage.steps.verifySetFirstColumnCellsAsHeadingCheckboxIsUnchecked();
+        });
+
+        it('A table based on the default settings of columns and rows should be displayed in the \'Specify columns and rows\' section', () => {
+            utilities.verifyElementVisibilityState(dragAndDropIntoCategoriesPage.specifyColumnsAndRowsTableWrapper(), 'visible');
+            dragAndDropIntoCategoriesPage.steps.verifySpecifyColumnsAndRowsSectionCellProperty(0, 'Heading');
+            dragAndDropIntoCategoriesPage.steps.verifySpecifyColumnsAndRowsSectionCellProperty(1, 'Heading');
+            dragAndDropIntoCategoriesPage.steps.verifySpecifyColumnsAndRowsSectionCellProperty(2, 'Heading');
+            for (let cellIndex = 3; cellIndex < 12; cellIndex++) {
+                dragAndDropIntoCategoriesPage.steps.verifySpecifyColumnsAndRowsSectionCellProperty(cellIndex, 'Dropzone');
+            };
+            for (let cellIndex = 0; cellIndex < 12; cellIndex++) {
+                dragAndDropIntoCategoriesPage.steps.verifyCellPropertyMenuButtonIsDisplayedInACell(cellIndex);
+            };
+        });
+
+        //\'Set first row cells as heading\', \'Set first column cells as heading\' and table cell context menu functionality
+        it('When user unchecks \'Set first row cells as heading\' checkbox, the default first row with heading cells should remain unchanged', () => {
+            dragAndDropIntoCategoriesPage.steps.uncheckSetFirstRowCellsAsHeadingCheckbox();
+            dragAndDropIntoCategoriesPage.steps.verifySpecifyColumnsAndRowsSectionCellProperty(0, 'Heading');
+            dragAndDropIntoCategoriesPage.steps.verifySpecifyColumnsAndRowsSectionCellProperty(1, 'Heading');
+            dragAndDropIntoCategoriesPage.steps.verifySpecifyColumnsAndRowsSectionCellProperty(2, 'Heading');
+        });
+
+        it('When first row cells are not set as heading and user checks the \'Set first row cells as heading\' checkbox, then the first row cells should be set as heading', () => {
+            cy.log('Pre-step: Setting the first row cells as anything other than heading');
+            dragAndDropIntoCategoriesPage.steps.modifyTableCellProperty(0, 'Subheading');
+            dragAndDropIntoCategoriesPage.steps.modifyTableCellProperty(1, 'Text');
+            dragAndDropIntoCategoriesPage.steps.modifyTableCellProperty(2, 'None');
+            dragAndDropIntoCategoriesPage.steps.checkSetFirstRowCellsAsHeadingCheckbox();
+            dragAndDropIntoCategoriesPage.steps.verifySpecifyColumnsAndRowsSectionCellProperty(0, 'Heading');
+            dragAndDropIntoCategoriesPage.steps.verifySpecifyColumnsAndRowsSectionCellProperty(1, 'Heading');
+            dragAndDropIntoCategoriesPage.steps.verifySpecifyColumnsAndRowsSectionCellProperty(2, 'Heading');
+        });
+
+        it('When user checks \'Set first column cells as heading\' checkbox, the first column cells should be set as heading', () => {
+            cy.log('Pre-step: Unchecking the \'Set first row cells as heading\' checkbox');
+            dragAndDropIntoCategoriesPage.steps.uncheckSetFirstRowCellsAsHeadingCheckbox();
+            dragAndDropIntoCategoriesPage.steps.checkSetFirstColumnCellsAsHeadingCheckbox();
+            dragAndDropIntoCategoriesPage.steps.verifySpecifyColumnsAndRowsSectionCellProperty(0, 'Heading');
+            dragAndDropIntoCategoriesPage.steps.verifySpecifyColumnsAndRowsSectionCellProperty(3, 'Heading');
+            dragAndDropIntoCategoriesPage.steps.verifySpecifyColumnsAndRowsSectionCellProperty(6, 'Heading');
+            dragAndDropIntoCategoriesPage.steps.verifySpecifyColumnsAndRowsSectionCellProperty(9, 'Heading');
+        });
+
+        it('When first column cells are set as heading and user unchecks the \'Set first column cells as heading\' checkbox, then the first cell of the first column should remain \'Heading\' whereas others should reset to \'Dropzone\'', () => {
+            dragAndDropIntoCategoriesPage.steps.uncheckSetFirstColumnCellsAsHeadingCheckbox();
+            dragAndDropIntoCategoriesPage.steps.verifySpecifyColumnsAndRowsSectionCellProperty(0, 'Heading');
+            dragAndDropIntoCategoriesPage.steps.verifySpecifyColumnsAndRowsSectionCellProperty(3, 'Dropzone');
+            dragAndDropIntoCategoriesPage.steps.verifySpecifyColumnsAndRowsSectionCellProperty(6, 'Dropzone');
+            dragAndDropIntoCategoriesPage.steps.verifySpecifyColumnsAndRowsSectionCellProperty(9, 'Dropzone');
+        });
+
+        //TODO - Modify when https://redmine.zeuslearning.com/issues/556747 is resolved
+        it.skip('\'Set first row cells as heading\' checkbox is unchecked and first row cells are set to cell types other than heading, here when user checks and unchecks the checkbox, then the first row cells should retain its \'Heading\' cell type', () => {
+
+        });
+
+        it.skip('\'Set first column cells as heading\' checkbox is unchecked and first column cells are set to cell types other than heading, here when user checks and unchecks the checkbox, then the first cell of the first column should remain \'Heading\' whereas others should reset to previously set cell types', () => {
+
+        });
+
+        it(`When user open the cell property menu, a list of ${cellPropertyMenuOptions.length} options should be displayed - ${cellPropertyMenuOptions.join(', ')}`, () => {
+            dragAndDropIntoCategoriesPage.steps.verifyCellPropertyMenuList(0);
+        });
+
+        cellPropertyMenuOptions.forEach((cellType, index) => {
+            it(`When user selects ${cellType} option from the cell property menu, the table cell should be set to ${cellType}`, () => {
+                dragAndDropIntoCategoriesPage.steps.modifyTableCellProperty(index, `${cellType}`);
+                dragAndDropIntoCategoriesPage.steps.verifySpecifyColumnsAndRowsSectionCellProperty(index, `${cellType}`);
+            });
+        });
+
+        it(`For ${cellPropertyMenuOptions[0]} cell type, the table cell input field should be prefilled with a text \'Heading\'`, () => {
+            dragAndDropIntoCategoriesPage.steps.verifyHeadingCellTypeInputFieldText(0, 'Heading');
+        });
+
+        it(`For ${cellPropertyMenuOptions[1]} cell type, the table cell input field should be prefilled with a text \'Subheading\'`, () => {
+            dragAndDropIntoCategoriesPage.steps.verifySubheadingCellTypeInputFieldText(1, 'Subheading');
+        });
+
+        it(`For ${cellPropertyMenuOptions[2]} cell type, the table cell input field should have a placeholder text \'Enter text here...\'`, () => {
+            dragAndDropIntoCategoriesPage.steps.verifyTextCellTypeInputFieldPlaceholderText(2, 'Enter text here...');
+        });
+
+        it(`User should be able to provide input in ${cellPropertyMenuOptions[0], cellPropertyMenuOptions[1], cellPropertyMenuOptions[2]} cell types`, () => {
+            dragAndDropIntoCategoriesPage.steps.editCellHeading(0, 'New heading');
+            dragAndDropIntoCategoriesPage.steps.editCellSubheading(1, 'New subheading');
+            dragAndDropIntoCategoriesPage.steps.editCellText(2, 'New text');
+            dragAndDropIntoCategoriesPage.steps.verifyHeadingCellTypeInputFieldText(0, 'New heading');
+            dragAndDropIntoCategoriesPage.steps.verifySubheadingCellTypeInputFieldText(1, 'New subheading');
+            dragAndDropIntoCategoriesPage.steps.verifyTextCellTypeInputFieldText(2, 'New text');
+        });
+
+        it('In additional settings the number of \'ARIA label for dropzone\' input fields should be the same as the number of dropzone in the \'Specify columns and rows\' section table', () => {
+            cy.log('Pre-step: Expanding additional settings');
+            dragAndDropIntoCategoriesPage.steps.expandAdditionalSettings();
+            utilities.verifyElementCount(dragAndDropIntoCategoriesPage.dropzoneAriaLabelInputField(), 8);
+        });
+
+        it('CSS of \'Set first row cells as heading\', \'Set first column cells as heading\' and table in \'Specify columns and rows\' section', { tags: 'css' }, () => {
+            utilities.verifyCSS(dragAndDropIntoCategoriesPage.setFirstRowCellsAsHeadingLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(dragAndDropIntoCategoriesPage.setFirstColumnCellsAsHeadingLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.regular
+            });
+            //Heading cell
+            utilities.verifyCSS(dragAndDropIntoCategoriesPage.tableCellContainer().eq(0), {
+                'background-color': css.color.matrixHeadingCellBg,
+                'border-color': css.color.activeButtons
+            });
+            utilities.verifyCSS(dragAndDropIntoCategoriesPage.cellHeadingTextArea(), {
+                'color': css.color.text,
+                'font-size': css.fontSize.heading,
+                'font-weight': css.fontWeight.bold
+            });
+            //Subheading cell
+            utilities.verifyCSS(dragAndDropIntoCategoriesPage.tableCellContainer().eq(1), {
+                'background-color': css.color.matrixSubheadingCellBg,
+                'border-color': css.color.activeButtons
+            });
+            utilities.verifyCSS(dragAndDropIntoCategoriesPage.cellSubheadingTextArea(), {
+                'color': css.color.text,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.semibold
+            });
+            //Text cell
+            utilities.verifyCSS(dragAndDropIntoCategoriesPage.tableCellContainer().eq(2), {
+                'background-color': css.color.defaultBackground,
+                'border': `1px dashed ${css.color.activeButtons}`
+            });
+            utilities.verifyCSS(dragAndDropIntoCategoriesPage.cellTextTextArea(), {
+                'color': css.color.text,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+            //Dropzone cell
+            utilities.verifyCSS(dragAndDropIntoCategoriesPage.tableCellContainer().eq(3), {
+                'background-color': css.color.matrixDropzoneCellBg,
+                'border': `1px dashed ${css.color.activeButtons}`
+            });
+            utilities.verifyCSS(dragAndDropIntoCategoriesPage.tableCellContainer().eq(3).find('svg path').eq(0), {
+                'fill': css.color.dropzoneCellIcon
+            });
+            //None cell
+            utilities.verifyCSS(dragAndDropIntoCategoriesPage.tableCellContainer().eq(4), {
+                'background-color': css.color.defaultBackground,
+                'border': `1px dashed ${css.color.activeButtons}`
+            });
+            utilities.verifyCSS(dragAndDropIntoCategoriesPage.tableCellContainer().eq(4).find('svg path'), {
+                'stroke': css.color.noneCellIcon
+            });
+            cy.log('Check set first row cells as heading checkbox');
+            dragAndDropIntoCategoriesPage.steps.checkSetFirstRowCellsAsHeadingCheckbox();
+            utilities.verifyCSS(dragAndDropIntoCategoriesPage.setFirstRowCellsAsHeadingCheckbox().find('g rect').eq(1), {
+                'fill': css.color.matrixHeadingCellBg,
+            });
+            //Cell type menu
+            utilities.verifyCSS(dragAndDropIntoCategoriesPage.editCellPropertyButton().eq(5).find('g g'), {
+                'fill': css.color.primaryBtn
+            });
+            cy.log('Open cell property menu');
+            dragAndDropIntoCategoriesPage.editCellPropertyButton()
+                .eq(5)
+                .click();
+            utilities.verifyCSS(dragAndDropIntoCategoriesPage.editCellPropertyButton().eq(5).find('g g'), {
+                'fill': css.color.selectToolbarOptionBg
+            });
+            utilities.verifyCSS(dragAndDropIntoCategoriesPage.editCellPropertyListOption().find('span[class*="MuiListItemText"]'), {
+                'color': css.color.liText,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(dragAndDropIntoCategoriesPage.editCellPropertyListOption().eq(0).find('span').eq(0), {
+                'fill': css.color.liText
+            });
+            utilities.verifyCSS(dragAndDropIntoCategoriesPage.editCellPropertyListOption().eq(1).find('span').eq(0), {
+                'fill': css.color.liText
+            });
+            utilities.verifyCSS(dragAndDropIntoCategoriesPage.editCellPropertyListOption().eq(2).find('span').eq(0), {
+                'fill': css.color.liText
+            });
+            utilities.verifyCSS(dragAndDropIntoCategoriesPage.editCellPropertyListOption().eq(3).find('span').eq(0), {
+                'fill': css.color.liText
+            });
+            utilities.verifyCSS(dragAndDropIntoCategoriesPage.editCellPropertyListOption().eq(4).find('span').eq(0), {
+                'stroke': css.color.liText
+            });
+            utilities.verifyCSS(dragAndDropIntoCategoriesPage.editCellPropertyListOption().eq(0), {
+                'background-color': css.color.defaultBackground
+            });
+            utilities.verifyCSS(dragAndDropIntoCategoriesPage.editCellPropertyListOption().eq(3), {
+                'background-color': css.color.liTextSelectedBg
+            });
+            cy.log('Closing cell type menu');
+            dragAndDropIntoCategoriesPage.editCellPropertyListOption()
+                .eq(3)
+                .click();
+        });
+
+        it('Accessibility of \'Set first row cells as heading\', \'Set first column cells as heading\' and table in \'Specify columns and rows\' section', { tags: 'a11y' }, () => {
+            cy.log('Expanding cell category menu item');
+            dragAndDropIntoCategoriesPage.editCellPropertyButton()
+                .eq(5)
+                .click();
+            cy.checkAccessibility(dragAndDropIntoCategoriesPage.editCellPropertyList());
+            cy.log('Closing cell type menu');
+            dragAndDropIntoCategoriesPage.editCellPropertyListOption()
+                .eq(3)
+                .click();
+            //Rest is covered in columns and input steppers describe
+        });
+    });
+
+    describe('Specify columns and rows - \'Set first row cells as heading\', \'Set first column cells as heading\' and table cell type menu - Specify correct answer section', () => {
+        abortEarlySetup();
+        before(() => {
+            dragAndDropIntoCategoriesPage.steps.navigateToCreateQuestion('drag and drop into categories');
+            cy.barsPreLoaderWait();
+        });
+
+        it('A table based on the default settings in \'Specify columns and rows\' section should be displayed in the \'Specify correct answer\' section', () => {
+            dragAndDropIntoCategoriesPage.steps.verifySpecifyCorrectAnswerSectionCellProperty(0, 'Heading');
+            dragAndDropIntoCategoriesPage.steps.verifySpecifyCorrectAnswerSectionCellProperty(1, 'Heading');
+            dragAndDropIntoCategoriesPage.steps.verifySpecifyCorrectAnswerSectionCellProperty(2, 'Heading');
+            for (let cellIndex = 3; cellIndex < 12; cellIndex++) {
+                dragAndDropIntoCategoriesPage.steps.verifySpecifyCorrectAnswerSectionCellProperty(cellIndex, 'Dropzone');
+            };
+        });
+
+        //\'Set first row cells as heading\', \'Set first column cells as heading\' and table cell context menu functionality
+        it('When user unchecks \'Set first row cells as heading\' checkbox, then in \'Specify correct answer\' section the table first row should have heading cells', () => {
+            dragAndDropIntoCategoriesPage.steps.uncheckSetFirstRowCellsAsHeadingCheckbox();
+            dragAndDropIntoCategoriesPage.steps.verifySpecifyCorrectAnswerSectionCellProperty(0, 'Heading');
+            dragAndDropIntoCategoriesPage.steps.verifySpecifyCorrectAnswerSectionCellProperty(1, 'Heading');
+            dragAndDropIntoCategoriesPage.steps.verifySpecifyCorrectAnswerSectionCellProperty(2, 'Heading');
+        });
+
+        it('When first row cells are not set as heading and user checks the \'Set first row cells as heading\' checkbox, then in \'Specify correct answer\' section table first row should have heading cells', () => {
+            cy.log('Pre-step: Setting the first row cells as anything other than heading');
+            dragAndDropIntoCategoriesPage.steps.modifyTableCellProperty(0, 'Subheading');
+            dragAndDropIntoCategoriesPage.steps.modifyTableCellProperty(1, 'Text');
+            dragAndDropIntoCategoriesPage.steps.modifyTableCellProperty(2, 'None');
+            dragAndDropIntoCategoriesPage.steps.checkSetFirstRowCellsAsHeadingCheckbox();
+            dragAndDropIntoCategoriesPage.steps.verifySpecifyCorrectAnswerSectionCellProperty(0, 'Heading');
+            dragAndDropIntoCategoriesPage.steps.verifySpecifyCorrectAnswerSectionCellProperty(1, 'Heading');
+            dragAndDropIntoCategoriesPage.steps.verifySpecifyCorrectAnswerSectionCellProperty(2, 'Heading');
+        });
+
+        it('When user checks \'Set first column cells as heading\' checkbox, then in \'Specify correct answer\' section table first column should have heading cells', () => {
+            cy.log('Pre-step: Unchecking the \'Set first row cells as heading\' checkbox');
+            dragAndDropIntoCategoriesPage.steps.uncheckSetFirstRowCellsAsHeadingCheckbox();
+            dragAndDropIntoCategoriesPage.steps.checkSetFirstColumnCellsAsHeadingCheckbox();
+            dragAndDropIntoCategoriesPage.steps.verifySpecifyCorrectAnswerSectionCellProperty(0, 'Heading');
+            dragAndDropIntoCategoriesPage.steps.verifySpecifyCorrectAnswerSectionCellProperty(3, 'Heading');
+            dragAndDropIntoCategoriesPage.steps.verifySpecifyCorrectAnswerSectionCellProperty(6, 'Heading');
+            dragAndDropIntoCategoriesPage.steps.verifySpecifyCorrectAnswerSectionCellProperty(9, 'Heading');
+        });
+
+        it('When first column cells are set as heading and user unchecks the \'Set first column cells as heading\' checkbox, then in \'Specify correct answer\' section table the first cell of the first column should remain \'Heading\' whereas others should reset to \'Dropzone\'', () => {
+            dragAndDropIntoCategoriesPage.steps.uncheckSetFirstColumnCellsAsHeadingCheckbox();
+            dragAndDropIntoCategoriesPage.steps.verifySpecifyCorrectAnswerSectionCellProperty(0, 'Heading');
+            dragAndDropIntoCategoriesPage.steps.verifySpecifyCorrectAnswerSectionCellProperty(3, 'Dropzone');
+            dragAndDropIntoCategoriesPage.steps.verifySpecifyCorrectAnswerSectionCellProperty(6, 'Dropzone');
+            dragAndDropIntoCategoriesPage.steps.verifySpecifyCorrectAnswerSectionCellProperty(9, 'Dropzone');
+        });
+
+        it(`When user open the cell property menu, a list of ${cellPropertyMenuOptions.length} options should be displayed - ${cellPropertyMenuOptions.join(', ')}`, () => {
+            dragAndDropIntoCategoriesPage.steps.verifyCellPropertyMenuList(0);
+        });
+
+        cellPropertyMenuOptions.forEach((cellType, index) => {
+            it(`When user selects ${cellType} option from the cell property menu, then the table cell in \'Specify correct answer\' section should be set to ${cellType} and `, () => {
+                dragAndDropIntoCategoriesPage.steps.modifyTableCellProperty(index, `${cellType}`);
+                dragAndDropIntoCategoriesPage.steps.verifySpecifyCorrectAnswerSectionCellProperty(index, `${cellType}`);
+            });
+        });
+
+        it('When user provides and input to \'Heading\', \'Subheading\', \'Text\' cell types in \'Specify columns and rows\' table, then in \'Specify correct answer\' section table the added input should be reflected', () => {
+            dragAndDropIntoCategoriesPage.steps.editCellHeading(0, 'New heading');
+            dragAndDropIntoCategoriesPage.steps.editCellSubheading(1, 'New subheading');
+            dragAndDropIntoCategoriesPage.steps.editCellText(2, 'New text');
+            dragAndDropIntoCategoriesPage.steps.verifyCellLabelInSpecifyCorrectAnswer(0, 'New heading');
+            dragAndDropIntoCategoriesPage.steps.verifyCellLabelInSpecifyCorrectAnswer(1, 'New subheading');
+            dragAndDropIntoCategoriesPage.steps.verifyCellLabelInSpecifyCorrectAnswer(2, 'New text');
+        });
+    });
+
+    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(() => {
+            dragAndDropIntoCategoriesPage.steps.navigateToCreateQuestion('drag and drop into categories');
+            cy.barsPreLoaderWait();
+        });
+
+        it('When user unchecks \'Set first row cells as heading\' checkbox, then in preview tab the default first row with heading cells should remain unchanged', () => {
+            dragAndDropIntoCategoriesPage.steps.uncheckSetFirstRowCellsAsHeadingCheckbox();
+            dragAndDropIntoCategoriesPage.steps.switchToPreviewTab();
+            dragAndDropIntoCategoriesPage.steps.verifyTableCellPropertyPreviewTab(0, 'Heading');
+            dragAndDropIntoCategoriesPage.steps.verifyTableCellPropertyPreviewTab(1, 'Heading');
+            dragAndDropIntoCategoriesPage.steps.verifyTableCellPropertyPreviewTab(2, 'Heading');
+        });
+
+        it('When first row cells are not set as heading and user checks the \'Set first row cells as heading\' checkbox, then in preview tab the first row cells should be set as heading', () => {
+            cy.log('Pre-step: Setting the first row cells as anything other than heading');
+            dragAndDropIntoCategoriesPage.steps.switchToEditTab();
+            dragAndDropIntoCategoriesPage.steps.modifyTableCellProperty(0, 'Subheading');
+            dragAndDropIntoCategoriesPage.steps.modifyTableCellProperty(1, 'Text');
+            dragAndDropIntoCategoriesPage.steps.modifyTableCellProperty(2, 'None');
+            dragAndDropIntoCategoriesPage.steps.checkSetFirstRowCellsAsHeadingCheckbox();
+            dragAndDropIntoCategoriesPage.steps.switchToPreviewTab();
+            dragAndDropIntoCategoriesPage.steps.verifyTableCellPropertyPreviewTab(0, 'Heading');
+            dragAndDropIntoCategoriesPage.steps.verifyTableCellPropertyPreviewTab(1, 'Heading');
+            dragAndDropIntoCategoriesPage.steps.verifyTableCellPropertyPreviewTab(2, 'Heading');
+        });
+
+        it('When user checks \'Set first column cells as heading\' checkbox, then in preview tab the first column cells should be set as heading', () => {
+            cy.log('Pre-step: Unchecking the \'Set first row cells as heading\' checkbox');
+            dragAndDropIntoCategoriesPage.steps.switchToEditTab();
+            dragAndDropIntoCategoriesPage.steps.uncheckSetFirstRowCellsAsHeadingCheckbox();
+            dragAndDropIntoCategoriesPage.steps.checkSetFirstColumnCellsAsHeadingCheckbox();
+            dragAndDropIntoCategoriesPage.steps.switchToPreviewTab();
+            dragAndDropIntoCategoriesPage.steps.verifyTableCellPropertyPreviewTab(0, 'Heading');
+            dragAndDropIntoCategoriesPage.steps.verifyTableCellPropertyPreviewTab(3, 'Heading');
+            dragAndDropIntoCategoriesPage.steps.verifyTableCellPropertyPreviewTab(6, 'Heading');
+            dragAndDropIntoCategoriesPage.steps.verifyTableCellPropertyPreviewTab(9, 'Heading');
+        });
+
+        it('When first column cells are set as heading and user unchecks the \'Set first column cells as heading\' checkbox, then in preview tab the first cell of the first column should remain \'Heading\' whereas others should reset to \'Dropzone\'', () => {
+            dragAndDropIntoCategoriesPage.steps.switchToEditTab();
+            dragAndDropIntoCategoriesPage.steps.uncheckSetFirstColumnCellsAsHeadingCheckbox();
+            dragAndDropIntoCategoriesPage.steps.switchToPreviewTab();
+            dragAndDropIntoCategoriesPage.steps.verifyTableCellPropertyPreviewTab(0, 'Heading');
+            dragAndDropIntoCategoriesPage.steps.verifyTableCellPropertyPreviewTab(3, 'Dropzone');
+            dragAndDropIntoCategoriesPage.steps.verifyTableCellPropertyPreviewTab(6, 'Dropzone');
+            dragAndDropIntoCategoriesPage.steps.verifyTableCellPropertyPreviewTab(9, 'Dropzone');
+        });
+
+        //TODO - Modify when https://redmine.zeuslearning.com/issues/556747 is resolved
+        it.skip('\'Set first row cells as heading\' checkbox is unchecked and first row cells are set to cell types other than heading, here when user checks and unchecks the checkbox, then in preview tab the first row cells should retain its \'Heading\' cell type', () => {
+
+        });
+
+        it.skip('\'Set first column cells as heading\' checkbox is unchecked and first column cells are set to cell types other than heading, here when user checks and unchecks the checkbox, then in preview tab the first cell of the first column should remain \'Heading\' whereas others should reset to previously set cell types', () => {
+
+        });
+
+        cellPropertyMenuOptions.forEach((cellType, index) => {
+            it(`When user selects ${cellType} option from the cell property menu, then in preview tab the table cell should be set to ${cellType}`, () => {
+                dragAndDropIntoCategoriesPage.steps.switchToEditTab();
+                dragAndDropIntoCategoriesPage.steps.modifyTableCellProperty(index, `${cellType}`);
+                dragAndDropIntoCategoriesPage.steps.switchToPreviewTab();
+                dragAndDropIntoCategoriesPage.steps.verifyTableCellPropertyPreviewTab(index, `${cellType}`);
+            });
+        });
+
+        it(`For ${cellPropertyMenuOptions[0]} cell type, in preview tab the table cell label should be \'Heading\'`, () => {
+            dragAndDropIntoCategoriesPage.steps.verifyCellLabelInPreviewTabTable(0, 'Heading');
+        });
+
+        it(`For ${cellPropertyMenuOptions[1]} cell type, in preview tab the table cell label should be \'Subheading\'`, () => {
+            dragAndDropIntoCategoriesPage.steps.verifyCellLabelInPreviewTabTable(1, 'Subheading');
+        });
+
+        it(`For ${cellPropertyMenuOptions[2]} cell type, in preview tab the table cell should not have any label`, () => {
+            dragAndDropIntoCategoriesPage.steps.verifyCellLabelInPreviewTabTable(2, '');
+        });
+
+        it(`When user provides an input in ${cellPropertyMenuOptions[0], cellPropertyMenuOptions[1], cellPropertyMenuOptions[2]} cell type text fields and then in preview tab the provided input should be displayed in its respective cells`, () => {
+            dragAndDropIntoCategoriesPage.steps.switchToEditTab();
+            dragAndDropIntoCategoriesPage.steps.editCellHeading(0, 'New heading');
+            dragAndDropIntoCategoriesPage.steps.editCellSubheading(1, 'New subheading');
+            dragAndDropIntoCategoriesPage.steps.editCellText(2, 'New text');
+            dragAndDropIntoCategoriesPage.steps.switchToPreviewTab();
+            dragAndDropIntoCategoriesPage.steps.verifyCellLabelInPreviewTabTable(0, 'New heading');
+            dragAndDropIntoCategoriesPage.steps.verifyCellLabelInPreviewTabTable(1, 'New subheading');
+            dragAndDropIntoCategoriesPage.steps.verifyCellLabelInPreviewTabTable(2, 'New text');
+        });
+    });
+});