Test if element does not exist at first render

Current behavior:

I want to test correct SSR behaviour, meaning that the app should not be in “loading” state:

cy.contains("loading").should("not.exists")

2 possibilities:

• “loading” exists. Then, the should is retried for a few seconds. The test fails as expected, but is very time consuming. It can be bypassed by a timeout on the contains, but that’s clearly not intuitive.
• “loading” does not exist. The test still fails because “contains” fails. NOTE: this seems to be an erratic behaviour. I encountered this issue in 4.7 and it somehow disappeared when I tried to repro : … 👽

Note:

• the relevant StackOverflow question accepted answer is not clear, it targets removed elements.
• the relevant official doc, is also targeted at removed element. In some situation we might want a clear doc

Here, I specifically mean an element that never existed in the first place.

Desired behavior:

We should have an easy way to test non-existent element.

Test code to reproduce

  it("fails but very slowly  because of retries", () => {
    cy.visit("https://example.cypress.io");
    cy.contains("Kitchen Sink").should("not.exist");
  });
  it("fails faster (but not intuitive...)", () => {
    cy.visit("https://example.cypress.io");
    cy.contains("Kitchen Sink", { timeout: 10 }).should("not.exist");
  });
  /*
  I had this issue at some point, but can't repro anymore. Seems to happen eratically
 */
  it("fails on 'contains', while it should pass", () => {
    cy.visit("https://example.cypress.io");
    cy.contains("I do not exist").should("not.exist");
  });

Versions

4.7 Ubuntu

[jennifer-shehane]

“loading” exists. Then, the should is retried for a few seconds. The test fails as expected, but is very time consuming. It can be bypassed by a timeout on the contains, but that’s clearly not intuitive.

The timeout option is the correct way to decrease the wait time for an elements existence/non-existence if you are sure at that point there is no need to waiting for the element to ‘not exist’.

The equivalent of a ‘never exist’ would be setting timeout: 0 to turn off Cypress’ retry mechanism. I think it’s unlikely we would add support for a ‘never.exists’ chainer.

“loading” does not exist. The test still fails because “contains” fails. NOTE: this seems to be an erratic behaviour. I encountered this issue in 4.7 and it somehow disappeared when I tried to repro : … 👽

We’ll need a reproducible example of this in order to look into it.

---

You may be running into a situation described in https://github.com/cypress-io/cypress/issues/205 where there can be some false positives.

Please comment in this issue with a reproducible example and we will consider reopening the issue.

[papb]

We ended up doing something like:

const checkForNeverBePresent = function (locator, maxTimeout = 2000){
  // select a parent element, that is for sure present.
  cy.get('body', {log: false}).then(($body) => {

    // then check with jQuery, that the undesired child element doesn't exists in DOM
    if($body.find('locator-string').length > 0) {
      console.error("BAD")
    } else {
    
      // recursive Call for timeout-check
      maxTimeout -= 100
      checkForNeverBePresent (locator, maxTimeout)
    }
  });
}

const element = '.snackbar.is-danger'
checkForNeverBePresent(element, 5000)

It’s an annoying workaround, but it does the job.

@zwingliernst Are you sure your timeout is working here? I don’t see any waits, it seems you’re recursing immediately so all your 50 calls (5000/100) happen synchronously.