How to wait till all components are loaded in Cypress?

Question

My Cypress test cases are working fine when I run from my system pointing to QA. But the scheduled builds from CI are failing randomly because sometimes the page is taking more time to load.

I've tried cy.wait(1500) -> It works sometimes and fails sometimes. So, I was wondering is there a command in Cypress that waits till all components in the page are loaded? Instead of I try different values inside cy.wait() which in turn fails someday?

Answer 1

There's no such concept of waiting or even writing your own waits (like with Selenium) in Cypress. Cypress has this built in.

I recommend reading their docs, it's one of the core concepts mentioned here https://docs.cypress.io/guides/core-concepts/retry-ability.html#Commands-vs-assertions

The point here is, you write something like:

cy.get('.my_element')
  .should('have.length', 2)

and Cypress queries the DOM and tries to find .my_element, if it succeeds, it goes on to the assertion, if it fails, though, it queries the DOM again, and again, and again until it times out (timeouts could be configured, read about it here: https://docs.cypress.io/guides/core-concepts/retry-ability.html#Timeouts and here: https://docs.cypress.io/guides/references/configuration.html#Timeouts)

You should be aware of the fact that not every command in Cypress is retried, for example cy.click() is not retried, cos you obviously want to click only once. On the other hand, even cy.click() has its own timeout, it waits until an element becomes actionable. The point is, you have to do nothing (again unlike in Selenium) to make sure the element is actionable.