Click in Button until it disappears in Cypress

Question

did a quite of reading but none of the things I tried worked..

I have a use case that is: I need to click in a button (lets say 10 times for example) to load more items in one page, but if we already load all the items the button disappears. The number of load's is not the same always, so in some cases I can click the 10 times, other times i only can click like 5.

How can we do this with Cypress?

Just one note: the load button while loading new items the button still exists but pass to a state of disabled, before goes again to enable or to disappear.

Answer 1

Did your see the recursive function pattern?

Something like

function clickUntilGone(selector, attempt = 0) {
  if (attempt === 11) {
    throw 'It didnt work'
  }

  cy.get(selector).click()
    .then($button => {
      const exists = Cypress.$(selector).length > 0
      if (exists) {
        // wait for disabled/not disabled cycle
        cy.get(selector:disabled).then(() => { 
          cy.get(selector:not(:disabled)).then(() => {
            clickUntilGone(selector, ++attempt))    
          })
        })    
      })
  })
}
clickUntilGone('my-button`)