itemengine-cypress-automation 1.0.350-feature-thinkSphere-01c175a.0 → 1.0.351-feature-thinkSphere-8768c9c.0

package/cypress/e2e/ILC/BrowseItems/browseReviewItemsMobileView.js

@@ -0,0 +1,329 @@
+import { browseItemsPage } from '../../../pages/components/browseItemsPage';
+import utilities from "../../../support/helpers/utilities";
+import abortEarlySetup from '../../../support/helpers/abortEarly';
+const css = Cypress.env('css');
+import { common } from '../../../pages/common';
+const tableHeader = ['Question'];
+const sortDisable = ['not.have.class'];
+const sortOptions = ['Question', 'Last updated', 'Created on'];
+
+describe('Navigate to Think Sphere Browse Items page and view the page contents', () => {
+    before(() => {
+        cy.loginAs('admin');
+        cy.deleteThinkSphereItem('~zzz item name');
+        cy.createThinkSphereItem('~zzz item name');
+        browseItemsPage.steps.navigateToReviewItemsPage();
+    });
+
+    after(() => {
+        cy.deleteThinkSphereItem('~zzz item name');
+    });
+
+    describe('\'Browse ThinkSphere Review Items\' page desktop and mobile view icons section', () => {
+        abortEarlySetup();
+        it('Desktop icon should be present on the page and should be in selected state', () => {
+            browseItemsPage.steps.verifyDesktopIcon();
+        });
+
+        browseItemsPage.tests.verifyDesktopIconSelected(true);
+
+        it('CSS of \'Browse ThinkSphere Review Items\' desktop icon', { tags: 'css' }, () => {
+            utilities.verifyCSS(browseItemsPage.buttonDesktopViewToggle().find('svg'), {
+                'fill': css.color.optionColor,
+                'height': '20px',
+                'width': '20px'
+            });
+        });
+
+        it('Mobile icon should be present on the page and should be in selected state', () => {
+            browseItemsPage.steps.verifyMobileIcon();
+        });
+
+        browseItemsPage.tests.verifyMobileIconSelected(false);
+
+        it('CSS of \'Browse ThinkSphere Review Items\' mobile icon', { tags: 'css' }, () => {
+            utilities.verifyCSS(browseItemsPage.buttonMobileViewToggle().find('svg'), {
+                'fill': css.color.optionColor,
+                'height': '20px',
+                'width': '20px'
+            });
+        });
+
+        it('When user hovers on the desktop and mobile icon tooltip should be visible', () => {
+            browseItemsPage.steps.triggerMouseOverOnViewModeIcon('desktop');
+            browseItemsPage.steps.verifyTooltipPresent();
+            browseItemsPage.steps.verifyTooltipText('Desktop View');
+            browseItemsPage.steps.triggerMouseOutOnViewModeIcon('desktop');
+            browseItemsPage.steps.triggerMouseOverOnViewModeIcon('mobile');
+            browseItemsPage.steps.verifyTooltipPresent();
+            browseItemsPage.steps.verifyTooltipText('Mobile View');
+            browseItemsPage.steps.triggerMouseOutOnViewModeIcon('mobile');
+        });
+
+        it('CSS of desktop and mobile view mode icon tooltip', { tags: 'css' }, () => {
+            browseItemsPage.steps.triggerMouseOverOnViewModeIcon('desktop');
+            utilities.verifyCSS(browseItemsPage.tooltipText(), {
+                'background-color': css.color.sectionHeading,
+                'color': css.color.primaryBtn,
+                'font-size': css.fontSize.small,
+                'font-weight': css.fontWeight.regular
+            });
+            browseItemsPage.steps.triggerMouseOutOnViewModeIcon('desktop');
+
+            cy.log('CSS of desktop and mobile view mode icon in hover state');
+            browseItemsPage.steps.hoverOnViewModeButton('desktop');
+            utilities.verifyCSS(browseItemsPage.buttonDesktopViewToggle(), {
+                'background-color': css.color.tableRowHoverColor,
+            });
+            browseItemsPage.steps.hoverOnViewModeButton('mobile');
+            utilities.verifyCSS(browseItemsPage.buttonMobileViewToggle(), {
+                'background-color': css.color.tableRowHoverColor,
+            });
+        });
+
+        it('When user clicks on the mobile view icon then it should get selected and main wrapper width should change', () => {
+            browseItemsPage.steps.clickOnViewModeIcon('mobile');
+            browseItemsPage.steps.verifyMainWrapperWidth('320px');
+        });
+        
+        browseItemsPage.tests.verifyMobileIconSelected(true);
+        browseItemsPage.tests.verifyDesktopIconSelected(false);
+    });
+
+    describe('\'Browse ThinkSphere Review Items\' page header section', () => {
+        abortEarlySetup();
+        it('\'Browse ThinkSphere Review Items\' page header section present', () => {
+            utilities.verifyElementVisibilityState(browseItemsPage.browseItemPageHeaderActionWrapper(), 'exist')
+            utilities.verifyInnerText(browseItemsPage.browseItemPageHeader(), 'Add \'Check your math\' question');
+            utilities.verifyInnerText(browseItemsPage.buttonCancelCreateQuestion(), 'Cancel');
+            utilities.verifyInnerText(browseItemsPage.buttonCreateItem(), 'Create question');
+        });
+
+        it('When user clicks on \'Browse ThinkSphere Review Items\' create question button, then it should navigate to think sphere create question page', () => { 
+            /**@TODO Add check for when user clicks on \'Browse ThinkSphere Review Items\' create question button */
+        });
+
+        it('CSS of \'Browse ThinkSphere Review Items\' page header section', { tags: 'css' }, () => {
+            utilities.verifyCSS(browseItemsPage.browseItemPageHeaderActionWrapper(), {
+                'border-bottom': `1px solid ${css.color.secondaryBtnBorder}`,
+                'padding': '16px 0px'
+            });
+            utilities.verifyCSS(browseItemsPage.browseItemPageHeader(), {
+                'color': css.color.secondaryBtn,
+                'font-size': css.fontSize.heading,
+                'font-weight': css.fontWeight.bold
+            });
+            utilities.verifyCSS(browseItemsPage.buttonCreateItem(), {
+                'background-color': css.color.primaryBtnBg,
+                'padding': '12px 16px'
+            });
+            utilities.verifyCSS(browseItemsPage.createItemButtonTypography(), {
+                'color': css.color.primaryBtn,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(browseItemsPage.buttonCancelCreateQuestion(), {
+                'background-color': css.color.transparent,
+                'padding': '12px 16px'
+            });
+            utilities.verifyCSS(browseItemsPage.createQuestionCancelButtonTypography(), {
+                'color': css.color.secondaryBtn,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.semibold 
+            });
+
+            cy.log('CSS of \'Browse ThinkSphere Review Items\' page header section create button in hover state');
+            browseItemsPage.steps.hoverOnCreateItemButton();
+            utilities.verifyCSS(browseItemsPage.buttonCreateItem(), {
+                'background-color': css.color.buttonHoverColor,
+                'box-shadow': `${css.color.secondaryBtn} 0px 3px 0px 0px`
+            });
+            utilities.verifyCSS(browseItemsPage.createItemButtonTypography(), {
+                'color': css.color.primaryBtn
+            });
+        });
+
+        it('Accessibility of create question button', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(browseItemsPage.headerActionButtonWrapper());
+        });
+    });
+
+    describe('\'Browse ThinkSphere Review Items\' list table section columns headers', () => {
+        abortEarlySetup();
+        it('The column headers should be present in the listing table header', () => {
+            browseItemsPage.steps.verifyColumnHeadersInListingTable(tableHeader);
+        });
+
+        it('The column headers should have sort disable', () => {
+            browseItemsPage.steps.verifySortEnableDisableForTableColumnHeader(sortDisable);
+        });
+
+        it('When only one search result is present, then column sort should be disabled', () => {
+            /**@TODO Add check for when only one search result is present */
+        });
+
+        it('CSS of \'Browse ThinkSphere Review Items\' list table section', { tags: 'css' }, () => {
+            tableHeader.forEach((_, count) => {
+                utilities.verifyCSS(browseItemsPage.tableColumnHeaderBrowseItemWrapperDiv(count), {
+                    'color': css.color.primaryBtnBorder,
+                    'font-size': css.fontSize.default,
+                    'font-weight': css.fontWeight.bold 
+                });
+                utilities.verifyCSS(browseItemsPage.tableColumnHeader(count).parent().parent(), {
+                    'background-color': css.color.optionsBg,
+                });
+            });
+        });
+    });
+
+    describe('\'Browse ThinkSphere Review Items\' list table rows section', () => {
+        abortEarlySetup();
+        browseItemsPage.tests.verifyItemListTableRows();
+        /**@TODO Verify item fields after review item creation*/
+    });
+
+    describe('\'Browse ThinkSphere Review Items\' sort dropdown section', () => {
+        abortEarlySetup();
+        it('Sort dropdown should be present on the page', () => {
+            browseItemsPage.steps.verifySortDropdown();
+            browseItemsPage.steps.verifySortDropdownLabel('Sort by: Last updated');
+            browseItemsPage.steps.verifySortDescendingIcon();
+        });
+
+        it('When user clicks on sort dropdown, then sort options should be display', () => {
+            browseItemsPage.steps.clickOnSortDropdown();
+            browseItemsPage.steps.verifySortDropdownOptions(sortOptions);
+        });
+
+        it('When user clicks on popover container, then it should close sort options menu', () => {
+            browseItemsPage.steps.clickOnNgiePopoverContainer();
+            utilities.verifyElementVisibilityState(browseItemsPage.mobileViewSortbyDropdownOptionsList(), 'notExist');
+        });
+
+        it('When user clicks on each sort dropdown option, then items should sort Ascending and in descending order', () => {
+            sortOptions.forEach((_, count) => {
+                browseItemsPage.steps.clickOnSortDropdown();
+                browseItemsPage.steps.clickOnSortOption(count);
+                browseItemsPage.steps.clickOnSortDropdown();
+                browseItemsPage.steps.sortDropdownOptionSelected(count);
+                browseItemsPage.steps.clickOnNgiePopoverContainer();
+            });
+            browseItemsPage.steps.clickOnSortDropdown();
+            browseItemsPage.steps.clickOnSortOption(1);
+            browseItemsPage.steps.clickOnMobileViewSortAscendingIcon();
+        });
+
+        it('CSS of \'Browse ThinkSphere Review Items\' sort dropdown section', { tags: 'css' }, () => {
+            utilities.verifyCSS(browseItemsPage.mobileViewSortByDropdown(), {
+                'border': `1px solid ${css.color.liTextSelectedBg}`,
+                'box-shadow': `${css.color.liTextSelectedBg} 0px 5px 0px 0px`,
+                'padding': '12px 16px'
+            });
+            utilities.verifyCSS(browseItemsPage.mobileViewSortByDropdownLabelWrapper(), {
+                'color': css.color.highlightedTableCell,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(browseItemsPage.mobileViewSortByDropdownLabel(), {
+                'color': css.color.highlightedTableCell,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.bold
+            });
+
+            cy.log('CSS of \'Browse ThinkSphere Review Items\' sort dropdown section in hover state');
+            browseItemsPage.steps.hoverOnSortDropdown();
+            utilities.verifyCSS(browseItemsPage.mobileViewSortByDropdown(), {
+                'border': `1px solid ${css.color.primaryBtnBg}`,
+                'box-shadow': `${css.color.primaryBtnBg} 0px 3px 0px 0px`
+            });
+        });
+    });
+
+    describe('\'Browse ThinkSphere Review Items\' search section', () => {
+        abortEarlySetup();
+        it('Search bar component should be present', () => {
+            browseItemsPage.steps.verifySearchBarComponent();
+            browseItemsPage.steps.verifySearchIcon();
+            browseItemsPage.steps.verifyCloseIcon();
+        });
+                
+        it('CSS of search bar component', { tags: 'css' }, () => {
+            utilities.verifyCSS(browseItemsPage.searchBar().parent(), {
+                'background-color': css.color.progressBarRemainingFill,
+                'border': `1px solid ${css.color.figDefaultComponentBorder}`,
+                'border-radius': '50px',
+                'padding': '0px 8px'
+            });
+            utilities.verifyCSS(browseItemsPage.buttonSearchSVG(), {
+                'fill': css.color.primaryBtnBorder,
+                'height': '18px',
+                'width': '18px'
+            });
+        });
+
+        it('When user types title/tags/content in search component and search, then it should search', () => {
+            /**@TODO Add check for When user types title/tags/content in search component and search */
+        });
+
+        it('CSS of search bar in hover state', { tags: 'css' }, () => {
+            browseItemsPage.steps.hoverOnSearchBarComponent();
+            utilities.verifyCSS(browseItemsPage.searchBar().parent(), {
+                'background-color': css.color.primaryBtn,
+            });
+        });
+
+        it('Accessibility of search bar component', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(browseItemsPage.itemListFilterWrapper());
+        });
+    });
+
+    describe('\'Browse ThinkSphere Review Items\' pagination section', () => {
+        abortEarlySetup();
+        it('Pagination section should be present', () => {
+            browseItemsPage.steps.verifyPaginationSection();
+            browseItemsPage.steps.verifyPaginationCount('1 - 20 of');
+            browseItemsPage.steps.verifyItemsOnPage(20);
+        });
+
+        it('CSS of \'Browse ThinkSphere Review Items\' pagination section', { tags: 'css' }, () => {
+            utilities.verifyCSS(utilities.getNthElement(browseItemsPage.paginationCountText(), 0), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.small,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.getNthElement(browseItemsPage.paginationBlock(), 0)
+                .within(() => {
+                    utilities.verifyCSS(browseItemsPage.buttonNext(), {
+                        'box-shadow': `${css.color.secondaryBtnBorder} 0px 5px 0px 0px`,
+                        'border': `1px solid ${css.color.secondaryBtnBorder}`,
+                        'color': css.color.secondaryBtn,
+                        'padding': '7px'
+                    });
+                    utilities.verifyCSS(browseItemsPage.buttonPrevious(), {
+                        'opacity': '0.5',
+                        'border': `1px solid ${css.color.secondaryBtnBorder}`,
+                        'color': css.color.secondaryBtn,
+                        'padding': '7px'
+                    });
+                });
+        });
+
+        it('When user clicks on the next page button, then it should display the next page data', () => {
+            browseItemsPage.steps.clickOnNextPageButton();
+            browseItemsPage.steps.verifyPaginationCount('21 - 40 of');
+            browseItemsPage.steps.clickOnPreviousPageButton();
+            browseItemsPage.steps.verifyPaginationCount('1 - 20 of');
+        });
+
+        it('CSS of pagination section next button in hover state', { tags: 'css' }, () => {
+            browseItemsPage.steps.hoverOnNextPageButton();
+            utilities.getNthElement(browseItemsPage.paginationBlock(), 0)
+                .within(() => {
+                    utilities.verifyCSS(browseItemsPage.buttonNext(), {
+                        'border-color': css.color.primaryBtnBg,
+                        'box-shadow': `${css.color.primaryBtnBg} 0px 3px 0px 0px`
+                    });
+                });
+        });
+    });
+});

package/cypress/e2e/ILC/BrowseItems/browseThinkSphereItems.js

@@ -0,0 +1,259 @@
+import { browseItemsPage } from '../../../pages/components/browseItemsPage';
+import utilities from "../../../support/helpers/utilities";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+const css = Cypress.env('css');
+const tableHeader = ['ThinkSphere Item', 'Last updated', 'Created on', 'Tags', 'Actions'];
+const sortEnable = ['have.class', 'have.class', 'have.class', 'not.have.class', 'not.have.class'];
+const sortDisable = ['not.have.class', 'not.have.class', 'not.have.class', 'not.have.class', 'not.have.class'];
+
+describe('Navigate to Think Sphere Browse Items page and view the page contents', () => {
+    before(() => {
+        cy.loginAs('admin');
+        cy.deleteThinkSphereItem('~zzz item name');
+        cy.createThinkSphereItem('~zzz item name');
+        cy.visit(`${Cypress.env('itemEngineHomePage')}`);
+    });
+
+    after(() => {
+        cy.deleteThinkSphereItem('~zzz item name');
+    });
+
+    describe('\'Browse ThinkSphere Items\' list page wrapper section', () => {
+        abortEarlySetup();
+        it('If the user clicks on the \'Browse ThinkSphere Items\' option from the menu bar, user should be navigated to the Think Sphere Browse Items page', () => {
+            browseItemsPage.steps.clickOnBrowseThinkSphereItemsMenuBarOption();
+            browseItemsPage.steps.verifyPageUrl('/item-engine/thinksphere/browse-items');
+            browseItemsPage.steps.verifyBrowseThinkSphereItemsMenuBarOptionSelected();
+        });
+
+        it('\'Browse ThinkSphere Items\' Item list page wrapper section should present', () => {
+            browseItemsPage.steps.verifyBrowseItemsPageWrapperSection();
+        });
+
+        it('CSS of \'Browse ThinkSphere Items\' option', { tags: 'css' }, () => {
+            utilities.verifyCSS(browseItemsPage.browseThinksphereItemsMenuBarOption(), {
+                'color': css.color.codeBlockText,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.medium
+            });
+            utilities.verifyCSS(browseItemsPage.browseItemPageWrapper(), {
+                'background-color': css.color.primaryBtn,
+                'border-radius': '4px',
+                'border': `1px solid ${css.color.borderColor}`,
+                'padding-bottom': '16px'
+            });
+        });
+    });
+
+    describe('\'Browse ThinkSphere Items\' page header section', () => {
+        abortEarlySetup();
+        it('\'Browse ThinkSphere Items\' page header section present', () => {
+            utilities.verifyElementVisibilityState(browseItemsPage.browseItemPageHeaderActionWrapper(), 'exist')
+            utilities.verifyInnerText(browseItemsPage.browseItemPageHeader(), 'Browse ThinkSphere items');
+            utilities.verifyInnerText(browseItemsPage.createItemButtonTypography(), 'Create item');
+        });
+
+        it('When user click on \'Browse ThinkSphere Items\' create item button, then it should navigate to think sphere create item page', () => {
+            browseItemsPage.steps.clickOnCreateItemButton();
+            browseItemsPage.steps.verifyPageUrl('/item-engine/thinksphere/create-item');
+            browseItemsPage.steps.clickWindowsBack();
+            cy.interceptGraphql('getItems');
+            cy.wait(2000);
+        });
+
+        it('CSS of \'Browse ThinkSphere Items\' page header section', { tags: 'css' }, () => {
+            utilities.verifyCSS(browseItemsPage.browseItemPageHeaderActionWrapper(), {
+                'border-bottom': `1px solid ${css.color.secondaryBtnBorder}`,
+                'padding': '16px'
+            });
+            utilities.verifyCSS(browseItemsPage.browseItemPageHeader(), {
+                'color': css.color.secondaryBtn,
+                'font-size': css.fontSize.heading,
+                'font-weight': css.fontWeight.bold
+            });
+            utilities.verifyCSS(browseItemsPage.buttonCreateItem(), {
+                'background-color': css.color.primaryBtnBg,
+                'padding': '12px 16px'
+            });
+            utilities.verifyCSS(browseItemsPage.createItemButtonTypography(), {
+                'color': css.color.primaryBtn,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.semibold 
+            });
+
+            cy.log('CSS of \'Browse ThinkSphere Items\' page header section create button in hover state');
+            browseItemsPage.steps.hoverOnCreateItemButton();
+            utilities.verifyCSS(browseItemsPage.buttonCreateItem(), {
+                'background-color': css.color.buttonHoverColor,
+                'box-shadow': `${css.color.secondaryBtn} 0px 3px 0px 0px`
+            });
+            utilities.verifyCSS(browseItemsPage.createItemButtonTypography(), {
+                'color': css.color.primaryBtn
+            });
+        });
+
+        it('Accessibility of create item button', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(browseItemsPage.headerActionButtonWrapper());
+        });
+    });
+
+    describe('\'Browse ThinkSphere Items\' list table section columns headers', () => {
+        abortEarlySetup();
+        it('The column headers should be present in the listing table header', () => {
+            browseItemsPage.steps.verifyColumnHeadersInListingTable(tableHeader);
+        });
+
+        it('The column headers should have sort enable', () => {
+            browseItemsPage.steps.verifySortEnableDisableForTableColumnHeader(sortEnable);
+            browseItemsPage.steps.verifyTableSortDescendingByDefault();
+        });
+
+        it('When user click on the column name list data should updated in Ascending and in descending order', () => {
+            tableHeader.slice(0, 3).forEach((_, count) => {
+                browseItemsPage.steps.verifySortFunctionalityOnColumnHeaderClick(count);
+            });
+            browseItemsPage.steps.verifySortFunctionalityOnColumnHeaderClick(1);
+        });
+
+        it('When only one search result is present, then column sort should be disabled', () => {
+            browseItemsPage.steps.addTextInSearchBar('~zzz item name');
+            browseItemsPage.steps.clickOnSearchIcon();
+            browseItemsPage.steps.verifyPaginationCount('1 - 1 of');
+            browseItemsPage.steps.verifySortEnableDisableForTableColumnHeader(sortDisable);
+            browseItemsPage.steps.clearSearchBar();
+        });
+
+        it('CSS of \'Browse ThinkSphere Items\' list table section', { tags: 'css' }, () => {
+            tableHeader.forEach((_, count) => {
+                utilities.verifyCSS(browseItemsPage.tableColumnHeaderBrowseItemWrapperDiv(count), {
+                    'color': css.color.primaryBtnBorder,
+                    'font-size': css.fontSize.default,
+                    'font-weight': css.fontWeight.bold 
+                });
+                utilities.verifyCSS(browseItemsPage.tableColumnHeader(count).parent().parent(), {
+                    'background-color': css.color.optionsBg,
+                });
+            });
+            utilities.verifyCSS(browseItemsPage.iconSortDescending(), {
+                'fill': css.color.primaryBtnBg
+            });
+        });
+    });
+
+    describe('\'Browse ThinkSphere Items\' list table rows section', () => {
+        abortEarlySetup();
+        browseItemsPage.tests.verifyItemListTableRows();
+        browseItemsPage.tests.verifyItemReferenceId('~zzz item name', true);
+        browseItemsPage.tests.verifyQuestionInstruction('question instruction text');
+        browseItemsPage.tests.verifyLastUpdatedTimeComponent();
+        browseItemsPage.tests.verifyCreatedOnTimeComponent();
+        browseItemsPage.tests.verifyActionButton();
+
+        it('Accessibility of list table', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(browseItemsPage.datatableWrapper());
+        });
+    });
+
+    describe('\'Browse ThinkSphere Items\' search section', () => {
+        abortEarlySetup();
+        it('Search bar component should be present', () => {
+            browseItemsPage.steps.verifySearchBarComponent();
+            browseItemsPage.steps.verifySearchIcon();
+            browseItemsPage.steps.verifyCloseIcon();
+        });
+                
+        it('CSS of search bar component', { tags: 'css' }, () => {
+            utilities.verifyCSS(browseItemsPage.searchBar().parent(), {
+                'background-color': css.color.progressBarRemainingFill,
+                'border': `1px solid ${css.color.figDefaultComponentBorder}`,
+                'border-radius': '50px',
+                'padding': '0px 8px'
+            });
+            utilities.verifyCSS(browseItemsPage.buttonSearchSVG(), {
+                'fill': css.color.primaryBtnBorder,
+                'height': '18px',
+                'width': '18px'
+            });
+        });
+
+        it('When user type title/tags/content in search component and search, then it should search', () => {
+            browseItemsPage.steps.addTextInSearchBar('~zzz');
+            browseItemsPage.steps.clickOnSearchIcon();
+            browseItemsPage.steps.verifyPaginationCount('1 - 1 of');
+        });
+
+        browseItemsPage.tests.verifyItemReferenceId('~zzz item name', true);
+
+        it('User should be able to clear the searchbar',()=>{
+            browseItemsPage.steps.clearSearchBar();
+        });
+
+        it('CSS of search bar in hover state', { tags: 'css' }, () => {
+            browseItemsPage.steps.hoverOnSearchBarComponent();
+            utilities.verifyCSS(browseItemsPage.searchBar().parent(), {
+                'background-color': css.color.primaryBtn,
+            });
+        });
+
+        it('Accessibility of search bar component', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(browseItemsPage.itemListFilterWrapper());
+        });
+    });
+
+    describe('\'Browse ThinkSphere Items\' pagination section', () => {
+        abortEarlySetup();
+        it('Pagination section should be present', () => {
+            browseItemsPage.steps.verifyPaginationSection();
+            browseItemsPage.steps.verifyPaginationCount('1 - 20 of');
+            browseItemsPage.steps.verifyItemsOnPage(20);
+        });
+
+        it('CSS of \'Browse ThinkSphere Items\' pagination section', { tags: 'css' }, () => {
+            utilities.verifyCSS(utilities.getNthElement(browseItemsPage.paginationCountText(), 0), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.small,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.getNthElement(browseItemsPage.paginationBlock(), 0)
+                .within(() => {
+                    utilities.verifyCSS(browseItemsPage.buttonNext(), {
+                        'box-shadow': `${css.color.secondaryBtnBorder} 0px 5px 0px 0px`,
+                        'border': `1px solid ${css.color.secondaryBtnBorder}`,
+                        'color': css.color.secondaryBtn,
+                        'padding': '7px'
+                    });
+                    utilities.verifyCSS(browseItemsPage.buttonPrevious(), {
+                        'opacity': '0.5',
+                        'border': `1px solid ${css.color.secondaryBtnBorder}`,
+                        'color': css.color.secondaryBtn,
+                        'padding': '7px'
+                    });
+                });
+        });
+
+        it('When user click on the next page button, then it should display the next page data', () => {
+            browseItemsPage.steps.clickOnNextPageButton();
+            browseItemsPage.steps.verifyPaginationCount('21 - 40 of');
+        });
+
+        it('When user click on the prev page button, then it should display the prev page data', () => {
+            browseItemsPage.steps.clickOnPreviousPageButton();
+            browseItemsPage.steps.verifyPaginationCount('1 - 20 of');
+        });
+
+        it('CSS of pagination section next button in hover state', { tags: 'css' }, () => {
+            browseItemsPage.steps.hoverOnNextPageButton();
+            utilities.getNthElement(browseItemsPage.paginationBlock(), 0)
+                .within(() => {
+                    utilities.verifyCSS(browseItemsPage.buttonNext(), {
+                        'border-color': css.color.primaryBtnBg,
+                        'box-shadow': `${css.color.primaryBtnBg} 0px 3px 0px 0px`
+                    });
+                });
+        });
+
+        it('Accessibility of pagination block', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(browseItemsPage.paginationBlock());
+        });
+    });
+});