itemengine-cypress-automation 1.0.2

package/cypress/pages/essayResponseBasicPage.js

@@ -0,0 +1,57 @@
+import { createQuestionBasePage, scoringSectionBase, additionalSettingsPanel, essayResponseCommonComponents } from "./components";
+import { questionInstructionsComponent } from "./components/questionInstructionsComponent";
+
+const selectors = {
+    ...createQuestionBasePage,
+    ...questionInstructionsComponent,
+    ...additionalSettingsPanel,
+    ...scoringSectionBase,
+    ...essayResponseCommonComponents,
+    //Customize Formatting options section
+    customizeFormattingOptionsSectionLabel: () => cy.get('.customize-essay-formatting-options .ngie-toggle-button-title'),
+    cutCustomizeFormattingOption: () => cy.get(`[data-ngie-testid="cut-toggle-button"]`),
+    copyCustomizeFormattingOption: () => cy.get(`[data-ngie-testid="copy-toggle-button"]`),
+    pasteCustomizeFormattingOption: () => cy.get(`[data-ngie-testid="paste-toggle-button"]`),
+    specialCharacterCustomizeFormattingOption: () => cy.get(`[data-ngie-testid="special-characters-toggle-button"]`),
+    customizeFormattingOptionsLabel: () => cy.get('.customized_button_label'),
+    customizeFormattingOptionsIcon: () => cy.get('.audio_icon_wrapper'),
+    customizeFormattingOptionsWrapper: () => cy.get('.customize-essay-formatting-options'),
+};
+
+const steps = {
+    ...createQuestionBasePage.steps,
+    ...questionInstructionsComponent.steps,
+    ...additionalSettingsPanel.steps,
+    ...scoringSectionBase.steps,
+    ...essayResponseCommonComponents.steps,
+
+    cutTextFromResponseField: () => {
+        essayResponseBasicPage.responseField()
+            .type('{selectAll}');
+        essayResponseBasicPage.previewTabToolbarOption('Cut')
+            .click();
+    },
+
+    copyTextFromResponseField: () => {
+        essayResponseBasicPage.responseField()
+            .type('{selectAll}');
+        essayResponseBasicPage.previewTabToolbarOption('Copy')
+            .click();
+        essayResponseBasicPage.responseField()
+            .click();
+    },
+};
+
+const tests = {
+    ...createQuestionBasePage.tests,
+    ...questionInstructionsComponent.tests,
+    ...additionalSettingsPanel.tests,
+    ...scoringSectionBase.tests,
+    ...essayResponseCommonComponents.tests
+};
+
+export const essayResponseBasicPage = {
+    ...selectors,
+    tests,
+    steps
+};

package/cypress/pages/essayResponseMathPage.js

@@ -0,0 +1,47 @@
+import { questionInstructionsComponent, scoringSectionBase, createQuestionBasePage, additionalSettingsPanel, essayResponseCommonComponents } from "./components";
+import { essayResponsePage } from ".";
+
+const selectors = {
+    ...scoringSectionBase,
+    ...createQuestionBasePage,
+    ...additionalSettingsPanel,
+    ...questionInstructionsComponent,
+    ...essayResponsePage,
+    ...essayResponseCommonComponents,
+    textToNotBeRenderedAsLaTexLabel: () => cy.get('.text-not-latex-wrapper .text-label'),
+    textToNotBeRenderedAsLaTextInputFieldWrapper: (inputfieldNumber) => cy.get('.text-not-to-be-rendered-input').eq(inputfieldNumber),
+    textToNotBeRenderedAsLaTextInputField: () => cy.get('[aria-label="Text to not be rendered as LaTex"]'),
+    textToNotBeRenderedAsLaTextInputFieldCount: () => cy.get('.start-adornment'),
+    addTextButton: () => cy.get('.text-not-latex-wrapper .add-option'),
+    inputFieldLatexCharacter: () => cy.get('var[mathquill-command-id]')
+}
+
+const steps = {
+    ...createQuestionBasePage.steps,
+    ...questionInstructionsComponent.steps,
+    ...scoringSectionBase.steps,
+    ...additionalSettingsPanel.steps,
+    ...essayResponsePage.steps,
+    ...essayResponseCommonComponents.steps,
+    addTextToNotBeRenderedAsLatexEditTab: (inputFieldIndex, textContent) => {
+        essayResponseMathPage.textToNotBeRenderedAsLaTextInputFieldWrapper(inputFieldIndex)
+            .within(() => {
+                essayResponseMathPage.textToNotBeRenderedAsLaTextInputField()
+                    .type(textContent)
+                    .should('have.value', textContent);
+            });
+    }
+}
+
+const tests = {
+    ...createQuestionBasePage.tests,
+    ...questionInstructionsComponent.tests,
+    ...additionalSettingsPanel.tests,
+    ...scoringSectionBase.tests
+}
+
+export const essayResponseMathPage = {
+    ...selectors,
+    steps,
+    tests,
+}

