Using Cypress, how to test for an element not existing?

Question

Testing for an element existing is as easy as

cy.get('.hello');

How does one assert that this element does not exist?

Answer 1

You can easily just go

cy
  .get('.hello')
  .should('not.exist');

Works just ok for me. However, you need to be careful about timing for such a command. For example, if you have this command right after your page loads, it can give you a false positive, because the element hasn’t been loaded and therefore does not exist in DOM.

For me, the best practice would be to do additional cy.get on something I am pretty sure is loaded or .should('be.visible') at the time the other element does not exist.

For example, if you have a modal that receives an input and then disappears after input is submitted, I would assert on visibility of page that is below the modal, like this:

cy
  .get('.page-body');

cy
  .get('.modal-trigger')
  .click();

cy
  .get('.modal')
  .should('be.visible')
  .type('text')
  .get('.submit')
  .click();

cy
  .get('.page-body')
  .should('be.visible');

cy
  .get('.modal')
  .should('not.exist');

Since Cypress checks if an element is not covered by any other element, cy.get('.page-body') should give you a pretty good reference on the current situation in your app. Additional check for cy.get('.modal').should('not.exist') is just another way to make sure that everything happened as intended. Sometimes this makes sense, sometimes it’s overkill.