itemengine-cypress-automation 1.0.104 → 1.0.106

package/cypress/pages/components/backgroundImageUploadComponent.js

@@ -1,4 +1,8 @@
 import utilities from "../../support/helpers/utilities";
+import { dialogBoxBase } from "../dialogBoxBase";
+import { commonComponents } from "./commonComponents";
+import { figOverImageCanvasComponent } from "./figOverImageCanvasComponent";
+const css = Cypress.env('css');
 
 const selectors = {
     backgroundImageLabel: () => cy.get('[class*="Background"][class*="LabelWrapper"]'),
@@ -10,7 +14,9 @@ const selectors = {
     noFileChosenLabel: () => cy.get('[aria-label="No file chosen"]'),
     uploadImageProgressBar: () => cy.get('[class*="ProgressBar"]'),
     uploadedFileNameLabel: () => cy.get('[class*="UploadImagestyles__SelectedFileWithIcon"]'),
-    deleteImageIcon: () => cy.get('[aria-label="Delete image"]')
+    deleteImageIcon: () => cy.get('[aria-label="Delete image"]'),
+    deleteImagePopupButtonCancel: () => cy.get('.delete-action-btn-wrapper button').eq(0),
+    deleteImagePopupButtonDelete: () => cy.get('.delete-action-btn-wrapper button').eq(1)
 }
 
 const steps = {
@@ -35,10 +41,164 @@ const steps = {
     verifyFileNameLabel: (fileName) => {
         utilities.verifyInnerText(backgroundImageUploadComponent.uploadedFileNameLabel(), fileName);
         utilities.verifyElementVisibilityState(backgroundImageUploadComponent.uploadedFileNameLabel(), 'visible');
+    },
+
+    clickOnDeleteButtonInDeleteImagePopup: () => {
+        backgroundImageUploadComponent.deleteImagePopupButtonDelete()
+            .click();
+        dialogBoxBase.dialogBox()
+            .should('not.exist');
+    },
+
+    clickOnCancelButtonInDeleteImagePopup: () => {
+        backgroundImageUploadComponent.deleteImagePopupButtonCancel()
+            .click();
+        dialogBoxBase.dialogBox()
+            .should('not.exist');
+    },
+}
+
+const tests = {
+    verifyBackgroundImageSectionContentWithCSSAndA11y: () => {
+        it('\'Background image\' label should be visible', () => {
+            utilities.verifyInnerText(backgroundImageUploadComponent.backgroundImageLabel(), 'Background image');
+        })
+
+        it('\'Upload\' label and \'Choose file\' button should be displayed', () => {
+            utilities.verifyInnerText(backgroundImageUploadComponent.uploadLabel(), 'Upload');
+            utilities.verifyElementVisibilityState(backgroundImageUploadComponent.uploadLabel(), 'visible');
+            utilities.verifyInnerText(backgroundImageUploadComponent.chooseFileButton(), 'Choose file');
+            utilities.verifyElementVisibilityState(backgroundImageUploadComponent.chooseFileButton(), 'visible');
+        });
+
+        it('\'File name\' label should be displayed and by default \'No file chosen\' text should be displayed below the \'File name\' label.', () => {
+            utilities.verifyInnerText(backgroundImageUploadComponent.fileNameLabel(), 'File name');
+            utilities.verifyElementVisibilityState(backgroundImageUploadComponent.fileNameLabel(), 'visible');
+            utilities.verifyInnerText(backgroundImageUploadComponent.noFileChosenLabel(), 'No file chosen');
+            utilities.verifyElementVisibilityState(backgroundImageUploadComponent.noFileChosenLabel(), 'visible');
+        });
+
+        it('CSS of upload section', { tags: 'css' }, () => {
+            utilities.verifyCSS(backgroundImageUploadComponent.uploadLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(backgroundImageUploadComponent.chooseFileButton(), {
+                'color': css.color.secondaryBtn,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular,
+                'border-bottom-color': css.color.titleContainerBorder
+            });
+            utilities.verifyCSS(backgroundImageUploadComponent.fileNameLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(backgroundImageUploadComponent.noFileChosenLabel(), {
+                'color': css.color.panelLabel,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+        });
+
+        it('Accessibility of  Upload section before uploading image', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(backgroundImageUploadComponent.uploadLabel().parents('.edit-question-edit-tab-wrapper'));
+        });
+
+        it('When the user adds the image file and file upload is inprogress, file name and progress bar should be displayed below \'File name\' label. Progress bar should disappear once file is uploaded and uploaded image should be displayed', () => {
+            backgroundImageUploadComponent.steps.uploadFile('highlightImage.jpg');
+            utilities.verifyElementVisibilityState(backgroundImageUploadComponent.uploadImageProgressBar(), 'visible');
+            backgroundImageUploadComponent.steps.verifyFileNameLabel('highlightImage.jpg');
+            utilities.verifyElementVisibilityState( figOverImageCanvasComponent.canvasImage(), 'visible');
+            utilities.verifyElementVisibilityState(backgroundImageUploadComponent.uploadImageProgressBar(), 'notExist');
+            figOverImageCanvasComponent.steps.verifyImageIsUploaded();
+        });
+
+        it('Delete button should appear beside uploaded file\'s name', () => {
+            utilities.verifyElementVisibilityState(backgroundImageUploadComponent.deleteImageIcon(), 'visible');
+        });
+        
+        it('When user clicks on \'Choose file\' button again and upload another image file, previously uploaded image file should get replaced with new image file', () => {
+            backgroundImageUploadComponent.steps.uploadFile('sample1.jpg');
+            backgroundImageUploadComponent.steps.verifyFileNameLabel('sample1.jpg');
+        });
+    },
+
+    verifyDeleteImagePopupContentAndFunctionality: () => {
+        it('When the user hovers on \'Delete\' button, \'Delete image\' text should be displayed in tooltip', () => {
+            backgroundImageUploadComponent.deleteImageIcon()
+                .verifyTooltip('Delete image');
+        });
+
+        it('CSS of tooltip', { tags: 'css' }, () => {
+            backgroundImageUploadComponent.deleteImageIcon()
+                .trigger('mouseover');
+            utilities.verifyCSS(commonComponents.tooltipText(), {
+                'color': css.color.whiteText,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.regular,
+                'background-color': css.color.tooltipBg
+            });
+        });
+
+        it('When user clicks on the \'Delete\' button, then \'Delete\' popup should be displayed', () => {
+            backgroundImageUploadComponent.steps.deleteImage();
+            utilities.verifyElementVisibilityState(dialogBoxBase.dialogBox(), 'visible');
+            utilities.verifyInnerText(dialogBoxBase.dialogBoxTitle(), 'Delete');
+        });
+
+        it('The pop up should be displayed with the message \'Are you sure you want to delete the image?\'', () => {
+            utilities.verifyInnerText(dialogBoxBase.dialogBoxContent(), 'Are you sure you want to delete the image?');
+            utilities.verifyInnerText(backgroundImageUploadComponent.deleteImagePopupButtonDelete(), 'Delete image');
+            utilities.verifyInnerText(backgroundImageUploadComponent.deleteImagePopupButtonCancel(), 'Cancel');
+        });
+
+        it('CSS of popup', { tags: 'css' }, () => {
+            utilities.verifyCSS(dialogBoxBase.dialogBox(), {
+                'background-color': css.color.defaultBackground,
+            });
+            utilities.verifyCSS(dialogBoxBase.dialogBoxContent().find('[class*="UploadImagestyles__DeletePopupWrapper"]'), {
+                'color': css.color.sectionHeading,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(backgroundImageUploadComponent.deleteImagePopupButtonDelete(), {
+                'color': css.color.primaryBtn,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(backgroundImageUploadComponent.deleteImagePopupButtonCancel(), {
+                'color': css.color.secondaryBtn,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.semibold,
+                'background-color': css.color.defaultBackground
+            });
+        });
+
+        it('Accessibility of the popup', () => {
+            cy.checkAccessibility(dialogBoxBase.dialogBox());
+        });
+
+        it('When user clicks on \'Cancel\' button, then popup should close and user should remain on the edit interface of the question', () => {
+            backgroundImageUploadComponent.steps.clickOnCancelButtonInDeleteImagePopup();
+            utilities.verifyElementVisibilityState(dialogBoxBase.dialogBox(), 'notExist');
+            utilities.verifyInnerText(backgroundImageUploadComponent.uploadedFileNameLabel(), 'sample1.jpg');
+            utilities.verifyElementVisibilityState(figOverImageCanvasComponent.canvasImage(), 'visible');
+        });
+
+        it('When user clicks on \'Delete image\' button, then popup should close and image inside the canvas should be deleted', () => {
+            backgroundImageUploadComponent.steps.deleteImage();
+            backgroundImageUploadComponent.steps.clickOnDeleteButtonInDeleteImagePopup();
+            utilities.verifyElementVisibilityState(dialogBoxBase.dialogBox(), 'notExist');
+            utilities.verifyInnerText(backgroundImageUploadComponent.noFileChosenLabel(), 'No file chosen');
+            figOverImageCanvasComponent.steps.verifyCanvasImageNotExist();
+        });
     }
 }
 
 export const backgroundImageUploadComponent = {
     ...selectors,
-    steps
+    steps,
+    tests
 }

package/cypress/pages/components/colorPopupComponent.js

@@ -1,7 +1,9 @@
 import utilities from "../../support/helpers/utilities";
+import { dialogBoxBase } from "../dialogBoxBase";
 const css = Cypress.env('css');
 
 const selectors = {
+    ...dialogBoxBase,
     colorBlock: () => cy.get('.color-picker-block'),
     colorSaturationPalette: () => cy.get('.react-colorful__saturation'),
     colorSaturationPicker: () => cy.get('.react-colorful__saturation-pointer .react-colorful__pointer-fill'),
@@ -11,19 +13,19 @@ const selectors = {
     selectedColorBlock: () => cy.get('.color-wrapper'),
     hexLabel: () => cy.get('.hex-settings-wrapper .inline-text-property-label'),
     hexInputField: () => cy.get('.hex-settings-wrapper input'),
+    cancelButton: () => cy.get('.compact-popup-action-button-wrapper button').eq(0),
+    okButton: () => cy.get('.compact-popup-action-button-wrapper button').eq(1),
+    dialogBoxTitle: () => cy.get('#alert-dialog-title'),
+    opacityGradientHue: () => cy.get('.react-colorful__last-control [class="react-colorful__interactive"]'),
+    opacityGradientPicker: () => cy.get('.react-colorful__last-control .react-colorful__pointer-fill'),
     opacityLabel: () => cy.get('[class*="ColorPickerstyles__SliderWrapper"]'),
+    //Need to update when feedback scale is available
     opacitySlider: () => cy.get('[class*="ColorPickerstyles__SliderWrapper"] .color-slider'),
     opacityInputField: () => cy.get('.opacity-wrapper [aria-label="Opacity"]'),
     recommendedColorsLabel: () => cy.get('.color-picker-footer-wrapper'),
     recommendedColorBlock: () => cy.get('[class*="ColorPickerstyles__ColorBlockWrapper"] .color-picker-block'),
     recommendedColorBlockSelectedIcon: () => cy.get('.selected-button-icon'),
-    recommendedColorBlockLabel: () => cy.get('[class*="ColorPickerstyles__ColorLabel"]'),
-    cancelButton: () => cy.get('.compact-popup-action-button-wrapper button').eq(0),
-    okButton: () => cy.get('.compact-popup-action-button-wrapper button').eq(1),
-    dialogBox: () => cy.get('#alert-dialog-description'),
-    dialogBoxTitle: () => cy.get('#alert-dialog-title'),
-    opacityGradientHue: () => cy.get('.react-colorful__last-control [class="react-colorful__interactive"]'),
-    opacityGradientPicker: () => cy.get('.react-colorful__last-control .react-colorful__pointer-fill')
+    recommendedColorBlockLabel: () => cy.get('[class*="ColorPickerstyles__ColorLabel"]')
 }
 
 const steps = {
@@ -154,7 +156,7 @@ const steps = {
     },
 
     verifyColorPopupIsDisplayed: () => {
-        utilities.verifyElementVisibilityState(colorPopupComponent.dialogBox(), 'visible');
+        utilities.verifyElementVisibilityState(dialogBoxBase.dialogBoxContent(), 'visible');
     },
 
     verifyColorPopupSelectColorTitle: () => {
@@ -258,21 +260,35 @@ const steps = {
 
     clickOnOpacityGradientHuePalette: () => {
         colorPopupComponent.opacityGradientHue()
-        .click();
+            .click();
     },
 }
 
 const tests = {
-    verifyCSSAnda11yOfColourPopupContents: () => {
+    verifyColorPopupSelectColorTitle: () => {
+        it('A title \'Select color\' should be displayed on the color popup', () => {
+            colorPopupComponent.steps.verifyColorPopupSelectColorTitle();
+        });
+
+        it('A \'Selected color\' label and color block displaying the selected color should be displayed', () => {
+            colorPopupComponent.steps.verifySelectedColorLabelAndSelectedColorBlock();
+        });
+
+        it('\'Cancel\' and \'Ok\' buttons should be displayed', () => {
+            utilities.verifyInnerText(colorPopupComponent.cancelButton(), 'Cancel');
+            utilities.verifyElementVisibilityState(colorPopupComponent.cancelButton(), 'visible');
+            utilities.verifyInnerText(colorPopupComponent.okButton(), 'OK');
+            utilities.verifyElementVisibilityState(colorPopupComponent.okButton(), 'visible');
+        });
+
         it('CSS of color popup contents', { tags: 'css' }, () => {
-            const labels = [colorPopupComponent.selectedColorLabel, colorPopupComponent.hexLabel, colorPopupComponent.opacityLabel, colorPopupComponent.recommendedColorsLabel]
-            const inputFields = [colorPopupComponent.hexInputField, colorPopupComponent.opacityInputField];
+            const labels = [colorPopupComponent.selectedColorLabel, colorPopupComponent.hexLabel]
+            const inputFields = [colorPopupComponent.hexInputField];
             labels.forEach(label => {
                 utilities.verifyCSS(label(), {
                     'color': css.color.labels,
                     'font-size': css.fontSize.normal,
                     'font-weight': css.fontWeight.semibold
-
                 });
             });
             inputFields.forEach(inputField => {
@@ -280,33 +296,106 @@ const tests = {
                     'color': css.color.text,
                     'font-size': css.fontSize.default,
                     'font-weight': css.fontWeight.regular
-
                 });
             });
-            utilities.verifyCSS(colorPopupComponent.recommendedColorBlockLabel(), {
-                'color': css.color.labelText,
-                'font-size': css.fontSize.normal,
-                'font-weight': css.fontWeight.regular
-            });
             utilities.verifyCSS(colorPopupComponent.okButton(), {
-                'color': css.color.text,
+                'color': css.color.primaryBtn,
                 'font-size': css.fontSize.default,
                 'font-weight': css.fontWeight.regular,
-                'background-color': css.color.successBtnBg
+                'background-color': css.color.primaryBtnBg
             });
             utilities.verifyCSS(colorPopupComponent.cancelButton(), {
                 'color': css.color.secondaryBtn,
                 'font-size': css.fontSize.default,
-                'font-weight': css.fontWeight.regular,
-                'background-color': css.color.secondaryBtnBg
+                'font-weight': css.fontWeight.semibold,
+                'background-color': css.color.transparent
             });
         });
 
-        //Failing due to https://redmine.zeuslearning.com/issues/539391
         it('Accessibility of color popup contents', { tags: 'a11y' }, () => {
-            cy.checkAccessibility(colorPopupComponent.dialogBox());
+            cy.checkAccessibility(dialogBoxBase.dialogBoxContent());
+        });
+    },
+
+    /**
+     * @param {string} color value of saturation color palette and opacity gradient palette
+     */
+    verifySaturationAndOpacityGradientPalette: (color) => {
+        it('A \'Color saturation palette\' should be displayed on the color popup along with a color picker and the color picker should be set on the selected color', () => {
+            colorPopupComponent.steps.verifyColorSaturationPaletteAndPicker();
+            colorPopupComponent.steps.verifySaturationPaletteColor(color);
+        });
+
+        it('A \'Opacity gradient hue palette\' should be displayed on the color popup along with a Opacity gradient picker and the color picker should be set on the selected color', () => {
+            colorPopupComponent.steps.verifyOpacityGradientHuePaletteAndPicker();
+            colorPopupComponent.steps.verifyOpacityGradientPaletteColor(color);
+        });
+    },
+
+     /**
+     * @param {string} hueColor value of color hue palette in Rgb
+     * @param {string} hexColor value of hex input field in hex code
+     */
+    verifyColorHuePaletteAndHexInputField: (hueColor, hexColor) => {
+        it('A \'Color hue palette\' should be displayed on the color popup along with a color picker and the color picker should be set on the selected color', () => {
+            colorPopupComponent.steps.verifyColorHuePaletteAndPicker();
+            colorPopupComponent.steps.verifyHuePaletteColor(hueColor);
+        });
+
+        it('A \'Hex\' label and input field with pre-filled hex code value of the selected color should be displayed', () => {
+            colorPopupComponent.steps.verifyHexLabelAndInputField();
+            colorPopupComponent.steps.verifyHexValue(hexColor);
+        });
+    },
+
+    verifyColorPopupFunctionality: () => {
+        it('When the user changes the color using hex code, the color in color saturation palette and color hue palette should change', () => {
+            colorPopupComponent.steps.addInputToHexInputField('#ff0000');
+            colorPopupComponent.steps.verifyHexValue('#ff0000');
+            colorPopupComponent.steps.verifySaturationPaletteColor('rgb(255, 0, 0)');
+            colorPopupComponent.steps.verifyHuePaletteColor('rgb(255, 0, 0)');
+        });
+
+        it('When the user changes the color opacity using opacity gradient hue, then opacity of color should change in selected color block and hex color code should remain unchanged', () => {
+            colorPopupComponent.steps.clickOnOpacityGradientHuePalette();
+            colorPopupComponent.steps.verifyOpacityGradientPaletteColor('rgba(255, 0, 0, 0.5)');
+            colorPopupComponent.steps.verifySelectedColorBlock('rgba(255, 0, 0, 0.5)');
+            colorPopupComponent.steps.verifyHexValue('#ff0000');
+            colorPopupComponent.steps.verifySaturationPaletteColor('rgb(255, 0, 0)');
+            colorPopupComponent.steps.verifyHuePaletteColor('rgb(255, 0, 0)');
+        });
+    },
+
+    /**
+     * @param {string} color value of saturation color palette and opacity gradient palette
+     */
+    verifySaturationAndOpacityGradientPalette: (color) => {
+        it('A \'Color saturation palette\' should be displayed on the color popup along with a color picker and the color picker should be set on the selected color', () => {
+            colorPopupComponent.steps.verifyColorSaturationPaletteAndPicker();
+            colorPopupComponent.steps.verifySaturationPaletteColor(color);
         });
-    }
+
+        it('A \'Opacity gradient hue palette\' should be displayed on the color popup along with a Opacity gradient picker and the color picker should be set on the selected color', () => {
+            colorPopupComponent.steps.verifyOpacityGradientHuePaletteAndPicker();
+            colorPopupComponent.steps.verifyOpacityGradientPaletteColor(color);
+        });
+    },
+
+     /**
+     * @param {string} hueColor value of color hue palette in Rgb
+     * @param {string} hexColor value of hex input field in hex code
+     */
+    verifyColorHuePaletteAndHexInputField: (hueColor, hexColor) => {
+        it('A \'Color hue palette\' should be displayed on the color popup along with a color picker and the color picker should be set on the selected color', () => {
+            colorPopupComponent.steps.verifyColorHuePaletteAndPicker();
+            colorPopupComponent.steps.verifyHuePaletteColor(hueColor);
+        });
+
+        it('A \'Hex\' label and input field with pre-filled hex code value of the selected color should be displayed', () => {
+            colorPopupComponent.steps.verifyHexLabelAndInputField();
+            colorPopupComponent.steps.verifyHexValue(hexColor);
+        });
+    },
 }
 
 export const colorPopupComponent = {

package/cypress/pages/components/customizeMathCharacterComponent.js

@@ -0,0 +1,133 @@
+import utilities from "../../support/helpers/utilities";
+
+const selectors = {
+    //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"]'),
+    customizeMathCharactersTickIcon: () => cy.get('.tick-icon-wrapper'),
+
+    //Preview popup
+    mathCharactersPreviewPopupSymbol: () => cy.get('[class*="Characterstyles__CharacterWrapper"]'),
+    mathCharactersPopupCloseButton: () => cy.get('[class*="close-button"]'),
+
+    //Math characters preview popup
+    mathCharactersPreviewPopupCharactersCategoryWrapper: () => cy.get('[class*="__AccordionWrapper"]'),
+    mathCharactersPreviewPopupCategoryLabel: () => cy.get('[class*="MathCharacterstyles__PopupTitle"]'),
+
+    //Edit tab
+    mathCharactersCategoryTilesWrapper: () => cy.get('[class*="CustomizedSpecialCharacterstyles__DragAndDropWrapper"]'),
+    mathCharacterTiles: (mathCharacterCategory = null) => {
+        if (mathCharacterCategory) {
+            return cy.get(`[class*="DragAndDropGridstyles"] [id*="DraggableItem"] button[aria-label="${mathCharacterCategory}"]`)
+        } else {
+            return cy.get('[class*="DragAndDropGridstyles"] [id*="DraggableItem"] button')
+        }
+    },
+    mathCharacterTileIcon: () => cy.get('[class*="DragAndDropGridstyles"] .equation-editor-icon'),
+    mathCharacterTileCategoryName: () => cy.get('[class*="DragAndDropGridstyles"] .equation-editor-label-wrapper'),
+    mathCharacterTileSectionCategoriesDragIcon: () => cy.get('[class*="DragAndDropGridstyles"] .drag-icon-equation-editor-button'),
+}
+
+const steps = {
+    checkCustomizeMathCharactersCheckbox: () => {
+        customizeMathCharacterComponent.customizeMathCharactersCheckbox()
+            .click()
+            .should('be.checked');
+    },
+
+
+    clickOnCustomizeMathCharactersPreviewButton: () => {
+        customizeMathCharacterComponent.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(customizeMathCharacterComponent.mathCharactersPreviewPopupCategoryLabel().eq(index), `${category.categoryName}`);
+            customizeMathCharacterComponent.mathCharactersPreviewPopupCharactersCategoryWrapper()
+                .eq(index)
+                .within(() => {
+                    category.symbols.forEach((symbol, index) => {
+                        utilities.verifyElementVisibilityState(customizeMathCharacterComponent.mathCharactersPreviewPopupSymbol().eq(index), 'visible');
+                        customizeMathCharacterComponent.mathCharactersPreviewPopupSymbol()
+                            .eq(index)
+                            .find('path')
+                            .should('have.attr', 'data-name', `${symbol}`);
+                    });
+                    utilities.verifyElementCount(customizeMathCharacterComponent.mathCharactersPreviewPopupSymbol(), category.symbols.length);
+                });
+        });
+        utilities.verifyElementCount(customizeMathCharacterComponent.mathCharactersPreviewPopupCharactersCategoryWrapper(), categoryAndSymbolsArray.length);
+    },
+
+    /**
+    * @description Verify customized math character category tiles in edit tab
+    * @param {string[]} charactersCategoriesArray Array of math character categories
+    */
+    verifyCustomizeMathCharactersCategoryTiles: (charactersCategoriesArray) => {
+        customizeMathCharacterComponent.mathCharactersCategoryTilesWrapper()
+            .within(() => {
+                charactersCategoriesArray.forEach((characterCategory, index) => {
+                    customizeMathCharacterComponent.mathCharacterTiles()
+                        .eq(index)
+                        .should('have.attr', 'aria-label', `${characterCategory}`);
+                });
+            });
+        utilities.verifyElementCount(customizeMathCharacterComponent.mathCharacterTiles(), charactersCategoriesArray.length);
+    },
+
+    /**
+    * @description Verify selected math characters category tiles 
+    * @param {string[]} selectedMathCharactersCategoriesArray Array of selected math characters categories
+    */
+    verifySelectedCustomizeMathCharactersCategoryTiles: (selectedMathCharactersCategoriesArray) => {
+        customizeMathCharacterComponent.mathCharactersCategoryTilesWrapper()
+            .within(() => {
+                selectedMathCharactersCategoriesArray.forEach((characterCategory) => {
+                    customizeMathCharacterComponent.mathCharacterTiles(characterCategory)
+                        .should('have.class', 'Mui-selected')
+                        .within(() => {
+                            utilities.verifyElementVisibilityState(customizeMathCharacterComponent.customizeMathCharactersTickIcon(), 'visible');
+                        });
+                });
+            });
+    },
+
+    /**
+     * This function selects the math category characters
+     * @param {string} categoryName math category characters aria label
+     */
+    clickOnMathCharactersCategoryTile: (categoryName) => {
+        customizeMathCharacterComponent.mathCharacterTiles(categoryName)
+            .click();
+    },
+
+     /**
+     * This function verifies the the math category characters are not selectedF
+     * @param {string} categoryName math category characters aria label
+     */
+    verifyMathCharacterCategoryTileIsNotSelected: (categoryName) => {
+        customizeMathCharacterComponent.mathCharacterTiles(categoryName)
+            .should('have.attr', 'data-aria-pressed', 'false')
+            .within(() => {
+                utilities.verifyElementVisibilityState(customizeMathCharacterComponent.customizeMathCharactersTickIcon(), 'hidden');
+            });
+    },
+
+    clickOnMathCharacterCloseButton: () => {
+        customizeMathCharacterComponent.mathCharactersPopupCloseButton()
+            .click();
+    }
+}
+
+export const customizeMathCharacterComponent = {
+    ...selectors,
+    steps
+}

package/cypress/pages/components/customizeSpecialCharacterComponent.js

@@ -1,6 +1,12 @@
 import utilities from "../../support/helpers/utilities";
+import { specialCharacters } from "../../fixtures/drawingToolbarOptionsAdditionalOptionsAndSpecialAndMathCharacters";
+import { dialogBoxBase } from "../dialogBoxBase";
+const specialCharactersCategories = Object.values(specialCharacters.map((icon) => icon.categoryName));
 
 const selectors = {
+    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"]'),
+    charactersPopupCharacterSymbol: () => cy.get(' [class*="char"] [class*="rapper"] button[class*="characters"]'),
     groupByLanguageRadioButton: () => cy.get('[class*="CustomizedSpecialCharacterstyles__RadioGroupWrapper"] .ngie-radio-btn input').eq(0),
     groupByLanguageLabel: () => cy.get('[class*="CustomizedSpecialCharacterstyles__RadioGroupWrapper"] .ngie-radio-label').eq(0),
     showOnlyCustomSpecialCharactersRadioButton: () => cy.get('[class*="CustomizedSpecialCharacterstyles__RadioGroupWrapper"] .ngie-radio-btn input').eq(1),
@@ -12,9 +18,9 @@ const selectors = {
     specialCharactersCategoryTilesWrapper: () => cy.get('[class*="CustomizedSpecialCharacterstyles__DragAndDropWrapper"]'),
     specialCharacterTiles: (specialCharacterCategory = null) => {
         if (specialCharacterCategory) {
-            return cy.get(`[id*="DraggableItem"] button[aria-label="${specialCharacterCategory}"]`)
+            return cy.get(`[aria-label*="special character"][id*="DraggableItem"] button[aria-label="${specialCharacterCategory}"]`)
         } else {
-            return cy.get('[id*="DraggableItem"] button')
+            return cy.get('[aria-label*="special character"][id*="DraggableItem"] button')
         }
     },
     specialCharacterTileIcon: () => cy.get('.equation-editor-icon'),
@@ -22,7 +28,7 @@ const selectors = {
     specialCharacterTileSectionCategoriesDragIcon: () => cy.get('.drag-icon-equation-editor-button'),
     //Special characters preview popup
     specialCharactersPreviewPopupCharactersCategoryWrapper: () => cy.get('[class*="special"][class*="accordion"]'),
-    specialCharactersPreviewPopupCategoryAccordionExpandIcon: () => cy.get('[class*="expandIconWrapper"]'),
+    specialCharactersPreviewPopupCategoryAccordionExpandIcon: () => cy.get('.special-character-accordion [class*="expandIconWrapper"]'),
     specialCharactersPreviewPopupCategoryLabel: () => cy.get('[class*="CustomizedSpecialCharacterstyles__AccordionLabel"]'),
     specialCharactersPreviewPopupSymbol: () => cy.get('[class*="CustomizedSpecialCharacterstyles__CharacterWrapper"]'),
 
@@ -32,6 +38,24 @@ const selectors = {
 }
 
 const steps = {
+    /**
+    * 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(customizeSpecialCharacterComponent.charactersPopupCharacterSymbol().eq(index), `${customSpecialCharacter}`);
+            utilities.verifyElementVisibilityState(customizeSpecialCharacterComponent.charactersPopupCharacterSymbol().eq(index), 'visible');
+        });
+        utilities.verifyElementCount(customizeSpecialCharacterComponent.charactersPopupCharacterSymbol(), `${customSpecialCharacters.length}`);
+    },
+
+    checkCustomizeSpecialCharactersCheckbox: () => {
+        customizeSpecialCharacterComponent.customizeSpecialCharactersCheckbox()
+            .click()
+            .should('be.checked');
+    },
+
     verifyGroupedByLanguageRadioButtonIsSelected: () => {
         customizeSpecialCharacterComponent.groupByLanguageRadioButton()
             .should('be.checked');
@@ -159,7 +183,53 @@ const steps = {
     },
 }
 
+const tests = {
+    verifyCustomSpecialCharactersEditTabContent: () => {
+        it('When the user checks the \'Customize special characters\' checkbox, \'Group by language\' and \'Show only custom special characters\' labels and radio buttons should be displayed. By default \'Group by language\' radio button should be checked', () => {
+            customizeSpecialCharacterComponent.steps.checkCustomizeSpecialCharactersCheckbox();
+            utilities.verifyElementVisibilityState(customizeSpecialCharacterComponent.groupByLanguageRadioButton(), 'exist');
+            utilities.verifyElementVisibilityState(customizeSpecialCharacterComponent.groupByLanguageLabel(), 'visible');
+            utilities.verifyElementVisibilityState(customizeSpecialCharacterComponent.showOnlyCustomSpecialCharactersRadioButton(), 'exist');
+            utilities.verifyElementVisibilityState(customizeSpecialCharacterComponent.showOnlyCustomSpecialCharactersLabel(), 'visible');
+            customizeSpecialCharacterComponent.steps.verifyGroupedByLanguageRadioButtonIsSelected();
+        });
+
+        it('\'Select special character languages\' label should be displayed. A \'Preview\' hyperlink should be displayed next to the label', () => {
+            utilities.verifyElementVisibilityState(customizeSpecialCharacterComponent.selectSpecialCharacterLanguagesLabel(), 'visible');
+            utilities.verifyInnerText(customizeSpecialCharacterComponent.selectSpecialCharacterLanguagesLabel(), 'Select special character languages');
+            utilities.verifyElementVisibilityState(customizeSpecialCharacterComponent.customizeSpecialCharactersPreviewButton(), 'visible');
+            utilities.verifyInnerText(customizeSpecialCharacterComponent.customizeSpecialCharactersPreviewButton(), 'Preview');
+        });
+
+        it(`A total of ${specialCharactersCategories.length} options should be displayed - ${specialCharactersCategories.join('')}. By default all language options should be in selected state`, () => {
+            customizeSpecialCharacterComponent.steps.verifyCustomizeSpecialCharactersCategoryTiles(specialCharactersCategories);
+            customizeSpecialCharacterComponent.steps.verifySelectedCustomizeSpecialCharactersCategoryTiles(specialCharactersCategories);
+        });
+
+        it('When the user clicks on the \'Preview\' hyperlink, a special characters popup should be displayed with all the special characters segregated according to all the language options. The user should be able to close the popup by clicking on the \'Close[X]\' button', () => {
+            customizeSpecialCharacterComponent.steps.clickOnCustomizeSpecialCharactersPreviewButton();
+            utilities.verifyElementVisibilityState(dialogBoxBase.dialogBox(), 'visible');
+            //customizeSpecialCharacterComponent.steps.verifySpecialCharactersPreviewPopupInEditTab(specialCharacters);
+            //Add this verification once https://redmine.zeuslearning.com/issues/555008 is resolved
+            cy.log('Post-step: Closing preview popup')
+            dialogBoxBase.steps.closeWarningPopup();
+        });
+
+        it('When the user deselects any language option and opens the special characters popup by clicking on the \'Preview\' hyperlink, then the popup contents should get updated accordingly', () => {
+            let newSelectedCategoryList = specialCharacters.slice(1);
+            customizeSpecialCharacterComponent.steps.clickOnSpecialCharactersCategoryTile(specialCharacters[0].categoryName);
+            customizeSpecialCharacterComponent.steps.verifySpecialCharacterCategoryTileIsNotSelected(specialCharacters[0].categoryName);
+            customizeSpecialCharacterComponent.steps.clickOnCustomizeSpecialCharactersPreviewButton();
+            //customizeSpecialCharacterComponent.steps.verifySpecialCharactersPreviewPopupInEditTab(specialCharacters);
+            //Add this verification once https://redmine.zeuslearning.com/issues/555008 is resolved
+            cy.log('Post-step: Closing preview popup')
+            dialogBoxBase.steps.closeWarningPopup();
+        });
+    }
+}
+
 export const customizeSpecialCharacterComponent = {
     ...selectors,
-    steps
+    steps,
+    tests
 }