I have a div where an API call is made, and the div gets filled in with "success" data if the API call succeeds, or a failure if it fails or if it times out (does not happen often, but can happen).
Let's say the global timeout in Cypress is set to 30 seconds.
Here is what I have:
cy.get(failureElementSelector).should("not.exist");
cy.get(successElementSelector).should("exist");
The problem with this is that the failure element assertion always just passes instantly, and then even if the failure then happens in 5 seconds, Cypress is still only waiting on the success element to appear, so the test fails slowly in 30 seconds rather than fast in 5 seconds.
Likewise if you just changed the order of the two statements, then even if the failure element appears in 5 seconds, Cypress is blocked on waiting for the success element to appear, and the test fails in 30 seconds rather than 5 seconds.
It would be great if I could have Cypress both keep a look at both of those assertions at the same time: keep on checking to see if the success element has appeared in which case to consider the whole thing a success, while at the same time keep an eye out if the failure element appeared to immediately treat that as a test failure.
How can I achieve this?
That way the only time I would need to wait for 30 seconds is if the API request truly times out.
The best way is to intercept the API call before making your assertion.
cy.intercept('https://theDoaminName/pathName').as('aliasName')
cy.click('button')
cy.wait('@aliasName')
cy.get(failureElementSelector).should("not.exist");
cy.get(successElementSelector).should("exist");
If you're sure that one or the other selector turns up eventually, combine them into a multiple selector.
The first one that turns up will be passed on
cy.get(`${successElementSelector}, ${failureElementSelector}`)
.should($el => {
expect($el.text()).to.include('Success!') // whatever success data looks like
})
Yes, this is a common problem, looking for something not to exist resolves instantly, and you can't prevent that, unless you do something like a cy.wait() which is not advisable.
If you have control over the source code of your app, you could render a div or span that could contain the success and failure indicators, and put a data-cy="status-container" attribute on it.
Then you modify your cypress test to look for the container first, something like this:
cy.get('[data-cy="status-container"]').should('exist')
// The success/failure indicators should be there now:
cy.get(failureElementSelector).should("not.exist");
cy.get(successElementSelector).should("exist");
The other way is to use the same element to display the error/failure, and check for the contents of it to determine if it's a success or failure. That's basically the same thing as the above.