itemengine-cypress-automation 1.0.104 → 1.0.106

package/cypress/pages/components/index.js

@@ -52,4 +52,5 @@ export * from './enableOuterBorderComponent';
 export * from './customizeSpecialCharacterComponent';
 export * from './opacityComponent';
 export * from './imageActionsComponent';
-export * from './createCustomCategoryFlyout'
+export * from './createCustomCategoryFlyout';
+export * from './customizeMathCharacterComponent';

package/cypress/pages/components/playbackControlsBaseComponent.js

@@ -1,12 +1,25 @@
+import utilities from "../../support/helpers/utilities";
+import { commonComponents } from "./commonComponents";
+const css = Cypress.env('css');
+
 const selectors = {
     volumeControlButton: () => cy.get('.audio-player-icon'),
     volumeControlSlider: () => cy.get('.audio-volume-control-slider'),
     muteVolumeIcon: () => cy.get('.audio-mute-icon-wr'),
     unmutedVolumeIcon: () => cy.get('.audio-volume-icon-wr'),
-    progressBar: () => cy.get('.progress-bar-wrapper'),
+    progressBar: () => cy.get('[class*="progress-bar-wrapper"]'),
     progressBarSlider: () => cy.get('input[aria-label="Slider bar"]'),
     playbackPlayButton: () => cy.get('button[aria-label="Play"]'),
     playbackPauseButton: () => cy.get('button[aria-label="Pause"]'),
+    playbackSpeedButton: () => cy.get('.playback-speed-button'),
+    playbackSpeedOptionsList: () => cy.get('.playback-speed-menu-list'),
+    playbackSpeedOption: (ariaLabel = null) => {
+        if (ariaLabel) {
+            return cy.get(`.speed-option[aria-label*="${ariaLabel}"]`)
+        } else {
+            return cy.get('.speed-option')
+        }
+    },
 }
 
 const steps = {
@@ -155,9 +168,131 @@ const steps = {
         playbackControlsBaseComponent.playbackPauseButton()
             .should('be.disabled');
     },
+
+    verifyPlaybackSpeedListOptions: () => {
+        const playbackSpeedOptions = ['1x', '1.25x', '1.5x', '2x'];
+        playbackSpeedOptions.forEach((option, optionIndex) => {
+            utilities.verifyInnerText(utilities.getNthElement(playbackControlsBaseComponent.playbackSpeedOption(), optionIndex), option);
+        });
+    },
+
+    /**
+     * Verifies the selected state of the playback speed option.
+     * @param {string} speed - The playback speed option to verify.
+     * @returns {void}
+     */
+    verifyPlaybackSpeedOptionSelectedState: (speed) => {
+        playbackControlsBaseComponent.playbackSpeedOption(speed)
+            .should('have.class', 'selected-speed-option')
+    },
+
+    /**
+     * @description Selects a playback speed option for the video player.
+     * @param {string} playbackSpeed - The desired playback speed to be selected from "1x", "1.25x" "1.5x", "2x".
+     * @throws {Error} Throws an error if the specified playback speed option is not found.
+     */
+    selectPlaybackSpeed: (playbackSpeed) => {
+        playbackControlsBaseComponent.playbackSpeedOption(playbackSpeed)
+            .click();
+    },
+}
+
+const tests = {
+    verifyVolumeControlFunctionality: () => {
+        it('When the user hovers over \'Volume control\' button, volume control settings should open and by default it should be set to full volume and on hovering away from the button, the volume slider should disappear', () => {
+            playbackControlsBaseComponent.steps.hoverOnVolumeControlButton();
+            utilities.verifyElementVisibilityState(playbackControlsBaseComponent.volumeControlSlider(), 'visible');
+            playbackControlsBaseComponent.steps.verifyVolumeOfPlaybackPlayer('100');
+            utilities.hoverAwayFromElement();
+            utilities.verifyElementVisibilityState(playbackControlsBaseComponent.volumeControlSlider(), 'notExist');
+        });
+
+        it('When volume is not set as 0 and user clicks on volume control button, then the audio should be muted and the volume control button should change to a muted state', () => {
+            playbackControlsBaseComponent.steps.clickOnVolumeButton();
+            playbackControlsBaseComponent.steps.hoverOnVolumeControlButton();
+            playbackControlsBaseComponent.steps.verifyVolumeOfPlaybackPlayer('0');
+            utilities.hoverAwayFromElement();
+            utilities.verifyElementVisibilityState(playbackControlsBaseComponent.volumeControlSlider(), 'notExist');
+            utilities.verifyElementVisibilityState(playbackControlsBaseComponent.muteVolumeIcon(), 'visible');
+            playbackControlsBaseComponent.steps.focusOutFromVolumeControlButton();
+        });
+
+        it('When the user clicks on the muted volume control button then the volume setting slider should return to full volume and the volume control button should change to an unmuted state', () => {
+            playbackControlsBaseComponent.steps.clickOnVolumeButton();
+            playbackControlsBaseComponent.steps.hoverOnVolumeControlButton();
+            playbackControlsBaseComponent.steps.verifyVolumeOfPlaybackPlayer('100');
+            utilities.verifyElementVisibilityState(playbackControlsBaseComponent.unmutedVolumeIcon(), 'visible');
+        });
+
+        it('CSS of volume control section', { tags: 'css' }, () => {
+            utilities.verifyCSS(playbackControlsBaseComponent.volumeControlSlider(), {
+                'background': `${css.color.transparent} linear-gradient(to right, ${css.color.activeButtons} 0%, ${css.color.activeButtons} 100%, ${css.color.defaultBackground} 0%, ${css.color.defaultBackground} 100%) repeat scroll 0% 0% / auto padding-box border-box`
+            });
+            utilities.verifyCSS(playbackControlsBaseComponent.volumeControlButton().find('[data-name="minimal-volume-icon"]'), {
+                'fill': css.color.activeButtons
+            });
+        });
+
+        it('When the user drags the volume control all the way down, audio should be muted and the button should update to a muted state', () => {
+            playbackControlsBaseComponent.steps.setVolumeSliderForPlayback(0);
+            playbackControlsBaseComponent.steps.verifyVolumeOfPlaybackPlayer('0');
+            utilities.verifyElementVisibilityState(playbackControlsBaseComponent.muteVolumeIcon(), 'visible');
+        });
+
+        it('CSS of volume control section in muted state', { tags: 'css' }, () => {
+            utilities.verifyCSS(playbackControlsBaseComponent.volumeControlSlider(), {
+                'background': `${css.color.transparent} linear-gradient(to right, ${css.color.activeButtons} 0%, ${css.color.activeButtons} 0%, ${css.color.defaultBackground} -100%, ${css.color.defaultBackground} 100%) repeat scroll 0% 0% / auto padding-box border-box`
+            });
+            utilities.verifyCSS(playbackControlsBaseComponent.muteVolumeIcon().find('[id="eye-slash"]'), {
+                'stroke': css.color.activeButtons
+            });
+        });
+
+        it('Accessibility of playback player - in muted state', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(commonComponents.previewTabQuestionWrapper());
+        });
+
+        it('User should be able to unmute the audio by dragging the volume control higher again', () => {
+            playbackControlsBaseComponent.steps.setVolumeSliderForPlayback(99);
+            playbackControlsBaseComponent.steps.verifyVolumeOfPlaybackPlayer('100');
+            utilities.verifyElementVisibilityState(playbackControlsBaseComponent.unmutedVolumeIcon(), 'visible');
+        });
+    },
+
+    verifyPlaybackSpeedContents: () => {
+        it('When the user hovers overs the playback button, a list of 4 playback speed options - 1x, 1.25x, 1.5x, 2x should be displayed and by default 1x should be in selected state', () => {
+            utilities.hoverOverElement(playbackControlsBaseComponent.playbackSpeedButton());
+            utilities.verifyElementVisibilityState(playbackControlsBaseComponent.playbackSpeedOptionsList(), 'visible');
+            utilities.verifyElementCount(playbackControlsBaseComponent.playbackSpeedOption(), 4);
+            playbackControlsBaseComponent.steps.verifyPlaybackSpeedListOptions();
+            playbackControlsBaseComponent.steps.verifyPlaybackSpeedOptionSelectedState('1x');
+        });
+
+        it('CSS of playback speed options', { tags: 'css' }, () => {
+            utilities.verifyCSS(playbackControlsBaseComponent.playbackSpeedButton().find('[id="playback-speed"] path'), {
+                'fill': css.color.activeButtons
+            });
+            utilities.verifyCSS(utilities.getNthElement(playbackControlsBaseComponent.playbackSpeedOption(), 0), {
+                'color': css.color.liText,
+                'background-color': css.color.liTextSelectedBg,
+                'font-size': css.fontSize.small
+            });
+            utilities.verifyCSS(utilities.getNthElement(playbackControlsBaseComponent.playbackSpeedOption(), 1), {
+                'color': css.color.liText,
+                'background-color': css.color.defaultBackground,
+                'font-size': css.fontSize.small
+            });
+        });
+
+        it('Accessibility of playback speed options', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(commonComponents.previewTabQuestionWrapper());
+            utilities.hoverAwayFromElement();
+        });
+    }
 }
 
 export const playbackControlsBaseComponent = {
     ...selectors,
-    steps
+    steps,
+    tests
 }

