itemengine-cypress-automation 1.0.113 → 1.0.114

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

@@ -1,11 +1,11 @@
 import abortEarlySetup from "../../../support/helpers/abortEarly";
 import { essayResponseBasicPage } from "../../../pages";
-import { commonComponents } from "../../../pages/components";
+import utilities from "../../../support/helpers/utilities";
 const css = Cypress.env('css');
 
-const formattingOptions = [essayResponseBasicPage.cutCustomizeFormattingOption, essayResponseBasicPage.copyCustomizeFormattingOption, essayResponseBasicPage.pasteCustomizeFormattingOption, essayResponseBasicPage.specialCharacterCustomizeFormattingOption];
-const formattingOptionLabel = ['Cut', 'Copy', 'Paste', 'Special characters'];
-const stateOfFormattingOption = ['ngie-toggle-button-selected', 'ngie-toggle-button-selected', 'ngie-toggle-button-selected', 'ngie-toggle-button-not-selected'];
+const customizeOptions = ['Bold', 'Italic', 'Underline', 'Bulleted List', 'Special Characters', 'Remove Format', 'Increase Indent', 'Decrease Indent'];
+const stateOfFormattingOption = ['true', 'true', 'true', 'false', 'false', 'false', 'false', 'false'];
+const customizeOptionsPreviewTab = ['Bold (Ctrl+B)', 'Italic (Ctrl+I)', 'Underline (Ctrl+U)', 'Insert/Remove Bulleted List', 'Special characters', 'Remove Format', 'Increase Indent', 'Decrease Indent'];
 
 describe('Create question page - Essay Response - Basic: Customize formatting options (for student player) section contents, toolbar options', () => {
     before(() => {
@@ -18,41 +18,46 @@ describe('Create question page - Essay Response - Basic: Customize formatting op
             essayResponseBasicPage.steps.navigateToCreateQuestion('essay response - basic');
         });
 
-        it('\'Customize formatting options (for student player)\' label should be displayed and expand collapse icon should not be displayed beside the label. By default, following options should be in selected state - \'Cut, Copy, Paste\'. Special characters option should be in unselected state', () => {
-            essayResponseBasicPage.customizeFormattingOptionsSectionLabel()
-                .verifyInnerText('Customize formatting options (for student player)');
-            essayResponseBasicPage.customizeFormattingOptionsSectionLabel()
-                .find('.MuiExpansionPanelSummary-expandIcon')
-                .should('not.exist');
-            formattingOptions.forEach((button, count) => {
-                button()
-                    .verifyInnerText(formattingOptionLabel[count])
-                    .and('have.class', stateOfFormattingOption[count]);
-            });
+        it('User should be able to expand customize formatting options accordion', () => {
+            essayResponseBasicPage.steps.expandCustomizeFormattingOptionsAccordion();
+        });
+
+        it('\'Customize formatting options (for student player)\' label should be displayed and expand collapse icon should be displayed beside the label. By default, following options should be in selected state - \'Bold, Italic, Underline\'. Other options should be in unselected state', () => {
+            utilities.verifyInnerText(essayResponseBasicPage.customizeFormattingOptionsAccordionLabel(), 'Customize toolbar options and controls');
+            utilities.verifyElementVisibilityState(essayResponseBasicPage.customizeFormattingOptionsSectionExpandIcon(), 'exist');
+            essayResponseBasicPage.steps.verifyCustomizeFormattingOptionsAndSelectedState(customizeOptions, stateOfFormattingOption);
         });
 
         it('CSS of \'Customize formatting options (for student player)\' label and contents', { tags: 'css' }, () => {
             cy.log('CSS of Customize formatting options (for student player) label');
-            essayResponseBasicPage.customizeFormattingOptionsSectionLabel()
-                .verifyCSS(css.color.sectionHeading, css.fontSize.default, css.fontWeight.semibold);//Issue posted- https://redmine.zeuslearning.com/issues/525805
+            utilities.verifyCSS(essayResponseBasicPage.customizeFormattingOptionsAccordionLabel(), {
+                'color': css.color.activeButtons,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.bold
+            });
+            utilities.verifyCSS(essayResponseBasicPage.customizeFormattingOptionsTiles('Bold'), {
+                'background-color': css.color.activeButtons
+            });
             cy.log('CSS of selected toolbar formatting option')
-            essayResponseBasicPage.cutCustomizeFormattingOption()
-                .should('have.css', 'background-color', css.color.activeButtons)
-                .within(() => {
-                    commonComponents.tickIconForOptionButtons()
-                        .should('have.css', 'color', css.color.defaultBackground);
-                    essayResponseBasicPage.customizeFormattingOptionsIcon()
-                        .should('have.css', 'color', css.color.defaultBackground);
-                    essayResponseBasicPage.customizeFormattingOptionsLabel()
-                        .verifyCSS(css.color.primaryBtn, css.fontSize.default, css.fontWeight.regular);
-                });
-            cy.log('CSS of unselected toolbar formatting option')
-            essayResponseBasicPage.specialCharacterCustomizeFormattingOption()
-                .should('have.css', 'background-color', css.color.secondaryBtnBg)
-                .within(() => {
-                    essayResponseBasicPage.customizeFormattingOptionsLabel()
-                        .verifyCSS(css.color.secondaryBtn, css.fontSize.default, css.fontWeight.regular);
-                });
+            utilities.verifyCSS(essayResponseBasicPage.tickIcon().eq(0), {
+                'color': css.color.defaultBackground
+            });
+            utilities.verifyCSS(essayResponseBasicPage.customizeFormattingOptionsTiles('Bold').find('svg'), {
+                'color': css.color.defaultBackground
+            });
+            utilities.verifyCSS(essayResponseBasicPage.customizeFormattingOptionsLabel().eq(0), {
+                'color': css.color.primaryBtn,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.bold
+            });
+            utilities.verifyCSS(essayResponseBasicPage.customizeFormattingOptionsLabel().eq(3), {
+                'color': css.color.secondaryBtn,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.bold,
+            });
+            utilities.verifyCSS(essayResponseBasicPage.customizeFormattingOptionsTiles('Special Characters'), {
+                'background-color': css.color.secondaryBtnBg
+            });
         });
 
         it('Accessibility of \'Customize formatting options (for student player)\' label and contents', { tags: 'a11y' }, () => {
@@ -72,136 +77,117 @@ describe('Create question page - Essay Response - Basic: Customize formatting op
             essayResponseBasicPage.steps.resetPreviewTabResponseField();
         });
 
-        it('When the user switches to Preview tab, then the following options should be displayed in the response field toolbar - \'Cut, Copy, Paste\'', () => {
-            essayResponseBasicPage.previewTabToolbarWrapper()
-                .within(() => {
-                    formattingOptionLabel.slice(0, 2).forEach((optionName, count) => {
-                        cy.get('.cke_button')
-                            .eq(count)
-                            .should('have.attr', 'title', optionName)
-                            .and('be.visible');
-                    });
-                    essayResponseBasicPage.previewTabToolbarOption('Special Characters')
-                        .should('not.exist');
-                });
+        it('When the user switches to Preview tab, then the following options should be displayed in the response field toolbar - \'Bold, Italic, Underline\'', () => {
+            essayResponseBasicPage.steps.verifyPreviewTabToolbarOptions(customizeOptionsPreviewTab.slice(0, 2));
+            utilities.verifyElementVisibilityState(essayResponseBasicPage.previewTabToolbarOption('Special Characters'), 'notExist');
         });
 
         it('When the user selects all formatting options from the \'Customize formatting options (for student player)\' section, all formatting options should appear in the preview tab and all options should be in enabled sate', () => {
             cy.log('Switching to edit tab')
-            essayResponseBasicPage.steps.switchToEditTab()
-            essayResponseBasicPage.specialCharacterCustomizeFormattingOption()
-                .click();
-            essayResponseBasicPage.specialCharacterCustomizeFormattingOption()
-                .should('have.class', 'ngie-toggle-button-selected');
+            essayResponseBasicPage.steps.switchToEditTab();
+            essayResponseBasicPage.steps.expandCustomizeFormattingOptionsAccordion();
+            essayResponseBasicPage.steps.selectCustomizedFormattingOption(['Bulleted List', 'Special Characters', 'Remove Format', 'Increase Indent', 'Decrease Indent']);
             essayResponseBasicPage.steps.switchToPreviewTab();
-            essayResponseBasicPage.previewTabToolbarWrapper()
-                .within(() => {
-                    formattingOptionLabel.forEach((optionName, count) => {
-                        cy.get('.cke_button')
-                            .eq(count)
-                            .should('have.attr', 'title', optionName)
-                            .and('be.visible');
-                    });
-                });
+            essayResponseBasicPage.steps.verifyPreviewTabToolbarOptions(customizeOptionsPreviewTab);
         });
 
         it('CSS of formatting options in Preview tab', { tags: 'css' }, () => {
-            essayResponseBasicPage.previewTabToolbarOption('Cut')
-                .find('.cke_button_icon')
-                .should('have.css', 'color', css.color.activeButtons);
+            utilities.verifyCSS(essayResponseBasicPage.previewTabToolbarOption('Bold (Ctrl+B)').find('.cke_button_icon'), {
+                'color': css.color.activeButtons,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
         });
 
         it('Accessibility of formatting options in Preview tab', { tags: 'a11y' }, () => {
-            cy.checkAccessibility(essayResponseBasicPage.previewTabToolbarWrapper())
+            cy.checkAccessibility(essayResponseBasicPage.previewTabToolbarWrapper());
         });
 
         it('When the user deselects an option from \'Customize formatting options (for student player)\' section, then that option should not be displayed in the preview tab toolbar.', () => {
             cy.log('Switching to edit tab')
-            essayResponseBasicPage.steps.switchToEditTab()
-            essayResponseBasicPage.cutCustomizeFormattingOption()
-                .click()
-                .should('have.class', 'ngie-toggle-button-not-selected');
+            essayResponseBasicPage.steps.switchToEditTab();
+            essayResponseBasicPage.steps.deselectCustomizedFormattingOption(['Bold']);
             essayResponseBasicPage.steps.switchToPreviewTab();
-            cy.barsPreLoaderWait();
-            essayResponseBasicPage.previewTabToolbarWrapper()
-                .within(() => {
-                    essayResponseBasicPage.previewTabToolbarOption('Cut')
-                        .should('not.exist');
-                });
+            utilities.verifyElementVisibilityState(essayResponseBasicPage.previewTabToolbarOption('Bold'), 'notExist');
         });
     });
 
-    describe('Cut, Copy, Paste formatting options - Preview tab', () => {
+    describe('Bold, Italic, Underline formatting options - Preview tab', () => {
         abortEarlySetup();
         before(() => {
             essayResponseBasicPage.steps.navigateToCreateQuestion('essay response - basic');
             cy.barsPreLoaderWait();
-            essayResponseBasicPage.steps.setWordLimit(5);
-            cy.log('Selecting \'Special Characters\' formatting option from Edit tab');
-            essayResponseBasicPage.specialCharacterCustomizeFormattingOption()
-                .click()
+            essayResponseBasicPage.steps.expandCustomizeFormattingOptionsAccordion();
             essayResponseBasicPage.steps.switchToPreviewTab();
-            cy.barsPreLoaderWait();
         });
 
-        afterEach(() => {
+        beforeEach(() => {
             essayResponseBasicPage.steps.resetPreviewTabResponseField();
         });
 
-        it('When the user selects the text from the response field and clicks on the \'Cut\', then the text should get removed from the field and word count should update accordingly', () => {
-            essayResponseBasicPage.responseField()
-                .type('Lorem Ipsum dolor');
-            essayResponseBasicPage.steps.cutTextFromResponseField();
-            essayResponseBasicPage.responseField()
-                .verifyInnerText('');
-            essayResponseBasicPage.steps.verifyResponseFieldWordCount('0/5');
-        });
-
-        it('When the user has cut some text from response and clicks on the \'Paste\' option, the text that was cut should get pasted in the response field and the word count should increase accordingly', () => {
-            essayResponseBasicPage.responseField()
-                .type('Lorem Ipsum dolor');
-            essayResponseBasicPage.steps.cutTextFromResponseField();
-            essayResponseBasicPage.previewTabToolbarOption('Paste')
-                .click();
-            essayResponseBasicPage.responseField()
-                .verifyInnerText('Lorem Ipsum dolor');
-            essayResponseBasicPage.steps.verifyResponseFieldWordCount('3/5');
-        });
-
-        it('When the user enters text in the response field, selects the text and then clicks on the \'Copy\', the text should get copied and when the user clicks on the \'Paste\' toolbar option, then the copied text should get pasted in response field and the word count should increase accordingly', () => {
-            essayResponseBasicPage.responseField()
-                .type('Lorem Ipsum ');
-            essayResponseBasicPage.steps.copyTextFromResponseField();
-            essayResponseBasicPage.steps.verifyResponseFieldWordCount('2/5');
-            essayResponseBasicPage.previewTabToolbarOption('Paste')
-                .click();
-            essayResponseBasicPage.responseField()
-                .verifyInnerText('Lorem Ipsum\u00a0Lorem Ipsum\u00a0');
-            essayResponseBasicPage.steps.verifyResponseFieldWordCount('4/5');
-        });
-
-        it('User should not be able to paste text more than max word limit.', () => {
-            essayResponseBasicPage.responseField()
-                .type('Lorem ipsum, dolor sit.');
-            essayResponseBasicPage.steps.copyTextFromResponseField();
-            essayResponseBasicPage.previewTabToolbarOption('Paste')
-                .click();
-            essayResponseBasicPage.responseField()
-                .verifyInnerText('Lorem ipsum, dolor sit.');
-            essayResponseBasicPage.steps.verifyResponseFieldWordCount('4/5');
-        });
-
-        it('When the user tries to paste a text and the word limit reaches after pasting, \'word limit reached\' warning message should be displayed beside word count.', () => {
-            essayResponseBasicPage.responseField()
-                .type('Lorem Ipsum dolor');
-            essayResponseBasicPage.steps.copyTextFromResponseField();
-            essayResponseBasicPage.previewTabToolbarOption('Paste')
-                .click();
-            essayResponseBasicPage.responseField()
-                .verifyInnerText('Lorem Ipsum dolorLorem Ipsum dolor');
-            essayResponseBasicPage.steps.verifyResponseFieldWordCount('5/5');
-            essayResponseBasicPage.wordLimitReachedWarningMessage();
+        it('When the user selects the \'Bold\' toolbar option and enters text in the response field, then the text should be displayed in bold and if the user deselects the \'Bold\' toolbar option and continues to types, then the entered text should be displayed in default format', () => {
+            essayResponseBasicPage.steps.selectPreviewTabToolbarOption('Bold (Ctrl+B)');
+            essayResponseBasicPage.steps.enterInputInResponseField('Lorem Ipsum');
+            essayResponseBasicPage.steps.verifyResponseFieldHTML('<p><strong>​​​​​​​Lorem Ipsum</strong><br></p>');
+            essayResponseBasicPage.steps.deselectPreviewTabToolbarOption('Bold (Ctrl+B)');
+            essayResponseBasicPage.steps.enterInputInResponseField(' dolor');
+            essayResponseBasicPage.steps.verifyResponseFieldHTML('<p><strong>Lorem Ipsum</strong>​​​​​​​ dolor<br></p>');
+        });
+
+        it('When the user enters text in the response field, selects the text and then selects the \'Bold\' toolbar option, then the should be displayed in bold and if the user deselects the \'Bold\' toolbar option, then the entered text should be displayed in default format', () => {
+            essayResponseBasicPage.steps.enterInputInResponseField('Lorem Ipsum{selectAll}');
+            essayResponseBasicPage.steps.selectPreviewTabToolbarOption('Bold (Ctrl+B)');
+            essayResponseBasicPage.steps.verifyResponseFieldHTML('<p><strong>Lorem Ipsum</strong></p>');
+            essayResponseBasicPage.steps.deselectPreviewTabToolbarOption('Bold (Ctrl+B)');
+            essayResponseBasicPage.steps.verifyResponseFieldHTML('<p>Lorem Ipsum</p>');
+        });
+
+        essayResponseBasicPage.tests.verifyUndoAndRedoFunctionalityForPreviewTabToolbarOption('Bold (Ctrl+B)');
+
+        it('When the user selects the \'Italic\' toolbar option and enters text in the response field, then the text should be displayed in italic and if the user deselects the \'Italic\' toolbar option and continues to types, then the entered text should be displayed in default format', () => {
+            essayResponseBasicPage.steps.selectPreviewTabToolbarOption('Italic (Ctrl+I)');
+            essayResponseBasicPage.steps.enterInputInResponseField('Lorem Ipsum');
+            essayResponseBasicPage.steps.verifyResponseFieldHTML('<p><em>​​​​​​​Lorem Ipsum</em><br></p>');
+            essayResponseBasicPage.steps.deselectPreviewTabToolbarOption('Italic (Ctrl+I)');
+            essayResponseBasicPage.steps.enterInputInResponseField(' dolor');
+            essayResponseBasicPage.steps.verifyResponseFieldHTML('<p><em>Lorem Ipsum</em>​​​​​​​ dolor<br></p>');
+        });
+
+        it('When the user enters text in the response field, selects the text and then selects the \'Italic\' toolbar option, then the should be displayed in italic and if the user deselects the \'Italic\' toolbar option, then the entered text should be displayed in default format', () => {
+            essayResponseBasicPage.steps.enterInputInResponseField('Lorem Ipsum{selectAll}');
+            essayResponseBasicPage.steps.selectPreviewTabToolbarOption('Italic (Ctrl+I)');
+            essayResponseBasicPage.steps.verifyResponseFieldHTML('<p><em>Lorem Ipsum</em></p>');
+            essayResponseBasicPage.steps.deselectPreviewTabToolbarOption('Italic (Ctrl+I)');
+            essayResponseBasicPage.steps.verifyResponseFieldHTML('<p>Lorem Ipsum</p>');
+        });
+
+        essayResponseBasicPage.tests.verifyUndoAndRedoFunctionalityForPreviewTabToolbarOption('Italic (Ctrl+I)');
+
+        it('When the user selects the \'Underline\' toolbar option and enters text in the response field, then the text should get underlined and if the user deselects the \'Underline\' toolbar option and continues to types, then the entered text should be displayed in default format', () => {
+            essayResponseBasicPage.steps.selectPreviewTabToolbarOption('Underline (Ctrl+U)');
+            essayResponseBasicPage.steps.enterInputInResponseField('Lorem Ipsum');
+            essayResponseBasicPage.steps.verifyResponseFieldHTML('<p><u>​​​​​​​Lorem Ipsum</u><br></p>');
+            essayResponseBasicPage.steps.deselectPreviewTabToolbarOption('Underline (Ctrl+U)');
+            essayResponseBasicPage.steps.enterInputInResponseField(' dolor');
+            essayResponseBasicPage.steps.verifyResponseFieldHTML('<p><u>Lorem Ipsum</u>​​​​​​​ dolor<br></p>');
+        });
+
+        it('When the user enters text in the response field, selects the text and then selects the \'Underline\' toolbar option, then the should get underlined and if the user deselects the \'Underline\' toolbar option, then the entered text should be displayed in default format', () => {
+            essayResponseBasicPage.steps.enterInputInResponseField('Lorem Ipsum{selectAll}');
+            essayResponseBasicPage.steps.selectPreviewTabToolbarOption('Underline (Ctrl+U)');
+            essayResponseBasicPage.steps.verifyResponseFieldHTML('<p><u>Lorem Ipsum</u></p>');
+            essayResponseBasicPage.steps.deselectPreviewTabToolbarOption('Underline (Ctrl+U)');
+            essayResponseBasicPage.steps.verifyResponseFieldHTML('<p>Lorem Ipsum</p>');
+        });
+
+        essayResponseBasicPage.tests.verifyUndoAndRedoFunctionalityForPreviewTabToolbarOption('Underline (Ctrl+U)');
+
+        it('The user should be able to add a combination of \'Bold, Italic, Underline\' formatting options to the text in the response field', () => {
+            essayResponseBasicPage.steps.enterInputInResponseField('Lorem Ipsum{selectAll}');
+            essayResponseBasicPage.steps.selectPreviewTabToolbarOption('Bold (Ctrl+B)');
+            essayResponseBasicPage.steps.selectPreviewTabToolbarOption('Italic (Ctrl+I)');
+            essayResponseBasicPage.steps.selectPreviewTabToolbarOption('Underline (Ctrl+U)');
+            essayResponseBasicPage.steps.verifyResponseFieldHTML('<p><u><em><strong>Lorem Ipsum</strong></em></u></p>');
         });
     });
-    //TO DO- Special characters flyout cases are pending
 });

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

@@ -0,0 +1,17 @@
+import { essayResponseMathPage } from "../../../pages";
+
+describe('Create question page - Essay response - math', () => {
+    before(() => {
+        cy.loginAs('admin');
+        essayResponseMathPage.steps.navigateToCreateQuestion('essay response - math');
+    });
+
+    it('\'Essay response - math\' label should be displayed', () => {
+        essayResponseMathPage.tests.verifyCreateQuestionPageQuestionTypeHeader('Essay response - math');
+    });
+
+    it('When the user expands the \'Customize formatting options (for student player)\' accordion, the \'Equation Editor\' formatting option should be selected by default', () => {
+        essayResponseMathPage.steps.expandCustomizeFormattingOptionsAccordion();
+        essayResponseMathPage.steps.verifyCustomizeFormattingOptionIsSelected('Equation Editor');
+    });
+}); 

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

@@ -0,0 +1,203 @@
+import { essayResponseMathPage } from "../../../pages";
+import { mathCharacters } from "../../../fixtures/drawingToolbarOptionsAdditionalOptionsAndSpecialAndMathCharacters";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import utilities from "../../../support/helpers/utilities";
+const mathCharacterCategories = Object.values(mathCharacters.map((icon) => icon.categoryName));
+const css = Cypress.env('css');
+
+describe('Essay response math: Customize math characters', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Customize math characters', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to essay response - math question type');
+            essayResponseMathPage.steps.navigateToCreateQuestion('essay response - math');
+            cy.barsPreLoaderWait();
+            essayResponseMathPage.steps.expandCustomizeFormattingOptionsAccordion();
+            essayResponseMathPage.steps.selectCustomizedFormattingOption(['Math Characters']);
+        });
+
+        it('When user checks the \'Customize math characters\' checkbox, then \'Select math character languages\' label should be displayed. A \'Preview\' hyperlink should be displayed next to the label', () => {
+            essayResponseMathPage.steps.checkCustomizeMathCharactersCheckbox();
+            utilities.verifyElementVisibilityState(essayResponseMathPage.selectMathCharacterCategoryLabel(), 'visible');
+            utilities.verifyInnerText(essayResponseMathPage.selectMathCharacterCategoryLabel(), 'Select math character languages');
+            utilities.verifyElementVisibilityState(essayResponseMathPage.customizeMathCharactersPreviewButton(), 'visible');
+            utilities.verifyInnerText(essayResponseMathPage.customizeMathCharactersPreviewButton(), 'Preview');
+        });
+
+        it(`A total of ${mathCharacterCategories.length} options should be displayed - ${mathCharacterCategories.join('')}. By default all language options should be in selected state`, () => {
+            essayResponseMathPage.steps.verifyCustomizeMathCharactersCategoryTiles(mathCharacterCategories);
+            essayResponseMathPage.steps.verifySelectedCustomizeMathCharactersCategoryTiles(mathCharacterCategories);
+        });
+
+        it('When the user clicks on the \'Preview\' hyperlink, a math characters popup should be displayed with all the math characters segregated according to all the language options. The user should be able to close the popup by clicking on the \'Close[X]\' button', () => {
+            essayResponseMathPage.steps.clickOnCustomizeMathCharactersPreviewButton();
+            //Add this verification once https://redmine.zeuslearning.com/issues/555008 is resolved
+            // essayResponseMathPage.steps.verifyMathCharactersPreviewPopupInEditTab(mathCharacters);
+            cy.log('Post-step: Closing preview popup')
+            essayResponseMathPage.steps.closeWarningPopup();
+        });
+
+        it('When the user deselects any language option and opens the math characters popup by clicking on the \'Preview\' hyperlink, then the popup contents should get updated accordingly', () => {
+            let newSelectedCategoryList = mathCharacters.slice(1);
+            essayResponseMathPage.steps.clickOnMathCharactersCategoryTile(mathCharacters[0].categoryName);
+            essayResponseMathPage.steps.verifyMathCharacterCategoryTileIsNotSelected(mathCharacters[0].categoryName);
+            essayResponseMathPage.steps.clickOnCustomizeMathCharactersPreviewButton();
+            //Add this verification once https://redmine.zeuslearning.com/issues/555008 is resolved
+            // essayResponseMathPage.steps.verifyMathCharactersPreviewPopupInEditTab(newSelectedCategoryList);
+            cy.log('Post-step: Closing preview popup');
+            essayResponseMathPage.steps.closeWarningPopup();
+        });
+
+        it('When the user has deselected any language option and opens the math characters popup in the preview tab, then the popup contents should get updated accordingly', () => {
+            let newSelectedCategoryList = mathCharacters.slice(1);
+            essayResponseMathPage.steps.switchToPreviewTab();
+            essayResponseMathPage.steps.selectPreviewTabToolbarOption('Math characters');
+            essayResponseMathPage.steps.verifyMathCharactersPopupCategoriesAndSymbols(newSelectedCategoryList);
+            cy.log('Post-step: Switching to edit tab');
+            essayResponseMathPage.steps.switchToEditTab();
+        });
+
+        it('CSS of Customize math characters', { tags: 'css' }, () => {
+            utilities.verifyCSS(essayResponseMathPage.customizeMathCharactersLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            //checked state of customize math characters checkbox
+            utilities.verifyCSS(essayResponseMathPage.customizeMathCharactersCheckbox().parents('[data-ngie-testid="customize-math-characters-checkbox"]').find('rect').eq(1), {
+                'fill': css.color.activeButtons
+            });
+            utilities.verifyCSS(essayResponseMathPage.selectSpecialCharacterLanguagesLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            //Category tiles in selected state
+            utilities.verifyCSS(essayResponseMathPage.mathCharacterTileIcon().eq(1).find('svg'), {
+                'fill': css.color.defaultBackground
+            });
+            utilities.verifyCSS(essayResponseMathPage.customizeMathCharactersTickIcon().last().find('path[data-name*="Rectangle"]'), {
+                'fill': css.color.defaultBackground
+            });
+            utilities.verifyCSS(essayResponseMathPage.customizeMathCharactersTickIcon().last().find('path[data-name*="feather-check"]'), {
+                'fill': css.color.activeButtons
+            });
+            utilities.verifyCSS(essayResponseMathPage.mathCharacterTileSectionCategoriesDragIcon().eq(1).find('path'), {
+                'fill': css.color.activeButtons
+            });
+            utilities.verifyCSS(essayResponseMathPage.mathCharacterTileSectionCategoriesDragIcon().eq(1).parent(), {
+                'background-color': css.color.defaultBackground
+            });
+            utilities.verifyCSS(essayResponseMathPage.mathCharacterTileCategoryName().eq(1), {
+                'color': css.color.whiteText,
+                'font-size': css.fontSize.small,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(essayResponseMathPage.mathCharacterTiles().eq(1), {
+                'background-color': css.color.primaryBtnBg
+            });
+            //Category tiles in de-selected state
+            utilities.verifyCSS(essayResponseMathPage.mathCharacterTileSectionCategoriesDragIcon().eq(0).find('svg path'), {
+                'fill': css.color.secondaryBtn
+            });
+            utilities.verifyCSS(essayResponseMathPage.mathCharacterTileCategoryName().eq(0), {
+                'color': css.color.secondaryBtn,
+                'font-size': css.fontSize.small,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(essayResponseMathPage.mathCharacterTiles().eq(0), {
+                'background-color': css.color.defaultBackground
+            });
+            cy.log('Opening preview popup');
+            essayResponseMathPage.steps.clickOnCustomizeMathCharactersPreviewButton();
+            utilities.verifyCSS(essayResponseMathPage.dialogBoxTitle(), {
+                'color': css.color.flyoutTitle,
+                'font-size': css.fontSize.heading,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(essayResponseMathPage.mathCharactersPreviewPopupCategoryLabel().eq(0), {
+                'color': css.color.text,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+        });
+
+        it('Accessibility of Customize special characters', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(essayResponseMathPage.dialogBox());
+            cy.log('Closing preview popup');
+            essayResponseMathPage.steps.closeWarningPopup();
+            cy.checkAccessibility(essayResponseMathPage.customizeMathCharactersLabel().parent());
+        });
+    });
+
+    describe('Preview tab - toolbar option - \'Math characters\' - content and functionality', { tags: 'smoke' }, () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to drawing response question type');
+            essayResponseMathPage.steps.navigateToCreateQuestion('essay response - math');
+            cy.barsPreLoaderWait();
+        });
+
+        it(`When Math characters option is not selected in edit tab, then in preview tab the Math characters toolbar option should not be displayed`, () => {
+            essayResponseMathPage.steps.switchToPreviewTab();
+            utilities.verifyElementVisibilityState(essayResponseMathPage.previewTabToolbarOption('Math characters'), 'notExist');
+        });
+
+        it(`When Math characters additional option is selected in edit tab, then in preview tab the Math characters toolbar option should be displayed`, () => {
+            essayResponseMathPage.steps.switchToEditTab();
+            essayResponseMathPage.steps.expandCustomizeFormattingOptionsAccordion();
+            essayResponseMathPage.steps.selectCustomizedFormattingOption(['Math Characters']);
+            essayResponseMathPage.steps.switchToPreviewTab();
+            utilities.verifyElementVisibilityState(essayResponseMathPage.previewTabToolbarOption('Math characters'), 'visible');
+        });
+
+        it('By default the \'Math characters\' toolbar option should be in deselected state', () => {
+            //Add here once https://redmine.zeuslearning.com/issues/554508 is resolved
+        });
+
+        it('When user clicks on \'Math characters\' toolbar option, then the \'Math characters\' popup should be displayed with \'Math characters\' title and a \'Close\' button', () => {
+            essayResponseMathPage.steps.selectPreviewTabToolbarOption('Math characters');
+            utilities.verifyElementVisibilityState(essayResponseMathPage.dialogBox(), 'visible');
+            utilities.verifyInnerText(essayResponseMathPage.dialogBoxTitle(), 'Math characters');
+            utilities.verifyElementVisibilityState(essayResponseMathPage.mathCharactersPopupCloseButton(), 'visible');
+        });
+
+        it('All categories and their respective title and symbols should be displayed in the popup', () => {
+            essayResponseMathPage.steps.verifyMathCharactersPopupCategoriesAndSymbols(mathCharacters);
+        });
+
+        it('When user clicks on any category icon, then the category flyout should stay open', () => {
+            essayResponseMathPage.steps.clickOnCharacterPopupSymbol(mathCharacters[0].symbols[0]);
+            utilities.verifyElementVisibilityState(essayResponseMathPage.dialogBox(), 'visible');
+        });
+
+        it('CSS of \'Math characters\' popup', { tags: 'css' }, () => {
+            utilities.verifyCSS(essayResponseMathPage.dialogBoxTitle(), {
+                'color': css.color.flyoutTitle,
+                'font-size': css.fontSize.heading,
+                'font-weight': css.fontWeight.semibold,
+            });
+            utilities.verifyCSS(essayResponseMathPage.mathCharactersPopupCategoryTitle(), {
+                'color': css.color.text,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold,
+            });
+            utilities.verifyCSS(essayResponseMathPage.mathCharactersPopupCharacterSymbol().find('path'), {
+                'fill': css.color.activeButtons
+            });
+        });
+
+        it('Accessibility of Customize special characters', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(essayResponseMathPage.dialogBox());
+        });
+
+        it('When user clicks on the \'Close\' button then the \'Math characters\' popup should be closed', () => {
+            essayResponseMathPage.steps.clickOnMathCharacterCloseButton();
+            utilities.verifyElementVisibilityState(essayResponseMathPage.dialogBox(), 'notExist');
+        });
+    });
+});