Pagination handling

We can handle the pagination in cypress by fetching the page indexes and comparing it with the targeted text or element found.

In the below example, we are targeting the text “$12” that is within the Webtable, such that fetching the webtable rows and columns and finding if the targeted element is found or not, else move to the next page.

describe('Sahithi Cypress Pagination Test', function () {
    beforeEach(() => {          
        cy.visit('https://examples.bootstrap-table.com/template.html?v=134&url=options%2Ftable-pagination.html')
        cy.wait(2000)
    })
    it('Pagination Cypress Test', function () {
        const pageFetch = (pageIndex, length) => {
            if (pageIndex == length) {
                return;
            }
            return cy.get("li > .page-link").eq(pageIndex)
              .click({ force: true }).wait(5000) //clicks on page index
              .then(() => {
                return getRowLength().then((rowLength) => {
                    return rowFetch(0, rowLength, pageIndex, length);
                });
            });
        };
        const rowFetch = (rowIndex, length, pageIndex, pageLength) => {
            if (rowIndex == length) {
                return pageFetch(++pageIndex, pageLength);
            }
            return cy.get("tr > td").eq(rowIndex).then(($itemPriceList) => {
                const ItemPrice = $itemPriceList.text();
                cy.wait(500)
                
                
          if (ItemPrice == "$12") {
                    //Enters the condition if the Item text Found
                    cy.log("Yes! is found");
                    
               cy.get('tr > td').eq(rowIndex)     //gets the columns with index
                 .then(function (pricelist) {    //stores text found in pricelist
                        const Price = pricelist.text();
                        expect(Price).to.contains('$12'); //Assert text found
                    })
 
                    //Do something if found in the page…….
 
                    return new Cypress.Promise((resolve) => {
                        resolve("Success");
                    });
                }
                return rowFetch(++rowIndex, length, pageIndex, pageLength);
            });
        };
        const getRowLength = () => {
            return cy.get("td:nth-child(1)").then(($list) => {
                return new Cypress.Promise((resolve) => {
                    resolve($list.length);
                });
            });
        };
 
 //For Each Pagination - Searching the Price first - Such that pulling the no.of pages into list $pagelist
        cy.get("li > .page-link").then(($pagelist) => {
            return pageFetch(0, $pagelist.length);
        })
 
    })
})