itemengine-cypress-automation 1.0.86 → 1.0.87

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

@@ -0,0 +1,379 @@
+import { essayResponsePage } from "../../../pages";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import utilities from "../../../support/helpers/utilities";
+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');
+            cy.barsPreLoaderWait();
+            essayResponsePage.steps.switchToPreviewTab();
+            essayResponsePage.steps.selectPreviewTabToolbarOption('Insert Table');
+            essayResponsePage.steps.checkAddRowHeaderCheckbox();
+            essayResponsePage.steps.addTable();
+        });
+
+        it('When user right clicks on the added table, then \'Edit Table\' flyout should appear.', () => {
+            essayResponsePage.steps.openEditTablePopupThroughNormalCell(0);
+            utilities.verifyElementVisibilityState(essayResponsePage.editTableDialogBox(), '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.editTableDialogBoxAddRowHeaderLabel, essayResponsePage.editTableDialogBoxHighlightFirstColumnLabel];
+
+            utilities.verifyCSS(essayResponsePage.editTableDialogBoxTitle(), {
+                'color': css.color.flyoutTitle,
+                'font-size': css.fontSize.heading,
+                'font-weight': css.fontWeight.semibold
+            });
+            buttonLabelSelectors.forEach((label) => {
+                utilities.verifyCSS(label(), {
+                    'color': css.color.labels,
+                    'font-size': css.fontSize.normal,
+                    'font-weight': css.fontWeight.semibold
+                });
+            });
+            buttonSelectors.forEach((button) => {
+                utilities.verifyCSS(button().find('span'), {
+                    'color': css.color.secondaryBtn,
+                    'font-size': css.fontSize.normal,
+                    'font-weight': css.fontWeight.regular,
+                    'background-color': css.color.transparent
+                });
+            });
+            customizationLabelSelectors.forEach((label) => {
+                utilities.verifyCSS(label().find('label'), {
+                    'color': css.color.labelText,
+                    'font-size': css.fontSize.normal,
+                    'font-weight': css.fontWeight.regular
+                });
+            });
+            utilities.verifyCSS(essayResponsePage.addTableDialogBoxButtonCancel(), {
+                'color': css.color.secondaryBtn,
+                'font-size': css.fontSize.heading,
+                'font-weight': css.fontWeight.regular,
+                'background-color': css.color.secondaryBtnBg
+            });
+            utilities.verifyCSS(essayResponsePage.editTableDialogBoxButtonDelete(), {
+                'color': css.color.primaryBtn,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular,
+                'background-color': css.color.editTableDeleteButton
+            });
+            utilities.verifyCSS(essayResponsePage.editTableDialogBoxButtonSave(), {
+                'color': css.color.primaryBtn,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular,
+                'background-color': css.color.primaryBtnBg
+            });
+        });
+
+        it('Accessibility of \'Edit table\' flyout.', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(essayResponsePage.editTableDialogBox());
+        });
+
+        it('Title of the flyout should be \'Table\'.', () => {
+            utilities.verifyElementVisibilityState(essayResponsePage.addTableDialogBoxTitle(), 'visible');
+            utilities.verifyInnerText(essayResponsePage.addTableDialogBoxTitle(), 'Table');
+        });
+
+        it('\'Add Header Row\' and \'Highlight First Column\' label should be displayed in the flyout with a checkbox beside it.', () => {
+            utilities.verifyElementVisibilityState(essayResponsePage.editTableDialogBoxAddRowHeaderLabel(), 'visible');
+            utilities.verifyInnerText(essayResponsePage.editTableDialogBoxAddRowHeaderLabel(), 'Add header row');
+            utilities.verifyElementVisibilityState(essayResponsePage.editTableDialogBoxHighlightFirstColumnLabel(), 'visible');
+            utilities.verifyInnerText(essayResponsePage.editTableDialogBoxHighlightFirstColumnLabel(), 'Highlight first column');
+        });
+
+        it('State of the checkboxes in the \'Add table\' flyout while adding the table should persist in \'Edit table\' flyout.', () => {
+            essayResponsePage.steps.verifyCheckedStateOfEditTableAddRowHeaderCheckbox();
+            essayResponsePage.steps.verifyUncheckedStateOfEditTableHighlightFirstColumnCheckbox();
+        });
+
+        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\'.', () => {
+            utilities.verifyElementVisibilityState(essayResponsePage.editTableDialogBoxColumnsLabel(), 'visible');
+            utilities.verifyInnerText(essayResponsePage.editTableDialogBoxColumnsLabel(), 'Columns');
+            utilities.verifyElementVisibilityState(essayResponsePage.editTableDialogBoxInsertBeforeButton(), 'visible');
+            utilities.verifyInnerText(essayResponsePage.editTableDialogBoxInsertBeforeButton(), 'Insert before');
+            utilities.verifyElementVisibilityState(essayResponsePage.editTableDialogBoxInsertAfterButton(), 'visible');
+            utilities.verifyInnerText(essayResponsePage.editTableDialogBoxInsertAfterButton(), 'Insert after');
+            utilities.verifyElementVisibilityState(essayResponsePage.editTableDialogBoxDeleteColumnButton(), 'visible');
+            utilities.verifyInnerText(essayResponsePage.editTableDialogBoxDeleteColumnButton(), 'Delete column');
+            utilities.verifyElementVisibilityState(essayResponsePage.editTableDialogBoxRowsLabel(), 'visible');
+            utilities.verifyInnerText(essayResponsePage.editTableDialogBoxRowsLabel(), 'Rows');
+            utilities.verifyElementVisibilityState(essayResponsePage.editTableDialogBoxInsertAboveButton(), 'visible');
+            utilities.verifyInnerText(essayResponsePage.editTableDialogBoxInsertAboveButton(), 'Insert above');
+            utilities.verifyElementVisibilityState(essayResponsePage.editTableDialogBoxInsertBelowButton(), 'visible');
+            utilities.verifyInnerText(essayResponsePage.editTableDialogBoxInsertBelowButton(), 'Insert below');
+            utilities.verifyElementVisibilityState(essayResponsePage.editTableDialogBoxDeleteRowButton(), 'visible');
+            utilities.verifyInnerText(essayResponsePage.editTableDialogBoxDeleteRowButton(), 'Delete row');
+        });
+
+        it('\'Delete\' button should be displayed in the flyout.', () => {
+            utilities.verifyElementVisibilityState(essayResponsePage.editTableDialogBoxButtonDelete(), 'visible');
+            utilities.verifyInnerText(essayResponsePage.editTableDialogBoxButtonDelete(), 'Delete');
+        });
+
+        it('\'Save\' button should be displayed in the flyout.', () => {
+            utilities.verifyElementVisibilityState(essayResponsePage.editTableDialogBoxButtonSave(), 'visible');
+            utilities.verifyInnerText(essayResponsePage.editTableDialogBoxButtonSave(), 'Save');
+        });
+
+        it('\'Cancel\' button should be displayed in the flyout and when user clicks on \'Cancel\' button, then the flyout should close.', () => {
+            utilities.verifyElementVisibilityState(essayResponsePage.editTableDialogBoxButtonCancel(), 'visible');
+            utilities.verifyInnerText(essayResponsePage.editTableDialogBoxButtonCancel(), 'Cancel');
+            essayResponsePage.steps.clickOnEditTableFlyoutCancelButton();
+            utilities.verifyElementVisibilityState(essayResponsePage.editTableDialogBox(), 'hidden');
+        });
+    });
+
+    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');
+            cy.barsPreLoaderWait();
+            essayResponsePage.steps.switchToPreviewTab();
+        });
+
+        beforeEach(() => {
+            cy.log('Pre-step: Selecting the table and pressing backspace to delete the table.');
+            essayResponsePage.steps.enterInputInResponseField('{selectAll}{backspace}');
+            cy.log('Adding table to response field, clicking on \'Add row header\' and \'Highlight first column\' checkboxes and adding input to the table.');
+            essayResponsePage.steps.selectPreviewTabToolbarOption('Insert Table');
+            utilities.verifyElementVisibilityState(essayResponsePage.addTableDialogBox(), 'visible');
+            essayResponsePage.steps.checkAddRowHeaderCheckbox();
+            essayResponsePage.steps.checkHighlightFirstColumnCheckbox()
+            essayResponsePage.steps.addTable();
+            essayResponsePage.steps.addInputToTableHeaderCell(0, 'Header cell');
+            essayResponsePage.steps.addInputToTableCell(1, '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.steps.openEditTablePopupThroughHeaderCell(0);
+            utilities.verifyElementVisibilityState(essayResponsePage.editTableDialogBox(), 'visible');
+            essayResponsePage.steps.clickOnEditTableInsertBeforeButton();
+            essayResponsePage.steps.openEditTablePopupThroughNormalCell(1);
+            essayResponsePage.steps.clickOnEditTableInsertBeforeButton();
+            essayResponsePage.steps.verifyTableHeaderRowCellCount(5);
+            essayResponsePage.steps.verifyContentOfTableHeaderCell(1, 'Header cell');
+            essayResponsePage.steps.verifyTableProperties(2, 3, 7);
+            essayResponsePage.steps.verifyContentOfTableStandardCell(2, '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.steps.openEditTablePopupThroughHeaderCell(0);
+            essayResponsePage.steps.clickOnEditTableInsertAfterButton();
+            essayResponsePage.steps.openEditTablePopupThroughNormalCell(1);
+            essayResponsePage.steps.clickOnEditTableInsertAfterButton();
+            essayResponsePage.steps.verifyTableHeaderRowCellCount(5);
+            essayResponsePage.steps.verifyContentOfTableHeaderCell(0, 'Header cell');
+            essayResponsePage.steps.verifyTableProperties(2, 3, 7);
+            essayResponsePage.steps.verifyContentOfTableStandardCell(1, '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.', () => {
+            essayResponsePage.steps.compareColumnWidthWhenNewColumnIsAddedToTheTable();
+        });
+
+        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.', () => {
+            essayResponsePage.steps.compareColumnWidthWhenColumnIsDeletedFromTheTable();
+        });
+
+        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.steps.openEditTablePopupThroughHeaderCell(0);
+            essayResponsePage.steps.clickOnEditTableDeleteColumnButton();
+            essayResponsePage.steps.openEditTablePopupThroughNormalCell(0);
+            essayResponsePage.steps.verifyUncheckedStateOfEditTableHighlightFirstColumnCheckbox();
+        });
+    });
+
+    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');
+            cy.barsPreLoaderWait();
+            essayResponsePage.steps.switchToPreviewTab();
+        });
+
+        beforeEach(() => {
+            cy.log('Pre-step: Selecting the table and pressing backspace to delete the table.');
+            essayResponsePage.steps.enterInputInResponseField('{selectAll}{backspace}');
+            cy.log('Adding table to response field, clicking on \'Add header row\' and \'Highlight first column\' checkboxes and adding input to the table.');
+            essayResponsePage.steps.selectPreviewTabToolbarOption('Insert Table');
+            utilities.verifyElementVisibilityState(essayResponsePage.addTableDialogBox(), 'visible');
+            essayResponsePage.steps.checkAddRowHeaderCheckbox();
+            essayResponsePage.steps.checkHighlightFirstColumnCheckbox()
+            essayResponsePage.steps.addTable();
+            essayResponsePage.steps.addInputToTableHeaderCell(3, 'Header cell');
+            essayResponsePage.steps.addInputToTableCell(1, '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.steps.openEditTablePopupThroughHeaderCell(0);
+            utilities.verifyElementVisibilityState(essayResponsePage.editTableDialogBox(), 'visible');
+            essayResponsePage.steps.clickOnEditTableInsertAboveButton();
+            essayResponsePage.steps.openEditTablePopupThroughNormalCell(1);
+            utilities.verifyElementVisibilityState(essayResponsePage.editTableDialogBox(), 'visible');
+            essayResponsePage.steps.clickOnEditTableInsertAboveButton();
+            essayResponsePage.steps.verifyTableHeaderRowCellCount(6);
+            essayResponsePage.steps.verifyTableRowHeaderCellCount(0, 3);
+            essayResponsePage.steps.verifyTableRowHeaderCellCount(1, 3);
+            essayResponsePage.steps.verifyTableRowHeaderCellCount(2, 1);
+            essayResponsePage.steps.verifyTableRowStandardCellCount(2, 2);
+            essayResponsePage.steps.verifyTableRowHeaderCellCount(3, 1);
+            essayResponsePage.steps.verifyTableRowStandardCellCount(3, 2);
+            essayResponsePage.steps.verifyContentOfTableHeaderCell(7, 'Header cell');
+            essayResponsePage.steps.verifyContentOfTableStandardCell(3, '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.steps.openEditTablePopupThroughHeaderCell(0);
+            utilities.verifyElementVisibilityState(essayResponsePage.editTableDialogBox(), 'visible');
+            essayResponsePage.steps.clickOnEditTableInsertBelowButton();
+            essayResponsePage.steps.openEditTablePopupThroughNormalCell(1);
+            utilities.verifyElementVisibilityState(essayResponsePage.editTableDialogBox(), 'visible');
+            essayResponsePage.steps.clickOnEditTableInsertBelowButton();
+            essayResponsePage.steps.verifyTableHeaderRowCellCount(6);
+            essayResponsePage.steps.verifyTableRowHeaderCellCount(0, 3);
+            essayResponsePage.steps.verifyTableRowHeaderCellCount(1, 3);
+            essayResponsePage.steps.verifyTableRowHeaderCellCount(2, 1);
+            essayResponsePage.steps.verifyTableRowStandardCellCount(2, 2);
+            essayResponsePage.steps.verifyTableRowHeaderCellCount(3, 1);
+            essayResponsePage.steps.verifyTableRowStandardCellCount(3, 2);
+            essayResponsePage.steps.verifyContentOfTableHeaderCell(6, 'Header cell');
+            essayResponsePage.steps.verifyContentOfTableStandardCell(1, 'Standard cell');
+        });
+
+        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.steps.openEditTablePopupThroughHeaderCell(0);
+            essayResponsePage.steps.clickOnEditTableDeleteRowButton();
+            essayResponsePage.steps.verifyTableRowCount(1);
+            essayResponsePage.steps.verifyTableRowHeaderCellCount(0, 1);
+            essayResponsePage.steps.verifyTableRowStandardCellCount(0, 2);
+            essayResponsePage.steps.verifyContentOfTableHeaderCell(0, 'Header cell');
+            essayResponsePage.steps.verifyContentOfTableStandardCell(1, '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.steps.openEditTablePopupThroughHeaderCell(0);
+            essayResponsePage.steps.clickOnEditTableDeleteRowButton();
+            essayResponsePage.steps.openEditTablePopupThroughNormalCell(0);
+            essayResponsePage.steps.verifyUncheckedStateOfEditTableAddRowHeaderCheckbox();
+        });
+    });
+
+    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');
+            cy.barsPreLoaderWait();
+            essayResponsePage.steps.switchToPreviewTab();
+        });
+
+        beforeEach(() => {
+            cy.log('Pre-step: Selecting the table and pressing backspace to delete the table.');
+            essayResponsePage.steps.enterInputInResponseField('{selectAll}{backspace}');
+            cy.log('Adding table to response field and opening edit table flyout.');
+            essayResponsePage.steps.selectPreviewTabToolbarOption('Insert Table');
+            essayResponsePage.steps.addTable();
+            essayResponsePage.steps.openEditTablePopupThroughNormalCell(0);
+        });
+
+        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.steps.clickOnEditTableAddRowHeaderCheckbox();
+            essayResponsePage.steps.clickOnEditTableHighlightFirstColumnCheckbox();
+            essayResponsePage.steps.clickOnEditTableFlyoutCancelButton();
+            utilities.verifyElementVisibilityState(essayResponsePage.editTableDialogBox(), 'hidden');
+            essayResponsePage.steps.verifyTableProperties(2, 6, 0);
+        });
+
+        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.steps.clickOnEditTableAddRowHeaderCheckbox();
+            essayResponsePage.steps.clickOnEditTableFlyoutSaveButton();
+            utilities.verifyElementVisibilityState(essayResponsePage.editTableDialogBox(), 'hidden');
+            essayResponsePage.steps.verifyTableRowHeaderCellCount(0, 3);
+            essayResponsePage.steps.verifyTableHeaderCellsAreHighlighted();
+        });
+
+        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.steps.clickOnEditTableHighlightFirstColumnCheckbox();
+            essayResponsePage.steps.clickOnEditTableFlyoutSaveButton();
+            utilities.verifyElementVisibilityState(essayResponsePage.editTableDialogBox(), 'hidden');
+            essayResponsePage.steps.verifyTableRowHeaderCellCount(0, 1);
+            essayResponsePage.steps.verifyTableRowHeaderCellCount(1, 1);
+            essayResponsePage.steps.verifyTableHeaderCellsAreHighlighted();
+        });
+
+        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.steps.clickOnEditTableAddRowHeaderCheckbox();
+            essayResponsePage.steps.clickOnEditTableFlyoutSaveButton();
+            essayResponsePage.steps.openEditTablePopupThroughHeaderCell(0);
+            essayResponsePage.steps.clickOnEditTableInsertAboveButton();
+            essayResponsePage.steps.openEditTablePopupThroughNormalCell(0);
+            essayResponsePage.steps.clickOnEditTableAddRowHeaderCheckbox();
+            essayResponsePage.steps.clickOnEditTableFlyoutSaveButton();
+            essayResponsePage.steps.verifyTableRowHeaderCellCount(0, 0);
+            essayResponsePage.steps.verifyTableRowHeaderCellCount(0, 0);
+        });
+
+        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.steps.clickOnEditTableHighlightFirstColumnCheckbox();
+            essayResponsePage.steps.clickOnEditTableFlyoutSaveButton();
+            essayResponsePage.steps.openEditTablePopupThroughHeaderCell(0);
+            utilities.verifyElementVisibilityState(essayResponsePage.editTableDialogBox(), 'visible');
+            essayResponsePage.steps.clickOnEditTableInsertBeforeButton();
+            essayResponsePage.steps.openEditTablePopupThroughNormalCell(0);
+            essayResponsePage.steps.clickOnEditTableHighlightFirstColumnCheckbox();
+            essayResponsePage.steps.clickOnEditTableFlyoutSaveButton();
+            essayResponsePage.steps.verifyTableRowHeaderCellCount(0, 1);
+            essayResponsePage.steps.verifyTableRowHeaderCellCount(1, 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');
+            cy.barsPreLoaderWait();
+            essayResponsePage.steps.switchToPreviewTab();
+            essayResponsePage.steps.selectPreviewTabToolbarOption('Insert Table');
+            essayResponsePage.steps.addTable();
+            essayResponsePage.steps.openEditTablePopupThroughNormalCell(0);
+        });
+
+        it('When user clicks on \'Delete\' button, then the flyout should close and the table should be deleted.', () => {
+            essayResponsePage.steps.clickOnEditTableFlyoutDeleteButton();
+            utilities.verifyElementVisibilityState(essayResponsePage.editTableDialogBox(), 'hidden');
+            utilities.verifyElementVisibilityState(essayResponsePage.previewInputFieldTable(), 'notExist');
+        });
+
+        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.steps.selectPreviewTabToolbarOption('Insert Table');
+            essayResponsePage.steps.addTable();
+            essayResponsePage.steps.enterInputInResponseField('{selectAll}{backspace}');
+            utilities.verifyElementVisibilityState(essayResponsePage.previewInputFieldTable(), 'notExist');
+        });
+    });
+});

