itemengine-cypress-automation 1.0.19 → 1.0.21

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

@@ -0,0 +1,318 @@
+import { essayResponsePage } from "../../../pages";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+const css = Cypress.env('css');
+
+describe('Essay Response Preview: Hyperlink', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Hyperlink popup contents', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigate to Essay Response question type and switching to preview tab.');
+            essayResponsePage.steps.navigateToCreateQuestion('essay response - rich text');
+            essayResponsePage.steps.switchToPreviewTab();
+        });
+
+        it('Hyperlink option should be displayed in the preview tab toolbar', () => {
+            essayResponsePage.previewTabToolbarOption('Insert Hyperlink')
+                .should('be.visible');
+        });
+
+        it('When user clicks on Hyperlink option, then the Hyperlink popup should appear and by default the cursor should be focused inside the \'Display text\' input field', () => {
+            essayResponsePage.previewTabToolbarOption('Insert Hyperlink')
+                .click();
+            essayResponsePage.hyperlinkDialogBox()
+                .should('be.visible');
+            essayResponsePage.hyperlinkDialogboxDisplayTextInputField()
+                .should('have.css', 'border-color', css.color.activeButtons);   //To check that focus is inside input field 
+        });
+
+        it('Title of the popup should be \'Hyperlink\'', () => {
+            essayResponsePage.hyperlinkDialogBoxTitle()
+                .verifyInnerText('Hyperlink');
+        });
+
+        it('CSS of the \'Hyperlink\' popup', { tags: 'css' }, () => {
+            essayResponsePage.hyperlinkDialogBoxTitle()
+                .verifyCSS(css.color.questionHeading, css.fontSize.heading, css.fontWeight.bold);
+            essayResponsePage.hyperlinkDialogboxDisplayTextInputField()
+                .verifyCSS(css.color.standardTableCellText, css.fontSize.heading, css.fontWeight.regular)
+                .and('have.css', 'background-color', css.color.defaultBackground);
+            essayResponsePage.hyperlinkDialogboxURLInputField()
+                .verifyCSS(css.color.standardTableCellText, css.fontSize.heading, css.fontWeight.regular)
+                .and('have.css', 'background-color', css.color.defaultBackground);
+            essayResponsePage.hyperlinkDialogboxDisplayTextLabel()
+                .verifyCSS(css.color.labels, css.fontSize.normal, css.fontWeight.semibold);
+            essayResponsePage.hyperlinkDialogboxURLLabel()
+                .verifyCSS(css.color.labels, css.fontSize.normal, css.fontWeight.semibold);
+            essayResponsePage.hyperlinkDialogboxButtonOk()
+                .verifyCSS(css.color.primaryBtn, css.fontSize.default, css.fontWeight.regular)
+                .should('have.css', 'background-color', css.color.primaryBtnBg);
+            essayResponsePage.hyperlinkDialogboxButtonCancel()
+                .should('have.css', 'background-color', css.color.secondaryBtnBg)
+                .find('.cke_dialog_ui_button')
+                .verifyCSS(css.color.secondaryBtn, css.fontSize.default, css.fontWeight.regular);
+        });
+
+        it('Accessibility of the \'Hyperlink\' popup', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(essayResponsePage.hyperlinkDialogBox());
+        });
+
+        it('\'Display text\' and \'URL\' labels and input fields should be displayed in the Hyperlink popup and the input fields should be blank by default', () => {
+            essayResponsePage.hyperlinkDialogboxDisplayTextLabel()
+                .should('be.visible');
+            essayResponsePage.hyperlinkDialogboxDisplayTextInputField()
+                .should('be.visible')
+                .and('have.value', '');
+            essayResponsePage.hyperlinkDialogboxURLLabel()
+                .should('be.visible');
+            essayResponsePage.hyperlinkDialogboxURLInputField()
+                .should('be.visible')
+                .and('have.value', '');
+        });
+
+        it('\'Ok\' button should be displayed in the popup', () => {
+            essayResponsePage.hyperlinkDialogboxButtonOk()
+                .should('be.visible');
+        });
+
+        it('\'Cancel\' button should be displayed in the popup and when user clicks on it then the popup should close', () => {
+            essayResponsePage.hyperlinkDialogboxButtonCancel()
+                .should('be.visible')
+                .click();
+            essayResponsePage.hyperlinkDialogBox()
+                .should('not.be.visible');
+        });
+    });
+
+    describe('Add a Hyperlink to the response field', () => {
+        abortEarlySetup()
+        before(() => {
+            cy.log('Navigate to Essay Response question type and switching to preview tab and opening Hyperlink popup.');
+            essayResponsePage.steps.navigateToCreateQuestion('essay response - rich text');
+            essayResponsePage.steps.switchToPreviewTab();
+            essayResponsePage.previewTabToolbarOption('Insert Hyperlink')
+                .click();
+        });
+
+        it('When user keeps the URL input field empty and clicks on \'Ok\' button, then a browser alert popup should be displayed with the message "Please type the link URL" and the hyperlink popup should remain open', () => {
+            essayResponsePage.hyperlinkDialogboxDisplayTextInputField()
+                .type('lorem')
+                .should('have.value', 'lorem');
+            essayResponsePage.hyperlinkDialogboxButtonOk()
+                .click();
+            cy.on('window:alert', (alert) => {
+                expect(alert).to.deep.eq('Please type the link URL');
+            });
+            essayResponsePage.hyperlinkDialogBox()
+                .should('be.visible');
+        });
+
+        it('When user gives input only to \'URL\' input field and clicks on \'Ok\' button, then the \'Hyperlink\' popup should close, hyperlink should be displayed in the response field and in the added hyperlink\'s popup, the display text input field should be prefilled with the previously added URL', () => {
+            cy.log('Pre-step: Clear display text input field.');
+            essayResponsePage.hyperlinkDialogboxDisplayTextInputField()
+                .clear();
+            essayResponsePage.hyperlinkDialogboxURLInputField()
+                .type(`${Cypress.config().baseUrl}`);
+            essayResponsePage.hyperlinkDialogboxButtonOk()
+                .click();
+            essayResponsePage.previewInputFieldHyperlinkText()
+                .verifyInnerText(`${Cypress.config().baseUrl}`)
+                .and('have.attr', 'href', `${Cypress.config().baseUrl}`);
+            essayResponsePage.previewInputFieldHyperlinkText()
+                .rightclick();
+            essayResponsePage.hyperlinkDialogBox()
+                .should('exist');
+            essayResponsePage.hyperlinkDialogboxDisplayTextInputField()
+                .should('have.value', `${Cypress.config().baseUrl}`);
+            essayResponsePage.hyperlinkDialogboxURLInputField()
+                .should('have.value', `${Cypress.config().baseUrl}`);
+            cy.log('Post-step: Click on cancel button to close popup');
+            essayResponsePage.hyperlinkDialogboxButtonCancel()
+                .click();
+        });
+
+        it('When the user has added a hyperlink to the response area then the word count should be increased by 1', () => {
+            essayResponsePage.responseFieldWordCount()
+                .verifyInnerText('1/10000');
+        });
+
+        it('When user removes the added hyperlink, then the word count should be decreased by 1', () => {
+            essayResponsePage.responseField()
+                .clear();
+            essayResponsePage.responseFieldWordCount()
+                .verifyInnerText('0/10000');
+        });
+
+        it('When user gives a normal text input to the URL input field in the hyper link popup and clicks on Ok button, then \'https://\' should be appended to the given input in the hyperlink text displayed in the response field', () => {
+            cy.log('Switching to edit tab')
+            essayResponsePage.steps.switchToEditTab();
+            essayResponsePage.steps.switchToPreviewTab();
+            essayResponsePage.previewTabToolbarOption('Insert Hyperlink')
+                .click();
+            essayResponsePage.hyperlinkDialogboxURLInputField()
+                .type('lorem');
+            essayResponsePage.hyperlinkDialogboxButtonOk()
+                .click();
+            essayResponsePage.previewInputFieldHyperlinkText()
+                .verifyInnerText('https://lorem')
+                .and('have.attr', 'href', 'https://lorem');
+        });
+
+        it('When user shifts the cursor away from the hyperlink and clicks on \'Hyperlink\' option in the toolbar, then the Hyperlink popup should appear again in its default state', () => {
+            essayResponsePage.responseField()
+                .click()
+                .type('  ');
+            essayResponsePage.previewTabToolbarOption('Insert Hyperlink')
+                .click();
+            essayResponsePage.hyperlinkDialogBox()
+                .should('be.visible');
+            essayResponsePage.hyperlinkDialogboxDisplayTextInputField()
+                .should('have.value', '');
+            essayResponsePage.hyperlinkDialogboxURLInputField()
+                .should('have.value', '');
+        });
+
+        it('When user adds both \'Display text\' as well as \'URL\' in the hyperlink popup and clicks on Ok button, then the hyperlink with the added display text and URL should be displayed in the response field', () => {
+            essayResponsePage.hyperlinkDialogboxDisplayTextInputField()
+                .type('Link');
+            essayResponsePage.hyperlinkDialogboxURLInputField()
+                .type(`${Cypress.config().baseUrl}`);
+            essayResponsePage.hyperlinkDialogboxButtonOk()
+                .click();
+            essayResponsePage.previewInputFieldHyperlinkText()
+                .eq(1)
+                .verifyInnerText('Link')
+                .and('have.attr', 'href', `${Cypress.config().baseUrl}`);
+        });
+
+        it('CSS of the hyperlink in response field', { tags: 'css' }, () => {
+            essayResponsePage.previewInputFieldHyperlinkText()
+                .eq(1)
+                .verifyCSS(css.color.linkText, css.fontSize.default, css.fontWeight.regular);
+        });
+
+        it('Accessibility of the hyperlink in response field', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(essayResponsePage.previewInputFieldHyperlinkText());
+        });
+    });
+
+    describe('Edit a previously added hyperlink', () => {
+        abortEarlySetup()
+        before(() => {
+            cy.log('Navigate to Essay Response question type and switching to preview tab and adding Hyperlink to response area.');
+            essayResponsePage.steps.navigateToCreateQuestion('essay response - rich text');
+            essayResponsePage.steps.switchToPreviewTab();
+            essayResponsePage.previewTabToolbarOption('Insert Hyperlink')
+                .click();
+            essayResponsePage.hyperlinkDialogboxDisplayTextInputField()
+                .type('Link');
+            essayResponsePage.hyperlinkDialogboxURLInputField()
+                .type(`${Cypress.config().baseUrl}`);
+            essayResponsePage.hyperlinkDialogboxButtonOk()
+                .click();
+        });
+
+        it('When the added hyperlink is in focus and user clicks on \'Hyperlink\' toolbar option then \'Hyperlink\' popup should appear with the details of the focused hyperlink', () => {
+            essayResponsePage.previewTabToolbarOption('Insert Hyperlink')
+                .click();
+            essayResponsePage.hyperlinkDialogBox()
+                .should('be.visible');
+            essayResponsePage.hyperlinkDialogboxDisplayTextInputField()
+                .should('have.value', 'Link');
+            essayResponsePage.hyperlinkDialogboxURLInputField()
+                .should('have.value', `${Cypress.config().baseUrl}`);
+            cy.log('Post-step: Click on cancel button to close hyperlink popup');
+            essayResponsePage.hyperlinkDialogboxButtonCancel()
+                .click();
+        });
+
+        it('When the user double clicks on the added hyperlink then \'Hyperlink\' popup should appear with the details of the focused hyperlink', () => {
+            essayResponsePage.previewInputFieldHyperlinkText()
+                .dblclick();
+            essayResponsePage.hyperlinkDialogBox()
+                .should('be.visible');
+            essayResponsePage.hyperlinkDialogboxDisplayTextInputField()
+                .should('have.value', 'Link');
+            essayResponsePage.hyperlinkDialogboxURLInputField()
+                .should('have.value', `${Cypress.config().baseUrl}`);
+            cy.log('Post-step: Click on cancel button to close hyperlink popup');
+            essayResponsePage.hyperlinkDialogboxButtonCancel()
+                .click();
+        });
+
+        it('When the added hyperlink is in focus and user right clicks on it, then \'Hyperlink\' popup should appear with the details of the focused hyperlink', () => {
+            essayResponsePage.previewInputFieldHyperlinkText()
+                .rightclick();
+            essayResponsePage.hyperlinkDialogBox()
+                .should('be.visible');
+            essayResponsePage.hyperlinkDialogboxDisplayTextInputField()
+                .should('have.value', 'Link');
+            essayResponsePage.hyperlinkDialogboxURLInputField()
+                .should('have.value', `${Cypress.config().baseUrl}`);
+        });
+
+        it('When user updates the details of a pre-existing hyperlink in its hyperlink popup and clicks on \'Cancel\' button, then the updated details should not be reflected in the displayed hyperlink', () => {
+            essayResponsePage.hyperlinkDialogboxDisplayTextInputField()
+                .clear()
+                .type('Edited');
+            essayResponsePage.hyperlinkDialogboxURLInputField()
+                .clear()
+                .type('https://www.google.com');
+            essayResponsePage.hyperlinkDialogboxButtonCancel()
+                .click();
+            essayResponsePage.previewInputFieldHyperlinkText()
+                .verifyInnerText('Link')
+                .and('have.attr', 'href', `${Cypress.config().baseUrl}`);
+        });
+
+        it('When user updates the details of a pre-existing hyperlink in its hyperlink popup and clicks on \'Ok\' button, then the updated details should be reflected in the displayed hyperlink', () => {
+            cy.log('Pre-step: Right click on the hyperlink to open its hyperlink popup');
+            essayResponsePage.previewInputFieldHyperlinkText()
+                .rightclick();
+            essayResponsePage.hyperlinkDialogboxDisplayTextInputField()
+                .clear()
+                .type('Edited');
+            essayResponsePage.hyperlinkDialogboxURLInputField()
+                .clear()
+                .type('https://www.google.com');
+            essayResponsePage.hyperlinkDialogboxButtonOk()
+                .click();
+            essayResponsePage.previewInputFieldHyperlinkText()
+                .verifyInnerText('Edited')
+                .and('have.attr', 'href', 'https://www.google.com');
+        });
+
+        it('When the user right clicks on automatically hyperlinked text then the hyperlink popup should open and the details should be correctly displayed in the popup, and the user should be able to edit the details of the automatically hyperlinked text', () => {
+            cy.log('Pre-step: Clearing the response area and typing a link in the response area for automatic hyperlinking');
+            essayResponsePage.responseField()
+                .type(`{selectAll}{backspace}${Cypress.config().baseUrl}  `);
+            essayResponsePage.previewInputFieldHyperlinkText()
+                .rightclick();
+            essayResponsePage.hyperlinkDialogboxDisplayTextInputField()
+                .should('have.value', `${Cypress.config().baseUrl}`)
+                .clear()
+                .type('Google')
+                .should('have.value', 'Google');   //Editing automatically hyperlinked text
+            essayResponsePage.hyperlinkDialogboxURLInputField()
+                .should('have.value', `${Cypress.config().baseUrl}`)
+                .clear()
+                .type('https://www.google.com')
+                .should('have.value', 'https://www.google.com');
+            essayResponsePage.hyperlinkDialogboxButtonOk()
+                .click();
+            essayResponsePage.previewInputFieldHyperlinkText()
+                .verifyInnerText('Google')
+                .and('have.attr', 'href', `https://www.google.com`);
+        });
+
+        it('When the user selects the added hyperlink and clicks on any formatting option, then the formatting should be applied to the displayed hyperlink.', () => {
+            essayResponsePage.previewTabToolbarOption('Bold (Ctrl+B)')
+                .click();
+            essayResponsePage.previewInputFieldHyperlinkText()
+                .should('have.css', 'font-weight', css.fontWeight.bold);
+        });
+    });
+});

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

