How do I test that Cypress element exists while another element doesn't, but at the same time?-CodePudding

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.

CodePudding user response：

If you're sure that one or the other selector turns up eventually, combine them into a multiple selector.

Ref jQuery 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
  })

CodePudding user response：

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.

CodePudding user response：

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");