itemengine-cypress-automation 1.0.378 → 1.0.379-IEI-5744-25232c0.0

package/cypress/e2e/ILC/ThinkSphere/equationEditorEditCategoryFlyOut.js

@@ -0,0 +1,292 @@
+import { equationEditorCategoriesAndSymbols } from "../../../fixtures/equationEditorCategoriesAndSymbols ";
+import { thinkSpherePage } from "../../../pages";
+import { editCategoryFlyout } from "../../../pages/components/editCategoryFlyout";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import utilities from "../../../support/helpers/utilities";
+const css = Cypress.env('css');
+const defaultSelectedCategories = ['numPad', 'keyPad', 'intermediate', 'primary', 'general', 'common', 'algebra', 'geo', 'compare', 'matrices', 'setNotation', 'delimiters', 'trig', 'measurement', 'calculus', 'otherSymbols', 'greekSymbols'];
+
+describe('Create question page - Essay Response: Edit category', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Edit category flyout contents', () => {
+        abortEarlySetup();
+        before(() => {
+            thinkSpherePage.steps.navigateToThinkSphereCreateQuestion();
+            thinkSpherePage.steps.expandCustomizeToolsAndControls();
+            thinkSpherePage.steps.selectCustomizedFormattingOption(['Equation editor']);
+        });
+
+        it('When user clicks on the Edit category icon below the categories in the Equation Editor section the Edit category flyout should open', () => {
+            editCategoryFlyout.steps.openEditCategoryFlyout();
+            utilities.verifyElementVisibilityState(editCategoryFlyout.dialogBox(), 'visible');
+        });
+
+        it('Title of the flyout should be \'Edit category\'', () => {
+            utilities.verifyElementVisibilityState(editCategoryFlyout.dialogBoxTitle(), 'exist');
+            utilities.verifyInnerText(editCategoryFlyout.dialogBoxTitle(), 'Edit category');
+        });
+
+        it('\'Select the symbols to display to the students.\' help text should be displayed below the title', () => {
+            utilities.verifyElementVisibilityState(editCategoryFlyout.selectSymbolsToDisplayLabel(), 'exist');
+            utilities.verifyInnerText(editCategoryFlyout.selectSymbolsToDisplayLabel(), 'Select the symbols to display to the students.');
+        });
+
+        it('The name of the category should be displayed in the flyout with a checked checkbox', () => {
+            utilities.verifyElementVisibilityState(editCategoryFlyout.categoryLabel(), 'visible');
+            utilities.verifyInnerText(editCategoryFlyout.categoryLabel(), `${equationEditorCategoriesAndSymbols['general'].displayName}`);
+            editCategoryFlyout.steps.verifyCategoryCheckboxIsChecked();
+            thinkSpherePage.steps.cancelCustomCategory();
+        });
+
+        defaultSelectedCategories.forEach((key) => {
+            if (key === 'numPad') {
+                it(`All the ${equationEditorCategoriesAndSymbols['numPad'].displayName} characters should be displayed and should be in selected state except the last three ones also each one should have necessary tooltips`, () => {
+                    const symbolsArray = Object.values(equationEditorCategoriesAndSymbols['numPad'].symbols);
+                    const selectedSymbolsArray = symbolsArray.slice(0, 10);
+                    const unselectedSymbolsArray = symbolsArray.slice(-3);
+                    editCategoryFlyout.steps.openEditCategoryFlyout(key);
+                    thinkSpherePage.steps.verifyCategoryCharactersAndSelectedState(selectedSymbolsArray);
+                    thinkSpherePage.steps.verifyCategoryCharactersAndUnSelectedState(unselectedSymbolsArray);
+                    thinkSpherePage.steps.cancelCustomCategory();
+                });
+            } else if (key !== 'keyPad') {
+                it(`All the ${equationEditorCategoriesAndSymbols[key]?.displayName} characters should be displayed and should be in selected state also each one should have necessary tooltips`, () => {
+                    const symbolsArray = Object.values(equationEditorCategoriesAndSymbols[key]?.symbols);
+                    editCategoryFlyout.steps.openEditCategoryFlyout(key);
+                    thinkSpherePage.steps.verifyCategoryCharactersAndSelectedState(symbolsArray);
+                    editCategoryFlyout.steps.verifyCategoryCharactersDragIcon();
+                    thinkSpherePage.steps.cancelCustomCategory();
+                });
+            }
+        })
+
+        it(`All the ${equationEditorCategoriesAndSymbols['numPad'].displayName} characters should be displayed and should be in selected state except the last three ones`, () => {
+            const symbolsArray = Object.values(equationEditorCategoriesAndSymbols['numPad'].symbols);
+            const selectedSymbolsArray = symbolsArray.slice(0, -3);
+            const unselectedSymbolsArray = symbolsArray.slice(-3);
+            editCategoryFlyout.steps.verifyCategoryCharactersAndSelectedState(selectedSymbolsArray);
+            editCategoryFlyout.steps.verifyCategoryCharactersDragIcon();
+            thinkSpherePage.steps.verifyCategoryCharactersAndUnSelectedState(unselectedSymbolsArray);
+        });
+
+        it('Reset button should be displayed in the flyout', () => {
+            utilities.verifyElementVisibilityState(editCategoryFlyout.buttonReset(), 'exist');
+            utilities.verifyInnerText(editCategoryFlyout.buttonReset(), 'Reset');
+            utilities.verifyElementVisibilityState(editCategoryFlyout.resetIcon(), 'exist');
+        });
+
+        it('\'Save\' button should be displayed in the flyout', () => {
+            utilities.verifyElementVisibilityState(thinkSpherePage.buttonSave(), 'visible');
+            utilities.verifyInnerText(thinkSpherePage.buttonSave(), 'Save');
+        });
+
+        it('CSS of Edit category flyout components', { tags: 'css' }, () => {
+            utilities.verifyCSS(editCategoryFlyout.dialogBoxTitle(), {
+                'color': css.color.flyoutTitle,
+                'font-size': css.fontSize.heading,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(editCategoryFlyout.categoryLabel(), {
+                'color': css.color.accordionLabel,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.bold
+            });
+            utilities.verifyCSS(editCategoryFlyout.categoryCheckbox().parents('.MuiCheckbox-root').find('svg'), {
+                'fill': css.color.activeButtons
+            });
+            utilities.verifyCSS(editCategoryFlyout.selectSymbolsToDisplayLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(editCategoryFlyout.categoryCharacters().eq(0), {
+                'background-color': css.color.activeButtons
+            });
+            utilities.verifyCSS(editCategoryFlyout.characterDragIcon(), {
+                'background-color': css.color.defaultBackground
+            });
+            utilities.verifyCSS(editCategoryFlyout.characterDragIcon().eq(0).find('path').eq(1), {
+                'color': css.color.activeButtons,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.bold
+            });
+            utilities.verifyCSS(editCategoryFlyout.characterTickIcon().eq(0).find('path').eq(1), {
+                'fill': css.color.activeButtons
+            });
+            utilities.verifyCSS(thinkSpherePage.buttonSave(), {
+                'color': css.color.primaryBtn,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.semibold,
+                'background-color': css.color.primaryBtnBg
+            });
+            utilities.verifyCSS(thinkSpherePage.buttonCancel(), {
+                'color': css.color.secondaryBtn,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.semibold,
+                'background-color': css.color.transparent
+            });
+        });
+
+        it('Accessibility of Edit category flyout components', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(editCategoryFlyout.dialogBox());
+        });
+
+        it('\'Cancel\' button should be displayed and on clicking it the flyout should close', () => {
+            utilities.verifyElementVisibilityState(thinkSpherePage.buttonCancel(), 'visible');
+            utilities.verifyInnerText(thinkSpherePage.buttonCancel(), 'Cancel');
+            thinkSpherePage.steps.cancelCustomCategory();
+            utilities.verifyElementVisibilityState(editCategoryFlyout.dialogBox(), 'notExist');
+        });
+    });
+
+    describe('Category checkbox validation states', () => {
+        abortEarlySetup();
+        before(() => {
+            thinkSpherePage.steps.navigateToThinkSphereCreateQuestion();
+            thinkSpherePage.steps.expandCustomizeToolsAndControls();
+            thinkSpherePage.steps.selectCustomizedFormattingOption(['Equation editor']);
+            editCategoryFlyout.steps.openEditCategoryFlyout();
+        });
+
+        it('When user deselects any one character by clicking on it then the category checkbox should be in partially checked state', () => {
+            editCategoryFlyout.steps.deselectCategoryCharacters(equationEditorCategoriesAndSymbols.general.symbols.dollar.ariaLabel);
+            editCategoryFlyout.steps.verifyCategoryCheckboxIsPartiallyChecked();
+        });
+
+        it('When user clicks on the partially checked category checkbox then all the characters should be selected', () => {
+            editCategoryFlyout.steps.verifyCategoryCheckboxIsPartiallyChecked();
+            editCategoryFlyout.steps.checkCategoryCheckbox();
+            editCategoryFlyout.steps.verifyAllCategoryCharactersSelected();
+        });
+
+        it('When user clicks on checked category checkbox then all the characters should get de-selected', () => {
+            editCategoryFlyout.steps.verifyCategoryCheckboxIsChecked()
+            editCategoryFlyout.steps.uncheckCategoryCheckbox();
+            editCategoryFlyout.steps.verifyAllCategoryCharactersNotSelected()
+        });
+
+        it('CSS of de-selected character', { tags: 'css' }, () => {
+            utilities.verifyCSS(editCategoryFlyout.categoryCharacters().eq(0).find('text'), {
+                'color': css.color.liText,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.bold,
+            });
+            utilities.verifyCSS(editCategoryFlyout.categoryCharacters().eq(0), {
+                'background-color': css.color.defaultBackground
+            });
+            utilities.verifyCSS(editCategoryFlyout.categoryCharacters().eq(0).find('.drag-icon-button-custom-format'), {
+                'background-color': css.color.defaultBackgrounds
+            });
+            utilities.verifyCSS(editCategoryFlyout.categoryCharacters().eq(0).find('.drag-icon-button-custom-format path').eq(1), {
+                'color': css.color.secondaryBtn,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.bold,
+            });
+        });
+
+        it('Accessibility of de-selected character', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(editCategoryFlyout.categoryCharacters(0).parents('[class*="DragItemstyles__ItemContainer"]'))
+        });
+
+        it('When user clicks on the unchecked category checkbox then all the characters should get selected', () => {
+            editCategoryFlyout.steps.verifyCategoryCheckboxIsUnchecked()
+            editCategoryFlyout.steps.checkCategoryCheckbox();
+            editCategoryFlyout.steps.verifyAllCategoryCharactersSelected();
+        });
+
+        it('When user clicks on all the selected characters then the category checkbox should get unchecked', () => {
+            editCategoryFlyout.steps.verifyCategoryCheckboxIsChecked();
+            editCategoryFlyout.steps.deselectCategoryCharacter('QuestionMark selected');
+            editCategoryFlyout.steps.deselectCategoryCharacters(equationEditorCategoriesAndSymbols.general.symbols.cents.ariaLabel);
+            editCategoryFlyout.steps.deselectCategoryCharacters(equationEditorCategoriesAndSymbols.general.symbols.dollar.ariaLabel);
+            editCategoryFlyout.steps.deselectCategoryCharacters('colon');
+            editCategoryFlyout.steps.verifyCategoryCheckboxIsUnchecked();
+        });
+
+        it('When user clicks on all the de-selected characters the category checkbox should get checked', () => {
+            editCategoryFlyout.steps.selectCategoryCharactersUsingIndex(0);
+            editCategoryFlyout.steps.selectCategoryCharacters('Dollar');
+            editCategoryFlyout.steps.selectCategoryCharacters('Cents');
+            editCategoryFlyout.steps.selectCategoryCharacters('Colon');
+            editCategoryFlyout.steps.verifyCategoryCheckboxIsChecked();
+        });
+    });
+
+    describe('\'Reset\' button validation states', () => {
+        abortEarlySetup();
+        before(() => {
+            thinkSpherePage.steps.navigateToThinkSphereCreateQuestion();
+            thinkSpherePage.steps.expandCustomizeToolsAndControls();
+            thinkSpherePage.steps.selectCustomizedFormattingOption(['Equation editor']);
+        });
+
+        it('When user opens the Edit category flyout then the Reset button should be disabled by default', () => {
+            editCategoryFlyout.steps.openEditCategoryFlyout();
+            utilities.verifyElementDisabled(editCategoryFlyout.buttonReset());
+        });
+
+        it('When user de-selects any character by clicking on it then the Reset button should get enabled', () => {
+            editCategoryFlyout.steps.deselectCategoryCharacters(`${equationEditorCategoriesAndSymbols.general.symbols.dollar.ariaLabel}`);
+            utilities.verifyElementNotDisabled(editCategoryFlyout.buttonReset());
+        });
+
+        it('CSS of enabled Reset button', { tags: 'css' }, () => {
+            utilities.verifyCSS(editCategoryFlyout.buttonReset(), {
+                'color': css.color.activeButtons,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+        });
+
+        it('Accessibility of enabled Reset button', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(editCategoryFlyout.buttonReset());
+        })
+
+        it('When user clicks on the Reset button the changes should be reverted and the all the character should be selected again', () => {
+            editCategoryFlyout.steps.reset();
+            editCategoryFlyout.steps.verifyAllCategoryCharactersSelected();
+        });
+
+        it('When user de-selects characters and re-selects them then the Reset button should be disabled', () => {
+            editCategoryFlyout.steps.deselectCategoryCharacters(`${equationEditorCategoriesAndSymbols.general.symbols.dollar.ariaLabel}`);
+            editCategoryFlyout.steps.deselectCategoryCharacters(`${equationEditorCategoriesAndSymbols.general.symbols.cents.ariaLabel}`)
+            editCategoryFlyout.steps.selectCategoryCharacters(`${equationEditorCategoriesAndSymbols.general.symbols.dollar.ariaLabel}`)
+            editCategoryFlyout.steps.selectCategoryCharacters(`${equationEditorCategoriesAndSymbols.general.symbols.cents.ariaLabel}`)
+            utilities.verifyElementDisabled(editCategoryFlyout.buttonReset())
+        });
+
+        it('When user edits and saves the category then on opening the same Edit category flyout the \'Reset\' button should be disabled and the previously Saved changes should be displayed', () => {
+            editCategoryFlyout.steps.deselectCategoryCharacters(`${equationEditorCategoriesAndSymbols.general.symbols.dollar.ariaLabel}`);
+            editCategoryFlyout.steps.deselectCategoryCharacters(`${equationEditorCategoriesAndSymbols.general.symbols.cents.ariaLabel}`);
+            thinkSpherePage.steps.saveCustomCategory();
+            utilities.verifyElementVisibilityState(editCategoryFlyout.dialogBox(), 'notExist');
+            editCategoryFlyout.steps.openEditCategoryFlyout();
+            utilities.verifyElementDisabled(editCategoryFlyout.buttonReset());
+            editCategoryFlyout.steps.verifyCategoryCharacterNotSelected(`${equationEditorCategoriesAndSymbols.general.symbols.dollar.ariaLabel}`)
+            editCategoryFlyout.steps.verifyCategoryCharacterNotSelected(`${equationEditorCategoriesAndSymbols.general.symbols.dollar.ariaLabel}`)
+        });
+    });
+
+    describe('Save a edited category', () => {
+        abortEarlySetup();
+        before(() => {
+            thinkSpherePage.steps.navigateToThinkSphereCreateQuestion();
+            thinkSpherePage.steps.expandCustomizeToolsAndControls();
+            thinkSpherePage.steps.selectCustomizedFormattingOption(['Equation editor']);
+            editCategoryFlyout.steps.openEditCategoryFlyout()
+        });
+
+        it('When user edits a category and clicks on Cancel button then the flyout should close and the changes should not be saved', () => {
+            editCategoryFlyout.steps.deselectCategoryCharacters(`${equationEditorCategoriesAndSymbols.general.symbols.dollar.ariaLabel}`);
+            editCategoryFlyout.steps.deselectCategoryCharacters(`${equationEditorCategoriesAndSymbols.general.symbols.cents.ariaLabel}`);
+            thinkSpherePage.steps.cancelCustomCategory();
+            utilities.verifyElementVisibilityState(editCategoryFlyout.dialogBox(), 'notExist');
+            editCategoryFlyout.steps.openEditCategoryFlyout()
+            editCategoryFlyout.steps.verifyAllCategoryCharactersSelected();
+        });
+        
+    });
+});

