DEV Community

loading...
Cover image for How to check that an element does not exist on the screen with Cypress

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

Walmyr Filho
I'm a software engineer that loves testing. I'm also a clean coder, blogger, YouTuber, Cypress.io Ambassador, writer, online teacher, mentor, consultant, speaker, an active member of tech communities.
Updated on ・1 min read

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')
  })
})
Enter fullscreen mode Exit fullscreen mode

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')
  })
})
Enter fullscreen mode Exit fullscreen mode

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.

Discussion (2)

Collapse
cactuswren2020 profile image
Michael W. Cho

It works, thanks :)

Collapse
walmyrlimaesilv profile image
Walmyr Filho Author

I'm glad!