package/cypress/pages/correctAnswerViewPage.js

@@ -15,7 +15,18 @@ const steps = {
         utilities.verifyTextContent(correctAnswerViewPage.availablePoints(), `${availablePoints} Points`);
     },
 }
+
+const tests = {
+    verifyManualScoredQuestionHelpTextCorrectAnswerPage: () => {
+        it('\'This is a manual scored question\' help text should be displayed in the correct answer view', () => {
+            utilities.verifyTextContent(correctAnswerViewPage.manualScoredQuestionHelpText(), 'This is a manual scored question.');
+            utilities.verifyElementVisibilityState(correctAnswerViewPage.manualScoredQuestionHelpText(), 'visible');
+        });
+    }
+}
+
 export const correctAnswerViewPage = {
     ...selectors,
-    steps
+    steps,
+    tests
 }

package/cypress/pages/drawingResponsePage.js

@@ -1,5 +1,5 @@
 import utilities from "../support/helpers/utilities"
-import { questionInstructionsComponent, createQuestionBasePage, commonComponents, additionalSettingsPanel, scoringSectionBaseEditTab, customizeSpecialCharacterComponent } from "./components"
+import { questionInstructionsComponent, createQuestionBasePage, commonComponents, additionalSettingsPanel, scoringSectionBaseEditTab, customizeSpecialCharacterComponent, customizeMathCharacterComponent } from "./components"
 import { dialogBoxBase } from "./dialogBoxBase";
 
 const css = Cypress.env('css');
