Cypress: Handle Animation during Click

Profile picture for user arilio666

This article lets us see how we can handle animation during click in cypress. We can account for animation by asserting .should('be.visible') on one of the elements we wish to be animated in.

Now let us assume a click event caused animation.

cy.get('element').click().should('not.have.class','animating')
  • This will start animation once the click event is happening.
  • If animation time is more, we can extend the time by passing the wait assertion.
cy.get('button', { timeout: 10000 }) 
 .should('be.visible')
  • This waits up to 10secs for the button to be visible.
cy.get('.element')
 .click({ timeout: 10000 })
 .should('not.have.class', 'animating')
  • Waits for 10secs for the element to not have an animating class.

Most of the time, we need to have to worry about animations as cypress automatically waits until the performing animation stops before clicking.