@@ -0,0 +1,59 @@
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import { essayResponsePage } from "../../../pages";
+
+describe('Create question page - Essay response: Scoring', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Scoring Section contents', () => {
+        abortEarlySetup();
+        before(() => {
+            essayResponsePage.steps.navigateToCreateQuestion('essay response - rich text');
+        });
+
+        essayResponsePage.tests.verifyScoringTypeLabelAndDropdown('manuallyScored');
+    });
+
+    describe('Manually scored scoring type - Question creation page', () => {
+        abortEarlySetup();
+        before(() => {
+            essayResponsePage.steps.navigateToCreateQuestion('essay response - rich text');
+        });
+
+        it('When the user selects \'Manually scored\' option from the Scoring Type dropdown, then the \'Points\' and \'Minimum score awarded (if attempted)\' labels and input fields should be displayed', () => {
+            cy.log('Pre-step: Opening the scoring type dropdown.');
+            essayResponsePage.steps.selectAScoringTypeFromScoringTypeDropdown('Manually scored');
+            essayResponsePage.steps.verifyDefaultPointsLabelAndInputField();
+            essayResponsePage.steps.verifyDefaultMinimumScoreIfAttemptedLabelAndPointsField();
+        });
+
+        essayResponsePage.tests.verifyPointsFieldErrorState(10);
+        essayResponsePage.tests.verifyMinimumScoreIfAttemptedFieldErrorState(10, 20, 10);
+
+        it('Pre step: Switching to Preview tab', () => {
+            essayResponsePage.steps.switchToPreviewTab();
+        });
+
+        essayResponsePage.tests.verifyShowCorrectAnswerAndPointsNotDisplayedInPreviewTab()
+    });
+
+    describe('Non Scored scoring type - Question creation page', () => {
+        abortEarlySetup();
+        before(() => {
+            essayResponsePage.steps.navigateToCreateQuestion('essay response - rich text');
+        });
+
+        it('When the user selects \'Non Scored\' option from the Scoring Type dropdown, then the \'Points\' input field should be displayed in disabled state with prefilled \'0\' points and \'Minimum score awarded (if attempted)\' input field should not be displayed', () => {
+            cy.log('Pre-step: Opening the scoring type dropdown.');
+            essayResponsePage.steps.selectAScoringTypeFromScoringTypeDropdown('Non scored');
+            essayResponsePage.steps.verifyNonScoredPointsField();
+        });
+
+        it('Pre step: Switching to Preview tab', () => {
+            essayResponsePage.steps.switchToPreviewTab();
+        });
+
+        essayResponsePage.tests.verifyShowCorrectAnswerAndPointsNotDisplayedInPreviewTab()
+    });
+});

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