package/cypress/pages/essayResponsePage.js

@@ -0,0 +1,385 @@
+import { equationEditorCategoriesAndSymbols } from "../fixtures/equationEditorCategoriesAndSymbols ";
+import { questionInstructionsComponent, scoringSectionBase, createQuestionBasePage, additionalSettingsPanel, previewScoringAndShowCorrectAnswerComponent, commonComponents } from "./components";
+import { equationEditorFlyout } from "./components/equationEditorFlyout";
+import { essayResponseCommonComponents } from "./components/essayResponseCommonComponents";
+import { specialOrMathCharacters } from "../fixtures/specialAndMathCharacters";
+const css = Cypress.env('css');
+
+let originalText;
+let formattedText;
+
+const selectors = {
+    ...scoringSectionBase,
+    ...createQuestionBasePage,
+    ...additionalSettingsPanel,
+    ...questionInstructionsComponent,
+    ...essayResponseCommonComponents,
+    //Basic section
+    setWordLimitLabel: () => cy.get('[class*="EssayResponseComponentstyles__PropertyLabel"]'),
+    setWordLimitInputField: () => cy.get('.essay-response-question-word-limit-setting-wrapper input[type="text"]'),
+    displayWordLimitLabel: () => cy.get('#Display-word-limit-dropdown-label'),
+    displayWordLimitDropdown: () => cy.get('#Display-word-limit-select'),
+    displayWordLimitDropdownListOptions: (optionIndex) => cy.get('.dropdown-list-ul [role="option"]').eq(optionIndex),
+    allowSubmissionOverWordLimitLabel: () => cy.get('[data-ngie-testid="allow-submission-over-word-limit-checkbox"] .MuiFormControlLabel-label'),
+    allowSubmissionOverWordLimitCheckbox: () => cy.get('[data-ngie-testid="allow-submission-over-word-limit-checkbox"] input'),
+    showWordCountLabel: () => cy.get('[data-ngie-testid="show-word-count-checkbox"] .MuiFormControlLabel-label'),
+    showWordCountCheckbox: () => cy.get('[data-ngie-testid="show-word-count-checkbox"] input'),
+    //Customize Formatting Options
+    customizeFormattingOptionsAccordion: () => cy.get('.customize-formatting-option-wrapper .ngie-accordion-summary'),
+    customizeFormattingOptionsAccordionLabel: () => cy.get('.customize-formatting-options-label'),
+    customizeFormattingOptionsTiles: (toolbarOption) => cy.get(`.icon-button-custom-format[title="${toolbarOption}"]`),
+    customizeFormattingOptionsWrapper: () => cy.get('.essay-response-grid-wrapper'),
+    equationEditorOptionsWrapper: () => cy.get('[class*="EssayResponseComponentstyles__EquationEditorOptionsWrapper"]'),
+    //Todo: need to remove this and use common component drag handle
+    customizeFormattingOptionsdragHandleButton: () => cy.get('[class*="drag-icon-"]'),
+    equationEditorLabel: () => cy.get('.equation-editor-text-title'),
+    disableCutCopyPasteLabel: () => cy.get('[data-ngie-testid="disable-cut,-copy-and-paste-checkbox"] .MuiFormControlLabel-label'),
+    disableCutCopyPasteCheckbox: () => cy.get('[data-ngie-testid="disable-cut,-copy-and-paste-checkbox"] input'),
+    //Preview tab
+    previewTabColorPalettePopup: () => cy.get('.cke_panel_frame'),
+    previewTabToolbarSeperator: () => cy.get('.essay-preview-wrapper span[class="cke_toolbar_separator"]'),
+    specialCharacterFlyoutIcon: (characterIndex) => cy.get('.img_special_char').eq(characterIndex), //need to update and change this
+    //Equation Editor section
+    equationEditorSectionCategories: () => cy.get('[class*="DraggableItemsGrid"] .icon-button-custom-format'),
+    equationEditorSectionCategoryLabel: () => cy.get('.equation-editor-label-wrapper'),
+    equationEditorSection: () => cy.get('[class*="EquationEditorOptionsWrapper"]'),
+    equationEditorSectionTitle: () => cy.get('.equation-editor-text-title'),
+    equationEditorSectionHelperText: () => cy.get('.equation-editor-description-text'),
+    equationEditorSectionCategoriesDragIcon: () => cy.get('.drag-icon-equation-editor-button'),
+    equationEditorSectionCategoriesEditIcon: () => cy.get('.edit-icon-button button'),
+    equationEditorSectionTickIcon: () => cy.get('.tick-icon-wrapper'),
+    selectACategoryErrorMessage: () => cy.get('[class*="ErrorBlock"]'),
+    createCustomCategoryButton: () => cy.get('.equation-editor-wrapper button'),
+    equationEditorSectionCategoryIcon: () => cy.get('.equation-editor-icon'),
+    equationEditorSectionDeleteCustomCategoryIcon: () => cy.get('.delete-button-icon button')
+}
+
+const tableDialogBox = {    //TODO: Once redmine issue is fixed the selectors will get changed to this: editTableDialogboxAddHeaderRowLabel: () => cy.get('.add-table-dialog .chk_box_add_header_row')
+    //Add table dialog box
+    addTableDialogBox: () => cy.get('a[title="Add Table"]').parents('.cke_dialog_body'),
+    addTableDialogBoxTitle: () => essayResponsePage.addTableDialogBox().find('.cke_dialog_title'),
+    addTableDialogBoxAddHeaderRowLabel: () => essayResponsePage.addTableDialogBox().find('.chk_box_add_header_row'),
+    addTableDialogBoxHighlightFirstColumnLabel: () => cy.get('.cke_dialog_ui_checkbox_input').eq(1).parent().find('label'),    //TODO- Need to update. No unique property available.
+    addTableDialogBoxAddHeaderRowCheckbox: () => essayResponsePage.addTableDialogBox().find('[class*="cke_dialog_ui_checkbox_input"]').eq(0),
+    addTableDialogBoxHighlightFirstColumnCheckbox: () => essayResponsePage.addTableDialogBox().find('[class*="cke_dialog_ui_checkbox_input"]').eq(1),
+    addTableDialogBoxButtonAddTable: () => cy.get('a[title="Add Table"]'),
+    addTableDialogBoxButtonCancel: () => essayResponsePage.addTableDialogBox().find('a[class*="cancel-button"]'),
+    addTableDialogBoxColumnsLabel: () => essayResponsePage.addTableDialogBox().find('.cke_dialog_ui_labeled_label').eq(0),
+    addTableDialogBoxRowsLabel: () => essayResponsePage.addTableDialogBox().find('.cke_dialog_ui_labeled_label').eq(1),
+    addTableDialogBoxColumnsInputField: () => essayResponsePage.addTableDialogBox().find('input[class="cke_dialog_ui_input_text"][type="number"]').eq(0),
+    addTableDialogBoxRowsInputField: () => essayResponsePage.addTableDialogBox().find('input[class="cke_dialog_ui_input_text"][type="number"]').eq(1),
+    previewInputFieldTable: () => cy.get('.ngcke_custom_table'),
+    previewTabToolbarDialogboxIconClose: () => essayResponsePage.addTableDialogBox().find('a[title="Close"]'),
+    //Edit Table Dialog Box
+    editTableDialogBox: () => cy.get('[title="Save"]').parents('.cke_dialog_body'),
+    editTableDialogBoxAddHeaderRowLabel: () => essayResponsePage.editTableDialogBox().find('.chk_box_add_header_row').eq(0),
+    editTableDialogBoxHighlightFirstColumnLabel: () => essayResponsePage.editTableDialogBox().find('.chk_box_highlight_first_column').eq(0),
+    editTableDialogBoxAddHeaderRowCheckbox: () => essayResponsePage.editTableDialogBox().find('[class*="cke_dialog_ui_checkbox_input"]').eq(0),
+    editTableDialogBoxHighlightFirstColumnCheckbox: () => essayResponsePage.editTableDialogBox().find('[class*="cke_dialog_ui_checkbox_input"]').eq(1),
+    editTableDialogBoxColumnsLabel: () => essayResponsePage.editTableDialogBox().find('.cke_dialog_ui_labeled_label').eq(0),
+    editTableDialogBoxRowsLabel: () => essayResponsePage.editTableDialogBox().find('.cke_dialog_ui_labeled_label').eq(1),
+    editTableDialogBoxInsertBeforeButton: () => cy.get('[title="Insert Before"]'),
+    editTableDialogBoxInsertAfterButton: () => cy.get('[title="Insert After"]'),
+    editTableDialogBoxDeleteColumnButton: () => cy.get('[title="Delete Column"]'),
+    editTableDialogBoxInsertAboveButton: () => cy.get('[title="Insert Above"]'),
+    editTableDialogBoxInsertBelowButton: () => cy.get('[title="Insert Below"]'),
+    editTableDialogBoxDeleteRowButton: () => cy.get('[title="Delete Row"]'),
+    editTableDialogBoxButtonClose: () => essayResponsePage.editTableDialogBox().find('a[title="Close"]'),
+    editTableDialogBoxButtonSave: () => cy.get('a[title="Save"]'),
+    editTableDialogBoxButtonCancel: () => essayResponsePage.editTableDialogBox().find('a[class*="cancel-button"]'),
+    editTableDialogBoxButtonDelete: () => cy.get('a[title="Delete"]')
+}
+
+const hyperlinkDialogBox = {
+    hyperlinkDialogBox: () => cy.get('.cke_dialog_body').contains('Hyperlink').parents('.cke_dialog_body'),
+    hyperlinkDialogBoxTitle: () => essayResponsePage.hyperlinkDialogBox().find('.cke_dialog_title'),
+    hyperlinkDialogboxDisplayTextLabel: () => essayResponsePage.hyperlinkDialogBox().find('.cke_dialog_ui_labeled_label').eq(0),
+    hyperlinkDialogboxURLLabel: () => essayResponsePage.hyperlinkDialogBox().find('.cke_dialog_ui_labeled_label').eq(1),
+    hyperlinkDialogboxDisplayTextInputField: () => essayResponsePage.hyperlinkDialogBox().find('input[class*="cke_dialog_ui_input_text"]').eq(0),
+    hyperlinkDialogboxURLInputField: () => essayResponsePage.hyperlinkDialogBox().find('input[class*="cke_dialog_ui_input_text"]').eq(1),
+    hyperlinkDialogboxButtonOk: () => essayResponsePage.hyperlinkDialogBox().find('a[title="OK"]'),
+    hyperlinkDialogboxButtonCancel: () => essayResponsePage.hyperlinkDialogBox().find('a[title="Cancel"]'),
+    previewInputFieldHyperlinkText: () => cy.get('div[title="Enter your response to the question here."] a'),
+}
+
+const specialAndMathCharacters = {
+    specialAndMathCharacterPopup: () => cy.get('.cke_dialog_body').contains(/Special characters|Math characters/).parents('.cke_dialog_body'),
+    specialAndMathCharacterPopupSymbolsWrapper: () => essayResponsePage.specialAndMathCharacterPopup().find('.special_char_td'),
+    specialAndMathCharacterPopupSymbols: () => essayResponsePage.specialAndMathCharacterPopup().find('.special_char_td a[role="option"]'),
+    specialAndMathCharacterPopupTitle: () => essayResponsePage.specialAndMathCharacterPopup().find('.cke_dialog_title '),
+    specialAndMathCharacterPopupCloseButton: () => essayResponsePage.specialAndMathCharacterPopup().find('a[title="Close"]')
+}
+
+const steps = {
+    ...createQuestionBasePage.steps,
+    ...questionInstructionsComponent.steps,
+    ...scoringSectionBase.steps,
+    ...additionalSettingsPanel.steps,
+    ...essayResponseCommonComponents.steps,
+    expandCustomizeFormattingOptionsAccordion: () => {
+        essayResponsePage.customizeFormattingOptionsAccordion()
+            .click()
+            .should('have.attr', 'aria-expanded', 'true');
+    },
+
+    selectingCategories: (categoriesArray) => {
+        categoriesArray.forEach((categoryName) => {
+            essayResponsePage.equationEditorSectionCategories()
+                .contains(categoryName, { matchCase: false })
+                .click();
+        });
+    },
+
+    selectCustomizedFormattingOption: (formattingOptionArray) => {
+        formattingOptionArray.forEach((formattingOption) => {
+            essayResponsePage.customizeFormattingOptionsTiles(formattingOption)
+                .click()
+                .should('have.attr', 'data-aria-pressed', 'true');
+        });
+    },
+
+    selectPreviewTabToolbarOption: (toolbarOption) => {
+        if (toolbarOption == 'Insert Horizontal Line' || toolbarOption == 'Code Editor' || toolbarOption == 'Increase Indent' || toolbarOption == 'Decrease Indent' || toolbarOption == 'Remove Format') {
+            essayResponsePage.previewTabToolbarOption(toolbarOption)
+                .click()
+                .should('have.attr', 'aria-pressed', 'false');
+        } else {
+            essayResponsePage.previewTabToolbarOption(toolbarOption)
+                .click()
+                .should('have.attr', 'aria-pressed', 'true');
+        }
+    },
+
+    deselectPreviewTabToolbarOption: (toolbarOption) => {
+        essayResponsePage.previewTabToolbarOption(toolbarOption)
+            .click()
+            .should('have.attr', 'aria-pressed', 'false');
+    },
+
+    selectColorFromPopup: (color) => {
+        essayResponsePage.previewTabColorPalettePopup()
+            .its('0.contentDocument.body').should('not.be.empty')
+            .within(() => {
+                cy.get('div[title="Colors"]')
+                    .last()
+                    .find(`[title="${color}"]`)
+                    .last()
+                    .click();
+            });
+    },
+
+    verifyUndoAndRedoFunctionality: (toolbarOption, orignalText, formattedText) => {
+        essayResponsePage.previewTabToolbarOption('Undo (Ctrl+Z)')
+            .click();
+        if (toolbarOption == 'Background Color' || toolbarOption == 'Text Color') {
+            essayResponsePage.previewTabToolbarOption(toolbarOption)
+                .should('have.attr', 'aria-expanded', 'false');
+        } else {
+            essayResponsePage.previewTabToolbarOption(toolbarOption)
+                .should('have.attr', 'aria-pressed', 'false');
+        };
+        essayResponsePage.responseField()
+            .verifyInnerHTML(orignalText);
+        essayResponsePage.previewTabToolbarOption('Redo (Ctrl+Y)')
+            .click();
+        if (toolbarOption == 'Background Color' || toolbarOption == 'Text Color') {
+            essayResponsePage.previewTabToolbarOption(toolbarOption)
+                .should('have.attr', 'aria-expanded', 'true');
+        } else if (toolbarOption == 'Insert Horizontal Line' || toolbarOption == 'Code Editor' || toolbarOption == 'Increase Indent' || toolbarOption == 'Decrease Indent' || toolbarOption == 'Remove Format') {
+            essayResponsePage.previewTabToolbarOption(toolbarOption)
+                .should('have.attr', 'aria-pressed', 'false');
+        } else {
+            essayResponsePage.previewTabToolbarOption(toolbarOption)
+                .should('have.attr', 'aria-pressed', 'true');
+        };
+        essayResponsePage.responseField()
+            .verifyInnerHTML(formattedText);
+    }
+}
+
+const tests = {
+    ...createQuestionBasePage.tests,
+    ...questionInstructionsComponent.tests,
+    ...additionalSettingsPanel.tests,
+    ...scoringSectionBase.tests,
+    ...previewScoringAndShowCorrectAnswerComponent.tests,
+    ...commonComponents.tests,
+    insertEquationAndVerifyInputFieldContentsAndWordCount: (expectedOutput, wordCount) => {
+        it(`On clicking the Ok button the symbols/equation entered should be displayed in the preview tab input field and the Word count should increase to ${wordCount}`, () => {
+            equationEditorFlyout.buttonOk()
+                .click();
+            essayResponsePage.responseField()
+                .find('.cke_widget_element')
+                .should('have.text', `${expectedOutput}`);
+            essayResponsePage.steps.verifyResponseFieldWordCount(wordCount);
+        });
+    },
+
+    verifyUndoAndRedoFunctionalityForPreviewTabToolbarOption: (toolbarOption) => {
+        it(`When the user enters text in the response field, selects the text and selects the ${toolbarOption} toolbar option and clicks on the \'Undo\' toolbar option, then it should undo the latest action and when the user clicks on the \'Redo\' toolbar option, then it should redo the latest action`, () => {
+            essayResponsePage.steps.resetPreviewTabResponseField();
+            essayResponsePage.responseField()
+                .type('Lorem Ipsum');
+            if (toolbarOption == 'Decrease Indent') {
+                essayResponsePage.previewTabToolbarOption('Increase Indent')
+                    .click();
+            } else if (toolbarOption == 'Remove Format') {
+                essayResponsePage.responseField()
+                    .type('{selectAll}');
+                essayResponsePage.steps.selectPreviewTabToolbarOption('Bold (Ctrl+B)');
+            };
+            essayResponsePage.responseField()
+                .then(($originalText) => {
+                    originalText = $originalText[0].innerHTML
+                    essayResponsePage.responseField()
+                        .type('{selectAll}');
+                    if (toolbarOption == 'Background Color' || toolbarOption == 'Text Color') {
+                        essayResponsePage.previewTabToolbarOption(toolbarOption)
+                            .click();
+                        essayResponsePage.steps.selectColorFromPopup('Strong Cyan');
+                    } else {
+                        essayResponsePage.steps.selectPreviewTabToolbarOption(toolbarOption);
+                    };
+                    essayResponsePage.responseField()
+                        .then(($formattedText) => {
+                            formattedText = $formattedText[0].innerHTML
+                            essayResponsePage.steps.verifyUndoAndRedoFunctionality(toolbarOption, originalText, formattedText);
+                        });
+                });
+        });
+    },
+
+    verifySpecialOrMathCharactersPopup: (popupType) => {
+        it(`${specialOrMathCharacters[popupType].popupTitle} option should be displayed in the preview tab toolbar`, () => {
+            essayResponsePage.previewTabToolbarOption(`${specialOrMathCharacters[popupType].popupTitle}`)
+                .should('be.visible');
+        });
+
+        it(`When user clicks on ${specialOrMathCharacters[popupType].popupTitle} option in the toolbar, then the ${specialOrMathCharacters[popupType].popupTitle} popup should appear`, () => {
+            essayResponsePage.previewTabToolbarOption(`${specialOrMathCharacters[popupType].popupTitle}`)
+                .click();
+            essayResponsePage.specialAndMathCharacterPopup()
+                .should('be.visible');
+        });
+
+        it(`When the ${specialOrMathCharacters[popupType].popupTitle} popup has appeared, the first symbol should be in focus`, () => {
+            essayResponsePage.specialAndMathCharacterPopupSymbolsWrapper()
+                .eq(0)
+                .should('have.css', 'background-color', css.color.focusedSpecialCharacterSymbol);
+        });
+
+        it(`CSS of ${specialOrMathCharacters[popupType].popupTitle} popup`, { tags: 'css' }, () => {
+            essayResponsePage.specialAndMathCharacterPopupTitle()
+                .verifyCSS(css.color.questionHeading, css.fontSize.heading, css.fontWeight.bold);
+            essayResponsePage.specialAndMathCharacterPopupSymbols()
+                .each(($element) => {
+                    cy.wrap($element)
+                        .find('.img_special_char')
+                        .verifyPseudoClassBeforeProperty('color', css.color.specialCharacterSymbol);
+                });
+        });
+
+        it(`Accessibility of ${specialOrMathCharacters[popupType].popupTitle} popup`, { tags: 'a11y' }, () => {
+            cy.checkAccessibility(essayResponsePage.specialAndMathCharacterPopup());
+        });
+
+        it(`Title of the popup should be ${specialOrMathCharacters[popupType].popupTitle}`, () => { //TODO: Need to update this after DOM structure update.
+            essayResponsePage.specialAndMathCharacterPopupTitle()
+                .then(($title) => {
+                    const fullTitle = $title.text()
+                    const properTitle = fullTitle.replace('Close', '');
+                    expect(specialOrMathCharacters[popupType].popupTitle).to.deep.eq(properTitle);
+                });
+        });
+
+        it(`All the ${specialOrMathCharacters[popupType].popupTitle} symbols should be displayed in the popup`, () => {
+            let symbolsArray = Object.values(specialOrMathCharacters[popupType].characters);
+            essayResponsePage.specialAndMathCharacterPopupSymbolsWrapper()
+                .each(($element, count) => {
+                    cy.wrap($element)
+                        .should('be.visible')
+                        .find('.img_special_char span')
+                        .verifyInnerText(symbolsArray[count].symbol);
+                });
+            essayResponsePage.specialAndMathCharacterPopupSymbols()
+                .each(($element, count) => {
+                    cy.wrap($element)
+                        .should('have.attr', 'Title', symbolsArray[count].title);
+                });
+        });
+
+        it('\'Close\' button should be displayed in the popup and when user clicks on it then the popup should close.', () => {
+            essayResponsePage.specialAndMathCharacterPopupCloseButton()
+                .should('be.visible')
+                .click();
+            essayResponsePage.specialAndMathCharacterPopup()
+                .should('not.be.visible');
+        });
+    },
+
+    addSpecialOrMathCharactersToResponseField: (popupType) => {
+        it(`When user clicks on a symbol in the ${specialOrMathCharacters[popupType].popupTitle} popup, then that symbol should be inserted in the response field`, () => {
+            cy.log('Clicking on all symbols.');
+            let symbolsString = specialOrMathCharacters[popupType].characters.map((icon) => icon.symbol);
+            symbolsString = symbolsString.join('');
+            symbolsString = symbolsString.concat('\n');
+            essayResponsePage.specialAndMathCharacterPopupSymbols()
+                .each(($element) => {
+                    cy.wrap($element)
+                        .click();
+                });
+            essayResponsePage.specialAndMathCharacterPopupCloseButton()
+                .click();
+            essayResponsePage.responseField()
+                .verifyInnerText(symbolsString);
+        });
+
+        it(`When the user selects the added ${specialOrMathCharacters[popupType].popupTitle} symbols and clicks on any formatting option, then the formatting should be applied to the displayed special characters`, () => {
+            let symbolsString = specialOrMathCharacters[popupType].characters.map((icon) => icon.symbol);
+            symbolsString = symbolsString.join('');
+            essayResponsePage.responseField()
+                .type('{selectAll}');
+            essayResponsePage.previewTabToolbarOption('Bold (Ctrl+B)')
+                .click();
+            essayResponsePage.responseField()
+                .verifyInnerHTML(`<p><strong>${symbolsString}</strong><br></p>`);
+        });
+
+        it(`When user adds ${specialOrMathCharacters[popupType].popupTitle} symbols to the response field, then the word count should increase accordingly`, () => {
+            essayResponsePage.responseFieldWordCount()
+                .verifyInnerText('1/10000');
+            cy.log('Adding a space and inserting more symbols in the response field.');
+            essayResponsePage.responseField()
+                .click()
+                .type(' ');
+            essayResponsePage.previewTabToolbarOption(`${specialOrMathCharacters[popupType].popupTitle}`)
+                .click();
+            essayResponsePage.specialAndMathCharacterPopupSymbols()
+                .eq(0)
+                .click();
+            essayResponsePage.specialAndMathCharacterPopupCloseButton()
+                .click();
+            essayResponsePage.responseFieldWordCount()
+                .verifyInnerText('2/10000');
+        });
+
+        it(`CSS of the added ${specialOrMathCharacters[popupType].popupTitle} symbols`, { tags: 'css' }, () => {
+            essayResponsePage.responseField()
+                .find('p')
+                .verifyCSS(css.color.text, css.fontSize.default, css.fontWeight.regular);
+        });
+
+        it(`Accessibility of the added ${specialOrMathCharacters[popupType].popupTitle} symbols`, { tags: 'a11y' }, () => {
+            cy.checkAccessibility(essayResponsePage.responseField());
+        });
+    }
+}
+
+export const essayResponsePage = {
+    ...selectors,
+    ...tableDialogBox,
+    ...hyperlinkDialogBox,
+    ...specialAndMathCharacters,
+    steps,
+    tests
+}