itemengine-cypress-automation 1.0.18 → 1.0.20

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

@@ -0,0 +1,1346 @@
+import { equationEditorCategoriesAndSymbols } from "../../../fixtures/equationEditorCategoriesAndSymbols ";
+import { commonComponents } from "../../../pages/components";
+import { equationEditorFlyout } from "../../../pages/components/equationEditorFlyout";
+import { essayResponsePage } from "../../../pages/essayResponsePage";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+const css = Cypress.env('css');
+
+const defaultSelectedCategories = ['Keypad', 'Basic', 'Greek', 'Operators', 'Relationships', 'Arrows', 'Delimiters', 'Misc'];
+const allCategories = Object.values(equationEditorCategoriesAndSymbols)
+
+describe('Create question page - Essay Response: Equation Editor functionality', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Preview tab \'Equation Editor\' flyout', () => {
+        abortEarlySetup();
+        before(() => {
+            essayResponsePage.steps.navigateToCreateQuestion('essay response - rich text');
+            essayResponsePage.steps.expandCustomizeFormattingOptionsAccordion();
+            essayResponsePage.steps.selectCustomizedFormattingOption(['Equation Editor'])
+            cy.barsPreLoaderWait();
+            essayResponsePage.steps.switchToPreviewTab();
+        });
+
+        it('The \'Equation Editor\' icon should be displayed in the preview tab toolbar', () => {
+            essayResponsePage.previewTabToolbarOption('Equation Editor')
+                .should('have.attr', 'title', 'Equation Editor')
+                .and('be.visible');
+        });
+
+        it('On hovering over the icon \'Insert Equation\' tooltip should be displayed and on clicking it a flyout should appear', () => {
+            //TODO: Need to work on the tooltip for Insert equation
+            essayResponsePage.previewTabToolbarOption('Equation Editor')
+                .click();
+            equationEditorFlyout.dialogBox()
+                .should('be.visible');
+        });
+
+        it('The flyout should have title \'Equation Editor\'', () => {
+            equationEditorFlyout.dialogBoxTitle()
+                .verifyInnerText('Equation editor');
+        });
+
+        it('Ok button should be displayed at the bottom of the flyout', () => {
+            equationEditorFlyout.dialogBox()
+                .within(() => {
+                    equationEditorFlyout.buttonOk()
+                        .verifyInnerText('Ok')
+                        .should('be.visible');
+                });
+        });
+
+        it('Equation Editor input field should be displayed and should have cursor by default', () => {
+            equationEditorFlyout.previewInputField()
+                .verifyInnerText('')
+                .should('be.visible')
+                .and('have.class', 'mq-focused');
+        });
+
+        it('All the default selected categories in the \'Equation Editor\' section should be displayed and first category must be selected by default in the \'Equation Editor\' flyout', () => {
+            const equationCategoriesArray = Object.values(equationEditorCategoriesAndSymbols)
+            equationEditorFlyout.categoryTab()
+                .each(($el, index) => {
+                    cy.wrap($el)
+                        .verifyInnerText(equationCategoriesArray[index].displayName)
+                        .within(() => {
+                            equationEditorFlyout.categoryTabIcon()
+                                .should('exist');
+                        });
+                });
+            equationEditorFlyout.categoryTab()
+                .eq(0)
+                .within(() => {
+                    equationEditorFlyout.categoryTabTitle()
+                        .should('have.class', 'selected-tool-content-color')
+                })
+        });
+
+        it('CSS of \'Equation Editor\' flyout', { tags: 'css' }, () => {
+            equationEditorFlyout.dialogBoxTitle()
+                .verifyCSS(css.color.secondaryBtn, css.fontSize.heading, css.fontWeight.bold);
+            cy.log('CSS of selected category')
+            equationEditorFlyout.categoryTab()
+                .eq(0)
+                .within(() => {
+                    equationEditorFlyout.categoryTabTitle()
+                        .verifyCSS(css.color.activeButtons, css.fontSize.small, css.fontWeight.regular);
+                    equationEditorFlyout.categoryTabIcon()
+                        .verifyCSS(css.color.activeButtons, css.fontSize.default, css.fontWeight.regular);
+                });
+            cy.log('CSS of unselected category')
+            equationEditorFlyout.categoryTab()
+                .eq(1)
+                .within(() => {
+                    equationEditorFlyout.categoryTabTitle()
+                        .verifyCSS(css.color.secondaryBtn, css.fontSize.small, css.fontWeight.regular);
+                    equationEditorFlyout.categoryTabIcon()
+                        .verifyCSS(css.color.secondaryBtn, css.fontSize.default, css.fontWeight.regular);
+                });
+            equationEditorFlyout.previewInputField()
+                .should('have.css', 'background-color', css.color.defaultBackground);
+            equationEditorFlyout.buttonCancel()
+                .verifyCSS(css.color.secondaryBtn, css.fontSize.default, css.fontWeight.semibold)
+                .should('have.css', 'background-color', css.color.secondaryBtnBg)
+                .and('have.css', 'border', `1px solid ${css.color.secondaryBtnBorder}`)
+            equationEditorFlyout.buttonOk()
+                .verifyCSS(css.color.primaryBtn, css.fontSize.default, css.fontWeight.semibold)
+                .should('have.css', 'background-color', css.color.primaryBtnBg)
+                .and('have.css', 'border', `1px solid ${css.color.primaryBtnBorder}`)
+        });
+
+        it('Accessibility of \'Equation Editor\' flyout', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(equationEditorFlyout.dialogBox())
+        });
+
+        it('Cancel button should be displayed in the flyout and when user clicks the \'Cancel\' button then the flyout should close', () => {
+            equationEditorFlyout.buttonCancel()
+                .click();
+            equationEditorFlyout.dialogBox()
+                .should('not.exist');
+        });
+    });
+
+    describe('Equation Editor: Next and Previous button', () => {
+        abortEarlySetup();
+        before(() => {
+            essayResponsePage.steps.navigateToCreateQuestion('essay response - rich text');
+            essayResponsePage.steps.expandCustomizeFormattingOptionsAccordion();
+            essayResponsePage.steps.selectCustomizedFormattingOption(['Equation Editor'])
+            cy.barsPreLoaderWait();
+        });
+
+        it('When the selected number of equation categories fit the dialog box width then \'Next button\' and \'Previous button\' should not be displayed in the equation editor flyout', () => {
+            cy.log('Pre step: Deselect one category from Equation Editor section')
+            essayResponsePage.equationEditorSectionCategories()
+                .contains(`${equationEditorCategoriesAndSymbols['keypad'].displayName}`)
+                .click();
+            cy.log('Switching to Preview tab')
+            essayResponsePage.steps.switchToPreviewTab()
+            essayResponsePage.previewTabToolbarOption('Equation Editor')
+                .click();
+            equationEditorFlyout.buttonNext()
+                .should('not.exist');
+            equationEditorFlyout.buttonPrevious()
+                .should('not.exist');
+        });
+
+        it('When the selected number of equation categories do not fit the dialog box width then \'Next button\' and \'Previous button\' should be displayed in the equation editor flyout', () => {
+            cy.log('Pre step: Switch to Edit tab and select all categories from the Equation Editor section')
+            essayResponsePage.steps.switchToEditTab();
+            essayResponsePage.steps.selectingCategories([`${equationEditorCategoriesAndSymbols['keypad'].displayName}`, `${equationEditorCategoriesAndSymbols['matrices'].displayName}`, `${equationEditorCategoriesAndSymbols['trigonometry'].displayName}`, `${equationEditorCategoriesAndSymbols['units'].displayName}`, `${equationEditorCategoriesAndSymbols['calculus'].displayName}`, `${equationEditorCategoriesAndSymbols['geometry'].displayName}`]);
+            cy.log('Switching to Preview tab')
+            essayResponsePage.steps.switchToPreviewTab()
+            essayResponsePage.previewTabToolbarOption('Equation Editor')
+                .click();
+            equationEditorFlyout.buttonNext()
+                .should('be.visible');
+            equationEditorFlyout.buttonPrevious()
+                .should('be.visible');
+        });
+
+        it('CSS of \'Next button\' and \'Previous button\'', { tags: 'css' }, () => {
+            equationEditorFlyout.buttonPrevious()
+                .find('svg')
+                .should('have.css', 'background-color', css.color.defaultBackground)
+                .find('path')
+                .should('have.css', 'fill', css.color.nextPreviousButtonFill);
+            equationEditorFlyout.buttonNext()
+                .find('svg')
+                .should('have.css', 'background-color', css.color.defaultBackground)
+                .find('path')
+                .should('have.css', 'fill', css.color.nextPreviousButtonFill);
+        });
+
+        it('Accessibility of \'Next button\' and \'Previous button\'', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(equationEditorFlyout.buttonPrevious());
+            cy.checkAccessibility(equationEditorFlyout.buttonNext());
+        });
+
+        it('By default, the \'Previous button\' should be disabled and \'Next button\' should be enabled on opening the flyout as user is at the beginning of the tablist', () => {
+            equationEditorFlyout.buttonPrevious()
+                .should('have.class', 'disabled')
+                .and('be.disabled');
+            equationEditorFlyout.buttonNext()
+                .should('not.have.class', 'disabled')
+                .and('be.enabled');
+        });
+
+        it('When user clicks on the \'Next button\', the \'Previous button\' and the \'Next button\' both should get enabled, When the user reaches end of the tablist the \'Next button\' should get disabled and \'Previous button\' should remain enabled.', () => {
+            equationEditorFlyout.buttonNext()
+                .click();
+            equationEditorFlyout.buttonNext()
+                .should('not.have.class', 'disabled')
+                .and('be.enabled');
+            equationEditorFlyout.buttonPrevious()
+                .should('not.have.class', 'disabled')
+                .and('be.enabled');
+            cy.log('Clicking on Next button to reach end of tablist')
+            equationEditorFlyout.buttonNext()
+                .click();
+            equationEditorFlyout.buttonPrevious()
+                .should('not.have.class', 'disabled')
+                .and('be.enabled');
+            equationEditorFlyout.buttonNext()
+                .should('have.class', 'disabled')
+                .and('be.disabled');
+        });
+
+        it('When user clicks on the \'Previous button\', and reaches the beginning of the tablist \'Previous button\' should become disabled and \'Next button\' should become enabled', () => {
+            equationEditorFlyout.buttonPrevious()
+                .dblclick();
+            equationEditorFlyout.buttonPrevious()
+                .should('have.class', 'disabled')
+                .and('be.disabled');
+            equationEditorFlyout.buttonNext()
+                .should('not.have.class', 'disabled')
+                .and('be.enabled');
+        });
+    });
+
+    describe('Equation editor symbol category: Keypad', () => {
+        abortEarlySetup();
+        before(() => {
+            essayResponsePage.steps.navigateToCreateQuestion('essay response - rich text');
+            essayResponsePage.steps.expandCustomizeFormattingOptionsAccordion();
+            essayResponsePage.steps.selectCustomizedFormattingOption(['Equation Editor'])
+            cy.barsPreLoaderWait();
+            essayResponsePage.steps.switchToPreviewTab();
+            essayResponsePage.previewTabToolbarOption('Equation Editor')
+                .click();
+        });
+
+        equationEditorFlyout.tests.verifyEquationEditorFlyoutSymbolCategoriesTabs('keypad');
+        equationEditorFlyout.tests.verifyEquationEditorFlyoutSymbolCategoriesFunctionality('keypad', '1/10000');
+    });
+
+    describe('Equation editor input category: Basic', () => {
+        abortEarlySetup();
+        before(() => {
+            essayResponsePage.steps.navigateToCreateQuestion('essay response - rich text');
+            essayResponsePage.steps.expandCustomizeFormattingOptionsAccordion();
+            essayResponsePage.steps.selectCustomizedFormattingOption(['Equation Editor'])
+            cy.barsPreLoaderWait();
+            essayResponsePage.steps.switchToPreviewTab();
+            essayResponsePage.previewTabToolbarOption('Equation Editor')
+                .click();
+        });
+
+        equationEditorFlyout.tests.verifyEquationEditorFlyoutSymbolCategoriesTabs('basic');
+
+        it('On clicking the symbols it should be displayed in the input field of Equation editor and user should be able to form meaningful equations using the category', () => {
+            equationEditorFlyout.previewInputField()
+                .type('8');
+            equationEditorFlyout.categoryCharacters(equationEditorCategoriesAndSymbols.basic.symbols.lowerExponent.ariaLabel)
+                .click()
+            equationEditorFlyout.inputFieldCursor()
+                .type('3{rightarrow}');
+            equationEditorFlyout.categoryCharacters(equationEditorCategoriesAndSymbols.basic.symbols.add.ariaLabel)
+                .click();
+            equationEditorFlyout.previewInputField()
+                .type('2');
+            equationEditorFlyout.categoryCharacters(equationEditorCategoriesAndSymbols.basic.symbols.upperExponent.ariaLabel)
+                .click();
+            equationEditorFlyout.inputFieldCursor()
+                .type('3{rightarrow}');
+            equationEditorFlyout.categoryCharacters(equationEditorCategoriesAndSymbols.basic.symbols.subtract.ariaLabel)
+                .click();
+            equationEditorFlyout.previewInputField()
+                .type('2');
+            equationEditorFlyout.categoryCharacters(equationEditorCategoriesAndSymbols.basic.symbols.square.ariaLabel)
+                .click();
+            equationEditorFlyout.categoryCharacters(equationEditorCategoriesAndSymbols.basic.symbols.plusMinus.ariaLabel)
+                .click();
+            equationEditorFlyout.categoryCharacters(equationEditorCategoriesAndSymbols.basic.symbols.fraction.ariaLabel)
+                .click();
+            equationEditorFlyout.inputFieldCursor()
+                .type('5');
+            equationEditorFlyout.inputFieldFirstEmptyBox()
+                .type('15{rightarrow}');
+            equationEditorFlyout.categoryCharacters(equationEditorCategoriesAndSymbols.basic.symbols.minusPlus.ariaLabel)
+                .click();
+            equationEditorFlyout.previewInputField()
+                .type('3');
+            equationEditorFlyout.categoryCharacters(equationEditorCategoriesAndSymbols.basic.symbols.mixedFraction.ariaLabel)
+                .click();
+            equationEditorFlyout.inputFieldFirstEmptyBox()
+                .type('4');
+            equationEditorFlyout.inputFieldFirstEmptyBox()
+                .type('5{rightarrow}');
+            equationEditorFlyout.categoryCharacters(equationEditorCategoriesAndSymbols.basic.symbols.equalTo.ariaLabel)
+                .click();
+            equationEditorFlyout.categoryCharacters(equationEditorCategoriesAndSymbols.basic.symbols.letterN.ariaLabel)
+                .click();
+            equationEditorFlyout.categoryCharacters(equationEditorCategoriesAndSymbols.basic.symbols.comma.ariaLabel)
+                .click();
+            equationEditorFlyout.categoryCharacters(equationEditorCategoriesAndSymbols.basic.symbols.groupInParenthesis.ariaLabel)
+                .click();
+            equationEditorFlyout.categoryCharacters(equationEditorCategoriesAndSymbols.basic.symbols.sqrt.ariaLabel)
+                .click();
+            equationEditorFlyout.inputFieldCursor()
+                .type('25{rightarrow}{rightarrow}');
+            equationEditorFlyout.categoryCharacters(equationEditorCategoriesAndSymbols.basic.symbols.dotMultiplier.ariaLabel)
+                .click();
+            equationEditorFlyout.categoryCharacters(equationEditorCategoriesAndSymbols.basic.symbols.cubeRoot.ariaLabel)
+                .click();
+            equationEditorFlyout.inputFieldCursor()
+                .type('27{rightarrow}');
+            equationEditorFlyout.categoryCharacters(equationEditorCategoriesAndSymbols.basic.symbols.multiply.ariaLabel)
+                .click();
+            equationEditorFlyout.categoryCharacters(equationEditorCategoriesAndSymbols.basic.symbols.nRoot.ariaLabel)
+                .click();
+            equationEditorFlyout.inputFieldCursor()
+                .type('4');
+            equationEditorFlyout.inputFieldFirstEmptyBox()
+                .type('16{rightarrow}');
+            equationEditorFlyout.categoryCharacters(equationEditorCategoriesAndSymbols.basic.symbols.colonRatio.ariaLabel)
+                .click();
+            equationEditorFlyout.categoryCharacters(equationEditorCategoriesAndSymbols.basic.symbols.groupInBrackets.ariaLabel)
+                .click();
+            equationEditorFlyout.inputFieldCursor()
+                .type('3');
+            equationEditorFlyout.categoryCharacters(equationEditorCategoriesAndSymbols.basic.symbols.longDivision.ariaLabel)
+                .click();
+            equationEditorFlyout.inputFieldCursor()
+                .type('36{rightarrow}{rightarrow}');
+            equationEditorFlyout.categoryCharacters(equationEditorCategoriesAndSymbols.basic.symbols.comma.ariaLabel)
+                .click();
+            equationEditorFlyout.categoryCharacters(equationEditorCategoriesAndSymbols.basic.symbols.groupInBraces.ariaLabel)
+                .click();
+            equationEditorFlyout.categoryCharacters(equationEditorCategoriesAndSymbols.basic.symbols.letterP.ariaLabel)
+                .click();
+            equationEditorFlyout.categoryCharacters(equationEditorCategoriesAndSymbols.basic.symbols.divide.ariaLabel)
+                .click();
+            equationEditorFlyout.categoryCharacters(equationEditorCategoriesAndSymbols.basic.symbols.letterZ.ariaLabel)
+                .click();
+            equationEditorFlyout.inputFieldCursor()
+                .type('{rightarrow}{rightarrow}{rightarrow}10');
+            equationEditorFlyout.categoryCharacters(equationEditorCategoriesAndSymbols.basic.symbols.function.ariaLabel)
+                .click();
+            equationEditorFlyout.categoryCharacters(equationEditorCategoriesAndSymbols.basic.symbols.absoluteValue.ariaLabel)
+                .click();
+            equationEditorFlyout.inputFieldCursor()
+                .type('9')
+            equationEditorFlyout.categoryCharacters(equationEditorCategoriesAndSymbols.basic.symbols.angleBracket.ariaLabel)
+                .click();
+            equationEditorFlyout.inputFieldCursor()
+                .type('10');
+            equationEditorFlyout.categoryCharacters(equationEditorCategoriesAndSymbols.basic.symbols.dollar.ariaLabel)
+                .click();
+            equationEditorFlyout.categoryCharacters(equationEditorCategoriesAndSymbols.basic.symbols.asterisk.ariaLabel)
+                .click();
+            equationEditorFlyout.inputFieldCursor()
+                .type('{rightarrow}{rightarrow}50');
+            equationEditorFlyout.categoryCharacters(equationEditorCategoriesAndSymbols.basic.symbols.cents.ariaLabel)
+                .click();
+            equationEditorFlyout.categoryCharacters(equationEditorCategoriesAndSymbols.basic.symbols.binomialCoefficient.ariaLabel)
+                .click();
+            equationEditorFlyout.inputFieldCursor()
+                .type('4');
+            equationEditorFlyout.inputFieldFirstEmptyBox()
+                .type('3{rightarrow}');
+            equationEditorFlyout.categoryCharacters(equationEditorCategoriesAndSymbols.basic.symbols.matrix.ariaLabel)
+                .click();
+            equationEditorFlyout.inputFieldCursor()
+                .type('2');
+            for (let i = 1; i < 3; i++) {
+                equationEditorFlyout.inputFieldFirstEmptyBox()
+                    .type(i);
+            }
+            equationEditorFlyout.inputFieldFirstEmptyBox()
+                .type('4{rightarrow}{rightarrow}{rightarrow}');
+            equationEditorFlyout.categoryCharacters(equationEditorCategoriesAndSymbols.basic.symbols.therefore.ariaLabel)
+                .click();
+            equationEditorFlyout.categoryCharacters(equationEditorCategoriesAndSymbols.basic.symbols.because.ariaLabel)
+                .click();
+            equationEditorFlyout.categoryCharacters(equationEditorCategoriesAndSymbols.basic.symbols.summation.ariaLabel)
+                .click();
+            equationEditorFlyout.inputFieldFirstEmptyBox()
+                .type('1');
+            equationEditorFlyout.inputFieldFirstEmptyBox()
+                .type('4{rightarrow}');
+            equationEditorFlyout.categoryCharacters(equationEditorCategoriesAndSymbols.basic.symbols.product.ariaLabel)
+                .click();
+            equationEditorFlyout.inputFieldFirstEmptyBox()
+                .type('1');
+            equationEditorFlyout.inputFieldFirstEmptyBox()
+                .type('4{rightarrow}');
+            equationEditorFlyout.categoryCharacters(equationEditorCategoriesAndSymbols.basic.symbols.coProduct.ariaLabel)
+                .click();
+            equationEditorFlyout.inputFieldFirstEmptyBox()
+                .type('1');
+            equationEditorFlyout.inputFieldFirstEmptyBox()
+                .type('4{rightarrow}');
+            equationEditorFlyout.categoryCharacters(equationEditorCategoriesAndSymbols.basic.symbols.integral.ariaLabel)
+                .click();
+            equationEditorFlyout.inputFieldFirstEmptyBox()
+                .type('1');
+            equationEditorFlyout.inputFieldFirstEmptyBox()
+                .type('4{rightarrow}');
+            equationEditorFlyout.inputFieldCursor()
+                .type('{rightarrow}{rightarrow}');
+            equationEditorFlyout.categoryCharacters(equationEditorCategoriesAndSymbols.basic.symbols.letterR.ariaLabel)
+                .click();
+            equationEditorFlyout.categoryCharacters(equationEditorCategoriesAndSymbols.basic.symbols.letterC.ariaLabel)
+                .click();
+            equationEditorFlyout.categoryCharacters(equationEditorCategoriesAndSymbols.basic.symbols.letterH.ariaLabel)
+                .click();
+        });
+
+        equationEditorFlyout.tests.verifyCSSAnda11yOfEquationEditorInputField('basic')
+        essayResponsePage.tests.insertEquationAndVerifyInputFieldContentsAndWordCount('83+23−22±515∓345=N,(25)·273×164:[336],{P÷Z}10f|9⟨10$∗50¢(43)2124⟩|∴∵∑14∏14∐14∫41RCH', '1/10000');
+    });
+
+    describe('Equation editor symbol category: Greek', () => {
+        abortEarlySetup();
+        before(() => {
+            essayResponsePage.steps.navigateToCreateQuestion('essay response - rich text');
+            essayResponsePage.steps.expandCustomizeFormattingOptionsAccordion();
+            essayResponsePage.steps.selectCustomizedFormattingOption(['Equation Editor'])
+            cy.barsPreLoaderWait();
+            essayResponsePage.steps.switchToPreviewTab();
+            essayResponsePage.previewTabToolbarOption('Equation Editor')
+                .click();
+        });
+        equationEditorFlyout.tests.verifyEquationEditorFlyoutSymbolCategoriesTabs('greek');
+        equationEditorFlyout.tests.verifyEquationEditorFlyoutSymbolCategoriesFunctionality('greek', '1/10000');
+    });
+
+    describe('Equation editor symbol category: Operators', () => {
+        abortEarlySetup();
+        before(() => {
+            essayResponsePage.steps.navigateToCreateQuestion('essay response - rich text');
+            essayResponsePage.steps.expandCustomizeFormattingOptionsAccordion();
+            essayResponsePage.steps.selectCustomizedFormattingOption(['Equation Editor'])
+            cy.barsPreLoaderWait();
+            essayResponsePage.steps.switchToPreviewTab();
+            essayResponsePage.previewTabToolbarOption('Equation Editor')
+                .click();
+        });
+        equationEditorFlyout.tests.verifyEquationEditorFlyoutSymbolCategoriesTabs('operators');
+        equationEditorFlyout.tests.verifyEquationEditorFlyoutSymbolCategoriesFunctionality('operators', '1/10000');
+    });
+
+    describe('Equation editor input category: Relationships', () => {
+        abortEarlySetup();
+        before(() => {
+            essayResponsePage.steps.navigateToCreateQuestion('essay response - rich text');
+            essayResponsePage.steps.expandCustomizeFormattingOptionsAccordion();
+            essayResponsePage.steps.selectCustomizedFormattingOption(['Equation Editor'])
+            cy.barsPreLoaderWait();
+            essayResponsePage.steps.switchToPreviewTab();
+            essayResponsePage.previewTabToolbarOption('Equation Editor')
+                .click();
+        });
+
+        equationEditorFlyout.tests.verifyEquationEditorFlyoutCategoryTooltip('relationships');
+        equationEditorFlyout.tests.verifyEquationEditorFlyoutSymbolCategoriesTabs('relationships');
+
+        it('On clicking the symbols it should be displayed in the input field of Equation editor and user should be able to form meaningful equations using the category', () => {
+            equationEditorFlyout.categoryCharacters()
+                .each(($el) => {
+                    cy.wrap($el)
+                        .click();
+                });
+            equationEditorFlyout.inputFieldCursor()
+                .type('a');
+            equationEditorFlyout.inputFieldFirstEmptyBox()
+                .type('b');
+            equationEditorFlyout.inputFieldFirstEmptyBox()
+                .type('c');
+            equationEditorFlyout.inputFieldFirstEmptyBox()
+                .type('d');
+            equationEditorFlyout.inputFieldFirstEmptyBox()
+                .type('4a+4b');
+        });
+
+        equationEditorFlyout.tests.verifyCSSAnda11yOfEquationEditorInputField('relationships')
+        essayResponsePage.tests.insertEquationAndVerifyInputFieldContentsAndWordCount('⊦<>≡≅~∉≠∝≈≤≥∈∋∌⊂⊃⊄⊅⊆⊇⊈⊉⊨≺≻≼≽≃∣≪≫∥⋈⊏⊐⌣⊑⊒≐⌢⊦⊣∃∅≁≇≮≯{a+b=c+d=4a+4b', '1/10000');
+    });
+
+    describe('Equation editor symbol category: Arrows', () => {
+        abortEarlySetup();
+        before(() => {
+            essayResponsePage.steps.navigateToCreateQuestion('essay response - rich text');
+            essayResponsePage.steps.expandCustomizeFormattingOptionsAccordion();
+            essayResponsePage.steps.selectCustomizedFormattingOption(['Equation Editor'])
+            cy.barsPreLoaderWait();
+            essayResponsePage.steps.switchToPreviewTab();
+            essayResponsePage.previewTabToolbarOption('Equation Editor')
+                .click();
+        });
+        equationEditorFlyout.tests.verifyEquationEditorFlyoutSymbolCategoriesTabs('arrows');
+        equationEditorFlyout.tests.verifyEquationEditorFlyoutSymbolCategoriesFunctionality('arrows', '1/10000');
+    });
+
+    describe('Equation editor input category: Delimiters', () => {
+        abortEarlySetup();
+        before(() => {
+            essayResponsePage.steps.navigateToCreateQuestion('essay response - rich text');
+            essayResponsePage.steps.expandCustomizeFormattingOptionsAccordion();
+            essayResponsePage.steps.selectCustomizedFormattingOption(['Equation Editor'])
+            cy.barsPreLoaderWait();
+            essayResponsePage.steps.switchToPreviewTab();
+            essayResponsePage.previewTabToolbarOption('Equation Editor')
+                .click();
+        });
+
+        equationEditorFlyout.tests.verifyEquationEditorFlyoutSymbolCategoriesTabs('delimiters');
+
+        it('On clicking the symbols it should be displayed in the input field of Equation editor and user should be able to form meaningful equations using the category', () => {
+            equationEditorFlyout.categoryCharacters(equationEditorCategoriesAndSymbols.delimiters.symbols.lFloor.ariaLabel)
+                .click();
+            equationEditorFlyout.categoryCharacters(equationEditorCategoriesAndSymbols.delimiters.symbols.rFloor.ariaLabel)
+                .click();
+            equationEditorFlyout.categoryCharacters(equationEditorCategoriesAndSymbols.delimiters.symbols.lCeil.ariaLabel)
+                .click();
+            equationEditorFlyout.categoryCharacters(equationEditorCategoriesAndSymbols.delimiters.symbols.rCeil.ariaLabel)
+                .click();
+            equationEditorFlyout.categoryCharacters(equationEditorCategoriesAndSymbols.delimiters.symbols.forwardSlash.ariaLabel)
+                .click();
+            equationEditorFlyout.categoryCharacters(equationEditorCategoriesAndSymbols.delimiters.symbols.openCurlBracket.ariaLabel)
+                .click();
+            equationEditorFlyout.categoryCharacters(equationEditorCategoriesAndSymbols.delimiters.symbols.closedCurlBracket.ariaLabel)
+                .click();
+            equationEditorFlyout.categoryCharacters(equationEditorCategoriesAndSymbols.delimiters.symbols.groupInParathesis.ariaLabel)
+                .click();
+            equationEditorFlyout.inputFieldCursor()
+                .type('a{rightarrow}');
+            equationEditorFlyout.categoryCharacters(equationEditorCategoriesAndSymbols.delimiters.symbols.groupInBrackets.ariaLabel)
+                .click();
+            equationEditorFlyout.inputFieldCursor()
+                .type('a{rightarrow}');
+            equationEditorFlyout.categoryCharacters(equationEditorCategoriesAndSymbols.delimiters.symbols.squareRoundBrackets.ariaLabel)
+                .click();
+            equationEditorFlyout.inputFieldCursor()
+                .type('a{rightarrow}');
+            equationEditorFlyout.categoryCharacters(equationEditorCategoriesAndSymbols.delimiters.symbols.roundSquareBrackets.ariaLabel)
+                .click();
+            equationEditorFlyout.inputFieldCursor()
+                .type('a{rightarrow}');
+            equationEditorFlyout.categoryCharacters(equationEditorCategoriesAndSymbols.delimiters.symbols.angleBracket.ariaLabel)
+                .click();
+            equationEditorFlyout.inputFieldCursor()
+                .type('a{rightarrow}');
+            equationEditorFlyout.categoryCharacters(equationEditorCategoriesAndSymbols.delimiters.symbols.singleSquareOpen.ariaLabel)
+                .click();
+            equationEditorFlyout.inputFieldCursor()
+                .type('a{rightarrow}');
+            equationEditorFlyout.categoryCharacters(equationEditorCategoriesAndSymbols.delimiters.symbols.singleSquareClose.ariaLabel)
+                .click();
+        });
+
+        equationEditorFlyout.tests.verifyCSSAnda11yOfEquationEditorInputField('delimiters')
+        essayResponsePage.tests.insertEquationAndVerifyInputFieldContentsAndWordCount('⌊⌋⌈⌉/{}(a)[a][a)(a]⟨a⟩[a]', '2/10000');
+    });
+
+    describe('Equation editor input category: Misc', () => {
+        abortEarlySetup();
+        before(() => {
+            essayResponsePage.steps.navigateToCreateQuestion('essay response - rich text');
+            essayResponsePage.steps.expandCustomizeFormattingOptionsAccordion();
+            essayResponsePage.steps.selectCustomizedFormattingOption(['Equation Editor'])
+            cy.barsPreLoaderWait();
+            essayResponsePage.steps.switchToPreviewTab();
+            essayResponsePage.previewTabToolbarOption('Equation Editor')
+                .click();
+        });
+
+        equationEditorFlyout.tests.verifyEquationEditorFlyoutSymbolCategoriesTabs('misc');
+
+        it('On clicking the symbols it should be displayed in the input field of Equation editor and user should be able to form meaningful equations using the category', () => {
+            equationEditorFlyout.categoryCharacters(equationEditorCategoriesAndSymbols.misc.symbols.forAll.ariaLabel)
+                .click();
+            equationEditorFlyout.categoryCharacters(equationEditorCategoriesAndSymbols.misc.symbols.dotsBottom.ariaLabel)
+                .click();
+            equationEditorFlyout.categoryCharacters(equationEditorCategoriesAndSymbols.misc.symbols.horizontalDots.ariaLabel)
+                .click();
+            equationEditorFlyout.categoryCharacters(equationEditorCategoriesAndSymbols.misc.symbols.verticalDots.ariaLabel)
+                .click();
+            equationEditorFlyout.categoryCharacters(equationEditorCategoriesAndSymbols.misc.symbols.diagonalDots.ariaLabel)
+                .click();
+            equationEditorFlyout.categoryCharacters(equationEditorCategoriesAndSymbols.misc.symbols.sqrt.ariaLabel)
+                .click();
+            equationEditorFlyout.inputFieldCursor()
+                .type('4{rightarrow}');
+            equationEditorFlyout.categoryCharacters(equationEditorCategoriesAndSymbols.misc.symbols.triangle.ariaLabel)
+                .click();
+            equationEditorFlyout.categoryCharacters(equationEditorCategoriesAndSymbols.misc.symbols.ell.ariaLabel)
+                .click();
+            equationEditorFlyout.categoryCharacters(equationEditorCategoriesAndSymbols.misc.symbols.top.ariaLabel)
+                .click();
+            equationEditorFlyout.categoryCharacters(equationEditorCategoriesAndSymbols.misc.symbols.flat.ariaLabel)
+                .click();
+            equationEditorFlyout.categoryCharacters(equationEditorCategoriesAndSymbols.misc.symbols.natural.ariaLabel)
+                .click();
+            equationEditorFlyout.categoryCharacters(equationEditorCategoriesAndSymbols.misc.symbols.sharp.ariaLabel)
+                .click();
+            equationEditorFlyout.categoryCharacters(equationEditorCategoriesAndSymbols.misc.symbols.elliptic.ariaLabel)
+                .click();
+            equationEditorFlyout.categoryCharacters(equationEditorCategoriesAndSymbols.misc.symbols.perpendicularTo.ariaLabel)
+                .click();
+            equationEditorFlyout.categoryCharacters(equationEditorCategoriesAndSymbols.misc.symbols.clubSuit.ariaLabel)
+                .click();
+            equationEditorFlyout.categoryCharacters(equationEditorCategoriesAndSymbols.misc.symbols.diamondSuit.ariaLabel)
+                .click();
+            equationEditorFlyout.categoryCharacters(equationEditorCategoriesAndSymbols.misc.symbols.heartSuit.ariaLabel)
+                .click();
+            equationEditorFlyout.categoryCharacters(equationEditorCategoriesAndSymbols.misc.symbols.spadeSuit.ariaLabel)
+                .click();
+            equationEditorFlyout.categoryCharacters(equationEditorCategoriesAndSymbols.misc.symbols.exponent.ariaLabel)
+                .click();
+            equationEditorFlyout.categoryCharacters(equationEditorCategoriesAndSymbols.misc.symbols.underscore.ariaLabel)
+                .click();
+            equationEditorFlyout.categoryCharacters(equationEditorCategoriesAndSymbols.misc.symbols.backSlash.ariaLabel)
+                .click();
+            equationEditorFlyout.categoryCharacters(equationEditorCategoriesAndSymbols.misc.symbols.forwardSlash.ariaLabel)
+                .click();
+            equationEditorFlyout.categoryCharacters(equationEditorCategoriesAndSymbols.misc.symbols.vert.ariaLabel)
+                .click();
+            equationEditorFlyout.categoryCharacters(equationEditorCategoriesAndSymbols.misc.symbols.nabla.ariaLabel)
+                .click();
+            equationEditorFlyout.categoryCharacters(equationEditorCategoriesAndSymbols.misc.symbols.planck.ariaLabel)
+                .click();
+            equationEditorFlyout.categoryCharacters(equationEditorCategoriesAndSymbols.misc.symbols.angstrom.ariaLabel)
+                .click();
+            equationEditorFlyout.categoryCharacters(equationEditorCategoriesAndSymbols.misc.symbols.circle.ariaLabel)
+                .click();
+            equationEditorFlyout.categoryCharacters(equationEditorCategoriesAndSymbols.misc.symbols.bullet.ariaLabel)
+                .click();
+            equationEditorFlyout.categoryCharacters(equationEditorCategoriesAndSymbols.misc.symbols.not.ariaLabel)
+                .click();
+            equationEditorFlyout.categoryCharacters(` ${equationEditorCategoriesAndSymbols.misc.symbols.real.ariaLabel}`)
+                .click();
+            equationEditorFlyout.categoryCharacters(` ${equationEditorCategoriesAndSymbols.misc.symbols.imaginary.ariaLabel}`)
+                .click();
+            equationEditorFlyout.categoryCharacters(` ${equationEditorCategoriesAndSymbols.misc.symbols.partialDerivative.ariaLabel}`)
+                .click();
+            equationEditorFlyout.categoryCharacters(equationEditorCategoriesAndSymbols.misc.symbols.infinity.ariaLabel)
+                .click();
+            equationEditorFlyout.categoryCharacters(equationEditorCategoriesAndSymbols.misc.symbols.alpeh.ariaLabel)
+                .click();
+            equationEditorFlyout.categoryCharacters(equationEditorCategoriesAndSymbols.misc.symbols.degree.ariaLabel)
+                .click();
+            equationEditorFlyout.categoryCharacters(equationEditorCategoriesAndSymbols.misc.symbols.angle.ariaLabel)
+                .click();
+        });
+
+        equationEditorFlyout.tests.verifyCSSAnda11yOfEquationEditorInputField('misc')
+        essayResponsePage.tests.insertEquationAndVerifyInputFieldContentsAndWordCount('∀…⋯⋮⋱√4△ℓ⊤♭♮♯℘⊥♧♢♡♤^_\\/|∇ℏÅ∘•¬ℜℑ∂∞ℵ°∠', '1/10000');
+    });
+
+    describe('Equation editor input category: Matrices', () => {
+        abortEarlySetup();
+        before(() => {
+            essayResponsePage.steps.navigateToCreateQuestion('essay response - rich text');
+            essayResponsePage.steps.expandCustomizeFormattingOptionsAccordion();
+            essayResponsePage.steps.selectCustomizedFormattingOption(['Equation Editor'])
+            essayResponsePage.steps.selectingCategories([`${equationEditorCategoriesAndSymbols['matrices'].displayName}`]);
+            cy.barsPreLoaderWait();
+            essayResponsePage.steps.switchToPreviewTab();
+            essayResponsePage.previewTabToolbarOption('Equation Editor')
+                .click();
+        });
+
+        equationEditorFlyout.tests.verifyEquationEditorFlyoutSymbolCategoriesTabs('matrices');
+
+        it('On clicking the symbols it should be displayed in the input field of Equation editor and user should be able to form meaningful equations using the category', () => {
+            equationEditorFlyout.categoryCharacters(equationEditorCategoriesAndSymbols.matrices.symbols.matrix.ariaLabel)
+                .click();
+            equationEditorFlyout.inputFieldCursor()
+                .type('5');
+            for (let i = 1; i < 4; i++) {
+                equationEditorFlyout.inputFieldFirstEmptyBox()
+                    .type(i);
+            }
+            equationEditorFlyout.inputFieldCursor()
+                .type('{rightarrow}{rightarrow}');
+            equationEditorFlyout.categoryCharacters(equationEditorCategoriesAndSymbols.matrices.symbols.twoByTwoMatrixBoundedBrackets.ariaLabel)
+                .click();
+            equationEditorFlyout.inputFieldCursor()
+                .type('5');
+            for (let i = 1; i < 4; i++) {
+                equationEditorFlyout.inputFieldFirstEmptyBox()
+                    .type(i);
+            }
+            equationEditorFlyout.inputFieldCursor()
+                .type('{rightarrow}{rightarrow}');
+            equationEditorFlyout.categoryCharacters(equationEditorCategoriesAndSymbols.matrices.symbols.matrixBoundedParenthesis.ariaLabel)
+                .click();
+            equationEditorFlyout.inputFieldCursor()
+                .type('5');
+            for (let i = 1; i < 4; i++) {
+                equationEditorFlyout.inputFieldFirstEmptyBox()
+                    .type(i);
+            }
+            equationEditorFlyout.inputFieldCursor()
+                .type('{rightarrow}{rightarrow}');
+            equationEditorFlyout.categoryCharacters(equationEditorCategoriesAndSymbols.matrices.symbols.matrixBoundedBraces.ariaLabel)
+                .click();
+            equationEditorFlyout.categoryCharacters(equationEditorCategoriesAndSymbols.matrices.symbols.singleMatrixBoundedBrackets.ariaLabel)
+                .click();
+            equationEditorFlyout.inputFieldCursor()
+                .type('5');
+            for (let i = 1; i < 4; i++) {
+                equationEditorFlyout.inputFieldFirstEmptyBox()
+                    .type(i);
+            }
+            equationEditorFlyout.inputFieldCursor()
+                .type('{rightarrow}{rightarrow}');
+            equationEditorFlyout.categoryCharacters(equationEditorCategoriesAndSymbols.matrices.symbols.matrixBoundedVerticalLines.ariaLabel)
+                .click();
+            equationEditorFlyout.categoryCharacters(equationEditorCategoriesAndSymbols.matrices.symbols.insertColumnInMatrix.ariaLabel)
+                .click();
+            equationEditorFlyout.categoryCharacters(equationEditorCategoriesAndSymbols.matrices.symbols.insertRowInMatrix.ariaLabel)
+                .click();
+            for (let i = 1; i < 10; i++) {
+                equationEditorFlyout.inputFieldFirstEmptyBox()
+                    .type(i);
+            }
+            equationEditorFlyout.inputFieldCursor()
+                .type('{rightarrow}{rightarrow}');
+            equationEditorFlyout.categoryCharacters(equationEditorCategoriesAndSymbols.matrices.symbols.matrixBoundedDoubleVerticalLines.ariaLabel)
+                .click();
+            equationEditorFlyout.inputFieldCursor()
+                .type('5');
+            for (let i = 1; i < 4; i++) {
+                equationEditorFlyout.inputFieldFirstEmptyBox()
+                    .type(i);
+            }
+            equationEditorFlyout.inputFieldCursor()
+                .type('{rightarrow}{rightarrow}');
+            equationEditorFlyout.categoryCharacters(equationEditorCategoriesAndSymbols.matrices.symbols.threeByThreeMatrixBoundedBrackets.ariaLabel)
+                .click();
+            equationEditorFlyout.inputFieldCursor()
+                .type('5');
+            equationEditorFlyout.categoryCharacters(equationEditorCategoriesAndSymbols.matrices.symbols.subscript.ariaLabel)
+                .click();
+            equationEditorFlyout.inputFieldCursor()
+                .type('2');
+            equationEditorFlyout.inputFieldFirstEmptyBox()
+                .type('2');
+            equationEditorFlyout.categoryCharacters(equationEditorCategoriesAndSymbols.matrices.symbols.superscript.ariaLabel)
+                .click();
+            equationEditorFlyout.inputFieldCursor()
+                .type('2')
+            equationEditorFlyout.inputFieldFirstEmptyBox()
+                .type('3');
+            equationEditorFlyout.categoryCharacters(equationEditorCategoriesAndSymbols.matrices.symbols.factorial.ariaLabel)
+                .click();
+            for (let i = 1; i < 7; i++) {
+                equationEditorFlyout.inputFieldFirstEmptyBox()
+                    .type(i);
+            }
+            equationEditorFlyout.inputFieldCursor()
+                .type('{rightarrow}{rightarrow}');
+            equationEditorFlyout.categoryCharacters(equationEditorCategoriesAndSymbols.matrices.symbols.dotsBottom.ariaLabel)
+                .click();
+            equationEditorFlyout.categoryCharacters(equationEditorCategoriesAndSymbols.matrices.symbols.dotsMiddle.ariaLabel)
+                .click();
+            equationEditorFlyout.categoryCharacters(equationEditorCategoriesAndSymbols.matrices.symbols.verticalDots.ariaLabel)
+                .click();
+            equationEditorFlyout.categoryCharacters(equationEditorCategoriesAndSymbols.matrices.symbols.diagonalDots.ariaLabel)
+                .click();
+        });
+
+        equationEditorFlyout.tests.verifyCSSAnda11yOfEquationEditorInputField('matrices')
+        essayResponsePage.tests.insertEquationAndVerifyInputFieldContentsAndWordCount('5123[5123](5123){[5]123}|123456789|‖5123‖[52223!123456]…⋯⋮⋱', '1/10000')
+    });
+
+    describe('Equation editor symbol category: Trigonometric Functions', () => {
+        abortEarlySetup();
+        before(() => {
+            essayResponsePage.steps.navigateToCreateQuestion('essay response - rich text');
+            essayResponsePage.steps.expandCustomizeFormattingOptionsAccordion();
+            essayResponsePage.steps.selectCustomizedFormattingOption(['Equation Editor'])
+            essayResponsePage.steps.selectingCategories([`${equationEditorCategoriesAndSymbols['trigonometry'].displayName}`]);
+            cy.barsPreLoaderWait();
+            essayResponsePage.steps.switchToPreviewTab();
+            essayResponsePage.previewTabToolbarOption('Equation Editor')
+                .click();
+        });
+
+        equationEditorFlyout.tests.verifyEquationEditorFlyoutCategoryTooltip('trigonometry');
+        equationEditorFlyout.tests.verifyEquationEditorFlyoutSymbolCategoriesTabs('trigonometry', '1/10000');
+        equationEditorFlyout.tests.verifyEquationEditorFlyoutSymbolCategoriesFunctionality('trigonometry', '1/10000');
+    });
+
+    describe('Equation editor symbol category: Units', () => {
+        abortEarlySetup();
+        before(() => {
+            essayResponsePage.steps.navigateToCreateQuestion('essay response - rich text');
+            essayResponsePage.steps.expandCustomizeFormattingOptionsAccordion();
+            essayResponsePage.steps.selectCustomizedFormattingOption(['Equation Editor'])
+            essayResponsePage.steps.selectingCategories([`${equationEditorCategoriesAndSymbols['units'].displayName}`]);
+            cy.barsPreLoaderWait();
+            essayResponsePage.steps.switchToPreviewTab();
+            essayResponsePage.previewTabToolbarOption('Equation Editor')
+                .click();
+        });
+        equationEditorFlyout.tests.verifyEquationEditorFlyoutSymbolCategoriesTabs('units');
+        equationEditorFlyout.tests.verifyEquationEditorFlyoutSymbolCategoriesFunctionality('units', '2/10000');
+    });
+
+    describe('Equation editor input category: Calculus Symbols', () => {
+        abortEarlySetup();
+        before(() => {
+            essayResponsePage.steps.navigateToCreateQuestion('essay response - rich text');
+            essayResponsePage.steps.expandCustomizeFormattingOptionsAccordion();
+            essayResponsePage.steps.selectCustomizedFormattingOption(['Equation Editor'])
+            essayResponsePage.steps.selectingCategories([`${equationEditorCategoriesAndSymbols['calculus'].displayName}`]);
+            cy.barsPreLoaderWait();
+            essayResponsePage.steps.switchToPreviewTab();
+            essayResponsePage.previewTabToolbarOption('Equation Editor')
+                .click();
+        });
+
+        equationEditorFlyout.tests.verifyEquationEditorFlyoutCategoryTooltip('calculus');
+        equationEditorFlyout.tests.verifyEquationEditorFlyoutSymbolCategoriesTabs('calculus');
+
+        it('On clicking the symbols it should be displayed in the input field of Equation editor and user should be able to form meaningful equations using the category', () => {
+            equationEditorFlyout.categoryCharacters(equationEditorCategoriesAndSymbols.calculus.symbols.limit.ariaLabel)
+                .click();
+            equationEditorFlyout.categoryCharacters(equationEditorCategoriesAndSymbols.calculus.symbols.epsilon.ariaLabel)
+                .click();
+            equationEditorFlyout.categoryCharacters(equationEditorCategoriesAndSymbols.calculus.symbols.eulersNumber.ariaLabel)
+                .click();
+            equationEditorFlyout.previewInputField()
+                .click();
+            equationEditorFlyout.categoryCharacters(equationEditorCategoriesAndSymbols.calculus.symbols.deltaUppercase.ariaLabel)
+                .click();
+            equationEditorFlyout.categoryCharacters(equationEditorCategoriesAndSymbols.calculus.symbols.derivative.ariaLabel)
+                .click();
+            equationEditorFlyout.inputFieldCursor()
+                .type('2y');
+            equationEditorFlyout.categoryCharacters(equationEditorCategoriesAndSymbols.calculus.symbols.secondDerivative.ariaLabel)
+                .click();
+            equationEditorFlyout.inputFieldCursor()
+                .type('2xy');
+            equationEditorFlyout.categoryCharacters(equationEditorCategoriesAndSymbols.calculus.symbols.integral.ariaLabel)
+                .click();
+            equationEditorFlyout.inputFieldFirstEmptyBox()
+                .type('2')
+            equationEditorFlyout.inputFieldFirstEmptyBox()
+                .type('3{rightarrow}{rightarrow}{rightarrow}')
+            equationEditorFlyout.categoryCharacters(equationEditorCategoriesAndSymbols.calculus.symbols.nDerivative.ariaLabel)
+                .click();
+            equationEditorFlyout.inputFieldFirstEmptyBox()
+                .type('3')
+            equationEditorFlyout.inputFieldFirstEmptyBox()
+                .type('3');
+            equationEditorFlyout.previewInputField()
+                .click();
+            equationEditorFlyout.categoryCharacters(equationEditorCategoriesAndSymbols.calculus.symbols.doubleIntegral.ariaLabel)
+                .click();
+            equationEditorFlyout.inputFieldCursor()
+                .type('2{rightarrow}{rightarrow}{rightarrow}');
+            equationEditorFlyout.categoryCharacters(equationEditorCategoriesAndSymbols.calculus.symbols.partialDerivative.ariaLabel)
+                .click();
+            equationEditorFlyout.inputFieldCursor()
+                .type('2');
+            equationEditorFlyout.categoryCharacters(equationEditorCategoriesAndSymbols.calculus.symbols.timeDerivative.ariaLabel)
+                .click();
+            equationEditorFlyout.categoryCharacters(equationEditorCategoriesAndSymbols.calculus.symbols.tripleIntegral.ariaLabel)
+                .click();
+            equationEditorFlyout.inputFieldCursor()
+                .type('1{rightarrow}');
+            equationEditorFlyout.categoryCharacters(equationEditorCategoriesAndSymbols.calculus.symbols.timeSecondDerivative.ariaLabel)
+                .click();
+            equationEditorFlyout.categoryCharacters(equationEditorCategoriesAndSymbols.calculus.symbols.lineIntegral.ariaLabel)
+                .click();
+            equationEditorFlyout.categoryCharacters(equationEditorCategoriesAndSymbols.calculus.symbols.vector.ariaLabel)
+                .click();
+            equationEditorFlyout.inputFieldCursor()
+                .type('x{rightarrow}');
+            equationEditorFlyout.categoryCharacters(equationEditorCategoriesAndSymbols.calculus.symbols.closedSurfaceIntegral.ariaLabel)
+                .click();
+            equationEditorFlyout.categoryCharacters(equationEditorCategoriesAndSymbols.calculus.symbols.unitVector.ariaLabel)
+                .click();
+            equationEditorFlyout.inputFieldCursor()
+                .type('x{rightarrow}');
+            equationEditorFlyout.categoryCharacters(equationEditorCategoriesAndSymbols.calculus.symbols.closedVolumeIntegral.ariaLabel)
+                .click();
+            equationEditorFlyout.categoryCharacters(equationEditorCategoriesAndSymbols.calculus.symbols.underSim.ariaLabel)
+                .click();
+            equationEditorFlyout.inputFieldCursor()
+                .type('x{rightarrow}{rightarrow}');
+            equationEditorFlyout.categoryCharacters(equationEditorCategoriesAndSymbols.calculus.symbols.summation.ariaLabel)
+                .click();
+            equationEditorFlyout.inputFieldFirstEmptyBox()
+                .type('3');
+            equationEditorFlyout.inputFieldFirstEmptyBox()
+                .type('4{rightarrow}');
+            equationEditorFlyout.categoryCharacters(equationEditorCategoriesAndSymbols.calculus.symbols.absoluteValue.ariaLabel)
+                .click();
+            equationEditorFlyout.inputFieldCursor()
+                .type('5{rightarrow}');
+            equationEditorFlyout.categoryCharacters(equationEditorCategoriesAndSymbols.calculus.symbols.infinity.ariaLabel)
+                .click();
+            equationEditorFlyout.categoryCharacters(equationEditorCategoriesAndSymbols.calculus.symbols.nabla.ariaLabel)
+                .click();
+        });
+
+        equationEditorFlyout.tests.verifyCSSAnda11yOfEquationEditorInputField('calculus')
+        essayResponsePage.tests.insertEquationAndVerifyInputFieldContentsAndWordCount('limx→ϵeΔdydx2yd2ydx22xy∫32d3ydx3∬2∂y∂x2y˙∭1y¨∮x→∯x^∰x~∑34|5|∞∇', '3/10000')
+    });
+
+    describe('Equation editor input category: Geometric Symbols', () => {
+        abortEarlySetup();
+        before(() => {
+            essayResponsePage.steps.navigateToCreateQuestion('essay response - rich text');
+            essayResponsePage.steps.expandCustomizeFormattingOptionsAccordion();
+            essayResponsePage.steps.selectCustomizedFormattingOption(['Equation Editor'])
+            essayResponsePage.steps.selectingCategories([`${equationEditorCategoriesAndSymbols['geometry'].displayName}`]);
+            cy.barsPreLoaderWait();
+            essayResponsePage.steps.switchToPreviewTab();
+            essayResponsePage.previewTabToolbarOption('Equation Editor')
+                .click();
+        });
+
+        equationEditorFlyout.tests.verifyEquationEditorFlyoutCategoryTooltip('geometry');
+        equationEditorFlyout.tests.verifyEquationEditorFlyoutSymbolCategoriesTabs('geometry');
+
+
+        it('On clicking the symbols it should be displayed in the input field of Equation editor and user should be able to form meaningful equations using the category', () => {
+            equationEditorFlyout.categoryCharacters(equationEditorCategoriesAndSymbols.geometry.symbols.circle.ariaLabel)
+                .click();
+            equationEditorFlyout.categoryCharacters(equationEditorCategoriesAndSymbols.geometry.symbols.square.ariaLabel)
+                .click();
+            equationEditorFlyout.categoryCharacters(equationEditorCategoriesAndSymbols.geometry.symbols.triangle.ariaLabel)
+                .click();
+            equationEditorFlyout.categoryCharacters(equationEditorCategoriesAndSymbols.geometry.symbols.parallelogram.ariaLabel)
+                .click();
+            equationEditorFlyout.categoryCharacters(equationEditorCategoriesAndSymbols.geometry.symbols.perpendicularTo.ariaLabel)
+                .click();
+            equationEditorFlyout.categoryCharacters(equationEditorCategoriesAndSymbols.geometry.symbols.similarTo.ariaLabel)
+                .click();
+            equationEditorFlyout.categoryCharacters(equationEditorCategoriesAndSymbols.geometry.symbols.congruentTo.ariaLabel)
+                .click();
+            equationEditorFlyout.categoryCharacters(equationEditorCategoriesAndSymbols.geometry.symbols.parallelTo.ariaLabel)
+                .click();
+            equationEditorFlyout.categoryCharacters(equationEditorCategoriesAndSymbols.geometry.symbols.notParallel.ariaLabel)
+                .click();
+            equationEditorFlyout.categoryCharacters(equationEditorCategoriesAndSymbols.geometry.symbols.pi.ariaLabel)
+                .click();
+            equationEditorFlyout.categoryCharacters(equationEditorCategoriesAndSymbols.geometry.symbols.dotMultiplier.ariaLabel)
+                .click();
+            equationEditorFlyout.categoryCharacters(equationEditorCategoriesAndSymbols.geometry.symbols.degree.ariaLabel)
+                .click();
+            equationEditorFlyout.categoryCharacters(equationEditorCategoriesAndSymbols.geometry.symbols.prime.ariaLabel)
+                .click();
+            equationEditorFlyout.categoryCharacters(equationEditorCategoriesAndSymbols.geometry.symbols.doublePrime.ariaLabel)
+                .click();
+            equationEditorFlyout.categoryCharacters(equationEditorCategoriesAndSymbols.geometry.symbols.angle.ariaLabel)
+                .click();
+            equationEditorFlyout.inputFieldCursor()
+                .type('45');
+            equationEditorFlyout.categoryCharacters(equationEditorCategoriesAndSymbols.geometry.symbols.measureOfAngle.ariaLabel)
+                .click();
+            equationEditorFlyout.inputFieldCursor()
+                .type('30');
+            equationEditorFlyout.categoryCharacters(equationEditorCategoriesAndSymbols.geometry.symbols.arc.ariaLabel)
+                .click();
+            equationEditorFlyout.inputFieldCursor()
+                .type('2{rightarrow}');
+            equationEditorFlyout.categoryCharacters(equationEditorCategoriesAndSymbols.geometry.symbols.topLineSegment.ariaLabel)
+                .click();
+            equationEditorFlyout.inputFieldCursor()
+                .type('2{rightarrow}');
+            equationEditorFlyout.categoryCharacters(equationEditorCategoriesAndSymbols.geometry.symbols.vector.ariaLabel)
+                .click();
+            equationEditorFlyout.inputFieldCursor()
+                .type('2{rightarrow}');
+            equationEditorFlyout.categoryCharacters(equationEditorCategoriesAndSymbols.geometry.symbols.topDoubleSidedArrow.ariaLabel)
+                .click();
+            equationEditorFlyout.inputFieldCursor()
+                .type('2{rightarrow}');
+            equationEditorFlyout.categoryCharacters(equationEditorCategoriesAndSymbols.geometry.symbols.topLeftArrow.ariaLabel)
+                .click();
+            equationEditorFlyout.inputFieldCursor()
+                .type('2{rightarrow}');
+            equationEditorFlyout.categoryCharacters(equationEditorCategoriesAndSymbols.geometry.symbols.topRightArrow.ariaLabel)
+                .click();
+            equationEditorFlyout.inputFieldCursor()
+                .type('2{rightarrow}');
+            equationEditorFlyout.categoryCharacters(equationEditorCategoriesAndSymbols.geometry.symbols.recurringDecimal.ariaLabel)
+                .click();
+            equationEditorFlyout.inputFieldCursor()
+                .type('2{rightarrow}');
+        });
+
+        equationEditorFlyout.tests.verifyCSSAnda11yOfEquationEditorInputField('geometry')
+        essayResponsePage.tests.insertEquationAndVerifyInputFieldContentsAndWordCount('◯□△▱⊥~≅∥∦π·°′″∠45m∠302⌒2―2→2↔2←2→2˙', '1/10000');
+    });
+
+    describe('Edit tab Equation Editor section', () => {
+        abortEarlySetup();
+        before(() => {
+            essayResponsePage.steps.navigateToCreateQuestion('essay response - rich text');
+            essayResponsePage.steps.expandCustomizeFormattingOptionsAccordion();
+            essayResponsePage.steps.selectCustomizedFormattingOption(['Equation Editor'])
+        });
+
+        it('The \'Equation Editor\' should be displayed along with helper text \'Select the categories to display to the students in the equation editor.\' and \'Create custom category\' button should be displayed', () => {
+            essayResponsePage.equationEditorSectionTitle()
+                .verifyInnerText('Equation editor')
+                .should('be.visible');
+            essayResponsePage.equationEditorSectionHelperText()
+                .verifyInnerText('Select the categories to display to the students in the equation editor.')
+                .should('be.visible');
+            essayResponsePage.createCustomCategoryButton()
+                .verifyInnerText('Create custom category')
+                .should('be.visible');
+        });
+
+        it('All the categories should be displayed with a drag icon should and an Edit icon should be displayed below all the categories irrespective of their selected state', () => {
+            essayResponsePage.equationEditorSectionCategories()
+                .each(($el, index) => {
+                    cy.wrap($el)
+                        .invoke('text')
+                        .then((textContent) => {
+                            const expectedValue = allCategories[index].displayName;
+                            expect(textContent.toLowerCase()).to.equal(expectedValue.toLowerCase())
+                        });
+                    cy.wrap($el)
+                        .parents('[id*="DraggableItem"]')
+                        .within(() => {
+                            essayResponsePage.equationEditorSectionCategoriesDragIcon()
+                                .should('be.visible');
+                            essayResponsePage.equationEditorSectionCategoriesEditIcon()
+                                .should('be.visible');
+                        });
+                });
+
+        });
+
+        it('When user hovers on a category with a long name, then a tooltip should be displayed.', () => {
+            let categoriesWithTooltip = [`${equationEditorCategoriesAndSymbols['relationships'].displayName}`, `${equationEditorCategoriesAndSymbols['trigonometry'].displayName}`, `${equationEditorCategoriesAndSymbols['calculus'].displayName}`, `${equationEditorCategoriesAndSymbols['geometry'].displayName}`];
+            categoriesWithTooltip.forEach((categoryTooltipName) => {
+                essayResponsePage.equationEditorSectionCategories()
+                    .contains(categoryTooltipName, { matchCase: false })
+                    .realHover();
+                commonComponents.tooltipText()
+                    .verifyInnerText(categoryTooltipName);
+                essayResponsePage.equationEditorSectionCategories()
+                    .contains(categoryTooltipName, { matchCase: false })
+                    .trigger('mouseout');
+                commonComponents.tooltipText()
+                    .should('not.exist');
+            });
+        });
+
+        it(`By default, ${defaultSelectedCategories.toString()} should be selected`, () => {
+            defaultSelectedCategories.forEach((category) => {
+                essayResponsePage.equationEditorSectionCategories()
+                    .contains(category)
+                    .parents('.icon-button-custom-format')
+                    .should('have.class', 'Mui-selected')
+                    .within(() => {
+                        essayResponsePage.equationEditorSectionTickIcon()
+                            .should('be.visible');
+                    });
+            });
+        });
+
+        it('CSS of selected and deselected category', { tags: 'css' }, () => {
+            cy.log('CSS of selected category')
+            essayResponsePage.equationEditorSectionCategories()
+                .first()
+                .should('have.css', 'background-color', css.color.activeButtons)
+                .within(() => {
+                    essayResponsePage.equationEditorSectionCategoryLabel()
+                        .verifyCSS(css.color.primaryBtn, css.fontSize.small, css.fontWeight.regular);
+                    essayResponsePage.equationEditorSectionTickIcon()
+                        .find('[data-name*="Icon"]')
+                        .should('have.css', 'fill', css.color.activeButtons);
+                    essayResponsePage.equationEditorSectionCategoriesDragIcon()
+                        .find('path')
+                        .should('have.css', 'fill', css.color.activeButtons);
+                });
+            cy.log('CSS of deselected category')
+            essayResponsePage.equationEditorSectionCategories()
+                .last()
+                .should('have.css', 'background-color', css.color.primaryBtn)
+                .within(() => {
+                    essayResponsePage.equationEditorSectionCategoryLabel()
+                        .verifyCSS(css.color.secondaryBtn, css.fontSize.small, css.fontWeight.regular);
+                    essayResponsePage.equationEditorSectionCategoriesDragIcon()
+                        .find('path')
+                        .should('have.css', 'fill', css.color.secondaryBtn)
+                });
+        });
+
+        it('Accessibility of selected and deselected category', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(essayResponsePage.equationEditorSectionCategories().contains(`${equationEditorCategoriesAndSymbols['keypad'].displayName}`).parents('[class*="DraggableItemsGrid"]'))
+        });
+
+        it('User should be able select and deselect a category and it should be reflected in the Equation Editor flyout and the first category should be selected by default', () => {
+            cy.log('Seelecting and deselecting a category')
+            essayResponsePage.equationEditorSectionCategories()
+                .contains(`${equationEditorCategoriesAndSymbols['keypad'].displayName}`)
+                .click();
+            essayResponsePage.equationEditorSectionCategories()
+                .contains(`${equationEditorCategoriesAndSymbols['geometry'].displayName}`, { matchCase: false })
+                .click();
+            cy.log('Switching to Preview tab')
+            essayResponsePage.steps.switchToPreviewTab();
+            essayResponsePage.previewTabToolbarOption('Equation Editor')
+                .click();
+            equationEditorFlyout.categoryTab()
+                .should('not.have.text', 'Keypad');
+            equationEditorFlyout.categoryTab()
+                .eq(0)
+                .within(() => {
+                    equationEditorFlyout.categoryTabTitle()
+                        .verifyInnerText('Basic')
+                        .should('have.class', 'selected-tool-content-color');
+                });
+            equationEditorFlyout.buttonNext()
+                .click();
+            equationEditorFlyout.categoryTab()
+                .eq(7)
+                .verifyInnerText(`${equationEditorCategoriesAndSymbols['geometry'].displayName}`);
+        });
+
+        it('On deselecting all the categories an error message should be displayed \'Error: Please select a category.\' and the Equation Editor flyout should be empty', () => {
+            cy.log('Pre step: Switching to Edit tab')
+            essayResponsePage.steps.switchToEditTab();
+            essayResponsePage.steps.selectingCategories([`${equationEditorCategoriesAndSymbols['basic'].displayName}`, `${equationEditorCategoriesAndSymbols['greek'].displayName}`, `${equationEditorCategoriesAndSymbols['operators'].displayName}`, `${equationEditorCategoriesAndSymbols['relationships'].displayName}`, `${equationEditorCategoriesAndSymbols['arrows'].displayName}`, `${equationEditorCategoriesAndSymbols['delimiters'].displayName}`, `${equationEditorCategoriesAndSymbols['misc'].displayName}`, `${equationEditorCategoriesAndSymbols['geometry'].displayName}`]);
+            essayResponsePage.selectACategoryErrorMessage()
+                .verifyInnerText('Error: Please select a category.')
+            cy.log('Switching to Preview tab')
+            essayResponsePage.steps.switchToPreviewTab();
+            essayResponsePage.previewTabToolbarOption('Equation Editor')
+                .click();
+            equationEditorFlyout.dialogBox()
+                .should('be.visible');
+            equationEditorFlyout.categoryTabTitle()
+                .should('not.exist');
+            equationEditorFlyout.categoryCharactersWrapper()
+                .should('not.exist');
+            cy.log('Post step: Switching to Edit tab')
+            essayResponsePage.steps.switchToEditTab();
+        });
+
+        //https://redmine.zeuslearning.com/issues/530205
+        it('CSS of error message', { tags: 'css' }, () => {
+            essayResponsePage.selectACategoryErrorMessage()
+                .verifyCSS(css.color.errorText, css.fontSize.small, css.fontWeight.regular);
+        });
+
+        it('Accessibility of error message', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(essayResponsePage.selectACategoryErrorMessage());
+        });
+
+        it('When user selects any category then the error message should disappear', () => {
+            essayResponsePage.equationEditorSectionCategories()
+                .contains(`${equationEditorCategoriesAndSymbols['keypad'].displayName}`)
+                .click();
+            essayResponsePage.selectACategoryErrorMessage()
+                .should('not.exist');
+        });
+
+        it('When user re-selects the Equation Editor icon then only the previously selected category category should appear in selected state', () => {
+            essayResponsePage.customizeFormattingOptionsTiles('Equation Editor')
+                .click();
+            essayResponsePage.equationEditorSection()
+                .should('not.exist');
+            essayResponsePage.steps.selectCustomizedFormattingOption(['Equation Editor'])
+            essayResponsePage.equationEditorSectionCategories()
+                .each(($el, index) => {
+                    if (index == 0) {
+                        cy.wrap($el)
+                            .should('have.class', 'Mui-selected');
+                    } else {
+                        cy.wrap($el)
+                            .should('not.have.class', 'Mui-selected');
+                    }
+                });
+        });
+    });
+
+    describe('Adding and deleting equations', () => {
+        abortEarlySetup();
+        before(() => {
+            essayResponsePage.steps.navigateToCreateQuestion('essay response - rich text');
+            essayResponsePage.steps.expandCustomizeFormattingOptionsAccordion();
+            essayResponsePage.steps.selectCustomizedFormattingOption(['Equation Editor'])
+            cy.barsPreLoaderWait();
+            essayResponsePage.steps.switchToPreviewTab();
+            essayResponsePage.previewTabToolbarOption('Equation Editor')
+                .click();
+        });
+
+        it('When user enters an equation in the Preview input field the word count should increase by 1 and the entered equation should have focus', () => {
+            cy.log('Adding an equation using Basic and Greek category')
+            equationEditorFlyout.categoryTab(`${equationEditorCategoriesAndSymbols['basic'].displayName}`)
+                .parents('.tool-wrapper')
+                .click();
+            equationEditorFlyout.categoryCharacters(equationEditorCategoriesAndSymbols.basic.symbols.x.ariaLabel)
+                .click();
+            equationEditorFlyout.categoryCharacters(equationEditorCategoriesAndSymbols.basic.symbols.square.ariaLabel)
+                .click();
+            equationEditorFlyout.categoryCharacters(equationEditorCategoriesAndSymbols.basic.symbols.equalTo.ariaLabel)
+                .click();
+            equationEditorFlyout.categoryTab(`${equationEditorCategoriesAndSymbols['greek'].displayName}`)
+                .parents('.tool-wrapper')
+                .click();
+            equationEditorFlyout.categoryCharacters(equationEditorCategoriesAndSymbols.greek.symbols.piUpper.ariaLabel)
+                .click();
+            cy.log('Clicking on Ok button to add the equation to Preview input field and checking word count')
+            equationEditorFlyout.buttonOk()
+                .click();
+            essayResponsePage.responseField()
+                .find('.cke_widget_wrapper')
+                .should('have.class', 'cke_widget_focused');
+            essayResponsePage.steps.verifyResponseFieldWordCount('1/10000')
+        });
+
+        it('When user enters another equation in the preview input field without adding any space the word count should remain the same', () => {
+            cy.log('Prestep: Clicking on Equation editor button')
+            essayResponsePage.responseField()
+                .type('{rightarrow}');
+            essayResponsePage.previewTabToolbarOption('Equation Editor')
+                .click();
+            equationEditorFlyout.categoryTab(`${equationEditorCategoriesAndSymbols['arrows'].displayName}`)
+                .parents('.tool-wrapper')
+                .click();
+            equationEditorFlyout.categoryCharacters(equationEditorCategoriesAndSymbols.arrows.symbols.leftArrow.ariaLabel)
+                .click();
+            equationEditorFlyout.categoryCharacters(equationEditorCategoriesAndSymbols.arrows.symbols.leftRightHarpoons.ariaLabel)
+                .click();
+            equationEditorFlyout.buttonOk()
+                .click();
+            essayResponsePage.steps.verifyResponseFieldWordCount('1/10000')
+        });
+
+        it('When user enters another equation in the preview input field after adding a space the word count should increase by 1', () => {
+            essayResponsePage.responseField()
+                .type('{rightarrow} ');
+            essayResponsePage.previewTabToolbarOption('Equation Editor')
+                .click();
+            equationEditorFlyout.categoryCharacters(equationEditorCategoriesAndSymbols.keypad.symbols.one.ariaLabel)
+                .click();
+            equationEditorFlyout.categoryCharacters(equationEditorCategoriesAndSymbols.keypad.symbols.add.ariaLabel)
+                .click();
+            equationEditorFlyout.categoryCharacters(equationEditorCategoriesAndSymbols.keypad.symbols.two.ariaLabel)
+                .click();
+            equationEditorFlyout.buttonOk()
+                .click();
+            essayResponsePage.steps.verifyResponseFieldWordCount('2/10000')
+        });
+
+        it('When user clicks backspace the entered equation should get deleted and the word count should decrease by 1', () => {
+            essayResponsePage.responseField()
+                .type('{backspace}{backspace}')
+                .should('not.have.text', '1+2');
+            essayResponsePage.steps.verifyResponseFieldWordCount('1/10000')
+        });
+    });
+
+    describe('Edit equation', () => {
+        abortEarlySetup();
+        before(() => {
+            essayResponsePage.steps.navigateToCreateQuestion('essay response - rich text');
+            essayResponsePage.steps.expandCustomizeFormattingOptionsAccordion();
+            essayResponsePage.steps.selectCustomizedFormattingOption(['Equation Editor'])
+            cy.barsPreLoaderWait();
+            essayResponsePage.steps.switchToPreviewTab();
+            essayResponsePage.previewTabToolbarOption('Equation Editor')
+                .click();
+            cy.log('Adding an equation to preview input field')
+            equationEditorFlyout.categoryTab(`${equationEditorCategoriesAndSymbols['relationships'].displayName}`)
+                .parents('.tool-wrapper')
+                .click();
+            equationEditorFlyout.categoryCharacters(equationEditorCategoriesAndSymbols.relationships.symbols.simultaneousEquations.ariaLabel)
+                .click();
+            equationEditorFlyout.inputFieldCursor()
+                .type('a');
+            equationEditorFlyout.inputFieldFirstEmptyBox()
+                .type('b');
+            equationEditorFlyout.inputFieldFirstEmptyBox()
+                .type('c');
+            equationEditorFlyout.inputFieldFirstEmptyBox()
+                .type('d');
+            equationEditorFlyout.buttonOk()
+                .click();
+            essayResponsePage.responseField()
+                .find('.cke_widget_element')
+                .should('have.text', 'a+b=c+d=');
+        });
+
+        it('When user double clicks on an added equation in the preview input field, the Equation editor flyout should open', () => {
+            essayResponsePage.responseField()
+                .find('.cke_widget_element')
+                .dblclick();
+            equationEditorFlyout.dialogBox()
+                .should('be.visible');
+        });
+
+        it(`In the equation editor flyout the ${allCategories[0].displayName} should be selected by default and the Equation editor input field should be prefilled with the added equation`, () => {
+            equationEditorFlyout.categoryTab(`${equationEditorCategoriesAndSymbols['keypad'].displayName}`)
+                .parents('.tool-wrapper')
+                .within(() => {
+                    equationEditorFlyout.categoryTabTitle()
+                        .verifyInnerText(`${equationEditorCategoriesAndSymbols['keypad'].displayName}`)
+                        .should('have.class', 'selected-tool-content-color');
+                });
+            equationEditorFlyout.previewInputField()
+                .contains('a+b=c+d=');
+        });
+
+        it('When user clicks on Cancel button the equation should be displayed in the preview input field without any changes', () => {
+            equationEditorFlyout.buttonCancel()
+                .click();
+            essayResponsePage.responseField()
+                .find('.cke_widget_element')
+                .should('have.text', 'a+b=c+d=');
+        });
+
+        it('When user edits the added equation and clicks on Ok button, the edited equation should be displayed in the preview input field', () => {
+            essayResponsePage.responseField()
+                .find('.cke_widget_element')
+                .dblclick();
+            equationEditorFlyout.previewInputField()
+                .click()
+                .type('{backspace}{backspace}');
+            equationEditorFlyout.categoryTab(`${equationEditorCategoriesAndSymbols['delimiters'].displayName}`)
+                .parents('.tool-wrapper')
+                .click();
+            equationEditorFlyout.categoryCharacters(equationEditorCategoriesAndSymbols.delimiters.symbols.singleSquareOpen.ariaLabel)
+                .click();
+            equationEditorFlyout.inputFieldCursor()
+                .type('a{rightarrow}');
+            equationEditorFlyout.categoryCharacters(equationEditorCategoriesAndSymbols.delimiters.symbols.singleSquareClose.ariaLabel)
+                .click();
+            equationEditorFlyout.buttonOk()
+                .click();
+            essayResponsePage.responseField()
+                .find('.cke_widget_element')
+                .should('have.text', '[a]');
+            essayResponsePage.responseField()
+                .should('not.have.text', 'a+b=c+d=');
+        });
+    });
+});