Cypress Assertions

An assertion checks whether a condition on the page matches what you expect. Assertions form the actual "test" part of a test, since commands alone only perform actions. This topic explains how assertions work in Cypress.

The should Command

The should command attaches a condition to a previously selected element.

cy.get('.success-message').should('be.visible')

This line checks that an element with the class success-message appears visibly on the page.

A Simple Way to Picture It

Think of an assertion as a checkpoint on a road trip. At each checkpoint, someone checks whether your car has enough fuel or the right tire pressure. The trip only continues smoothly if every checkpoint passes its check.

Common Assertion Types

Cypress supports many built-in assertion phrases, each checking a different condition.

cy.get('#header').should('exist')
cy.get('#header').should('be.visible')
cy.get('#header').should('have.text', 'Welcome')
cy.get('#header').should('have.class', 'active')
cy.get('.item').should('have.length', 3)

Checking Text Content

The have.text assertion checks for an exact text match. The contain.text assertion checks that a partial phrase exists inside the element.

cy.get('.title').should('contain.text', 'Welcome')

Partial matches suit cases where surrounding text might change slightly over time.

Assertion Flow Diagram

Select Element
     |
     v
Attach Assertion (should)
     |
     v
Cypress checks the condition repeatedly
     |
     v
Condition met -> Pass
Condition not met within timeout -> Fail

Automatic Retrying

Cypress retries an assertion automatically until it passes or a timeout period ends. This behavior helps with pages that load content slightly after the initial page render. A test does not fail immediately just because content has not appeared yet.

Why Retrying Matters

Older testing tools often failed instantly if an element was not ready at the exact check moment. Cypress avoids this problem by rechecking the condition multiple times within a short window. This reduces false failures caused by normal page loading delays.

Checking Element State

Assertions can check whether an element is enabled, disabled, checked, or selected.

cy.get('#submit').should('be.disabled')
cy.get('#terms').should('be.checked')

Negative Assertions

Adding "not" before a condition reverses its meaning.

cy.get('.error').should('not.be.visible')
cy.get('#submit').should('not.be.disabled')

Negative assertions confirm that unwanted elements or states do not appear on the page.

Chaining Multiple Assertions

A single element can carry more than one assertion in a single line.

cy.get('.status')
  .should('be.visible')
  .and('have.text', 'Active')

The and keyword joins assertions together without repeating the selector.

Asserting on Values Instead of Elements

The expect function checks plain JavaScript values instead of page elements.

const total = 10 + 5
expect(total).to.equal(15)

This pattern helps when a test needs to check calculated values rather than page content.

Writing Readable Assertions

Clear assertions describe expected behavior without extra complexity. A single focused assertion is easier to debug than a long chain covering multiple unrelated checks. Breaking complex checks into separate lines improves readability for future readers.

Key Points

  • The should command attaches a condition to a selected element.
  • Cypress retries assertions automatically until they pass or time out.
  • Assertions can check visibility, text, state, and element count.
  • Adding "not" reverses the meaning of an assertion.
  • The expect function checks plain values outside of page elements.

Leave a Comment

Your email address will not be published. Required fields are marked *