How to check that an element does not exist on the screen with Cypress

In today's “Pinches of Cypress”, learn how to check that an element is not present at the DOM

This post's motivation came from the following question, by Anderson Faria, in a comment in another post.

How can we ensure that an element does not exist on the screen (e.g., a button or a menu option)?

Thanks for the question, Anderson!

The answer is simple.

Let's look at an example.

describe('Pinches of Cypress', () => {
  it('"Pinches of pepper" is not present at the DOM', () => {
    cy.visit('https://example.com')

    cy.contains('Pinches of pepper')
      .should('not.exist')
  })
})

The same is true when identifying elements by a CSS selector (see below.)

describe('Pinches of Cypress', () => {
  it('element with class "foo" is not present at the DOM', () => {
    cy.visit('https://example.com')

    cy.get('.foo').should('not.exist')
  })
})

That was easy.

Soon there will be more!

What do you think about the series?

I'm looking forward to hearing your feedback.

This post was originally published in Portuguese on the Talking About Testing blog.

Would you like to learn about test automation with Cypress? Get to know my online courses on Udemy.