Hi all, I have an issue with my web page. Basically It has a loader "spinner" which usually shows up after some user-action. Let's say I confirm selection on a specific page via some Button. Next, the loader appears. After it is no longer visible, the data is updated on a page and we are ready to go. Initially I wanted to create a custom command like this: Cypress.Commands.add('waitForLoaderToFinish', () => { cy.get('body').then(($body) => { if ($body.find('.table-loading-spinner').length > 0) { cy.get('.table-loading-spinner', { timeout: 3000 }).should('be.visible'); cy.get('.table-loading-spinner', { timeout: 3000 }).should('not.exist'); } else { cy.log('Spinner not present, continuing test execution'); } }); }); I wanted this command to Check if the .table-loading-spinner is present in the DOM, if so It should wait for this to not exist (disappear). The issue I'm having is the fact, that the loader "takes some time" to actually appear and Cypress seems to be "too fast". So as a result, cypress already continues tests assuming that the spinner is not present, but in fact the spinner did not yet appear. Any ideas how to solve this issue?

Instead of waiting on the spinner could you wait on any API request(s) to finish instead? Something a bit more consistent? Then you can use that wait in combination with the spinner, if needed still. So something like cy.wait("@yourAliasedIntercept") cy.get('.table-loading-spinner', { timeout: 3000 }).should('not.exist'); The wait will finish first and then you can validate the spinner won't exist after all data has been fetched. Plus this would allow you to remove the conditional entirely as it would work for either case.

Yeah actually that makes sense. I'll try this out. Thanks!

- https://glebbahmutov.com/blog/negative-assertions/