CODEWITHSUNDEEP
node.jspaginationcypress
Luna
Luna

Reputation: 337

Pagination testing via cypress JS

enter image description hereI need to test that when I select some model car, as a result, I have only that model in all pages. So basically I do pagination testing. But I do something wrong that it does not moves to another page although selectors are correct. Please tell me what I am doing wrong.

findItem("AUDI")
   });
   async function findItem(value) {
       async function findInPage(index) {
           let found = false;
           cy.get("li.page-item:not(.page-pre):not(.page-next)").as("pages");
           await cy.get("@pages")
               .its("length")
               .then(async (len) => {
                   if (index >= len) {
                       return false;
                   } else {
                       await cy.get("@pages")
                           .eq(index)
                           .click();
                       await cy.get("table tr > td:nth-child(5) p")
                           .each(async ($itemNameEl, index) => {
                               const itemText = $itemNameEl.text().toUpperCase();
                               cy.log('item ', itemText);
                               if (itemText.includes(value)) {
                                   found = true;
                                   await cy.wrap($itemNameEl).eq(index);
                                   //cy.get('.chakra-text.css-0').should('include', value)
                                   cy.get('.css-1b4k5p > .chakra-text.css-0')
                                   .each(($el) => {
                                       expect($el.text().toUpperCase()).to.include(value)
                                    
                                   })
                                   return false;
                               }
                           })
                           .then(() => {
                               if (!found) {
                                   findInPage(++index);
                               }
                           });
                   }
               });
       }
       findInPage(0);
}

Upvotes: 2

Views: 4477

Answers (2)

shahul shas
shahul shas

Reputation: 46

const nextPageArrow = '[aria-label="next page"]'
  const findInPage = () => {
    cy.get(nextPageArrow).then((el) => {
      if (el.hasClass('disabled')) {
        return
      }
      cy.intercept('POST', '**/v1/getrecords*').as('records')
      cy.wrap(el).click()
      cy.wait('@records')
      findInPage()
    })
  }
  findInPage()

Upvotes: 0

Zaista
Zaista

Reputation: 1422

A simple example without aliases, async functions, etc, just using recursion and a single NEXT PAGE button (that I see you have in your screen shot) would look like this (tested and working on bootstrap pagination examples):

it('Some test', () => {
    cy.visit('/')
    const findInPage = () => {
        cy.get('li:has(a.page-link:has(span:contains(»)))').then((el) => {
            // do your test
            if (el.hasClass('disabled')) {
                // on last page, break out
                return
            }
            cy.wrap(el).click()
            findInPage()
        })
    }
    findInPage()
});

How this works: Look for li element which represents a single pagination next-page button, in bootstrap case it has child a tag which has child span tag which contains an icon ». Once you reach last page, the button get's disabled by adding .disabled class to li tag which is checked for on every page. Using this it doesn't matter if you have 3 or 33 pages and if some numbers are hidden with ...

Reference: https://glebbahmutov.com/blog/cypress-recurse/

Upvotes: 5

Related Questions