itemengine-cypress-automation 1.0.19 → 1.0.20

package/cypress/e2e/ILC/EssayResponse/essayResponsePreviewEditTable.js

@@ -0,0 +1,659 @@
+import { essayResponsePage } from "../../../pages";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+const css = Cypress.env('css');
+
+describe('Essay Response Preview: Edit Table functionality', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Edit Table flyout contents', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to Essay Response, switching to preview tab and adding table to response field.');
+            essayResponsePage.steps.navigateToCreateQuestion('essay response - rich text');
+            essayResponsePage.steps.switchToPreviewTab();
+            essayResponsePage.previewTabToolbarOption('Insert Table')
+                .click();
+            essayResponsePage.addTableDialogBoxAddHeaderRowCheckbox()
+                .check({ force: true });
+            essayResponsePage.addTableDialogBoxButtonAddTable()
+                .click();
+        });
+
+        it('When user right clicks on the added table, then Edit Table flyout should appear.', () => {
+            essayResponsePage.previewInputFieldTable()
+                .rightclick();
+            essayResponsePage.editTableDialogBox()
+                .should('be.visible');
+        });
+
+        it('CSS of Edit table flyout', { tags: 'css' }, () => {
+            const buttonSelectors = [essayResponsePage.editTableDialogBoxInsertBeforeButton, essayResponsePage.editTableDialogBoxInsertAfterButton, essayResponsePage.editTableDialogBoxDeleteColumnButton, essayResponsePage.editTableDialogBoxInsertAboveButton, essayResponsePage.editTableDialogBoxInsertBelowButton, essayResponsePage.editTableDialogBoxDeleteRowButton];
+            const buttonLabelSelectors = [essayResponsePage.editTableDialogBoxColumnsLabel, essayResponsePage.editTableDialogBoxRowsLabel];
+            const customizationLabelSelectors = [essayResponsePage.editTableDialogBoxAddHeaderRowLabel, essayResponsePage.editTableDialogBoxHighlightFirstColumnLabel];
+            essayResponsePage.addTableDialogBoxTitle()
+                .verifyCSS(css.color.flyoutTitle, css.fontSize.heading, css.fontWeight.semibold);
+            buttonLabelSelectors.forEach((label) => {
+                label()
+                    .verifyCSS(css.color.labels, css.fontSize.normal, css.fontWeight.semibold);
+            });
+            buttonSelectors.forEach((button) => {
+                button()
+                    .find('span')
+                    .verifyCSS(css.color.secondaryBtn, css.fontSize.normal, css.fontWeight.regular)
+                    .should('have.css', 'background-color', css.color.transparent);
+            });
+            customizationLabelSelectors.forEach((label) => {
+                label()
+                    .find('label')
+                    .verifyCSS(css.color.labelText, css.fontSize.normal, css.fontWeight.semibold);
+            });
+            essayResponsePage.addTableDialogBoxButtonCancel()
+                .should('have.css', 'background-color', css.color.secondaryBtnBg)
+                .find('span')
+                .verifyCSS(css.color.secondaryBtn, css.fontSize.default, css.fontWeight.regular)
+            essayResponsePage.editTableDialogBoxButtonDelete()
+                .should('have.css', 'background-color', css.color.editTableDeleteButton)
+                .find('span')
+                .verifyCSS(css.color.primaryBtn, css.fontSize.default, css.fontWeight.regular)
+            essayResponsePage.editTableDialogBoxButtonSave()
+                .should('have.css', 'background-color', css.color.primaryBtnBg)
+                .find('span')
+                .verifyCSS(css.color.primaryBtn, css.fontSize.default, css.fontWeight.regular)
+            //need to add css of checkbox
+        });
+
+        it('Accessibility of Edit Table flyout.', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(essayResponsePage.editTableDialogBox());
+        });
+
+        it('Title of the flyout should be \'Table\'.', () => {
+            essayResponsePage.addTableDialogBoxTitle()
+                .verifyInnerText('CloseTable');
+            //TODO- Need to change this after DOM structure is updated.
+        });
+
+        it('\'Add Header Row\' and \'Highlight First Column\' label should be displayed in the flyout with a checkbox beside it.', () => {  //File will fail here as these labels are not in sentence casing.
+            essayResponsePage.editTableDialogBoxAddHeaderRowLabel()
+                .verifyInnerText('Add header row')
+                .and('be.visible');
+            essayResponsePage.editTableDialogBoxHighlightFirstColumnLabel()
+                .verifyInnerText('Highlight first column')
+                .and('be.visible');
+        });
+
+        it('State of the checkboxes in the Add table flyout while adding the table should persist in Edit Table flyout.', () => {
+            essayResponsePage.editTableDialogBoxAddHeaderRowCheckbox()
+                .should('be.checked');
+            essayResponsePage.editTableDialogBoxHighlightFirstColumnCheckbox()
+                .should('not.be.checked');
+        });
+
+        it('The labels \'Columns\' and \'Rows\' should be displayed in the flyout along with their buttons \'Insert Before\', \'Insert Above\', \'Insert After\', \'Insert Below\', \'Delete Column\' and \'Delete Row\'.', () => {
+            essayResponsePage.editTableDialogBoxColumnsLabel()
+                .verifyInnerText('Columns')
+                .and('be.visible');
+            essayResponsePage.editTableDialogBoxInsertBeforeButton()
+                .verifyInnerText('Insert before')
+                .and('be.visible');
+            essayResponsePage.editTableDialogBoxInsertAfterButton()
+                .verifyInnerText('Insert after')
+                .and('be.visible');
+            essayResponsePage.editTableDialogBoxDeleteColumnButton()
+                .verifyInnerText('Delete column')
+                .and('be.visible');
+            essayResponsePage.editTableDialogBoxRowsLabel()
+                .verifyInnerText('Rows')
+                .and('be.visible');
+            essayResponsePage.editTableDialogBoxInsertAboveButton()
+                .verifyInnerText('Insert above')
+                .and('be.visible');
+            essayResponsePage.editTableDialogBoxInsertBelowButton()
+                .verifyInnerText('Insert below')
+                .and('be.visible');
+            essayResponsePage.editTableDialogBoxDeleteRowButton()
+                .verifyInnerText('Delete row')
+                .and('be.visible');
+        });
+
+        it('\'Delete\' button should be displayed in the flyout.', () => {
+            essayResponsePage.editTableDialogBoxButtonDelete()
+                .verifyInnerText('Delete')
+                .and('be.visible');
+        });
+
+        it('\'Save\' button should be displayed in the flyout.', () => {
+            essayResponsePage.editTableDialogBoxButtonSave()
+                .verifyInnerText('Save')
+                .and('be.visible');
+        });
+
+        it('\'Cancel\' button should be displayed in the flyout and when user clicks on \'Cancel\' button, then the flyout should close.', () => {
+            essayResponsePage.editTableDialogBoxButtonCancel()
+                .verifyInnerText('Cancel')
+                .and('be.visible')
+                .click();
+            essayResponsePage.editTableDialogBox()
+                .should('not.be.visible');
+        });
+    });
+
+    describe('Columns section \'Insert Before\', \'Insert After\' and \'Delete Column\' button functionality.', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to Essay Response and switching to preview tab.');
+            essayResponsePage.steps.navigateToCreateQuestion('essay response - rich text');
+            essayResponsePage.steps.switchToPreviewTab();
+        });
+
+        beforeEach(() => {
+            cy.log('Pre-step: Selecting the table and pressing backspace to delete the table.');
+            essayResponsePage.responseField()
+                .type('{selectAll}{backspace}');
+            cy.log('Adding table to response field, clicking on \'Add heder row\' and \'Highlight first column\' checkboxes and adding input to the table.');
+            essayResponsePage.previewTabToolbarOption('Insert Table')
+                .click();
+            essayResponsePage.addTableDialogBoxAddHeaderRowCheckbox()
+                .check({ force: true });
+            essayResponsePage.addTableDialogBoxHighlightFirstColumnCheckbox()
+                .check({ force: true });
+            essayResponsePage.addTableDialogBoxButtonAddTable()
+                .click();
+            essayResponsePage.previewInputFieldTable()
+                .within(() => {
+                    cy.get('th')
+                        .eq(0)
+                        .type('Header cell');
+                    cy.get('td')
+                        .last()
+                        .type('Standard cell');
+                });
+        });
+
+        it('When user clicks on \'Insert Before\' button, then a new column should be inserted to the left of the column in which the user had focused. Also the newly inserted column should be identical to the column in which user had focused.', () => {
+            cy.log('Pre-step: Right click in the required cell to open edit table flyout.');
+            essayResponsePage.previewInputFieldTable()
+                .find('th')
+                .eq(0)
+                .rightclick();
+            essayResponsePage.editTableDialogBox()    //Added this to prevent clicking on the Insert button before the flyout is properly loaded, else script fails.
+                .should('be.visible');
+            essayResponsePage.editTableDialogBoxInsertBeforeButton()
+                .click();
+            essayResponsePage.previewInputFieldTable()
+                .find('td')
+                .last()
+                .rightclick();
+            essayResponsePage.editTableDialogBoxInsertBeforeButton()
+                .click();
+            essayResponsePage.previewInputFieldTable()
+                .within(() => {
+                    cy.get('tr')
+                        .eq(0)
+                        .within(() => {
+                            cy.get('th')
+                                .should('have.length', '5');
+                            cy.get('th')
+                                .eq(1)
+                                .verifyInnerText('Header cell');
+                        });
+                    cy.get('tr')
+                        .eq(1)
+                        .within(() => {
+                            cy.get('th')
+                                .should('have.length', '2');
+                            cy.get('td')
+                                .should('have.length', '3');
+                            cy.get('td')
+                                .eq(2)
+                                .verifyInnerText('Standard cell');
+                        });
+                });
+        });
+
+        it('When user clicks on \'Insert After\' button, then a  new column should be inserted to the right of the column in which the user had focused. Also the newly inserted column should be identical to the column in which user had focused.', () => {
+            cy.log('Pre-step: Right click in the required cell to open edit table flyout.');
+            essayResponsePage.previewInputFieldTable()
+                .find('th')
+                .eq(0)
+                .rightclick();
+            essayResponsePage.editTableDialogBoxInsertAfterButton()
+                .click();
+            essayResponsePage.previewInputFieldTable()
+                .find('td')
+                .last()
+                .rightclick();
+            essayResponsePage.editTableDialogBoxInsertAfterButton()
+                .click();
+            essayResponsePage.previewInputFieldTable()
+                .within(() => {
+                    cy.get('tr')
+                        .eq(0)
+                        .within(() => {
+                            cy.get('th')
+                                .should('have.length', '5');
+                            cy.get('th')
+                                .eq(0)
+                                .verifyInnerText('Header cell');
+                        });
+                    cy.get('tr')
+                        .eq(1)
+                        .within(() => {
+                            cy.get('th')
+                                .should('have.length', '2');
+                            cy.get('td')
+                                .should('have.length', '3');
+                            cy.get('td')
+                                .eq(1)
+                                .verifyInnerText('Standard cell');
+                        });
+                });
+        });
+
+        it('When a new column is inserted in the table, the column width of all the columns should decrease to fit the table width accordingly.', () => {
+            let cellWidth;
+            essayResponsePage.previewInputFieldTable()
+                .find('th')
+                .eq(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.previewInputFieldTable()
+                .find('th')
+                .eq(1)
+                .rightclick();
+            essayResponsePage.editTableDialogBoxInsertAfterButton()
+                .click();
+            essayResponsePage.previewInputFieldTable()
+                .find('th')
+                .eq(1)
+                .then(($modifiedCellWidth) => {
+                    let modifiedCellWidth = $modifiedCellWidth.width();
+                    expect(modifiedCellWidth).to.be.lt(cellWidth);      //Comparing modified and original column width
+                });
+        });
+
+        it('When user clicks on \'Delete Column\' button then, the column in which it had focused should be deleted. Also the width of the remaining columns should increase to fit the table width accordingly.', () => {
+            let cellWidth;
+            essayResponsePage.previewInputFieldTable()
+                .find('th')
+                .eq(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.previewInputFieldTable()
+                .find('td')
+                .eq(0)
+                .rightclick();
+            essayResponsePage.editTableDialogBoxDeleteColumnButton()
+                .click();
+            essayResponsePage.previewInputFieldTable()
+                .within(() => {
+                    cy.get('th')
+                        .eq(0)
+                        .then(($modifiedCellWidth) => {
+                            let modifiedCellWidth = $modifiedCellWidth.width();
+                            expect(modifiedCellWidth).to.be.gt(cellWidth);      //Comparing modified and original column width
+                        });
+                    cy.get('tr')
+                        .eq(0)
+                        .find('th')
+                        .should('have.length', '2');
+                    cy.get('tr')
+                        .eq(1)
+                        .within(() => {
+                            cy.get('th')
+                                .should('have.length', '1');
+                            cy.get('td')
+                                .should('have.length', '1')
+                                .verifyInnerText('Standard cell');
+                        });
+                });
+
+        });
+
+        it('When user deletes the first highlighted column by clicking on the \'Delete Column\' button, then in edit table flyout the \'Highlight First Column\' checkbox should be unchecked.', () => {
+            cy.log('Pre-step: Right click in the required cell to open edit table flyout and then click on Delete Column button.');
+            essayResponsePage.previewInputFieldTable()
+                .find('th')
+                .eq(0)
+                .rightclick();
+            essayResponsePage.editTableDialogBoxDeleteColumnButton()
+                .click();
+            essayResponsePage.previewInputFieldTable()
+                .rightclick();
+            essayResponsePage.editTableDialogBoxHighlightFirstColumnCheckbox()
+                .should('not.be.checked');
+        });
+    });
+
+    describe('Rows section \'Insert Above\', \'Insert Below\' and \'Delete Row\' button functionality.', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to Essay Response and switching to preview tab.');
+            essayResponsePage.steps.navigateToCreateQuestion('essay response - rich text');
+            essayResponsePage.steps.switchToPreviewTab();
+        });
+
+        beforeEach(() => {
+            cy.log('pre-step: Selecting the table and pressing backspace to delete the table.');
+            essayResponsePage.responseField()
+                .type('{selectAll}{backspace}');
+            cy.log('Adding table to response field, clicking on \'Add heder row\' and \'Highlight first column\' checkboxes and adding input to the table.');
+            essayResponsePage.previewTabToolbarOption('Insert Table')
+                .click();
+            essayResponsePage.addTableDialogBoxAddHeaderRowCheckbox()
+                .check({ force: true });
+            essayResponsePage.addTableDialogBoxHighlightFirstColumnCheckbox()
+                .check({ force: true });
+            essayResponsePage.addTableDialogBoxButtonAddTable()
+                .click();
+            essayResponsePage.previewInputFieldTable()
+                .within(() => {
+                    cy.get('th')
+                        .eq(3)
+                        .type('Header cell');
+                    cy.get('td')
+                        .last()
+                        .type('Standard cell');
+                });
+        });
+
+        it('When user clicks on \'Insert Above\' button, then a new row should be inserted above the row in which the user had focused. Also the newly inserted row should be identical to the row in which user had focused.', () => {
+            cy.log('Pre-step: Right click in the required cell to open edit table flyout.');
+            essayResponsePage.previewInputFieldTable()
+                .find('th')
+                .eq(0)
+                .rightclick();
+            essayResponsePage.editTableDialogBoxInsertAboveButton()
+                .click();
+            essayResponsePage.previewInputFieldTable()
+                .find('td')
+                .last()
+                .rightclick();
+            essayResponsePage.editTableDialogBox()
+                .should('be.visible');
+            essayResponsePage.editTableDialogBoxInsertAboveButton()
+                .click();
+            essayResponsePage.previewInputFieldTable()
+                .within(() => {
+                    cy.get('tr')
+                        .eq(0)
+                        .find('th')
+                        .should('have.length', '3');
+                    cy.get('tr')
+                        .eq(1)
+                        .find('th')
+                        .should('have.length', '3');
+                    cy.get('tr')
+                        .eq(2)
+                        .within(() => {
+                            cy.get('th')
+                                .should('have.length', '1');
+                            cy.get('td')
+                                .should('have.length', '2');
+                        });
+                    cy.get('tr')
+                        .eq(3)
+                        .within(() => {
+                            cy.get('th')
+                                .should('have.length', '1')
+                                .verifyInnerText('Header cell');
+                            cy.get('td')
+                                .should('have.length', '2')
+                                .eq(1)
+                                .verifyInnerText('Standard cell');
+                        });
+                });
+        });
+
+        it('When user clicks on \'Insert Below\' button, then a new row should be inserted below the row in which the user had focused. Also the newly inserted row should be identical to the row in which user had focused.', () => {
+            cy.log('Pre-step: Right click in the required cell to open edit table flyout.');
+            essayResponsePage.previewInputFieldTable()
+                .find('th')
+                .eq(0)
+                .rightclick();
+            essayResponsePage.editTableDialogBoxInsertBelowButton()
+                .click();
+            essayResponsePage.previewInputFieldTable()
+                .find('td')
+                .last()
+                .rightclick();
+            essayResponsePage.editTableDialogBoxInsertBelowButton()
+                .click();
+            essayResponsePage.previewInputFieldTable()
+                .within(() => {
+                    cy.get('tr')
+                        .eq(0)
+                        .find('th')
+                        .should('have.length', '3');
+                    cy.get('tr')
+                        .eq(1)
+                        .find('th')
+                        .should('have.length', '3');
+                    cy.get('tr')
+                        .eq(2)
+                        .within(() => {
+                            cy.get('th')
+                                .should('have.length', '1')
+                                .verifyInnerText('Header cell');
+                            cy.get('td')
+                                .should('have.length', '2')
+                                .eq(1)
+                                .verifyInnerText('Standard cell');
+                        });
+                    cy.get('tr')
+                        .eq(3)
+                        .within(() => {
+                            cy.get('th')
+                                .should('have.length', '1');
+                            cy.get('td')
+                                .should('have.length', '2');
+                        });
+                });
+        });
+
+        it('When user clicks on \'Delete Row\' button then, the row in which it had focused should be deleted.', () => {
+            cy.log('Pre-step: Right click in the required cell to open edit table flyout.');
+            essayResponsePage.previewInputFieldTable()
+                .find('th')
+                .first()
+                .rightclick();
+            essayResponsePage.editTableDialogBoxDeleteRowButton()
+                .click();
+            essayResponsePage.previewInputFieldTable()
+                .find('tr')
+                .should('have.length', '1')
+                .within(() => {
+                    cy.get('th')
+                        .should('have.length', '1')
+                        .verifyInnerText('Header cell');
+                    cy.get('td')
+                        .should('have.length', '2')
+                        .eq('1')
+                        .verifyInnerText('Standard cell');
+                });
+        });
+
+        it('When user deletes the header row by clicking on the \'Delete Row\' button, then in edit table flyout the \'Add Header Row\' checkbox should be unchecked.', () => {
+            cy.log('Pre-step: Right click in the required cell to open edit table flyout and click on Delete Row button..');
+            essayResponsePage.previewInputFieldTable()
+                .find('th')
+                .eq(0)
+                .rightclick();
+            essayResponsePage.editTableDialogBoxDeleteRowButton()
+                .click();
+            essayResponsePage.previewInputFieldTable()
+                .rightclick();
+            essayResponsePage.editTableDialogBoxAddHeaderRowCheckbox()
+                .should('not.be.checked');
+        });
+    });
+
+    describe('Edit \'Add header row\' and \'Highlight first column\' checkboxes.', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to Essay Response and switching to preview tab.');
+            essayResponsePage.steps.navigateToCreateQuestion('essay response - rich text');
+            essayResponsePage.steps.switchToPreviewTab();
+        });
+
+        beforeEach(() => {
+            cy.log('Adding table to response field and opening edit table flyout.');
+            essayResponsePage.previewTabToolbarOption('Insert Table')
+                .click();
+            essayResponsePage.addTableDialogBoxButtonAddTable()
+                .click();
+            essayResponsePage.previewInputFieldTable()
+                .rightclick();
+        });
+
+        afterEach(() => {
+            cy.log('Selecting the table and pressing backspace to delete the table.');
+            essayResponsePage.responseField()
+                .type('{selectAll}{backspace}');
+        });
+
+        it('When user checks the \'Add header row\' and \'Highlight first column\' checkboxes, and then clicks on Cancel button, then the flyout should close and no changes should be applied to the table.', () => {
+            essayResponsePage.editTableDialogBoxAddHeaderRowCheckbox()
+                .click({ force: true });
+            essayResponsePage.editTableDialogBoxHighlightFirstColumnCheckbox()
+                .click({ force: true });
+            essayResponsePage.editTableDialogBoxButtonCancel()
+                .click();
+            essayResponsePage.editTableDialogBox()
+                .should('not.be.visible');
+            essayResponsePage.previewInputFieldTable()
+                .find('th')
+                .should('not.exist');
+        });
+
+        it('When user checks the \'Add header row\' checkbox, and then clicks on Save button, then the flyout should close and first row of the table should be highlighted as header.', () => {
+            essayResponsePage.editTableDialogBoxAddHeaderRowCheckbox()
+                .click({ force: true });
+            essayResponsePage.editTableDialogBoxButtonSave()
+                .click();
+            essayResponsePage.editTableDialogBox()
+                .should('not.be.visible');
+            essayResponsePage.previewInputFieldTable()
+                .find('tr')
+                .eq(0)
+                .find('th')
+                .should('have.length', '3')
+                .each(($element) => {
+                    cy.wrap($element)
+                        .verifyCSS(css.color.whiteText, css.fontSize.default, css.fontWeight.bold)   //Verifying CSS of highlighted cells
+                        .and('have.css', 'background-color', css.color.highlightedTableCell);
+                });
+        });
+
+        it('When user checks the \'Highlight first column\' checkbox, and then clicks on Save button, then the flyout should close and first column of the table should be highlighted as header.', () => {
+            essayResponsePage.editTableDialogBoxHighlightFirstColumnCheckbox()
+                .click({ force: true });
+            essayResponsePage.editTableDialogBoxButtonSave()
+                .click();
+            essayResponsePage.editTableDialogBox()
+                .should('not.be.visible');
+            essayResponsePage.previewInputFieldTable()
+                .find('tr')
+                .each(($element) => {
+                    cy.wrap($element)
+                        .find('th')
+                        .eq(0)
+                        .verifyCSS(css.color.whiteText, css.fontSize.default, css.fontWeight.bold)   //Verifying CSS of highlighted cells
+                        .and('have.css', 'background-color', css.color.highlightedTableCell);
+                });
+        });
+
+        it('When there are multiple header rows in the table, and the user unchecks the previously checked \'Add header row\' checkbox and clicks on Save, then all the previous header rows in the table should not be highlighted.', () => {
+            cy.log('Pre-step: Add multiple header rows to the table.');
+            essayResponsePage.editTableDialogBoxAddHeaderRowCheckbox()
+                .click({ force: true });
+            essayResponsePage.editTableDialogBoxButtonSave()
+                .click();
+            essayResponsePage.previewInputFieldTable()
+                .find('th')
+                .eq(0)
+                .rightclick();
+            essayResponsePage.editTableDialogBoxInsertAboveButton()
+                .click();
+            essayResponsePage.previewInputFieldTable()
+                .rightclick();
+            essayResponsePage.editTableDialogBoxAddHeaderRowCheckbox()
+                .click({ force: true });
+            essayResponsePage.editTableDialogBoxButtonSave()
+                .click();
+            essayResponsePage.previewInputFieldTable()
+                .find('th')
+                .should('not.exist');
+        });
+
+        it('When there are multiple highlighted columns in the table, and the user unchecks the previously checked \'Highlight first column\' checkbox and clicks on Save, then only the first column in the table should not be highlighted.', () => {
+            cy.log('Pre-step: Add multiple header rows to the table.');
+            essayResponsePage.editTableDialogBoxHighlightFirstColumnCheckbox()
+                .click({ force: true });
+            essayResponsePage.editTableDialogBoxButtonSave()
+                .click();
+            essayResponsePage.previewInputFieldTable()
+                .find('th')
+                .eq(0)
+                .rightclick();
+            essayResponsePage.editTableDialogBox()    //Added this to prevent clicking on the Insert button before the flyout is properly loaded, else script fails.
+                .should('be.visible');
+            essayResponsePage.editTableDialogBoxInsertBeforeButton()
+                .click();
+            essayResponsePage.previewInputFieldTable()
+                .rightclick();
+            essayResponsePage.editTableDialogBoxHighlightFirstColumnCheckbox()
+                .click({ force: true });
+            essayResponsePage.editTableDialogBoxButtonSave()
+                .click();
+            essayResponsePage.previewInputFieldTable()
+                .find('tr')
+                .each(($element) => {
+                    cy.wrap($element)
+                        .find('th')
+                        .should('have.length', '1');
+                });
+        });
+    });
+
+    describe('Delete Table', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to essay response, switching to preview tab, adding a table to the response field and opening edit table flyout.');
+            essayResponsePage.steps.navigateToCreateQuestion('essay response - rich text');
+            essayResponsePage.steps.switchToPreviewTab();
+            essayResponsePage.previewTabToolbarOption('Insert Table')
+                .click();
+            essayResponsePage.addTableDialogBoxButtonAddTable()
+                .click();
+            essayResponsePage.previewInputFieldTable()
+                .rightclick();
+        });
+
+        it('When user clicks on \'Delete\' button, then the flyout should close and the table should be deleted.', () => {
+            essayResponsePage.editTableDialogBoxButtonDelete()
+                .click();
+            essayResponsePage.editTableDialogBox()
+                .should('not.be.visible');
+            essayResponsePage.previewInputFieldTable()
+                .should('not.exist');
+        });
+
+        it('When the user selects the table in the response field and presses backspace then the table should get deleted.', () => {
+            cy.log('Pre-step: Adding a table to the response field.');
+            essayResponsePage.previewTabToolbarOption('Insert Table')
+                .click();
+            essayResponsePage.addTableDialogBoxButtonAddTable()
+                .click();
+            essayResponsePage.previewInputFieldTable()
+                .type('{selectAll}{backspace}');
+            essayResponsePage.previewInputFieldTable()
+                .should('not.exist');
+        });
+    });
+});