0

Code

Cypress result

I want to click on Next button to test pagination, until its class is "disabled". I used the code below. But it continues to click even "Next" button has "disabled" class. And Cypress throws the error at the attachment.

static pagination(){

    var index = 0 
    cy.get('li [data-test="page-link"]:not(.active):not([aria-label="Next"]) :not([aria-label="Previous"]').as("pages")
        cy.get('@pages').its('length').then( len =>{
            if(index <= len){
                cy.get('[data-test="page-link"][aria-label="Next"]').then( next=>{
                    cy.wrap(next).invoke('hasClass', 'disabled').then( classDisable =>{
                        if(classDisable==false){
                            cy.wait(500)
                            cy.wrap(next).should('not.have.class', 'disabled')
                            cy.wrap(next).click()
                        }
                             this.pagination()
                             index++
                    })
                })
                
            }
        })
    }
Fody
  • 23,754
  • 3
  • 20
  • 37
Solufer
  • 21
  • 1
  • 3
  • 7
  • Please clarify your specific problem or provide additional details to highlight exactly what you need. As it's currently written, it's hard to tell exactly what you're asking. – Community Feb 23 '22 at 18:05

4 Answers4

1

This could be what you want

const maxPages = 10  // so we don't get an infinite loop 
                     // if Next never gets disabled (maybe due to app bug)

function clickNext(nextClicks = 0) {

  if (nextClicks > maxPages) {
    throw "Maximum page clicks exceeded"
  }

  // use non-failing jQuery (Cypress.$) to test the disabled state
  const nextIsDisbaled = Cypress.$('[data-test="page-link"][aria-label="Next"]')
    .hasClass('disabled')
  if (nextIsDisabled) return

  cy.get('[data-test="page-link"][aria-label="Next"]').click()
  cy.wait(500)  // or wait for a page change, e.g new element
  clickNext(++nextClicks)
}

clickNext()  // start clicking

It should also work if Next button is disabled from the start.

Fody
  • 23,754
  • 3
  • 20
  • 37
1

It may be possible to avoid the conditional check altogether.

If you can get the number in the box to the left of "Next" - I'm taking a guess that .prev() will get it, but you may have to adjust that step.

Then you can click() pageCount-1 times.

cy.get('[data-test="page-link"][aria-label="Next"]')
  .prev()                                                // last page box
  .invoke('text')
  .then(lastPageText => {
    const pageCount = +lastPageText;
    Cypress._.times(pageCount -1, () => {
      cy.get('[data-test="page-link"][aria-label="Next"]').click()
    })
  })
kegne
  • 583
  • 1
  • 8
0

Try setting the force option to true on the next click.

cy.wrap(next).click({ force: true} )
Fody
  • 23,754
  • 3
  • 20
  • 37
clevernickname
  • 13
  • 1
  • 4
0

If you want to click on the disabled button you have to use {force: true}

cy.wrap(next).click({force: true})

And, if you want to first check whether the button is enabled or not and then perform click, you can do something like:

cy.get('[data-test="page-link"][aria-label="Next"]').then(($next) => {
  if ($next.is(':enabled')) {
    //next button is enabled
    cy.wrap(next).click()
  } else {
    // Do something when next button is disabled
  }
})
Alapan Das
  • 17,144
  • 3
  • 29
  • 52