itemengine-cypress-automation 1.0.349-TEMRegression4-f1b48a1.0 → 1.0.349

package/cypress/pages/components/browseItemsPage.js

@@ -1,22 +1,143 @@
 import utilities from "../../support/helpers/utilities";
 import { commonComponents } from "./commonComponents";
+import { dialogBoxBase } from '../dialogBoxBase';
+const css = Cypress.env('css');
+
+let duplicateItemReferenceID = "";
 
 const selectors = {
     ...commonComponents,
     browseItemPageWrapper: () => cy.get('.browse-item-page'),
+    browseItemPageHeaderActionWrapper: () => cy.get('.browse-item-header-action-wrapper'),
+    browseItemPageHeader: () => cy.get('.browse-title-wrapper'),
+    browseThinksphereItemsMenuBarOption: () => cy.get('[aria-label="Navigation Drawer List"]').contains('Browse ThinkSphere Items'),
+    datatableWrapper: () => cy.get('.data-table-wrapper'),
+    allTableRow: () => cy.get('[data-testid*="MUIDataTableBodyRow"]'),
+    buttonCreateItem: () => cy.get('.browse-item-header-action-wrapper .ngie-btn-contained[role="button"]'),
+    buttonCancelCreateQuestion: () => cy.get('.browse-item-header-action-wrapper .ngie-btn-outlined'),
+    tableColumnHeader: (columnNumber) => utilities.getNthElement(cy.get('div[class*="TableHeaderstyles__FlexWrapper"]'), columnNumber),
+    tableRow: (rowNumber) => utilities.getNthElement(cy.get('tr[data-testid*="MUIDataTableBodyRow"]'), rowNumber),
+    itemCellItemTitle: () => utilities.getNthElement(cy.get('td[data-testid*="MuiDataTableBodyCell-0"]').find('button'), 0),
+    itemCellInstructionText: () => cy.get('div[class*="ItemTitleCellstyles__InstructionText"]'),
+    lastUpdatedValue: () => cy.get('time'),
+    metadataCell: () => cy.get('td[data-testid*="MuiDataTableBodyCell-3"]'),
+    metadataCellTagLabel: () => cy.get('div[class*="DynamicMultilineTagsListstyles__TagsWrapper"]'),
+    headerActionButtonWrapper: () => cy.get('.browse-item-header-action-button-wrapper'),
+    itemListFilterWrapper: () => cy.get('.itemlist-filter-wrapper'),
+    actionsMenu: () => cy.get('[class*="ngie-action-cells-ul"]'),
+    actionsMenuItem: (menuItemNumber) => utilities.getNthElement(cy.get('li[role="menuitem"]'), menuItemNumber),
+    actionMenuButton: () => cy.get('[class*="ActionMenu__ButtonWrapper"]').find('button'),
+    iconSortAscending: () => cy.get('svg[aria-label="ascending-sort"]'),
+    iconSortDescending: () => cy.get('svg[aria-label="descending-sort"]'),
+    paginationCountText: () => cy.get('[class*="TablePaginationstyles__CountText"]'),
+    paginationBlock: () => cy.get('[class*="TablePaginationstyles__PaginationBlock"]'),
+    buttonSkipToFirstPage: () => cy.get('[aria-label*="Skip to first page"]'),
+    buttonSkipToLastPage: () => cy.get('[aria-label*="Skip to last page"]'),
+    buttonPrevious: () => cy.get('[aria-label*="Previous page"]'),
+    buttonNext: () => cy.get('[aria-label*="Next page"]'),
     itemLabel: () => cy.get('#reference-header'),
     lastUpdatedLabel: () => cy.get('#updated-header'),
-    searchInputField: () => cy.get('.ngie-search input'),
     sortArrow: () => cy.get('.table-header-sort-arrow'),
     browseItemsLabel: () => cy.get('.browse-title-wrapper'),
     browseItemsItem: () => cy.get('tr[id*="MUIDataTableBodyRow"]'),
     browseItemPageReferenceId: () => cy.get('[class*="ItemTitleCellstyles__ReferenceId"]'),
-}
+    addReviewQuestionButton: () => cy.get('.ngie-btn-contained').contains('Add \'Check your math\' question'),
+    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"]'),
+    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"]'),
+    searchInputField: () => cy.get('.ngie-search input'),
+    searchBarParent: () => cy.get('input[placeholder*="Search by"]').parent(),
+};
+
+const mobileViewBrowsePageSelectors = {
+    mobileViewSortByWrapper: () => cy.get('.sortby-component-wrapper'),
+    mobileViewSortByDropdown: () => cy.get('[id="sortby-select"]'),
+    mobileViewSortByDropdownLabelWrapper: () => cy.get('[class*="sort-by-dropdown-label-wrapper"]'),
+    mobileViewSortByDropdownLabel : () => cy.get('.sort-by-dropdown-label'),
+    mobileViewSortDescendingSVG: () => cy.get('[aria-label="sorted descending"]'),
+    mobileViewSortAscendingSVG: () => cy.get('[aria-label="sorted ascending"]'),
+    mobileViewSortByDropdownList: (itemNumber) => utilities.getNthElement(cy.get('[aria-labelledby="scoring-type-dropdown-label"]').find('li'), itemNumber),
+    mobileViewSortbyDropdownOptions: (optionNumber) => utilities.getNthElement(cy.get('li[role="option"]'), optionNumber),
+    mobileViewSortbyDropdownOptionsList: () => cy.get('.dropdown-list'),
+    mobileViewIconSorted: () => cy.get('[aria-label*="sorted"]'),
+    mobileViewSortByLabel: () => cy.get('span[class*="SortBystyles__SortByTextSpan"]'),
+    mobileViewDropdownText: () => cy.get('div[class*="SortBystyles__ItemWrapper"]'),
+    mobileViewSortByDropdownUL: () => cy.get('ul[aria-labelledby="sortby-dropdown-label"]'),
+    mobileViewMetaDataLabel: () => cy.get('div[class*="ItemTitleCellstyles__MetaDataText"]'),
+    mobileViewlastUpdatedLabel: () => cy.get('div[class*="ItemTitleCellstyles__LastUpdatedText"]'),
+    mobileViewMetadataContent: () => cy.get('div[class*="ItemTitleCellstyles__MetaData-"]'),
+    filterSection: () => cy.get('.filter-section-content-wrapper'),
+    filterButton: () => cy.get('.itemlist-filter-wrapper .ngie-button'),
+    filterButtonText: () => browseItemsPage.filterButton().find('.filter-text'),
+    filterCategories: (category = '') => {
+        if (!category) {
+            return cy.get('.expansion-item-expansion-panel-summary-content div[role="menu"]');
+        }
+        return cy.get(`.expansion-item-expansion-panel-summary-content div[role="menu"][aria-label*="${category}"]`);
+    },
+    filterCategoryCheckbox: (category) => {
+        if(!category) {
+            return cy.get('.expansion-item-checkbox-label input');
+        }
+        return cy.get(`.expansion-item-checkbox-wrapper input[aria-label*="${category}"]`);
+    },
+    filterItem: (item) => {
+        if (!item) {
+            return cy.get('.expansion-item-checkbox-label input');
+        }
+        return cy.get(`.expansion-item-checkbox-label input[aria-label*="${item}"]`);
+    },
+    filterChip: (chip) => {
+        if (!chip) {
+            return cy.get('.filter-chip');
+        }
+        return cy.get(`.filter-chip[aria-label*="${chip}"]`);
+    },
+    filterChipCancelButton: (chip) => {
+        if (!chip) {
+            return utilities.getNthElement(cy.get(`.filter-chip button[aria-label*="Remove"]`), 0);
+        }
+        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 = {
     navigateToBrowseItemsPage: () => {
         cy.visit('/item-engine/demo/browse-items');
     },
+    
+    navigateToThinkSphereBrowseItemsPage: () => {
+        cy.visit('/item-engine/thinksphere/browse-items');
+    },
+
+    navigateToReviewItemsPage: () => {
+        browseItemsPage.steps.navigateToThinkSphereBrowseItemsPage();
+        browseItemsPage.steps.clickOnItemReferenceId();
+        browseItemsPage.steps.clickOnAddReviewItem();
+    },
+
+    clickOnAddReviewItem: () => {
+        browseItemsPage.addReviewQuestionButton()
+            .click();
+    },
 
     verifyBrowseItemContainerIsVisible: () => {
         browseItemsPage.browseItemPageWrapper()
@@ -44,8 +165,8 @@ const steps = {
     },
 
     /**
-    * @param {string} value of the text that needs to be searched
-    * @description enters value in input field and searched for the entered value
+    * @param {string} value - The text that needs to be searched.
+    * @description Enters value in input field and searches for the entered value.
     */
     search: (value) => {
         browseItemsPage.searchInputField()
@@ -81,9 +202,879 @@ const steps = {
                 }
             });
     },
-}
+
+    clickOnBrowseThinkSphereItemsMenuBarOption: () => {
+        browseItemsPage.browseThinksphereItemsMenuBarOption()
+            .click();
+        cy.interceptGraphql('getItems');
+        cy.wait(2000);
+    },
+
+    verifyBrowseThinkSphereItemsMenuBarOptionSelected: () => {
+        browseItemsPage.browseThinksphereItemsMenuBarOption()
+            .parents('.MuiButtonBase-root.MuiListItemButton-root.MuiListItemButton-gutters')
+            .should('have.class', 'Mui-selected');
+    },
+
+    verifyBrowseItemsPageWrapperSection: () => {
+        utilities.verifyElementVisibilityState(browseItemsPage.browseItemPageWrapper(), 'visible');
+    },
+
+    verifyBrowseItemPageHeaderActionWrapper: () => {
+        utilities.verifyElementVisibilityState(browseItemsPage.browseItemPageHeaderActionWrapper(), 'visible');
+    },
+
+    clickOnCreateItemButton: () => {
+        browseItemsPage.buttonCreateItem()
+            .click();
+        cy.interceptGraphql('getQuestionTypeAndResourceTypeList');
+        cy.wait(2000);
+    },
+
+    /**
+     * Verifies the page URL.
+     * @param {string} url - The URL to verify.
+     */
+    verifyPageUrl: (url) => { cy.url().should('contain', Cypress.config().baseUrl + url); },
+
+    clickWindowsBack: () => { cy.go('back'); },
+
+    /**
+     * Verifies the column headers in the listing table.
+     * @param {Array<string>} tableHeader - The table headers to verify.
+     */
+    verifyColumnHeadersInListingTable: (tableHeader) => {
+        tableHeader.forEach((i, count) => { utilities.verifyInnerText(browseItemsPage.tableColumnHeader(count), i); });
+    },
+
+    /**
+     * Verifies the sort enable/disable state for table column headers.
+     * @param {Array<string>} sort - The sort states to verify.
+     */
+    verifySortEnableDisableForTableColumnHeader: (sort) => {
+        sort.forEach((i, count) => {
+            browseItemsPage.tableColumnHeader(count).parent()
+                .should(i, 'sort-enabled');
+        });
+    },
+
+    verifyTableSortDescendingByDefault: () => {
+        browseItemsPage.tableColumnHeader(1)
+            .within(() => {
+                utilities.verifyElementVisibilityState(browseItemsPage.iconSortDescending(), 'visible');
+            });
+    },
+
+    /**
+     * Verifies the sort functionality on column header click.
+     * @param {number} count - The column index to click.
+     */
+    verifySortFunctionalityOnColumnHeaderClick: (count) => {
+        browseItemsPage.tableColumnHeader(count)
+            .click();
+        cy.interceptGraphql('getItems');
+        browseItemsPage.tableColumnHeader(count)
+            .within(() => {
+                browseItemsPage.iconSortDescending()
+                    .should('exist')
+            });
+    },
+
+    /**
+     * Adds text in the search bar.
+     * @param {string} text - The text to add in the search bar.
+     */
+    addTextInSearchBar: (text) => {
+        browseItemsPage.searchBar()
+            .type(text)
+            .should('have.value', text);
+    },
+
+    clickOnSearchIcon: () => {
+        browseItemsPage.buttonSearch()
+            .click();
+        cy.interceptGraphql('getItems');
+    },
+
+    /**
+     * Verifies the pagination count.
+     * @param {string} text - The text to verify in the pagination count.
+     */
+    verifyPaginationCount: (text) => {
+        utilities.getNthElement(browseItemsPage.paginationCountText(), 0)
+            .should('contain', text);
+        utilities.verifyElementVisibilityState(utilities.getNthElement(browseItemsPage.paginationCountText(), 0), 'visible');
+    },
+
+    clearSearchBar: () => {
+        browseItemsPage.buttonClearSearch()
+            .click();
+        cy.interceptGraphql('getItems');
+    },
+
+    clickOnItemReferenceId: () => {
+        browseItemsPage.tableRow(0)
+            .within(() => {
+                browseItemsPage.itemCellItemTitle()
+                    .click();
+            });
+        cy.interceptGraphql('getItemPreview');
+    },
+
+    clickOnNgiePopoverContainer: () => {
+        browseItemsPage.popoverContainer()
+            .click();
+    },
+
+    clickOnActionButton: () => {
+        browseItemsPage.tableRow(0)
+            .within(() => {
+                browseItemsPage.actionMenuButton()
+                    .click();
+            });
+    },
+
+    verifyActionMenuDisplaysCorrectOptions: () => {
+        const menuOptions = ['Delete', 'Duplicate/new version'];
+        browseItemsPage.actionsMenu()
+            .within(() => {
+                menuOptions.forEach((i, count) => {
+                    browseItemsPage.actionsMenuItem(count)
+                        .within(() => {
+                            utilities.verifyInnerText(cy.get('span[class*="MuiListItemText-primary"]'), i);
+                        });
+                });
+            });
+    },
+
+    verifySearchBarComponent: () => {
+        utilities.verifyElementVisibilityState(browseItemsPage.searchBar(), 'visible');
+    },
+
+    verifySearchIcon: () => {
+        utilities.verifyElementVisibilityState(browseItemsPage.buttonSearchSVG(), 'visible');
+    },
+
+    verifyCloseIcon: () => {
+        browseItemsPage.steps.addTextInSearchBar('~zzz');
+        utilities.verifyElementVisibilityState(browseItemsPage.buttonClearSearch(), 'visible');
+        browseItemsPage.steps.clearSearchBar();
+    },
+
+    hoverOnSearchBarComponent: () => {
+        utilities.hoverOverElement(browseItemsPage.searchBar().parent());
+    },
+
+    verifyPaginationSection: () => {
+        utilities.verifyElementVisibilityState(utilities.getNthElement(browseItemsPage.paginationBlock(), 0), 'visible');
+    },
+
+    /**
+     * Verifies the items on the page.
+     * @param {number} count - The number of items to verify.
+     */
+    verifyItemsOnPage: (count) => {
+        utilities.verifyElementVisibilityState(browseItemsPage.tableRow(count - 1), 'visible');
+        utilities.verifyElementVisibilityState(browseItemsPage.tableRow(count), 'notExist');
+    },
+
+    clickOnNextPageButton: () => {
+        utilities.getNthElement(browseItemsPage.paginationBlock(), 0)
+            .within(() => {
+                browseItemsPage.buttonNext()
+                    .click();
+            });
+        cy.interceptGraphql('getItems');
+    },
+
+    clickOnPreviousPageButton: () => {
+        utilities.getNthElement(browseItemsPage.paginationBlock(), 0)
+            .within(() => {
+                browseItemsPage.buttonPrevious()
+                    .click();
+            });
+        cy.interceptGraphql('getItems');
+    },
+
+    hoverOnNextPageButton: () => {
+        utilities.getNthElement(browseItemsPage.paginationBlock(), 0)
+            .within(() => {
+                utilities.hoverOverElement(browseItemsPage.buttonNext());
+            });
+    },
+
+    hoverOnCreateItemButton: () => {
+        utilities.hoverOverElement(browseItemsPage.buttonCreateItem());
+    },
+
+    /**
+     * Hovers over a table row.
+     * @param {number} rowNumber - The row number to hover over.
+     */
+    hoverOnTableRow: (rowNumber) => {
+        utilities.hoverOverElement(browseItemsPage.tableRow(rowNumber));
+    },
+
+    /**
+     * Hovers over the action button in a table row.
+     * @param {number} rowNumber - The row number containing the action button to hover over.
+     */
+    hoverOnActionButton: (rowNumber) => {
+        browseItemsPage.tableRow(rowNumber)
+            .within(() => {
+                utilities.hoverOverElement(browseItemsPage.actionMenuButton());
+            });
+    },
+
+    verifyDesktopIcon: () => {
+        utilities.verifyElementVisibilityState(browseItemsPage.buttonDesktopViewToggle(), 'visible');
+    },
+
+    verifyMobileIcon: () => {
+        utilities.verifyElementVisibilityState(browseItemsPage.buttonMobileViewToggle(), 'visible');
+    },
+
+    /**
+     * Hovers over the view mode button.
+     * @param {string} viewMode - The view mode to hover over ('desktop' or 'mobile').
+     */
+    hoverOnViewModeButton: (viewMode) => {
+        if (viewMode === 'desktop') {
+            utilities.hoverOverElement(browseItemsPage.buttonDesktopViewToggle());
+        } else {
+            utilities.hoverOverElement(browseItemsPage.buttonMobileViewToggle());
+        }
+    },
+
+    /**
+     * Triggers mouseover on the view mode icon.
+     * @param {string} viewMode - The view mode icon to trigger mouseover on ('desktop' or 'mobile').
+     */
+    triggerMouseOverOnViewModeIcon: (viewMode) => {
+        if (viewMode === 'desktop') {
+            browseItemsPage.buttonDesktopViewToggle().trigger('mouseover');
+        } else {
+            browseItemsPage.buttonMobileViewToggle().trigger('mouseover');
+        }
+    },
+
+    /**
+     * Triggers mouseout on the view mode icon.
+     * @param {string} viewMode - The view mode icon to trigger mouseout on ('desktop' or 'mobile').
+     */
+    triggerMouseOutOnViewModeIcon: (viewMode) => {
+        if (viewMode === 'desktop') {
+            browseItemsPage.buttonDesktopViewToggle().trigger('mouseout');
+        } else {
+            browseItemsPage.buttonMobileViewToggle().trigger('mouseout');
+        }
+    },
+
+    verifyTooltipPresent: () => {
+        utilities.verifyElementVisibilityState(browseItemsPage.tooltipText(), 'visible');
+    },
+
+    /**
+     * Verifies the tooltip text.
+     * @param {string} text - The text to verify in the tooltip.
+     */
+    verifyTooltipText: (text) => {
+        utilities.verifyInnerText(browseItemsPage.tooltipText(), text);
+    },
+
+    /**
+     * Clicks on the view mode icon.
+     * @param {string} viewMode - The view mode icon to click ('desktop' or 'mobile').
+     */
+    clickOnViewModeIcon: (viewMode) => {
+        if (viewMode === 'desktop') {
+            browseItemsPage.buttonDesktopViewToggle().click();
+        } else {
+            browseItemsPage.buttonMobileViewToggle().click();
+        }
+    },
+
+    /**
+     * Verifies the main wrapper width.
+     * @param {string} width - The width to verify.
+     */
+    verifyMainWrapperWidth: (width) => {
+        browseItemsPage.browseItemPageWrapper()
+            .should('have.css', 'width', width);
+    },
+
+    /**
+     * Verifies the enable/disable state of the mobile view sort dropdown.
+     * @param {boolean} isEnabled - Whether the sort dropdown should be enabled.
+     */
+    verifyMobileViewSortDropdownEnableDisableState: (isEnabled) => {
+        browseItemsPage.mobileViewSortByWrapper()
+            .should('have.css', 'opacity', isEnabled ? '1' : '0.5');
+    },
+
+    verifySortDropdown: () => {
+        utilities.verifyElementVisibilityState(browseItemsPage.mobileViewSortByDropdown(), 'visible');
+    },
+
+    /**
+     * Verifies the sort dropdown label.
+     * @param {string} sortText - The text to verify in the sort dropdown label.
+     */
+    verifySortDropdownLabel: (sortText) => {
+        utilities.verifyInnerText(browseItemsPage.mobileViewSortByDropdownLabelWrapper(), sortText);
+    },
+
+    verifySortDescendingIcon: () => {
+        utilities.verifyElementVisibilityState(browseItemsPage.mobileViewSortDescendingSVG(), 'visible');
+    },
+
+    clickOnSortDropdown: () => {
+        browseItemsPage.mobileViewSortByDropdown()
+            .click();
+    },
+
+    /**
+     * Verifies the sort dropdown options.
+     * @param {Array<string>} options - The options to verify in the sort dropdown.
+     */
+    verifySortDropdownOptions: (options) => {
+        options.forEach((i, count) => {
+            utilities.verifyElementVisibilityState(browseItemsPage.mobileViewSortbyDropdownOptions(count), 'visible');
+            utilities.verifyInnerText(browseItemsPage.mobileViewSortbyDropdownOptions(count), i);
+        });
+    },
+
+    /**
+     * Clicks on a sort option.
+     * @param {number} count - The index of the sort option to click.
+     */
+    clickOnSortOption: (count) => {
+        browseItemsPage.mobileViewSortbyDropdownOptions(count)
+            .click();
+        cy.interceptGraphql('getItems');
+    },
+
+    /**
+     * Verifies that a sort dropdown option is selected.
+     * @param {number} count - The index of the sort option to verify.
+     */
+    sortDropdownOptionSelected: (count) => {
+        browseItemsPage.mobileViewSortbyDropdownOptions(count)
+            .should('have.css', 'background-color', css.color.secondaryBtnBorder);
+    },
+
+    clickOnMobileViewSortAscendingIcon: () => {
+        browseItemsPage.mobileViewSortAscendingSVG()
+            .click();
+        cy.interceptGraphql('getItems');
+    },
+
+    hoverOnSortDropdown: () => {
+        utilities.hoverOverElement(browseItemsPage.mobileViewSortByDropdown());
+    },
+
+    /**
+     * Clicks on an action menu item.
+     * @param {number} NthActionMenuItem - The index of the action menu item to click.
+     */
+    clickOnActionMenuItem: (NthActionMenuItem) => {
+        browseItemsPage.actionsMenuItem(NthActionMenuItem)
+            .click();
+        cy.interceptGraphql('getItems');
+        cy.wait(2000);
+    },
+
+    /**
+     * Verifies the visibility of the duplicate item dialog box.
+     * @param {boolean} visible - Whether the dialog box should be visible.
+     */
+    verifyDuplicateItemDialogBoxIsVisible: (visible) => {
+        utilities.verifyElementVisibilityState(dialogBoxBase.dialogBoxRoot(), visible ? 'visible' : 'notExist');
+        if (visible) {
+            dialogBoxBase.dialogBoxContent()
+                .should('contain', "Item saved with reference ID: ")
+                .and('contain', " and it's available under 'Browse Items'.");
+            dialogBoxBase.dialogBoxContent()
+                .find('strong')
+                .then(($text) => {
+                    duplicateItemReferenceID = $text.text();
+                });
+        }
+    },
+
+    /**
+     * Verifies the visibility of the delete item dialog box.
+     * @param {boolean} visible - Whether the dialog box should be visible.
+     */
+    verifyDeleteItemDialogBoxIsVisible: (visible) => {
+        utilities.verifyElementVisibilityState(dialogBoxBase.dialogBoxRoot(), visible ? 'visible' : 'notExist');
+        if (visible) {
+            utilities.verifyInnerText(dialogBoxBase.dialogBoxContent(), 'Are you sure you want to delete this item?');
+        }
+    },
+
+    /**
+     * Verifies that an item reference ID is not present.
+     * @param {string} referenceID - The reference ID to verify is not present.
+     */
+    verifyItemReferenceIdIsNotPresent: (referenceID) => {
+        browseItemsPage.itemCellItemTitle()
+            .should('not.contain', referenceID);
+    },
+
+    /**
+     * Toggles the filter section by clicking the filter button.
+     */
+    toggleFilterSection: () => {
+        browseItemsPage.filterButton().click();
+    },
+
+    /**
+     * Clicks on a filter category.
+     * @param {string} category - The category to click on.
+     */
+    clickOnFilterCategory: (category) => {
+        browseItemsPage.filterCategories(category).click();
+    },
+
+    /**
+     * Clicks on a filter category checkbox.
+     * @param {string} category - The category checkbox to click on.
+     */
+    clickOnFilterCategoryCheckbox: (category) => {
+        browseItemsPage.filterCategoryCheckbox(category).click();
+    },
+
+    /**
+     * Clicks on the cancel button of a filter chip.
+     * @param {string} category - The category of the filter chip to cancel.
+     */
+    clickOnFilterChipCancelButton: (category) => {
+        browseItemsPage.filterChipCancelButton(category).click();
+    },
+
+    /**
+     * Clicks on the "Clear All" button for filter chips.
+     */
+    clickOnFilterChipClearAll: () => {
+        browseItemsPage.filterChipClearAll().click();
+    },
+};
+
+const tests = {
+    verifyItemListTableRows: () => {
+        it('Item list table should contain rows in which it should have column data', () => {
+            utilities.verifyElementVisibilityState(browseItemsPage.tableRow(0), 'visible');
+            utilities.verifyElementVisibilityState(browseItemsPage.tableRow(1), 'visible');
+        });
+        
+        it('CSS of \'Browse ThinkSphere Items\' list table row', { tags: 'css' }, () => {
+            utilities.verifyCSS(browseItemsPage.tableRow(0), { 'background-color': css.color.transparent });
+            utilities.verifyCSS(browseItemsPage.tableRow(1), { 'background-color': css.color.optionsBg });
+        });
+        
+        it('CSS of \'Browse ThinkSphere Items\' list table row in hover state', { tags: 'css' }, () => {
+            browseItemsPage.steps.hoverOnTableRow(0);
+            utilities.verifyCSS(browseItemsPage.tableRow(0), { 'background-color': css.color.tableRowHoverColor });
+        });
+    },
+
+    /**
+     * Verifies the item reference ID.
+     * @param {string} referenceID - The reference ID to verify.
+     * @param {boolean} visible - Whether the reference ID should be visible.
+     */
+    verifyItemReferenceId: (referenceID, visible) => {
+        if (visible) {
+            it('Item list table should contain rows in which it should have Reference ID', () => {
+                browseItemsPage.tableRow(0)
+                    .within(() => {
+                        utilities.verifyInnerText(browseItemsPage.itemCellItemTitle(), referenceID);
+                        utilities.verifyElementVisibilityState(browseItemsPage.itemCellItemTitle(), 'visible');
+                    });
+            });
+    
+            it('When user click on the Reference ID, then it should navigate to respective item edit item page', () => {
+                cy.interceptGraphql('getItems');
+                browseItemsPage.steps.clickOnItemReferenceId(referenceID);
+                browseItemsPage.steps.verifyPageUrl('/item-engine/thinksphere/edit-item');
+                browseItemsPage.steps.clickWindowsBack();
+                cy.wait('@getItems');
+            });
+            
+            it('CSS of list table row data reference id', { tags: 'css' }, () => {
+                browseItemsPage.tableRow(0)
+                    .within(() => {
+                        utilities.verifyCSS(browseItemsPage.itemCellItemTitle(), {
+                            'color': css.color.primaryBtnBg,
+                            'font-size': css.fontSize.default,
+                            'font-weight': css.fontWeight.regular
+                        });
+                });
+            });
+        } else {
+            it('Item list table should contain rows in which it should not have Reference ID', () => {
+                browseItemsPage.tableRow(0)
+                    .within(() => {
+                        browseItemsPage.itemCellItemTitle()
+                            .should('not.contain', referenceID);
+                    });
+            });
+        }
+    },
+
+    /**
+     * Verifies the question instruction.
+     * @param {string} questionInstruction - The question instruction to verify.
+     */
+    verifyQuestionInstruction: (questionInstruction) => {
+        it('Item list table should contain rows in which it should have question instruction', () => {
+            browseItemsPage.tableRow(0)
+                .within(() => {
+                    utilities.verifyInnerText(browseItemsPage.itemCellInstructionText(), questionInstruction);
+                    utilities.verifyElementVisibilityState(browseItemsPage.itemCellInstructionText(), 'visible');
+                });
+        });
+        
+        it('CSS of list table row data question instruction', { tags: 'css' }, () => {
+            browseItemsPage.tableRow(0)
+                .within(() => {
+                    utilities.verifyCSS(browseItemsPage.itemCellInstructionText(), {
+                        'color': css.color.placeholderText,
+                        'font-size': css.fontSize.normal,
+                        'font-weight': css.fontWeight.regular
+                    });
+            });
+        });
+    },
+
+    verifyLastUpdatedTimeComponent: () => {
+        it('Item list table should contain rows in which it should have last updated time', () => {
+            browseItemsPage.tableRow(0)
+                .within(() => {
+                    utilities.verifyElementVisibilityState(utilities.getNthElement(browseItemsPage.lastUpdatedValue(), 4), 'visible');
+                });
+        });
+        
+        it('CSS of list table row data last updated time', { tags: 'css' }, () => {
+            browseItemsPage.tableRow(0)
+                .within(() => {
+                    utilities.verifyCSS(utilities.getNthElement(browseItemsPage.lastUpdatedValue(), 4), {
+                        'color': css.color.labels,
+                        'font-size': css.fontSize.default,
+                        'font-weight': css.fontWeight.regular
+                    });
+            });
+        });
+    },
+
+    verifyCreatedOnTimeComponent: () => {
+        it('Item list table should contain rows in which it should have last updated time', () => {
+            browseItemsPage.tableRow(0)
+                .within(() => {
+                    utilities.verifyElementVisibilityState(utilities.getNthElement(browseItemsPage.lastUpdatedValue(), 6), 'visible');
+                });
+        });
+        
+        it('CSS of list table row data last updated time', { tags: 'css' }, () => {
+            browseItemsPage.tableRow(0)
+                .within(() => {
+                    utilities.verifyCSS(utilities.getNthElement(browseItemsPage.lastUpdatedValue(), 6), {
+                        'color': css.color.labels,
+                        'font-size': css.fontSize.default,
+                        'font-weight': css.fontWeight.regular
+                    });
+            });
+        });
+    },
+
+    verifyActionButton: () => {
+        it('Item list table should contain rows in which it should have action button', () => {
+            browseItemsPage.tableRow(0)
+                .within(() => {
+                    utilities.verifyElementVisibilityState(browseItemsPage.actionMenuButton(), 'visible');
+                });
+        });
+        
+        it('CSS of list table row data action button', { tags: 'css' }, () => {
+            browseItemsPage.tableRow(0)
+                .within(() => {
+                    utilities.verifyCSS(browseItemsPage.actionMenuButton(), {
+                        'color': css.color.primaryBtnBg
+                    });
+            });
+        });
+
+        it('When user click on action button, then it should open action menu', () => {
+            browseItemsPage.steps.clickOnActionButton();
+            utilities.verifyElementVisibilityState(browseItemsPage.actionsMenu(), 'visible');
+            browseItemsPage.steps.verifyActionMenuDisplaysCorrectOptions();
+        });
+        
+        it('CSS of list table row data action menu', { tags: 'css' }, () => {
+            browseItemsPage.actionsMenu()
+                .within(() => {
+                    browseItemsPage.actionsMenuItem(0)
+                        .within(() => {
+                            utilities.verifyCSS(cy.get('span[class*="MuiListItemText-primary"]'), {
+                                'color': css.color.secondaryBtn,
+                                'font-size': css.fontSize.default,
+                                'font-weight': css.fontWeight.regular
+                            })
+                        });
+                });
+        });
+        
+        it('When user click on \'ngie-popover-container\', then it should close action menu', () => {
+            browseItemsPage.steps.clickOnNgiePopoverContainer();
+            utilities.verifyElementVisibilityState(browseItemsPage.actionsMenu(), 'notExist');
+        });
+
+        it('CSS of list table row data action button in hover state', { tags: 'css' }, () => {
+            browseItemsPage.steps.hoverOnActionButton(0);
+            browseItemsPage.tableRow(0)
+                .within(() => {
+                    utilities.verifyCSS(browseItemsPage.actionMenuButton(), {
+                        'background-color': css.color.tableRowHoverColor
+                    });
+                });
+        });
+
+        it('If the user clicks on the Duplicate/New Version option, a popup should be displayed. Also, a copy of the item type should get created with a different name', () => {
+            browseItemsPage.steps.clickOnActionButton();
+            browseItemsPage.steps.clickOnActionMenuItem(1);
+            browseItemsPage.steps.verifyDuplicateItemDialogBoxIsVisible(true);
+        });
+        
+        it('CSS of Duplicate/New Version option, a popup', { tags: 'css' }, () => {
+            utilities.verifyCSS(dialogBoxBase.dialogBoxRoot(), {
+                'box-shadow': `${css.color.dialogBoxBoxShadow} 0px 0px 10px 0px`,
+                'background-color': css.color.primaryBtn,
+                'border': `1px solid ${css.color.secondaryBtnBorder}`,
+                'border-radius': '8px'
+            });
+            utilities.verifyCSS(dialogBoxBase.dialogBoxContent(), {
+                'color': css.color.codeBlockText,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(dialogBoxBase.buttonClose().find('svg'), {
+                'fill': css.color.standardTableCellText,
+                'width': '24px',
+                'height': '24px'
+            });
+        });
+        
+        it('If the user clicks on the close popup button, then popup should be close', () => {
+            dialogBoxBase.buttonClose()
+                .click();
+            browseItemsPage.steps.verifyDuplicateItemDialogBoxIsVisible(false);
+        });
+
+        it('Newly created item should be displayed in the list', () => {
+            cy.clearCookies();
+            cy.reload(true);
+            cy.interceptGraphql('getItems');
+            cy.wait(2000);
+            browseItemsPage.tests.verifyItemReferenceId(duplicateItemReferenceID, true);
+        });
+        
+        it('If the user clicks on the Delete Action menu item, a warning popup should be displayed', () => {
+            browseItemsPage.steps.clickOnActionButton();
+            browseItemsPage.steps.clickOnActionMenuItem(0);
+            browseItemsPage.steps.verifyDeleteItemDialogBoxIsVisible(true);
+        });
+        
+        it('CSS of Delete Action menu item warning popup', { tags: 'css' }, () => {
+            utilities.verifyCSS(dialogBoxBase.dialogBoxRoot(), {
+                'box-shadow': `${css.color.dialogBoxBoxShadow} 0px 0px 10px 0px`,
+                'background-color': css.color.primaryBtn,
+                'border': `1px solid ${css.color.secondaryBtnBorder}`,
+                'border-radius': '8px'
+            });
+            utilities.verifyCSS(dialogBoxBase.dialogBoxContent(), {
+                'color': css.color.codeBlockText,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(dialogBoxBase.buttonReject(), {
+                'color': css.color.highlightedTableCell,
+                'box-shadow': `${css.color.secondaryBtnBorder} 0px 5px 0px 0px`,
+                'background-color': css.color.transparent,
+                'border': `1px solid ${css.color.secondaryBtnBorder}`,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.semibold,
+                'padding': '12px 16px'
+            });
+            utilities.verifyCSS(dialogBoxBase.buttonAccept(), {
+                'color': css.color.primaryBtn,
+                'box-shadow': `${css.color.primaryBtnBorder} 0px 5px 0px 0px`,
+                'background-color': css.color.primaryBtnBg,
+                'border': `1px solid ${css.color.primaryBtnBorder}`,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.semibold,
+                'padding': '12px 16px'
+            });
+        });
+
+        it('If the user clicks on the reject button of warning, then popup should be close', () => {
+            dialogBoxBase.buttonReject()
+                .click();
+            browseItemsPage.steps.verifyDeleteItemDialogBoxIsVisible(false);
+        });
+
+        it('If the user clicks on the accept button of warning, then popup should be close and Item should get deleted', () => {
+            browseItemsPage.steps.clickOnActionButton();
+            browseItemsPage.steps.clickOnActionMenuItem(0);
+            dialogBoxBase.buttonAccept()
+                .click();
+            cy.interceptGraphql('getItems');
+            cy.wait(2000);
+            browseItemsPage.steps.verifyDeleteItemDialogBoxIsVisible(false);
+            cy.clearCookies();
+            cy.reload(true);
+            cy.interceptGraphql('getItems');
+            cy.wait(2000);
+            browseItemsPage.steps.verifyItemReferenceIdIsNotPresent(duplicateItemReferenceID, false);
+        });
+    },
+
+    /**
+     * Verifies if the desktop icon is selected.
+     * @param {boolean} isSelected - Whether the desktop icon should be selected.
+     */
+    verifyDesktopIconSelected: (isSelected) => {
+        it('Desktop icon should have pressed in the aria lable attribute', () => {
+            browseItemsPage.buttonDesktopViewToggle()
+                .should('have.attr', 'aria-label', `Desktop View toggle button${isSelected ? ' pressed' : ' not pressed'}`);
+        });
+
+        it('Desktop icon svg should have selected css applied', { tags: 'css' }, () => {
+            utilities.verifyCSS(browseItemsPage.buttonDesktopViewToggle().parent(), {
+                'background-color': isSelected ? css.color.desktopMobileViewtoggleButtonSelectedBg : css.color.transparent,
+            });
+        });
+    },
+
+    /**
+     * Verifies if the mobile icon is selected.
+     * @param {boolean} isSelected - Whether the mobile icon should be selected.
+     */
+    verifyMobileIconSelected: (isSelected) => {
+        it('Mobile icon should have pressed in the aria lable attribute', () => {
+            browseItemsPage.buttonMobileViewToggle()
+                .should('have.attr', 'aria-label', `Mobile View toggle button${isSelected ? ' pressed' : ' not pressed'}`);
+        });
+
+        it('Mobile icon svg should have selected css applied', { tags: 'css' }, () => {
+            utilities.verifyCSS(browseItemsPage.buttonMobileViewToggle().parent(), {
+                'background-color': isSelected ? css.color.desktopMobileViewtoggleButtonSelectedBg : css.color.transparent,
+            });
+        });
+    },
+
+    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 = {
     ...selectors,
-    steps
-}
+    ...searchBarSelectors,
+    ...mobileViewBrowsePageSelectors,
+    steps,
+    tests,
+};