Cypress

How to know when the web page is fully loaded in Cypress

Cypress is a modern end to end framework and is more and more adopted widely. Often we would like to know when the page is fully loaded then we move on to perform next action, but how we know that in Cypress?

Cypress generate tests

In Cypress, we have wait function which support various kinds of options like implicit time, for some events to happen, or for certain API to finish. We can also create our own conditions to wait, for example we can wait for some elements to disappear or be active. What to do is completely up to us.

cy.wait()

supported below syntax

cy.wait(time)
cy.wait(alias)
cy.wait(aliases)
cy.wait(time, options)
cy.wait(alias, options)
cy.wait(aliases, options)

For example we can wait for 1000 miliseconds, but please consider this is a bad practice and 99% of the time we should not do it.

cy.wait(1000)

Or we can wait for the API to finish calling.

cy.server()
cy.route('graphql/*').as('graphql')
cy.wait(['@graphql'], {requestTimeout: 10000, responseTimeout: 15000 });