cypress.io - run the test on all pages, loop through the pager

Question

I would like to run the same test on multiple pages. It is a long form divided into multiple pages. The number of pages varies. Sometimes it is 7, sometimes 30. See screenshot: https://drive.google.com/file/d/1O_xhayyIaRJTqABDR27E4XubrmBTR2IW/view Once all pages are filled, the url changes.

How can I loop through all pages with cypress.io? In jQuery/javascript it would be like this.

$(document).ready(function($) {
             if(window.location.href.indexOf("xyz") > -1) {
             fillInForm();
             clickOnNext();
}
});

In cypress.io, I tried but it only runs once.

cy.location().its('href').then((val) => {
    if (val.indexOf('xyz')  !== -1) {
        // cypress test, fill in form...
        cy.contains('Next').eq(0).click()  
    }
  })

Any ideas? Thank you.

Answer 1

I am using cypress 3.1.1, here is how I test paging in my app that provides search results with varying number of pages.

it('Pages proper', function() {

    // Perform search
    cy.get('[data-testid=search-icon]').click();
    cy.get('[data-testid=explorer-search-input]').type('the');
    cy.get('[data-testid=explorer-search-input]').type('{enter}');
    cy.contains('Displaying 1 - 10 of 21 results');
    cy.contains('Page 1 of 3');

    // Test Next Page
    cy.get('[data-testid=explorer-page-btns-next]').click();
    cy.contains('Displaying 11 - 20 of 21 results');
    cy.contains('Page 2 of 3');
    cy.get('[data-testid=explorer-page-btns-next]').click();
    cy.contains('Displaying 21 - 21 of 21 results');
    cy.contains('Page 3 of 3');

    // Test Previous Page
    cy.get('[data-testid=explorer-page-btns-previous]').click();
    cy.contains('Displaying 11 - 20 of 21 results');
    cy.contains('Page 2 of 3');

    // Preform new search to vary results/pages returned
    cy.get('[data-testid=search-icon]').click();
    cy.get('[data-testid=explorer-search-input]').type('Rabbit Hole');
    cy.get('[data-testid=explorer-search-input]').type('{enter}');        

    ...

})

You can also add cy.contains('xyz'); for any known items in the results to validate the data is displaying in addition to the paging functionality.