itemengine-cypress-automation 1.0.86 → 1.0.88

package/cypress/pages/essayResponsePage.js

@@ -1,8 +1,9 @@
 import { equationEditorCategoriesAndSymbols } from "../fixtures/equationEditorCategoriesAndSymbols ";
-import { questionInstructionsComponent, scoringSectionBaseEditTab, createQuestionBasePage, additionalSettingsPanel, autoScoredScoringPreviewTab, commonComponents } from "./components";
+import { questionInstructionsComponent, scoringSectionBaseEditTab, createQuestionBasePage, additionalSettingsPanel, autoScoredScoringPreviewTab, commonComponents, createCustomCategoryFlyout } from "./components";
 import { equationEditorFlyout } from "./components/equationEditorFlyout";
 import { essayResponseCommonComponents } from "./components/essayResponseCommonComponents";
 import { specialOrMathCharacters } from "../fixtures/specialAndMathCharacters";
+import utilities from "../support/helpers/utilities";
 const css = Cypress.env('css');
 
 let originalText;
@@ -23,6 +24,15 @@ const selectors = {
     allowSubmissionOverWordLimitCheckbox: () => cy.get('[data-ngie-testid="allow-submission-over-word-limit-checkbox"] input'),
     showWordCountLabel: () => cy.get('[data-ngie-testid="show-word-count-checkbox"] .MuiFormControlLabel-label'),
     showWordCountCheckbox: () => cy.get('[data-ngie-testid="show-word-count-checkbox"] input'),
+
+    //Table in preview tab
+    tableGrid: () => cy.get('tbody'),
+    tableRow: () => cy.get('tr'),
+    tableCell: () => cy.get('td'),
+    tableHeaderRow: () => cy.get('thead'),
+    tableHeaderCell: () => cy.get('th'),
+
+    ///Old
     //Customize Formatting Options
     customizeFormattingOptionsAccordion: () => cy.get('.customize-formatting-option-wrapper .ngie-accordion-summary'),
     customizeFormattingOptionsAccordionLabel: () => cy.get('.customize-formatting-options-label'),
@@ -48,33 +58,36 @@ const selectors = {
     equationEditorSectionCategoriesEditIcon: () => cy.get('.edit-icon-button button'),
     equationEditorSectionTickIcon: () => cy.get('.tick-icon-wrapper'),
     selectACategoryErrorMessage: () => cy.get('[class*="ErrorBlock"]'),
-    createCustomCategoryButton: () => cy.get('.equation-editor-wrapper button'),
     equationEditorSectionCategoryIcon: () => cy.get('.equation-editor-icon'),
     equationEditorSectionDeleteCustomCategoryIcon: () => cy.get('.delete-button-icon button')
 }
 
-const tableDialogBox = {    //TODO: Once redmine issue is fixed the selectors will get changed to this: editTableDialogboxAddHeaderRowLabel: () => cy.get('.add-table-dialog .chk_box_add_header_row')
+const tableDialogBox = {    //TODO: Once redmine issue is fixed the selectors will get changed to this: editTableDialogBoxAddRowHeaderLabel: () => cy.get('.add-table-dialog .chk_box_add_header_row')
     //Add table dialog box
-    addTableDialogBox: () => cy.get('a[title="Add Table"]').parents('.cke_dialog_body'),
-    addTableDialogBoxTitle: () => essayResponsePage.addTableDialogBox().find('.cke_dialog_title'),
-    addTableDialogBoxAddHeaderRowLabel: () => essayResponsePage.addTableDialogBox().find('.chk_box_add_header_row'),
-    addTableDialogBoxHighlightFirstColumnLabel: () => cy.get('.cke_dialog_ui_checkbox_input').eq(1).parent().find('label'),    //TODO- Need to update. No unique property available.
-    addTableDialogBoxAddHeaderRowCheckbox: () => essayResponsePage.addTableDialogBox().find('[class*="cke_dialog_ui_checkbox_input"]').eq(0),
-    addTableDialogBoxHighlightFirstColumnCheckbox: () => essayResponsePage.addTableDialogBox().find('[class*="cke_dialog_ui_checkbox_input"]').eq(1),
+    addTableDialogBox: () => cy.get('.cke_dialog_body'),
+    addTableDialogBoxTitle: () => cy.get('.cke_dialog_title'),
+    addTableDialogBoxAddRowHeaderLabel: () => cy.get('.chk_box_add_header_row label'),
+    addTableDialogBoxHighlightFirstColumnLabel: () => cy.get('[class="cke_dialog_ui_checkbox custom-table-title-casing"] label'),
+    addTableDialogBoxAddHeaderRowCheckbox: () => cy.get('.chk_box_add_header_row input').eq(0),
+    addTableDialogBoxHighlightFirstColumnCheckbox: () => cy.get('[class="cke_dialog_ui_checkbox custom-table-title-casing"] input').eq(0),
     addTableDialogBoxButtonAddTable: () => cy.get('a[title="Add Table"]'),
-    addTableDialogBoxButtonCancel: () => essayResponsePage.addTableDialogBox().find('a[class*="cancel-button"]'),
-    addTableDialogBoxColumnsLabel: () => essayResponsePage.addTableDialogBox().find('.cke_dialog_ui_labeled_label').eq(0),
-    addTableDialogBoxRowsLabel: () => essayResponsePage.addTableDialogBox().find('.cke_dialog_ui_labeled_label').eq(1),
-    addTableDialogBoxColumnsInputField: () => essayResponsePage.addTableDialogBox().find('input[class="cke_dialog_ui_input_text"][type="number"]').eq(0),
-    addTableDialogBoxRowsInputField: () => essayResponsePage.addTableDialogBox().find('input[class="cke_dialog_ui_input_text"][type="number"]').eq(1),
+    addTableDialogBoxButtonCancel: () => cy.get('a[class*="cancel-button"]'),
+    addTableDialogBoxColumnsLabel: () => cy.get('.cke_dialog_ui_labeled_label').eq(0),
+    addTableDialogBoxRowsLabel: () => cy.get('.cke_dialog_ui_labeled_label').eq(1),
+    addTableDialogBoxColumnsInputField: () => cy.get('input[class="cke_dialog_ui_input_text"][type="number"]').eq(0),
+    addTableDialogBoxRowsInputField: () => cy.get('input[class="cke_dialog_ui_input_text"][type="number"]').eq(1),
+    addTableColumnsInputFieldIncrementButton: () => cy.get('#incrementColButton'),
+    addTableColumnsInputFieldDecrementButton: () => cy.get('#decrementColButton'),
+    addTableRowsInputFieldIncrementButton: () => cy.get('#incrementRowButton'),
+    addTableRowsInputFieldDecrementButton: () => cy.get('#decrementRowButton'),
     previewInputFieldTable: () => cy.get('.ngcke_custom_table'),
-    previewTabToolbarDialogboxIconClose: () => essayResponsePage.addTableDialogBox().find('a[title="Close"]'),
     //Edit Table Dialog Box
-    editTableDialogBox: () => cy.get('[title="Save"]').parents('.cke_dialog_body'),
-    editTableDialogBoxAddHeaderRowLabel: () => essayResponsePage.editTableDialogBox().find('.chk_box_add_header_row').eq(0),
-    editTableDialogBoxHighlightFirstColumnLabel: () => essayResponsePage.editTableDialogBox().find('.chk_box_highlight_first_column').eq(0),
-    editTableDialogBoxAddHeaderRowCheckbox: () => essayResponsePage.editTableDialogBox().find('[class*="cke_dialog_ui_checkbox_input"]').eq(0),
-    editTableDialogBoxHighlightFirstColumnCheckbox: () => essayResponsePage.editTableDialogBox().find('[class*="cke_dialog_ui_checkbox_input"]').eq(1),
+    editTableDialogBox: () => cy.get('.cke_dialog_body').eq(1),
+    editTableDialogBoxTitle: () => cy.get('.cke_dialog_title').eq(1),
+    editTableDialogBoxAddRowHeaderLabel: () => cy.get('.chk_box_add_header_row label').eq(1),
+    editTableDialogBoxHighlightFirstColumnLabel: () => cy.get('.chk_box_highlight_first_column label'),
+    editTableDialogBoxAddRowHeaderCheckbox: () => cy.get('.chk_box_add_header_row input').eq(1),
+    editTableDialogBoxHighlightFirstColumnCheckbox: () => cy.get('.chk_box_highlight_first_column input'),
     editTableDialogBoxColumnsLabel: () => essayResponsePage.editTableDialogBox().find('.cke_dialog_ui_labeled_label').eq(0),
     editTableDialogBoxRowsLabel: () => essayResponsePage.editTableDialogBox().find('.cke_dialog_ui_labeled_label').eq(1),
     editTableDialogBoxInsertBeforeButton: () => cy.get('[title="Insert Before"]'),
@@ -115,6 +128,575 @@ const steps = {
     ...scoringSectionBaseEditTab.steps,
     ...additionalSettingsPanel.steps,
     ...essayResponseCommonComponents.steps,
+
+    /**
+     * Verify newly added custom category container is displayed
+     * @param {string} customCategoryName Custom category name
+     * @param {string} customCategoryIcon Custom category icon
+     */
+    verifyAddedCustomCategoryContainerIsDisplayed: (customCategoryName, customCategoryIcon) => {
+        essayResponsePage.equationEditorSectionCategories()
+            .last()
+            .should('have.attr', 'aria-label', `${customCategoryName}`)
+            .within(() => {
+                utilities.verifyInnerText(essayResponsePage.equationEditorSectionCategoryLabel(), `${customCategoryName}`);
+                utilities.verifyInnerText(essayResponsePage.equationEditorSectionCategoryIcon(), `${customCategoryIcon}`);
+            });
+        utilities.verifyElementVisibilityState(essayResponsePage.equationEditorSectionCategories().last(), 'visible');
+    },
+
+    createCustomCategoryWithMultipleCategoryCharacters: () => {
+        cy.log('Creating a custom category by selecting \'Keypad\' category, partially selecting \'Basic\' and \'Greek\' categories')
+        createCustomCategoryFlyout.steps.openCreateCustomCategoryFlyout();
+        createCustomCategoryFlyout.steps.checkCategoryAccordionCheckbox(`${equationEditorCategoriesAndSymbols['keypad'].displayName}`);
+        createCustomCategoryFlyout.steps.verifyPartiallyCheckedStateOfCategoryAccordionCheckbox(`${equationEditorCategoriesAndSymbols['basic'].displayName}`);
+        createCustomCategoryFlyout.steps.expandCategoryAccordion(`${equationEditorCategoriesAndSymbols['greek'].displayName}`);
+        createCustomCategoryFlyout.steps.selectASymbolInCreateCustomCategoryFlyout(`${equationEditorCategoriesAndSymbols['greek'].displayName}`, `${equationEditorCategoriesAndSymbols.greek.symbols.gamma.ariaLabel}`);
+        createCustomCategoryFlyout.steps.selectASymbolInCreateCustomCategoryFlyout(`${equationEditorCategoriesAndSymbols['greek'].displayName}`, `${equationEditorCategoriesAndSymbols.greek.symbols.delta.ariaLabel}`);
+        createCustomCategoryFlyout.steps.addInputToCustomCategoryNameInputField('Custom category with name.');
+        createCustomCategoryFlyout.steps.saveCustomCategory();
+        utilities.verifyElementVisibilityState(dialogBoxBase.dialogBox(), 'notExist');
+    },
+
+    /**
+     * @description verify added custom category container is displayed with edit and delete button
+     * @param {string} customCategoryName Name of custom category
+     */
+    verifyAddedCustomCategoryContainerEditAndDeleteButtonDisplayed: (customCategoryName) => {
+        essayResponsePage.equationEditorSectionCategories()
+            .contains(`${customCategoryName}`)
+            .parents('[id*="DraggableItem"]')
+            .within(() => {
+                utilities.verifyElementVisibilityState(essayResponsePage.equationEditorSectionCategoriesEditIcon, ('visible'));
+                utilities.verifyElementVisibilityState(essayResponsePage.equationEditorSectionDeleteCustomCategoryIcon, ('visible'));
+            });
+    },
+
+    /**
+     * @description deselect category in equation editor section in edit tab
+     * @param {string} categoryName Name of category
+     */
+    deselectCategoryInEquationEditorSectionEditTab: (categoryName) => {
+        essayResponsePage.equationEditorSectionCategories()
+            .contains(`${categoryName}`)
+            .click();
+    },
+
+    /**
+     * @description delete category in equation editor section in edit tab
+     * @param {string} categoryName Name of category
+     */
+    deleteCustomCategoryInEquationEditorSectionEditTab: (categoryName) => {
+        essayResponsePage.equationEditorSectionCategories()
+            .contains(`${categoryName}`)
+            .parents('[id*="DraggableItem"]')
+            .within(() => {
+                essayResponsePage.equationEditorSectionDeleteCustomCategoryIcon()
+                    .click();
+            });
+        utilities.verifyElementVisibilityState(essayResponsePage.equationEditorSectionCategories().contains(`${categoryName}`), 'notExist');
+    },
+
+    /**
+     * @description edit category in equation editor section in edit tab
+     * @param {string} categoryName Name of category
+     */
+    editCategoryInEquationEditorSectionEditTab: (categoryName) => {
+        essayResponsePage.equationEditorSectionCategories()
+            .contains(`${categoryName}`)
+            .parents('[id*="DraggableItem"]')
+            .within(() => {
+                essayResponsePage.equationEditorSectionCategoriesEditIcon()
+                    .click();
+            });
+    },
+
+    verifyCSSOfSelectedSymbols: () => {
+        utilities.getNthElement(createCustomCategoryFlyout.selectedSymbols(), 0)
+            .within(() => {
+                utilities.verifyCSS(essayResponsePage.equationEditorSectionTickIcon().find('[data-name*="Icon"]'), {
+                    'fill': css.color.activeButtons
+                });
+                utilities.verifyCSS(essayResponsePage.equationEditorSectionTickIcon().find('path'), {
+                    'fill': css.color.activeButtons
+                });
+            });
+    },
+
+    /**
+     * @description verify the value of columns input field in table flyout
+     * @param {number} numberOfColumns 
+     */
+    verifyTableFlyoutColumnsInputFieldValue: (numberOfColumns) => {
+        essayResponsePage.addTableDialogBoxColumnsInputField()
+            .should('have.value', `${numberOfColumns}`)
+    },
+
+    /**
+    * @description edit columns input field in table flyout
+    * @param {number} numberOfColumns 
+    */
+    editTableFlyoutColumnsInputField: (numberOfColumns) => {
+        essayResponsePage.addTableDialogBoxColumnsInputField()
+            .clear()
+            .type(`${numberOfColumns}`)
+            .should('have.value', `${numberOfColumns}`);
+    },
+
+    /**
+    * @description increment columns input field in table flyout
+    * @param {number} numberOfIncrement The number by which columns input field should be incremented
+    */
+    incrementTableFlyoutColumnsInputField: (numberOfIncrement) => {
+        for (let i = 0; i < numberOfIncrement; i++) {
+            essayResponsePage.addTableColumnsInputFieldIncrementButton()
+                .click();
+        }
+    },
+
+    /**
+    * @description decrement columns input field in table flyout
+    * @param {number} numberOfDecrement The number by which columns input field should be decremented
+    */
+    decrementTableFlyoutColumnsInputField: (numberOfDecrement) => {
+        for (let i = 0; i < numberOfDecrement; i++) {
+            essayResponsePage.addTableColumnsInputFieldDecrementButton()
+                .click();
+        }
+    },
+
+    /**
+     * @description verify the value of rows input field in table flyout
+     * @param {number} numberOfRows 
+     */
+    verifyTableFlyoutRowsInputFieldValue: (numberOfRows) => {
+        essayResponsePage.addTableDialogBoxRowsInputField()
+            .should('have.value', `${numberOfRows}`)
+    },
+
+    /**
+    * @description edit rows input field in table flyout
+    * @param {number} numberOfRows 
+    */
+    editTableFlyoutRowsInputField: (numberOfRows) => {
+        essayResponsePage.addTableDialogBoxRowsInputField()
+            .clear()
+            .type(`${numberOfRows}`)
+            .should('have.value', `${numberOfRows}`);
+    },
+
+    /**
+    * @description increment rows input field in table flyout
+    * @param {number} numberOfIncrement The number by which rows input field should be incremented
+    */
+    incrementTableFlyoutRowsInputField: (numberOfIncrement) => {
+        for (let i = 0; i < numberOfIncrement; i++) {
+            essayResponsePage.addTableRowsInputFieldIncrementButton()
+                .click();
+        }
+    },
+
+    /**
+    * @description decrement rows input field in table flyout
+    * @param {number} numberOfDecrement The number by which rows input field should be decremented
+    */
+    decrementTableFlyoutRowsInputField: (numberOfDecrement) => {
+        for (let i = 0; i < numberOfDecrement; i++) {
+            essayResponsePage.addTableRowsInputFieldDecrementButton()
+                .click();
+        }
+    },
+
+    verifyMinimumAndMaximumValueOfTableFlyoutColumnsAndRowsInputField: () => {
+        essayResponsePage.addTableDialogBoxColumnsInputField()
+            .should('have.attr', 'min', '1')
+            .and('have.attr', 'max', '999');
+        essayResponsePage.addTableDialogBoxRowsInputField()
+            .should('have.attr', 'min', '1')
+            .and('have.attr', 'max', '999');
+    },
+
+    verifyUncheckedStateOfAddRowHeaderHighlightFirstColumnCheckbox: () => {
+        essayResponsePage.addTableDialogBoxAddHeaderRowCheckbox()
+            .should('not.be.checked');
+        essayResponsePage.addTableDialogBoxHighlightFirstColumnCheckbox()
+            .should('not.be.checked');
+    },
+
+    clickOnTableFlyoutCancelButton: () => {
+        essayResponsePage.addTableDialogBoxButtonCancel()
+            .click();
+    },
+
+    addTable: () => {
+        essayResponsePage.addTableDialogBoxButtonAddTable()
+            .click();
+    },
+
+    checkAddRowHeaderCheckbox: () => {
+        essayResponsePage.addTableDialogBoxAddHeaderRowCheckbox()
+            .click({ force: true });
+    },
+
+    clickOnEditTableAddRowHeaderCheckbox: () => {
+        essayResponsePage.editTableDialogBoxAddRowHeaderCheckbox()
+            .click({ force: true });
+    },
+
+    checkHighlightFirstColumnCheckbox: () => {
+        essayResponsePage.addTableDialogBoxHighlightFirstColumnCheckbox()
+            .click({ force: true });
+    },
+
+    clickOnEditTableHighlightFirstColumnCheckbox: () => {
+        essayResponsePage.editTableDialogBoxHighlightFirstColumnCheckbox()
+            .click({ force: true });
+    },
+
+    /**
+     * Verify the table properties of the added table in preview tab
+     * @param {number} numberOfRows number of rows in the added table
+     * @param {number} numberOfStandardCells number of standard cells in the added table
+     * @param {number} numberOfHeaderCells number of header cells in the added table
+     */
+    verifyTableProperties: (numberOfRows, numberOfStandardCells, numberOfHeaderCells=null) => {
+        essayResponsePage.previewInputFieldTable()
+            .within(() => {
+                utilities.verifyElementCount(essayResponsePage.tableRow(), numberOfRows);
+                utilities.verifyElementCount(essayResponsePage.tableCell(), numberOfStandardCells);
+                if (numberOfHeaderCells) {
+                    utilities.verifyElementCount(essayResponsePage.tableHeaderCell(), numberOfHeaderCells);
+                }
+            });
+    },
+
+    /**
+     * Verify the count of header cell in table header row 
+     * @param {number} numberOfHeaderRowCells number of header cells in table header row 
+     */
+    verifyTableHeaderRowCellCount: (numberOfHeaderRowCells) => {
+        essayResponsePage.previewInputFieldTable()
+            .within(() => {
+                essayResponsePage.tableHeaderRow()
+                    .within(() => {
+                        utilities.verifyElementCount(essayResponsePage.tableHeaderCell(), numberOfHeaderRowCells);
+                    });
+            });
+    },
+
+    /**
+     * Verify the count of header cells in table row 
+     * @param {number} numberOfHeaderCells number of header cells in table row 
+     * @param {number} rowIndex index of table row 
+     */
+    verifyTableRowHeaderCellCount: (rowIndex, numberOfHeaderCells) => {
+        essayResponsePage.previewInputFieldTable()
+            .within(() => {
+                utilities.getNthElement(essayResponsePage.tableRow(), rowIndex)
+                    .within(() => {
+                        utilities.verifyElementCount(essayResponsePage.tableHeaderCell(), numberOfHeaderCells);
+                    });
+            });
+    },
+
+    /**
+    * Verify the count of standard cells in table row 
+    * @param {number} numberOfStandardCells number of standard cells in table row 
+    * @param {number} rowIndex index of table row 
+    */
+    verifyTableRowStandardCellCount: (rowIndex, numberOfStandardCells) => {
+        essayResponsePage.previewInputFieldTable()
+            .within(() => {
+                utilities.getNthElement(essayResponsePage.tableRow(), rowIndex)
+                    .within(() => {
+                        utilities.verifyElementCount(essayResponsePage.tableCell(), numberOfStandardCells);
+                    });
+            });
+    },
+
+    /**
+     * @description verify the count of rows in table
+     * @param {number} numberOfRows 
+     */
+    verifyTableRowCount: (numberOfRows) => {
+        essayResponsePage.previewInputFieldTable()
+            .within(() => {
+                utilities.verifyElementCount(essayResponsePage.tableRow(), numberOfRows);
+            });
+    },
+
+    /**
+     * Verify first column is highlighted in the table
+     * @param {number} numberOfTableCellsPerRow number of normal table cells per row
+     */
+    verifyFirstColumnsIsHighlighted: (numberOfTableCellsPerRow) => {
+        essayResponsePage.previewInputFieldTable()
+            .within(() => {
+                essayResponsePage.tableGrid()
+                    .within(() => {
+                        essayResponsePage.tableRow()
+                            .each(($element) => {
+                                cy.wrap($element)
+                                    .within(() => {
+                                        utilities.verifyElementCount(essayResponsePage.tableHeaderCell(), 1);
+                                        utilities.verifyElementCount(essayResponsePage.tableCell(), numberOfTableCellsPerRow);
+                                    });
+                            });
+                    });
+            });
+    },
+
+    verifyTableHeaderCellsAreHighlighted: () => {
+        essayResponsePage.previewInputFieldTable()
+            .within(() => {
+                essayResponsePage.tableHeaderCell()
+                    .each(($element) => {
+                        expect($element).to.have.css('background-color', css.color.highlightedTableCell);
+                    });
+            });
+    },
+
+    verifyTableNormalCellsAreNotHighlighted: () => {
+        essayResponsePage.previewInputFieldTable()
+            .within(() => {
+                essayResponsePage.tableCell()
+                    .each(($element) => {
+                        expect($element).to.have.css('background-color', css.color.transparent);   //To check that td cells are standard cells
+                    });
+            });
+    },
+
+    /**
+     * Add input to table header cell
+     * @param {number} headerCellIndex index of header cell in the table
+     * @param {string} cellInput Input to be given in header cell
+     */
+    addInputToTableHeaderCell: (headerCellIndex, cellInput) => {
+        utilities.getNthElement(essayResponsePage.tableHeaderCell(), headerCellIndex)
+            .type(`${cellInput}`);
+    },
+
+    /**
+     * Verify input added in table header cell
+     * @param {number} headerCellIndex index of header cell in the table
+     * @param {string} cellContent Input in header cell
+     */
+    verifyContentOfTableHeaderCell: (headerCellIndex, cellContent) => {
+        utilities.verifyInnerText(utilities.getNthElement(essayResponsePage.tableHeaderCell(), headerCellIndex), `${cellContent}`);
+    },
+
+    /**
+     * Add input to normal table cell
+     * @param {number} headerCellIndex index of normal cell in the table
+     * @param {string} cellInput Input to be given in normal table cell
+     */
+    addInputToTableCell: (cellIndex, cellInput) => {
+        utilities.getNthElement(essayResponsePage.tableCell(), cellIndex)
+            .type(`${cellInput}`);
+    },
+
+    /**
+     * Verify input added in table standard cell
+     * @param {number} cellIndex index of standard cell in the table
+     * @param {string} cellContent Input in standard cell
+     */
+    verifyContentOfTableStandardCell: (cellIndex, cellContent) => {
+        utilities.verifyInnerText(utilities.getNthElement(essayResponsePage.tableCell(), cellIndex), `${cellContent}`);
+    },
+
+    compareColumnWidthsWhenInputIsAddedInACell: () => {
+        let cellWidth
+        essayResponsePage.previewInputFieldTable()
+            .within(() => {
+                utilities.getNthElement(essayResponsePage.tableCell(), 0)
+                    .then(($originalCellWidth) => {
+                        cellWidth = $originalCellWidth.width(); //Storing original column width
+                    });
+                essayResponsePage.steps.addInputToTableCell(0, 'lorem');
+                utilities.getNthElement(essayResponsePage.tableCell(), 0)
+                    .then(($modifiedCellWidth) => {
+                        let modifiedCellWidth = $modifiedCellWidth.width();
+                        expect(modifiedCellWidth).to.be.gt(cellWidth);  //Comparing modified and original column width
+                    });
+                utilities.getNthElement(essayResponsePage.tableCell(), 2)
+                    .then(($modifiedCellWidth) => {
+                        let modifiedCellWidth = $modifiedCellWidth.width();
+                        expect(modifiedCellWidth).to.be.lt(cellWidth);  //Comparing new and original width of other columns
+                    });
+            });
+    },
+
+    compareColumnWidthsWhenInputIsRemovedInACell: () => {
+        let cellWidth
+        essayResponsePage.previewInputFieldTable()
+            .within(() => {
+                utilities.getNthElement(essayResponsePage.tableCell(), 0)
+                    .then(($originalCellWidth) => {
+                        cellWidth = $originalCellWidth.width();
+                    });
+                essayResponsePage.steps.addInputToTableCell(0, '{backspace}{backspace}{backspace}{backspace}{backspace}')
+                utilities.getNthElement(essayResponsePage.tableCell(), 0)
+                    .then(($modifiedCellWidth) => {
+                        let modifiedCellWidth = $modifiedCellWidth.width();
+                        expect(modifiedCellWidth).to.be.lt(cellWidth);
+                        cellWidth = modifiedCellWidth;
+                    });
+                utilities.getNthElement(essayResponsePage.tableCell(), 2)
+                    .then(($modifiedCellWidth) => {
+                        let modifiedCellWidth = $modifiedCellWidth.width();
+                        expect(modifiedCellWidth).to.be.eq(cellWidth);  //Cell width increases again to match the original cell width
+                    });
+            });
+    },
+
+    compareRowHeightWhenMultilineInputIsGivenInACell: () => {
+        let cellHeight;
+        essayResponsePage.previewInputFieldTable()
+            .within(() => {
+                utilities.getNthElement(essayResponsePage.tableCell(), 0)
+                    .then(($originalCellHeight) => {
+                        cellHeight = $originalCellHeight.height();
+                    });
+                essayResponsePage.steps.addInputToTableCell(0, 'lorem{Enter}ipsum');
+                utilities.getNthElement(essayResponsePage.tableCell(), 0)
+                    .then(($modifiedCellHeight) => {
+                        let modifiedCellHeight = $modifiedCellHeight.height();
+                        expect(modifiedCellHeight).to.be.gt(cellHeight);
+                    });
+            });
+    },
+
+    /**
+     * Right click on header cell to open edit table popup
+     * @param {number} headerCellIndex index of header cell
+     */
+    openEditTablePopupThroughHeaderCell: (headerCellIndex) => {
+        essayResponsePage.previewInputFieldTable()
+            .within(() => {
+                utilities.getNthElement(essayResponsePage.tableHeaderCell(), headerCellIndex)
+                    .rightclick();
+            });
+        utilities.verifyElementVisibilityState(essayResponsePage.editTableDialogBox(), 'visible');
+    },
+
+    /**
+     * Right click on normal cell to open edit table popup
+     * @param {number} cellIndex index of cell
+     */
+    openEditTablePopupThroughNormalCell: (cellIndex) => {
+        essayResponsePage.previewInputFieldTable()
+            .within(() => {
+                utilities.getNthElement(essayResponsePage.tableCell(), cellIndex)
+                    .rightclick();
+            });
+        utilities.verifyElementVisibilityState(essayResponsePage.editTableDialogBox(), 'visible');
+    },
+
+    verifyCheckedStateOfEditTableAddRowHeaderCheckbox: () => {
+        essayResponsePage.editTableDialogBoxAddRowHeaderCheckbox()
+            .should('be.checked');
+    },
+
+    verifyUncheckedStateOfEditTableHighlightFirstColumnCheckbox: () => {
+        essayResponsePage.editTableDialogBoxHighlightFirstColumnCheckbox()
+            .should('not.be.checked');
+    },
+
+    verifyUncheckedStateOfEditTableAddRowHeaderCheckbox: () => {
+        essayResponsePage.editTableDialogBoxAddRowHeaderCheckbox()
+            .should('not.be.checked');
+    },
+
+    clickOnEditTableFlyoutCancelButton: () => {
+        essayResponsePage.editTableDialogBoxButtonCancel()
+            .click();
+    },
+
+    clickOnEditTableFlyoutSaveButton: () => {
+        essayResponsePage.editTableDialogBoxButtonSave()
+            .click();
+    },
+
+    clickOnEditTableFlyoutDeleteButton: () => {
+        essayResponsePage.editTableDialogBoxButtonDelete()
+            .click();
+    },
+
+    clickOnEditTableInsertBeforeButton: () => {
+        essayResponsePage.editTableDialogBoxInsertBeforeButton()
+            .click();
+    },
+
+    clickOnEditTableInsertAfterButton: () => {
+        essayResponsePage.editTableDialogBoxInsertAfterButton()
+            .click();
+    },
+
+    clickOnEditTableDeleteColumnButton: () => {
+        essayResponsePage.editTableDialogBoxDeleteColumnButton()
+            .click();
+    },
+
+    clickOnEditTableInsertAboveButton: () => {
+        essayResponsePage.editTableDialogBoxInsertAboveButton()
+            .click();
+    },
+
+    clickOnEditTableInsertBelowButton: () => {
+        essayResponsePage.editTableDialogBoxInsertBelowButton()
+            .click();
+    },
+
+    clickOnEditTableDeleteRowButton: () => {
+        essayResponsePage.editTableDialogBoxDeleteRowButton()
+            .click();
+    },
+
+    compareColumnWidthWhenNewColumnIsAddedToTheTable: () => {
+        let cellWidth;
+        essayResponsePage.previewInputFieldTable()
+            .within(() => {
+                utilities.getNthElement(essayResponsePage.tableHeaderCell(), 1)
+                    .then(($originalCellWidth) => {
+                        cellWidth = $originalCellWidth.width();     //Storing original column width
+                    });
+            });
+        cy.log('Right click in the required cell to open edit table flyout and then click on Insert After button.');
+        essayResponsePage.steps.openEditTablePopupThroughHeaderCell(1);
+        essayResponsePage.steps.clickOnEditTableInsertAfterButton();
+        essayResponsePage.previewInputFieldTable()
+            .within(() => {
+                utilities.getNthElement(essayResponsePage.tableHeaderCell(), 1)
+                    .then(($modifiedCellWidth) => {
+                        let modifiedCellWidth = $modifiedCellWidth.width();
+                        expect(modifiedCellWidth).to.be.lt(cellWidth);      //Comparing modified and original column width
+                    });
+            });
+    },
+
+    compareColumnWidthWhenColumnIsDeletedFromTheTable: () => {
+        let cellWidth;
+        essayResponsePage.previewInputFieldTable()
+            .within(() => {
+                utilities.getNthElement(essayResponsePage.tableHeaderCell(), 0)
+                    .then(($originalCellWidth) => {
+                        cellWidth = $originalCellWidth.width();     //Storing original column width
+                    });
+            });
+        cy.log('Right click in the required cell to open edit table flyout and then click on Delete Column button.');
+        essayResponsePage.steps.openEditTablePopupThroughNormalCell(0);
+        essayResponsePage.steps.clickOnEditTableDeleteColumnButton();
+        essayResponsePage.previewInputFieldTable()
+            .within(() => {
+                utilities.getNthElement(essayResponsePage.tableHeaderCell(), 0)
+                    .then(($modifiedCellWidth) => {
+                        let modifiedCellWidth = $modifiedCellWidth.width();
+                        expect(modifiedCellWidth).to.be.gt(cellWidth);      //Comparing modified and original column width
+                    });
+            });
+    },
+
+    ///Old
     expandCustomizeFormattingOptionsAccordion: () => {
         essayResponsePage.customizeFormattingOptionsAccordion()
             .click()
@@ -132,7 +714,8 @@ const steps = {
     selectCustomizedFormattingOption: (formattingOptionArray) => {
         formattingOptionArray.forEach((formattingOption) => {
             essayResponsePage.customizeFormattingOptionsTiles(formattingOption)
-                .click()
+                .click();
+            essayResponsePage.customizeFormattingOptionsTiles(formattingOption)
                 .should('have.attr', 'data-aria-pressed', 'true');
         });
     },
@@ -191,13 +774,16 @@ const tests = {
     ...scoringSectionBaseEditTab.tests,
     ...autoScoredScoringPreviewTab.tests,
     ...commonComponents.tests,
+
+    /**
+     * insert equation and verify input field content and word count
+     * @param {string} expectedOutput equation text
+     * @param {string} wordCount word limit as set in the set limit section
+     */
     insertEquationAndVerifyInputFieldContentsAndWordCount: (expectedOutput, wordCount) => {
         it(`On clicking the Ok button the symbols/equation entered should be displayed in the preview tab input field and the Word count should increase to ${wordCount}`, () => {
-            equationEditorFlyout.buttonOk()
-                .click();
-            essayResponsePage.responseField()
-                .find('.cke_widget_element')
-                .should('have.text', `${expectedOutput}`);
+            equationEditorFlyout.steps.clickOnOkButton()
+            utilities.verifyTextContent(essayResponsePage.responseField().find('.ngie_latex'), `${expectedOutput}`);
             essayResponsePage.steps.verifyResponseFieldWordCount(wordCount);
         });
     },