How do I wait for an element to disappear in Cypress?

Question

I'd like to preface this by saying that I really tried looking here and anywhere else for an answer but without a succes.

Here is the problem: I'm trying to automate a test for a web application that is loading a bigger amount of data and therefore has to be loading for a while. I have to wait for the page to load to do the next step and I'm trying to figure how to wait for the loading gif to be complete so that my tests can continue. The gif is a basic spinning thingy.

I would like to avoid using implicit wait time (cy.wait()) that is really only the last resort if noone is able to solve this.

What I found o far are these two functions:

1. cy.waitFor - this seems to be used mostly in situations, where you are waiting for an element to apper - I've tried this in different scenarios and works perfcetly but I havent been able to apply it here.

2. cy.waitUntil - this seems to be the thing I'm looking for but there is one huge problem. This function seems to have a timeout and I haven't been able to change it any other way than by changing timeouts globally for all the functions. If I set the global timeout to some longer period (minute +), then it works exactly how I would want it to work but obviously I dont really want to have such a long timeout for everything.

The way I see it, there are two possible solutions to this problem>

1. to change/turn off the timeout for the waitUntil function.

2)Or to somehow make it work with waitFor, because there seems to be no implicit timeout there and it just kind of waits forever for something to happen. here is the code snippet of the situation:

cy.get('#load-data-button').click() // this clicks the button that stars the loading proces     
cy.waitUntil(() => cy.get('body > div > my-app > billing > div > div > div.text-center > img').should('not.be.visible',) ) // this is the function that waits until the loading gif is invisible

I would be eternaly grateful for a solution, because unfortunatelly no one at my company is really a Cypress expert so they are not able to help.

Answer 1

Could you try something like:

cy.get([loading-spinner-identifier]).should("not.be.visible", { timeout: 60000 }); 
cy.get([an element that should now be visible]).should("be.visible");

It's a bit rough and ready, but I've used it when waiting for spinners to finish up. This waits a minute to see the spinner isn't there and then checks to see that something I'm expecting is there. I'd had varying success with this, but it has helped in some situations.

Answer 2

You can indeed use cy.waitUntil(). As you can see in the documentation of that package (https://www.npmjs.com/package/cypress-wait-until#arguments), the timeout that the function has is just the default (5000 ms) of an argument you can change it. You can even change how often cypress checks the condition you want, so if you do something like:

cy.waitUntil(() => cy.get('body > div > my-app > billing > div > div > div.text-center > img').should('not.be.visible'), {
  errorMsg: 'The loading time was too long even for this crazy thing!',
  timeout: 300000,
  interval: 5000
});

...it will try for 300 seconds (5 minutes) each 5 seconds (just an example with very long timeout).

Also, maybe you can consider to wait until some element is visible after that loading spinner, instead of checking if it dissapeared. If you want to specifically test it, is fine, but if some element appears or becomes interactable after the loading, it could happen that is still not in the state you want, for a fraction of a second, after the spinner is not visible. If that is the case, I would avoid the checking of the spinner dissapearing in first place, unless it adds value to your test, and I would just wait for that element to be in the state you want (for example wait until some input is not disabled, element is visible, text appeared somewhere...).

Answer 3

Add positive and negative assertion to make sure loading spinner is visible.

• Default Time is 4s for assert statement.

• You can increase defaultTime to wait for assertion to validate by adding configuration in cypress.json

{
...
"defaultCommandTimeout": 4000,
...
}

const waitForSpinner = () => {
   // First, make sure the loading indicator shows up (positive assertion)
   cy.get('[data-qa="qa-waiting-spinner"]').should('be.visible')
 
   // Then Assert it goes away (negative assertion)
   cy.get('[data-qa="qa-waiting-spinner"]').should('not.be.visible')
 }