DEV Community

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

Posted on • Edited on

4

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')
  })
})
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.

Image of Datadog

Create and maintain end-to-end frontend tests

Learn best practices on creating frontend tests, testing on-premise apps, integrating tests into your CI/CD pipeline, and using Datadog’s testing tunnel.

Download The Guide

Top comments (2)

Collapse
 
cactuswren2020 profile image
Michael W. Cho

It works, thanks :)

Collapse
 
walmyrlimaesilv profile image
Walmyr

I'm glad!

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay