Why Common assertions (exist, be.visible, have.text) in Cypress? - Purpose & Use Cases

The Big Idea

What if you could catch hidden bugs just by writing a few simple checks?

The Scenario

Imagine you have a website with many buttons and messages. You want to check if a button is there, if it can be seen, and if it shows the right words. Doing this by looking at the screen and clicking around takes a lot of time and you might miss things.

The Problem

Manually checking each element is slow and tiring. You can easily forget to check some parts or make mistakes. Also, if the website changes, you have to check everything again by hand. This wastes time and can cause bugs to slip through.

The Solution

Using common assertions like exist, be.visible, and have.text in Cypress lets you write simple commands that automatically check if elements are present, visible, and have the correct text. This makes testing fast, reliable, and repeatable.

Before vs After

✗ Before

if (document.querySelector('#submit')) {
  if (document.querySelector('#submit').offsetParent !== null) {
    if (document.querySelector('#submit').textContent === 'Send') {
      console.log('Button is ready')
    }
  }
}

✓ After

cy.get('#submit').should('exist').and('be.visible').and('have.text', 'Send')

What It Enables

It enables you to quickly and confidently check that your web page works as expected without missing important details.

Real Life Example

For example, when testing a login page, you can automatically verify that the 'Login' button exists, is visible to users, and shows the correct label before trying to click it.

Key Takeaways

Manual checks are slow and error-prone.

Common assertions automate presence, visibility, and text checks.

This leads to faster, more reliable testing.