package/cypress/e2e/ILC/EssayResponseBasic/essayResponseBasicCustomizeFormattingOptions.js

@@ -0,0 +1,207 @@
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import { essayResponseBasicPage } from "../../../pages";
+import { commonComponents } from "../../../pages/components";
+const css = Cypress.env('css');
+
+const formattingOptions = [essayResponseBasicPage.cutCustomizeFormattingOption, essayResponseBasicPage.copyCustomizeFormattingOption, essayResponseBasicPage.pasteCustomizeFormattingOption, essayResponseBasicPage.specialCharacterCustomizeFormattingOption];
+const formattingOptionLabel = ['Cut', 'Copy', 'Paste', 'Special characters'];
+const stateOfFormattingOption = ['ngie-toggle-button-selected', 'ngie-toggle-button-selected', 'ngie-toggle-button-selected', 'ngie-toggle-button-not-selected'];
+
+describe('Create question page - Essay Response - Basic: Customize formatting options (for student player) section contents, toolbar options', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Customize formatting options (for student player) section contents', () => {
+        abortEarlySetup();
+        before(() => {
+            essayResponseBasicPage.steps.navigateToCreateQuestion('essay response - basic');
+        });
+
+        it('\'Customize formatting options (for student player)\' label should be displayed and expand collapse icon should not be displayed beside the label. By default, following options should be in selected state - \'Cut, Copy, Paste\'. Special characters option should be in unselected state', () => {
+            essayResponseBasicPage.customizeFormattingOptionsSectionLabel()
+                .verifyInnerText('Customize formatting options (for student player)');
+            essayResponseBasicPage.customizeFormattingOptionsSectionLabel()
+                .find('.MuiExpansionPanelSummary-expandIcon')
+                .should('not.exist');
+            formattingOptions.forEach((button, count) => {
+                button()
+                    .verifyInnerText(formattingOptionLabel[count])
+                    .and('have.class', stateOfFormattingOption[count]);
+            });
+        });
+
+        it('CSS of \'Customize formatting options (for student player)\' label and contents', { tags: 'css' }, () => {
+            cy.log('CSS of Customize formatting options (for student player) label');
+            essayResponseBasicPage.customizeFormattingOptionsSectionLabel()
+                .verifyCSS(css.color.sectionHeading, css.fontSize.default, css.fontWeight.semibold);//Issue posted- https://redmine.zeuslearning.com/issues/525805
+            cy.log('CSS of selected toolbar formatting option')
+            essayResponseBasicPage.cutCustomizeFormattingOption()
+                .should('have.css', 'background-color', css.color.activeButtons)
+                .within(() => {
+                    commonComponents.tickIconForOptionButtons()
+                        .should('have.css', 'color', css.color.defaultBackground);
+                    essayResponseBasicPage.customizeFormattingOptionsIcon()
+                        .should('have.css', 'color', css.color.defaultBackground);
+                    essayResponseBasicPage.customizeFormattingOptionsLabel()
+                        .verifyCSS(css.color.primaryBtn, css.fontSize.default, css.fontWeight.regular);
+                });
+            cy.log('CSS of unselected toolbar formatting option')
+            essayResponseBasicPage.specialCharacterCustomizeFormattingOption()
+                .should('have.css', 'background-color', css.color.secondaryBtnBg)
+                .within(() => {
+                    essayResponseBasicPage.customizeFormattingOptionsLabel()
+                        .verifyCSS(css.color.secondaryBtn, css.fontSize.default, css.fontWeight.regular);
+                });
+        });
+
+        it('Accessibility of \'Customize formatting options (for student player)\' label and contents', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(essayResponseBasicPage.customizeFormattingOptionsWrapper());
+        });
+    });
+
+    describe('Customize formatting options (for student player) - Preview tab contents', () => {
+        abortEarlySetup();
+        before(() => {
+            essayResponseBasicPage.steps.navigateToCreateQuestion('essay response - basic');
+            cy.barsPreLoaderWait();
+            essayResponseBasicPage.steps.switchToPreviewTab();
+        });
+
+        beforeEach(() => {
+            essayResponseBasicPage.steps.resetPreviewTabResponseField();
+        });
+
+        it('When the user switches to Preview tab, then the following options should be displayed in the response field toolbar - \'Cut, Copy, Paste\'', () => {
+            essayResponseBasicPage.previewTabToolbarWrapper()
+                .within(() => {
+                    formattingOptionLabel.slice(0, 2).forEach((optionName, count) => {
+                        cy.get('.cke_button')
+                            .eq(count)
+                            .should('have.attr', 'title', optionName)
+                            .and('be.visible');
+                    });
+                    essayResponseBasicPage.previewTabToolbarOption('Special Characters')
+                        .should('not.exist');
+                });
+        });
+
+        it('When the user selects all formatting options from the \'Customize formatting options (for student player)\' section, all formatting options should appear in the preview tab and all options should be in enabled sate', () => {
+            cy.log('Switching to edit tab')
+            essayResponseBasicPage.steps.switchToEditTab()
+            essayResponseBasicPage.specialCharacterCustomizeFormattingOption()
+                .click();
+            essayResponseBasicPage.specialCharacterCustomizeFormattingOption()
+                .should('have.class', 'ngie-toggle-button-selected');
+            essayResponseBasicPage.steps.switchToPreviewTab();
+            essayResponseBasicPage.previewTabToolbarWrapper()
+                .within(() => {
+                    formattingOptionLabel.forEach((optionName, count) => {
+                        cy.get('.cke_button')
+                            .eq(count)
+                            .should('have.attr', 'title', optionName)
+                            .and('be.visible');
+                    });
+                });
+        });
+
+        it('CSS of formatting options in Preview tab', { tags: 'css' }, () => {
+            essayResponseBasicPage.previewTabToolbarOption('Cut')
+                .find('.cke_button_icon')
+                .should('have.css', 'color', css.color.activeButtons);
+        });
+
+        it('Accessibility of formatting options in Preview tab', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(essayResponseBasicPage.previewTabToolbarWrapper())
+        });
+
+        it('When the user deselects an option from \'Customize formatting options (for student player)\' section, then that option should not be displayed in the preview tab toolbar.', () => {
+            cy.log('Switching to edit tab')
+            essayResponseBasicPage.steps.switchToEditTab()
+            essayResponseBasicPage.cutCustomizeFormattingOption()
+                .click()
+                .should('have.class', 'ngie-toggle-button-not-selected');
+            essayResponseBasicPage.steps.switchToPreviewTab();
+            cy.barsPreLoaderWait();
+            essayResponseBasicPage.previewTabToolbarWrapper()
+                .within(() => {
+                    essayResponseBasicPage.previewTabToolbarOption('Cut')
+                        .should('not.exist');
+                });
+        });
+    });
+
+    describe('Cut, Copy, Paste formatting options - Preview tab', () => {
+        abortEarlySetup();
+        before(() => {
+            essayResponseBasicPage.steps.navigateToCreateQuestion('essay response - basic');
+            cy.barsPreLoaderWait();
+            essayResponseBasicPage.steps.setWordLimit(5);
+            cy.log('Selecting \'Special Characters\' formatting option from Edit tab');
+            essayResponseBasicPage.specialCharacterCustomizeFormattingOption()
+                .click()
+            essayResponseBasicPage.steps.switchToPreviewTab();
+            cy.barsPreLoaderWait();
+        });
+
+        afterEach(() => {
+            essayResponseBasicPage.steps.resetPreviewTabResponseField();
+        });
+
+        it('When the user selects the text from the response field and clicks on the \'Cut\', then the text should get removed from the field and word count should update accordingly', () => {
+            essayResponseBasicPage.responseField()
+                .type('Lorem Ipsum dolor');
+            essayResponseBasicPage.steps.cutTextFromResponseField();
+            essayResponseBasicPage.responseField()
+                .verifyInnerText('');
+            essayResponseBasicPage.steps.verifyResponseFieldWordCount('0/5');
+        });
+
+        it('When the user has cut some text from response and clicks on the \'Paste\' option, the text that was cut should get pasted in the response field and the word count should increase accordingly', () => {
+            essayResponseBasicPage.responseField()
+                .type('Lorem Ipsum dolor');
+            essayResponseBasicPage.steps.cutTextFromResponseField();
+            essayResponseBasicPage.previewTabToolbarOption('Paste')
+                .click();
+            essayResponseBasicPage.responseField()
+                .verifyInnerText('Lorem Ipsum dolor');
+            essayResponseBasicPage.steps.verifyResponseFieldWordCount('3/5');
+        });
+
+        it('When the user enters text in the response field, selects the text and then clicks on the \'Copy\', the text should get copied and when the user clicks on the \'Paste\' toolbar option, then the copied text should get pasted in response field and the word count should increase accordingly', () => {
+            essayResponseBasicPage.responseField()
+                .type('Lorem Ipsum ');
+            essayResponseBasicPage.steps.copyTextFromResponseField();
+            essayResponseBasicPage.steps.verifyResponseFieldWordCount('2/5');
+            essayResponseBasicPage.previewTabToolbarOption('Paste')
+                .click();
+            essayResponseBasicPage.responseField()
+                .verifyInnerText('Lorem Ipsum\u00a0Lorem Ipsum\u00a0');
+            essayResponseBasicPage.steps.verifyResponseFieldWordCount('4/5');
+        });
+
+        it('User should not be able to paste text more than max word limit.', () => {
+            essayResponseBasicPage.responseField()
+                .type('Lorem ipsum, dolor sit.');
+            essayResponseBasicPage.steps.copyTextFromResponseField();
+            essayResponseBasicPage.previewTabToolbarOption('Paste')
+                .click();
+            essayResponseBasicPage.responseField()
+                .verifyInnerText('Lorem ipsum, dolor sit.');
+            essayResponseBasicPage.steps.verifyResponseFieldWordCount('4/5');
+        });
+
+        it('When the user tries to paste a text and the word limit reaches after pasting, \'word limit reached\' warning message should be displayed beside word count.', () => {
+            essayResponseBasicPage.responseField()
+                .type('Lorem Ipsum dolor');
+            essayResponseBasicPage.steps.copyTextFromResponseField();
+            essayResponseBasicPage.previewTabToolbarOption('Paste')
+                .click();
+            essayResponseBasicPage.responseField()
+                .verifyInnerText('Lorem Ipsum dolorLorem Ipsum dolor');
+            essayResponseBasicPage.steps.verifyResponseFieldWordCount('5/5');
+            essayResponseBasicPage.wordLimitReachedWarningMessage();
+        });
+    });
+    //TO DO- Special characters flyout cases are pending
+});