package/cypress/e2e/ILC/ThinkSphere/planPhase.js

@@ -287,12 +287,10 @@ describe('Create item : ThinkSphere Question - Plan Phases Section',() => {
 
         it('When popup is open it should have the title visible and it should contain the title', () => {
             utilities.verifyElementVisibilityState(thinkSpherePage.videoPopupTitle(), 'visible');
-            thinkSpherePage.videoPopupTitle()
-                .invoke('text')
-                .should('not.be.empty');
+            thinkSpherePage.steps.verifyTextIsNotEmpty(thinkSpherePage.videoPopupTitle());
         });
 
-        it.skip('The play and pause button should be visible in the center of the video', () => {
+        it('The play and pause button should be visible in the center of the video', () => {
             //TODO: the play and pause button should be visible in the center of the video
         });
 
@@ -474,6 +472,27 @@ describe('Create item : ThinkSphere Question - Plan Phases Section',() => {
             thinkSpherePage.tests.verifyOptionsInput('strategy');
     
             thinkSpherePage.tests.verifyAtleastOneOptionIsRequired('strategy', strategiesTextDefault, 'Minimum one option is required');
+
+            it('The author should be able to add up to 15 strategies using the \'Add strategy\' button and newly added option\'s checkbox should be unchecked by default', () => {
+                for (let index = 0; index < 10; index++) {
+                    thinkSpherePage.steps.addOption('strategy');
+                }
+                thinkSpherePage.tests.verifyListSectionContents({
+                    optionFieldsCount: 15,
+                    optionList: [...strategiesTextDefault, ...Array(10).fill('')],
+                    placeholder: 'Enter strategy name',
+                    list: 'strategy',
+                });
+                thinkSpherePage.steps.verifyTypeCheckBoxStrategy();
+                thinkSpherePage.steps.verifyStrategyCheckBoxNotChecked();
+            });
+
+            it('When 5 strategies are checked, further checkboxes should have tool tip \'Only 5 strategies can be selected\'', () => {
+                for(let i = 1; i < 5; i++) {
+                    thinkSpherePage.steps.selectOption('strategy', i)
+                }
+                utilities.getNthElement(thinkSpherePage.planStrategyCheckbox(), 5).verifyTooltip('Only 5 strategies can be selected')
+            });
     
             thinkSpherePage.tests.verifyResetToDefaultFunctionality(strategiesTextDefault, 'strategy');
     
@@ -530,6 +549,29 @@ describe('Create item : ThinkSphere Question - Plan Phases Section',() => {
             thinkSpherePage.tests.verifyOptionsInput('sentenceStarter');
     
             thinkSpherePage.tests.verifyAtleastOneOptionIsRequired('sentenceStarter', sentenceStartersTextDefault, 'Minimum one option is required');
+
+            it('The author should be able to add up to 15 sentence starters using the \'Add sentence starters\' button and newly added option\'s checkbox should be unchecked by default', () => {
+                for (let index = 0; index < 10; index++) {
+                    thinkSpherePage.steps.addOption('sentenceStarter');
+                }
+                thinkSpherePage.tests.verifyListSectionContents({
+                    optionFieldsCount: 15,
+                    optionList: [...sentenceStartersTextDefault, ...Array(10).fill('')],
+                    placeholder: 'Enter sentence starter name',
+                    list: 'sentenceStarter',
+                });
+                thinkSpherePage.steps.verifyTypeCheckBoxSentenceStarter();
+                thinkSpherePage.steps.verifySentenceStrategyCheckBoxNotChecked();
+            });
+
+            it('When 5 sentence starters are checked, further checkboxes should have tool tip \'Only 5 sentence starters can be selected\'', () => {
+                for(let i = 1; i < 5; i++) {
+                    thinkSpherePage.steps.selectOption(sentenceStartersTextDefault, i)
+                }
+                utilities.getNthElement(thinkSpherePage.planSentenceStarterCheckbox(), 5).verifyTooltip('Only 5 sentence starters can be selected')
+            });
+
+            thinkSpherePage.tests.verifyResetToDefaultFunctionality(sentenceStartersTextDefault, 'sentenceStarter');
     
             it('Accessibility of \'Plan Phase\' Section Sentence starters list component', { tags: 'a11y' }, () => {
                 cy.checkAccessibility(thinkSpherePage.planSentenceStarterSection());

package/cypress/e2e/ILC/ThinkSphere/solvePhase.js

@@ -36,6 +36,13 @@ describe('ThinkSphere Question - Solve Phases Section', () => {
             utilities.verifyElementVisibilityState(thinkSpherePage.solvePhaseAccordionExpandIcon(), 'exist');
         });
 
+        it('When the user clicks the expanded \'Solve phase\' accordion should be collapsed when collapsed accordion is clicked it should be expanded', () => {
+            thinkSpherePage.steps.clickOnSolvePhaseAccordionIcon();
+            thinkSpherePage.steps.verifySolvePhaseAccordionCollapsed();
+            thinkSpherePage.steps.clickOnSolvePhaseAccordionIcon();
+            thinkSpherePage.steps.verifySolvePhaseAccordionExpanded();
+        });
+
         it('By default \'Customize toolbar options and controls\' accordion should be collapsed and by clicking on the \'Customize toolbar options and controls\' accordion, user should be able to expand the accordion', () => {
             utilities.verifyInnerText(thinkSpherePage.customizeToolsAndControlsLabel(), 'Customize toolbar options and controls');
             utilities.verifyElementVisibilityState(thinkSpherePage.customizeToolsAndControlsIcon(), 'exist');
@@ -150,6 +157,12 @@ describe('ThinkSphere Question - Solve Phases Section', () => {
             thinkSpherePage.steps.verifyDefaultStamps(defaultSelectedStamps);
         });
 
+        it('Default stamps should have visible tool tips', () => {
+            defaultSelectedStamps.forEach((ele) => {
+                thinkSpherePage.customizeStampCard(ele).verifyTooltip(ele);
+            });
+        });
+
         it('When user select deselect stamps tool from tools section, then customize stamps section should be visible and hide respectively', () => {
             thinkSpherePage.steps.clickOnStampsTool();
             utilities.verifyElementVisibilityState(thinkSpherePage.customizeStampComponent(), 'notExist');
@@ -250,6 +263,26 @@ describe('ThinkSphere Question - Solve Phases Section', () => {
                 });
         });
 
+        it('The edit button should not be displayed for the keypad category button.', () => {
+            utilities.verifyElementVisibilityState(thinkSpherePage.equationEditorSectionCategories().contains(`${equationEditorCategoriesAndSymbols['keyPad'].displayName}`).find(thinkSpherePage.equationEditorSectionCategoriesEditIcon()), 'visible');
+        })
+
+        it('User should be able to unselect default selected category and should be able to select default unselected category.', () => {
+            thinkSpherePage.equationEditorSectionCategories().contains(`${equationEditorCategoriesAndSymbols['keyPad'].displayName}`).click();
+            thinkSpherePage.steps.verifyEquationEditorSectionCategoryNotPressed()
+            thinkSpherePage.equationEditorSectionCategories().contains(`${equationEditorCategoriesAndSymbols['setNotation'].displayName}`).click();
+            thinkSpherePage.steps.verifyEquationEditorSectionCategoryIsPressed();
+        });
+
+        it('The \'Equation Editor\' should be displayed along with helper text \'Select the categories to display to the students in the equation editor.\' and \'Create custom category\' button should be displayed', () => {
+            utilities.verifyElementVisibilityState(thinkSpherePage.equationEditorSectionTitle(), 'visible');
+            utilities.verifyInnerText(thinkSpherePage.equationEditorSectionTitle(), 'Equation editor');
+            utilities.verifyElementVisibilityState(thinkSpherePage.equationEditorSectionHelperText(), 'visible');
+            utilities.verifyInnerText(thinkSpherePage.equationEditorSectionHelperText(), 'Select the categories to display to the students in the equation editor.');
+            utilities.verifyElementVisibilityState(thinkSpherePage.createCustomCategoryButton(), 'visible');
+            utilities.verifyInnerText(thinkSpherePage.createCustomCategoryButton(), 'Create custom category');
+        });
+
         it.skip('Accessibility of selected and deselected category', { tags: 'a11y' }, () => {
             cy.checkAccessibility(thinkSpherePage.equationEditorSectionCategories().contains(`${equationEditorCategoriesAndSymbols['numPad'].displayName}`).parents('[class*="DraggableItemsGrid"]'))
         });

package/cypress/pages/components/browseItemsPage.js

@@ -45,15 +45,24 @@ const selectors = {
     createItemButtonTypography: () => browseItemsPage.buttonCreateItem().find('.ngie-btn-typography'),
     createQuestionCancelButtonTypography: () => browseItemsPage.buttonCancelCreateQuestion().find('.ngie-btn-typography'),
     tableColumnHeaderBrowseItemWrapperDiv: (count) => browseItemsPage.tableColumnHeader(count).find('div.browse-item-component-wrapper div'),
+    rowItemTitle: () => cy.get('.browse-item-styled-link'),
+    previewModeWrapper: () => cy.get('.preview-mode-wrapper'),
+    saveButton: () => cy.get('.ngie-btn-typography').contains('save',{matchCase: false}),
+    cancelButton: () => cy.get('.ngie-btn-typography').contains('cancel',{matchCase: false}),
+    radioGroup: () => cy.get('.ngie-radio-group'),
+    studentViewRadioButton: () => cy.get('[class*="RadioGroupMUI5styles__RadioOptionContainer"]').eq(0),
+    gradingViewRadioButton: () => cy.get('[class*="RadioGroupMUI5styles__RadioOptionContainer"]').eq(1),
+    browseItemQuestionItem: () => cy.get('.browse-item-question-item')
 };
 
 const searchBarSelectors = {
-    searchBar: () => cy.get('input[placeholder="Search by title, tags and content"]'),
+    searchBar: () => cy.get('input[placeholder*="Search by"]'),
     buttonClearSearch: () => cy.get('[data-at="clear-button"]'),
     buttonSearch: () => cy.get('button[aria-label="Search"]'),
     buttonSearchSVG: () => cy.get('button[aria-label="Search"]').find('svg'),
-    mobileViewSearchBar: () => cy.get('input[placeholder="Search by title, tags and content"]'),
+    mobileViewSearchBar: () => cy.get('input[placeholder*="Search by title"]'),
     searchInputField: () => cy.get('.ngie-search input'),
+    searchBarParent: () => cy.get('input[placeholder*="Search by"]').parent(),
 };
 
 const mobileViewBrowsePageSelectors = {
@@ -107,6 +116,7 @@ const mobileViewBrowsePageSelectors = {
         return utilities.getNthElement(cy.get(`.filter-chip[aria-label*="${chip}"] button[aria-label*="Remove"]`), 0);
     },
     filterChipClearAll: () => cy.get('.filter-chip-clearall'),
+    itemTitleCell: () => cy.get('[class*=ItemTitleCellstyles__ItemCellWrapper]'),
 };
 
 const steps = {
@@ -962,6 +972,103 @@ const tests = {
             });
         });
     },
+
+    verifyBrowseItemsRowContent: () => {
+        it('Browse review items list row should have title, reference id, and question type', () => {
+            browseItemsPage.itemTitleCell().each(($item) => {
+                cy.wrap($item).within(() => {
+                    cy.get('button.browse-item-styled-link').invoke('text').should('not.be.empty');
+                    cy.get('.browse-item-question-text-container').contains('Ref ID:').should('exist'); // safer
+                    cy.get('[class*=ItemTitleCellstyles__ReferenceId]').invoke('text').should('not.be.empty');
+                    cy.get('.browse-item-label-text').contains('Type:').should('exist');
+                    cy.get('.browse-item-question-item').invoke('text').should('not.be.empty');
+                });
+            });
+        });
+    },
+
+    verifyItemOpening: () => {
+        it('When the author clicks on the title of the item in the \'check your math\' browse item list page then the question preview for that item should be displayed along with cancel and save button, and student and grading view radio buttons', () => {
+            browseItemsPage.rowItemTitle().eq(0).click();
+            utilities.verifyElementVisibilityState(browseItemsPage.previewModeWrapper(), 'visible');
+            utilities.verifyElementVisibilityState(browseItemsPage.saveButton(), 'visible');
+            utilities.verifyElementVisibilityState(browseItemsPage.cancelButton(), 'visible');
+            utilities.verifyElementVisibilityState(browseItemsPage.radioGroup(), 'visible');
+        })
+
+        it('student radio button should be checked by default and author should be able to toggle between student and grading view radio buttons', () => {
+            utilities.verifyElementVisibilityState(browseItemsPage.studentViewRadioButton(), 'exist');
+            utilities.verifyElementVisibilityState(browseItemsPage.gradingViewRadioButton(), 'exist');
+            browseItemsPage.studentViewRadioButton().should('have.class', 'radio-option-checked');
+            browseItemsPage.gradingViewRadioButton().should('have.class', 'radio-option-not-checked');
+            browseItemsPage.gradingViewRadioButton().click();
+            browseItemsPage.studentViewRadioButton().should('have.class', 'radio-option-not-checked');
+            browseItemsPage.gradingViewRadioButton().should('have.class', 'radio-option-checked');
+            browseItemsPage.studentViewRadioButton().click();
+            browseItemsPage.studentViewRadioButton().should('have.class', 'radio-option-checked');;
+            browseItemsPage.gradingViewRadioButton().should('have.class', 'radio-option-not-checked');
+            browseItemsPage.cancelButton().click();
+        });
+    },
+
+    verifyFilterSelectionInList: (categories) => {
+        it('When the author checks the \'multiple choice selection\' checkbox then only multiple choice question (single selection and multiple selection) should be displayed on the question list.', () => {
+            browseItemsPage.steps.clickOnFilterCategoryCheckbox(categories[0]);
+            cy.pageLoadWait();
+            const allowedTypes = ['multiple selection','single selection'];
+            browseItemsPage.browseItemQuestionItem().each(($item) => {
+                cy.wrap($item)
+                .invoke('text')
+                .then((text) => {
+                    const trimmedText = text.trim();
+                    if (trimmedText === '' || trimmedText === ',' || /^,+$/.test(trimmedText)) {
+                        cy.log('Skipped invalid/empty item text:', trimmedText);
+                        return;
+                    }
+                    expect(allowedTypes).to.include(trimmedText.toLowerCase());
+                });
+            });
+        });
+    },
+
+    verifySupportedQuestionsInItemsList: (allowedFilterCategories) => {
+        it('The items list page should display items for only the supported question types', () => {
+            const allowedTypes = Object.values(allowedFilterCategories).flat();
+            browseItemsPage.browseItemQuestionItem().each(($item) => {
+                cy.wrap($item)
+                .invoke('text')
+                .then((text) => {
+                    const trimmedText = text.trim();
+                    if (trimmedText === '' || trimmedText === ',' || /^,+$/.test(trimmedText)) {
+                        cy.log('Skipped invalid/empty item text:', trimmedText);
+                        return;
+                    }
+                    expect(allowedTypes).to.include(trimmedText.toLowerCase());
+                });
+            });
+        });
+    },
+
+    verifyFirstPreviousNextPageButtons: () => {
+        it('When user is on first page, previous button should be disabled and when the user is in last page, the next button should be disabled,', () => {
+            browseItemsPage.buttonPrevious().should('have.attr', 'disabled');
+            browseItemsPage.buttonNext().should('not.have.attr', 'disabled');
+            utilities.getNthElement(browseItemsPage.paginationCountText(), 0)
+            .invoke('text')
+            .then((text) => {
+                const totalItems = parseInt(text.split(' ').pop(), 10);
+                const totalPages = Math.ceil(totalItems / 20);
+
+                Cypress._.times(totalPages - 1, () => {
+                    browseItemsPage.steps.clickOnNextPageButton();
+                    cy.wait(500);
+                });
+            });
+
+            browseItemsPage.buttonNext().should('have.attr', 'disabled');
+            browseItemsPage.buttonPrevious().should('not.have.attr', 'disabled');
+        });
+    }
 };
 
 export const browseItemsPage = {

package/cypress/pages/components/editCategoryFlyout.js

@@ -23,9 +23,9 @@ const selectors = {
 }
 
 const steps = {
-    openEditCategoryFlyout: () => {
+    openEditCategoryFlyout: (categoryName = 'general') => {
         essayResponsePage.equationEditorSectionCategories()
-            .contains(`${equationEditorCategoriesAndSymbols['general'].displayName}`)
+            .contains(`${equationEditorCategoriesAndSymbols[categoryName].displayName}`)
             .parents('[id*="DraggableItem"]')
             .within(() => {
                 essayResponsePage.equationEditorSectionCategoriesEditIcon()