@@ -0,0 +1,33 @@
+import { essayResponsePage } from "../../../pages";
+import { createQuestionBasePage } from "../../../pages/components";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+
+describe('Essay Response: Special Characters popup', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Special Characters popup contents', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigate to Essay Response question type and switching to preview tab.');
+            essayResponsePage.steps.navigateToCreateQuestion('essay response - rich text');
+            createQuestionBasePage.steps.switchToPreviewTab();
+        });
+
+        essayResponsePage.tests.verifySpecialOrMathCharactersPopup('specialCharacters');
+    });
+
+    describe('Add special character symbols to the response field', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigate to Essay Response question type, switching to preview tab and clicking on special characters toolbar option.');
+            essayResponsePage.steps.navigateToCreateQuestion('essay response - rich text');
+            createQuestionBasePage.steps.switchToPreviewTab();
+            essayResponsePage.previewTabToolbarOption('Special characters')
+                .click();
+        });
+
+        essayResponsePage.tests.addSpecialOrMathCharactersToResponseField('specialCharacters');
+    });
+});

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
+});

package/cypress/e2e/ILC/EssayResponseMath/essayResponseMathCharacters.js

@@ -0,0 +1,38 @@
+import { essayResponsePage } from "../../../pages";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+
+describe('Essay Response: Math Characters popup', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Math Characters popup contents', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigate to Essay Response question type, selecting math characters from customize formatting options accordion and then switching to preview tab.');
+            essayResponsePage.steps.navigateToCreateQuestion('essay response - rich text');
+            cy.barsPreLoaderWait();
+            essayResponsePage.steps.expandCustomizeFormattingOptionsAccordion();
+            essayResponsePage.steps.selectCustomizedFormattingOption(['Math characters']);
+            essayResponsePage.steps.switchToPreviewTab();
+        });
+
+        essayResponsePage.tests.verifySpecialOrMathCharactersPopup('mathCharacters');
+    });
+
+    describe('Add math character symbols to the response field', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigate to Essay Response question type, selecting math characters from customize formatting options accordion, switching to preview tab and clicking on math characters toolbar option.');
+            essayResponsePage.steps.navigateToCreateQuestion('essay response - rich text');
+            cy.barsPreLoaderWait();
+            essayResponsePage.steps.expandCustomizeFormattingOptionsAccordion();
+            essayResponsePage.steps.selectCustomizedFormattingOption(['Math characters']);
+            essayResponsePage.steps.switchToPreviewTab();
+            essayResponsePage.previewTabToolbarOption('Math characters')
+                .click();
+        });
+
+        essayResponsePage.tests.addSpecialOrMathCharactersToResponseField('mathCharacters');
+    });
+});