@@ -13,6 +13,7 @@ const selectors = {
     ...scoringSectionBaseEditTab,
     ...createQuestionBasePage,
     ...customizeSpecialCharacterComponent,
+    ...customizeMathCharacterComponent,
     //Customize toolbar options and controls
     customizeToolbarOptionsAndControlsAccordion: () => cy.get('.drawing-response-accordion .ngie-accordion-summary'),
     customizeToolbarOptionsAndControlsLabel: () => cy.get('.customized-options-label'),
@@ -26,6 +27,7 @@ const selectors = {
     toolBarOptionsLabel: () => cy.get('[class*="ToolbarLabel"]').eq(0),
     controlsLabel: () => cy.get('[class*="ToolbarLabel"]').eq(1),
     customizeToolbarOptionsAndControlsSectionTickIcon: () => cy.get('.tick-icon-wrapper'),
+    mathCharactersPopupCategoryTitle: () => cy.get('[class*="characters__container"] [class*="options__characters__title"]'),
 
     //Additional options
     additionalOptionsLabel: () => cy.get('[class*="CustomizedAdditionalOptionsLabel"]'),
@@ -47,34 +49,6 @@ const selectors = {
     defaultFillColorsLabel: () => cy.get('[class*="ColorSelectionComponentstyles__LabelWrapper"]').eq(1),
     defaultFillColorsWrapper: () => cy.get('[class*="ColorSelectionComponentstyles__DefaultColorOptions"]').eq(1),
 
-    //Customize special characters
-    customizeSpecialCharactersCheckbox: () => cy.get('[data-ngie-testid="customize-special-characters-checkbox"] .ngie-checkbox input'),
-    customizeSpecialCharactersLabel: () => cy.get('[data-ngie-testid="customize-special-characters-checkbox"] [class*="label"]'),
-    mathCharactersCategoryTilesWrapper: () => cy.get('[class*="CustomizedSpecialCharacterstyles__DragAndDropWrapper"]'),
-    mathCharacterTiles: (mathCharacterCategory = null) => {
-        if (mathCharacterCategory) {
-            return cy.get(`[id*="DraggableItem"] button[aria-label="${mathCharacterCategory}"]`)
-        } else {
-            return cy.get('[id*="DraggableItem"] button')
-        }
-    },
-    mathCharacterTileIcon: () => cy.get('.equation-editor-icon'),
-    mathCharacterTileCategoryName: () => cy.get('.equation-editor-label-wrapper'),
-    mathCharacterTileSectionCategoriesDragIcon: () => cy.get('.drag-icon-equation-editor-button'),
-
-    //Customize math characters
-    customizeMathCharactersCheckbox: () => cy.get('[data-ngie-testid="customize-math-characters-checkbox"] .ngie-checkbox input'),
-    customizeMathCharactersLabel: () => cy.get('[data-ngie-testid="customize-math-characters-checkbox"] [class*="label"]'),
-    selectMathCharacterCategoryLabel: () => cy.get('[class*="CustomizedSpecialCharacterstyles__SpecialCharLabel"]'),
-    customizeMathCharactersPreviewButton: () => cy.get('[class*="CustomizedSpecialCharacterstyles__PreviewLabel"]'),
-
-    //Preview popup
-    mathCharactersPreviewPopupSymbol: () => cy.get('[class*="CustomizedSpecialCharacterstyles__CharacterWrapper"]'),
-
-    //Math characters preview popup
-    mathCharactersPreviewPopupCharactersCategoryWrapper: () => cy.get('[class*="CustomizedSpecialCharacterstyles__AccordionWrapper"]'),
-    mathCharactersPreviewPopupCategoryLabel: () => cy.get('[class*="CustomizedMathCharacterstyles__PopupTitle"]'),
-
     //Preview tab
     previewTabDrawingToolbarWrapper: () => cy.get('.edit-question-preview-wrapper .drawing-tool__toolbar'),
     previewTabDrawingToolbarOption: (drawingOption = null) => {
@@ -215,9 +189,6 @@ const selectors = {
     spellCheckCheckBoxLabel: () => cy.get('[data-ngie-testid="spell-check-checkbox"]'),
     spellCheckCheckBox: () => cy.get('[data-ngie-testid="spell-check-checkbox"] input'),
 
-    //Math characters popup
-    mathCharactersPopupCategoryTitle: () => cy.get('[class*="characters__container"] [class*="options__characters__title"]'),
-
     //TODO: Shift all preview tab special characters popup related selectors/steps to a common component file once https://redmine.zeuslearning.com/issues/559296 is resolved
     //Special characters popup
     specialCharactersPopupCategoryTitle: () => cy.get('[class*="characters__container"] [class*="options__accordion__header"]'),
@@ -251,6 +222,7 @@ const steps = {
     ...createQuestionBasePage.steps,
     ...commonComponents.steps,
     ...customizeSpecialCharacterComponent.steps,
+    ...customizeMathCharacterComponent.steps,
     /**
      * @param {string[]} arrayOfToolbarOptions array of toolbar options to be selected
      * @description this function selects toolbar options from edit tab
@@ -668,26 +640,6 @@ const steps = {
         });
     },
 
-    /**
-     * @description Verify categories and symbols displayed in math characters popup
-     * @param {object[]} categoryAndSymbolsArray Array of list of categories and their symbols present in math characters popup 
-     */
-    verifyMathCharactersPopupCategoriesAndSymbols: (categoryAndSymbolsArray) => {
-        categoryAndSymbolsArray.forEach((category, index) => {
-            utilities.verifyInnerText(drawingResponsePage.mathCharactersPopupCategoryTitle().eq(index), `${category.categoryName}`);
-            drawingResponsePage.charactersPopupCharactersCategoryWrapper()
-                .eq(index)
-                .within(() => {
-                    categoryAndSymbolsArray[index].symbols.forEach((symbol, index) => {
-                        drawingResponsePage.charactersPopupCharacterSymbol()
-                            .eq(index)
-                            .find('svg')
-                            .should('have.attr', 'aria-label', `${symbol}`);
-                    });
-                });
-        });
-    },
-
     /**
      * @description Verify symbols displayed in for a category in special characters popup
      * @param {number} categoryIndex Index of the category
@@ -758,92 +710,6 @@ const steps = {
         utilities.verifyElementVisibilityState(drawingResponsePage.charactersPopupCharactersCategoryWrapper().eq(index), 'notExist');
     },
 
-    checkCustomizeSpecialCharactersCheckbox: () => {
-        drawingResponsePage.customizeSpecialCharactersCheckbox()
-            .click()
-            .should('be.checked');
-    },
-
-    checkCustomizeMathCharactersCheckbox: () => {
-        drawingResponsePage.customizeMathCharactersCheckbox()
-            .click()
-            .should('be.checked');
-    },
-
-    /**
-     * @description Verify customized math character category tiles in edit tab
-     * @param {string[]} charactersCategoriesArray Array of math character categories
-     */
-    verifyCustomizeMathCharactersCategoryTiles: (charactersCategoriesArray) => {
-        drawingResponsePage.mathCharactersCategoryTilesWrapper()
-            .within(() => {
-                charactersCategoriesArray.forEach((characterCategory, index) => {
-                    drawingResponsePage.mathCharacterTiles()
-                        .eq(index)
-                        .should('have.attr', 'aria-label', `${characterCategory}`);
-                });
-            });
-        utilities.verifyElementCount(drawingResponsePage.mathCharacterTiles(), charactersCategoriesArray.length);
-    },
-
-    /**
-     * @description Verify selected math characters category tiles 
-     * @param {string[]} selectedMathCharactersCategoriesArray Array of selected math characters categories
-     */
-    verifySelectedCustomizeMathCharactersCategoryTiles: (selectedMathCharactersCategoriesArray) => {
-        drawingResponsePage.mathCharactersCategoryTilesWrapper()
-            .within(() => {
-                selectedMathCharactersCategoriesArray.forEach((characterCategory) => {
-                    drawingResponsePage.mathCharacterTiles(characterCategory)
-                        .should('have.class', 'Mui-selected')
-                        .within(() => {
-                            utilities.verifyElementVisibilityState(drawingResponsePage.customizeToolbarOptionsAndControlsSectionTickIcon(), 'visible');
-                        });
-                });
-            });
-    },
-
-    clickOnCustomizeMathCharactersPreviewButton: () => {
-        drawingResponsePage.customizeMathCharactersPreviewButton()
-            .click();
-    },
-
-    /**
-     * @description Verify math characters categories and symbols in preview tab
-     * @param {object[]} categoryAndSymbolsArray Array of math characters categories and symbols
-     */
-    verifyMathCharactersPreviewPopupInEditTab: (categoryAndSymbolsArray) => {
-        categoryAndSymbolsArray.forEach((category, index) => {
-            utilities.verifyInnerText(drawingResponsePage.mathCharactersPreviewPopupCategoryLabel().eq(index), `${category.categoryName}`);
-            drawingResponsePage.mathCharactersPreviewPopupCharactersCategoryWrapper()
-                .eq(index)
-                .within(() => {
-                    category.symbols.forEach((symbol, index) => {
-                        utilities.verifyElementVisibilityState(drawingResponsePage.mathCharactersPreviewPopupSymbol().eq(index), 'visible');
-                        drawingResponsePage.mathCharactersPreviewPopupSymbol()
-                            .eq(index)
-                            .find('path')
-                            .should('have.attr', 'data-name', `${symbol}`);
-                    });
-                    utilities.verifyElementCount(drawingResponsePage.mathCharactersPreviewPopupSymbol(), category.symbols.length);
-                });
-        });
-        utilities.verifyElementCount(drawingResponsePage.mathCharactersPreviewPopupCharactersCategoryWrapper(), categoryAndSymbolsArray.length);
-    },
-
-    clickOnMathCharactersCategoryTile: (categoryName) => {
-        drawingResponsePage.mathCharacterTiles(categoryName)
-            .click();
-    },
-
-    verifyMathCharacterCategoryTileIsNotSelected: (categoryName) => {
-        drawingResponsePage.mathCharacterTiles(categoryName)
-            .should('have.attr', 'data-aria-pressed', 'false')
-            .within(() => {
-                utilities.verifyElementVisibilityState(drawingResponsePage.customizeToolbarOptionsAndControlsSectionTickIcon(), 'hidden');
-            });
-    },
-
     verifyPatternRadioButtonIsNotSelected: () => {
         drawingResponsePage.patternRadioButton()
             .should('not.be.checked');
@@ -855,18 +721,6 @@ const steps = {
             .should('be.checked');
     },
 
-    /**
-    * Verify custom special characters displayed in characters popup in preview tab
-    * @param {string[]} customSpecialCharacters Array of custom special characters
-    */
-    verifyCustomSpecialCharactersDisplayedInPreviewTab: (customSpecialCharacters) => {
-        customSpecialCharacters.forEach((customSpecialCharacter, index) => {
-            utilities.verifyInnerText(drawingResponsePage.charactersPopupCharacterSymbol().eq(index), `${customSpecialCharacter}`);
-            utilities.verifyElementVisibilityState(drawingResponsePage.charactersPopupCharacterSymbol().eq(index), 'visible');
-        });
-        utilities.verifyElementCount(drawingResponsePage.charactersPopupCharacterSymbol(), `${customSpecialCharacters.length}`);
-    },
-
     clickInOpacityPalette: () => {
         drawingResponsePage.editTabColorPickerPopupOpacityPalette()
             .click();
@@ -1320,7 +1174,27 @@ const steps = {
     verifyToolbarAndControlsOptionsSelectedState: (toolbarAndControlOption) => {
         drawingResponsePage.toolbarOptionsAndControlsFormattingOptionsTiles(toolbarAndControlOption)
             .should('have.class', 'Mui-selected');
-    }
+    },
+
+    /**
+     * @description Verify categories and symbols displayed in math characters popup
+     * @param {object[]} categoryAndSymbolsArray Array of list of categories and their symbols present in math characters popup 
+     */
+    verifyMathCharactersPopupCategoriesAndSymbols: (categoryAndSymbolsArray) => {
+        categoryAndSymbolsArray.forEach((category, index) => {
+            utilities.verifyInnerText(drawingResponsePage.mathCharactersPopupCategoryTitle().eq(index), `${category.categoryName}`);
+            drawingResponsePage.charactersPopupCharactersCategoryWrapper()
+                .eq(index)
+                .within(() => {
+                    categoryAndSymbolsArray[index].symbols.forEach((symbol, index) => {
+                        drawingResponsePage.charactersPopupCharacterSymbol()
+                            .eq(index)
+                            .find('svg')
+                            .should('have.attr', 'aria-label', `${symbol}`);
+                    });
+                });
+        });
+    },
 }
 
 const tests = {
@@ -1330,6 +1204,7 @@ const tests = {
     ...questionInstructionsComponent.tests,
     ...scoringSectionBaseEditTab.tests,
     ...createQuestionBasePage.tests,
+    ...customizeSpecialCharacterComponent.tests,
 
     checkAccessibilityForSecondaryToolbarOptionPopup: () => {
         it('Accessibility of popup', { tags: 'a11y' }, () => {

package/cypress/pages/essayResponseMathPage.js

@@ -1,5 +1,6 @@
-import { questionInstructionsComponent, scoringSectionBase, createQuestionBasePage, additionalSettingsPanel, essayResponseCommonComponents } from "./components";
+import { questionInstructionsComponent, scoringSectionBase, createQuestionBasePage, additionalSettingsPanel, essayResponseCommonComponents, customizeMathCharacterComponent } from "./components";
 import { essayResponsePage } from ".";
+import utilities from "../support/helpers/utilities";
 
 const selectors = {
     ...scoringSectionBase,
@@ -8,13 +9,10 @@ const selectors = {
     ...questionInstructionsComponent,
     ...essayResponsePage,
     ...essayResponseCommonComponents,
-    textToNotBeRenderedAsLaTexLabel: () => cy.get('.text-not-latex-wrapper .text-label'),
-    textToNotBeRenderedAsLaTextInputFieldWrapper: (inputfieldNumber) => cy.get('.text-not-to-be-rendered-input').eq(inputfieldNumber),
-    textToNotBeRenderedAsLaTextInputField: () => cy.get('[aria-label="Text to not be rendered as LaTex"]'),
-    textToNotBeRenderedAsLaTextInputFieldCount: () => cy.get('.start-adornment'),
-    addTextButton: () => cy.get('.text-not-latex-wrapper .ngie-icon-with-label-btn'),
-    inputFieldLatexCharacter: () => cy.get('var[mathquill-command-id]'),
-    deleteButton: () => cy.get('.icon-button-wrapper button')
+    ...customizeMathCharacterComponent,
+    mathCharactersPopupCategoryTitle: () => cy.get('.math-char-popup-title'),
+    mathCharactersPopupCharactersCategoryWrapper: () => cy.get('.special-math-accordion'),
+    mathCharactersPopupCharacterSymbol: () => cy.get('.characters-button')
 }
 
 const steps = {
@@ -24,14 +22,28 @@ const steps = {
     ...additionalSettingsPanel.steps,
     ...essayResponsePage.steps,
     ...essayResponseCommonComponents.steps,
-    addTextToNotBeRenderedAsLatexEditTab: (inputFieldIndex, textContent) => {
-        essayResponseMathPage.textToNotBeRenderedAsLaTextInputFieldWrapper(inputFieldIndex)
-            .within(() => {
-                essayResponseMathPage.textToNotBeRenderedAsLaTextInputField()
-                    .type(textContent)
-                    .should('have.value', textContent);
-            });
-    }
+    ...customizeMathCharacterComponent.steps,
+
+    /**
+     * @description Verify categories and symbols displayed in math characters popup
+     * @param {object[]} categoryAndSymbolsArray Array of list of categories and their symbols present in math characters popup 
+     */
+    //Failing due to https://redmine.zeuslearning.com/issues/561285
+    verifyMathCharactersPopupCategoriesAndSymbols: (categoryAndSymbolsArray) => {
+        categoryAndSymbolsArray.forEach((category, index) => {
+            utilities.verifyInnerText(essayResponseMathPage.mathCharactersPopupCategoryTitle().eq(index), `${category.categoryName}`);
+            essayResponseMathPage.mathCharactersPopupCharactersCategoryWrapper()
+                .eq(index)
+                .within(() => {
+                    categoryAndSymbolsArray[index].symbols.forEach((symbol, index) => {
+                        essayResponseMathPage.mathCharactersPopupCharacterSymbol()
+                            .eq(index)
+                            .find('svg')
+                            .should('have.attr', 'aria-label', `${symbol}`);
+                    });
+                });
+        });
+    },
 }
 
 const tests = {