itemengine-cypress-automation 1.0.348 → 1.0.350-feature-thinkSphere-01c175a.0

package/cypress/pages/components/browseItemsPage.js

@@ -1,22 +1,133 @@
 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'),
+};
+
+const searchBarSelectors = {
+    searchBar: () => cy.get('input[placeholder="Search by title, tags and content"]'),
+    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"]'),
+    searchInputField: () => cy.get('.ngie-search input'),
+};
+
+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'),
+};
 
 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 +155,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 +192,782 @@ 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,
+            });
+        });
+    },
+};
 
 export const browseItemsPage = {
     ...selectors,
-    steps
-}
+    ...searchBarSelectors,
+    ...mobileViewBrowsePageSelectors,
+    steps,
+    tests,
+};