Today I Learned

Waiting for content to be expanded in Cypress tests

When testing in Cypress, sometimes there are cases that content within accordion needs to be verified. The challenge is that sometimes, Cypress displays an error that an element is not yet visible, but it is on the page. A simple solution could be to wait for the element to be visible:

cy.contains('Text within the accordion')
  .should('be.visible');

One downside of this approach is that if there are more elements in the accordion, the last one should be check for visibility. Otherwise, Cypress will not wait for expanding the whole accordion and will proceed further with tests, e.g. trying to click an element that is not visible and hidden within the accordion.

An alternative approach to resolve the issue with the expanded accordions is to check its height and wait till it reaches a certain height:

cy.getByTestId('the-accordion')
  .invoke('height')
  .should('be.gt', 700);