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  
                    })
                })
                
            }
        })
    }

CodePudding user response：

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

cy.wrap(next).click({ force_true} )

CodePudding user response：

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
  }
})

CodePudding user response：

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.