How to use chained assertions cypress

CypressHow-ToBeginner · 4 min read

How to Use Chained Assertions in Cypress for Effective Testing

In Cypress, you use chained assertions by linking multiple .should() commands or combining assertions inside a single .should() callback. This lets you check several conditions on the same element in one smooth flow, making tests easier to read and maintain.

📐

Syntax

Chained assertions in Cypress use the .should() command multiple times or combine multiple checks inside one .should() callback function.

Each .should() checks a condition on the element found by the previous command.

Single assertion: cy.get(selector).should('have.text', 'Hello')
Multiple chained assertions: cy.get(selector).should('be.visible').should('contain', 'Hello')
Multiple assertions in one callback: cy.get(selector).should(($el) => { expect($el).to.be.visible; expect($el).to.contain('Hello'); })

javascript

cy.get('button').should('be.visible').should('contain', 'Submit')

💻

Example

This example shows how to check that a button is visible, enabled, and contains the text 'Submit' using chained assertions.

javascript

describe('Chained Assertions Example', () => {
  it('checks multiple conditions on a button', () => {
    cy.visit('https://example.cypress.io')
    cy.get('button#submit')
      .should('be.visible')
      .should('not.be.disabled')
      .should('contain.text', 'Submit')
  })
})

Output

Test passes if the button with id 'submit' is visible, enabled, and contains 'Submit'. Otherwise, it fails.

⚠️

Common Pitfalls

Common mistakes when using chained assertions include:

Using multiple .should() without understanding they run separately, which can slow tests.
Not waiting for elements to appear before asserting, causing flaky failures.
Trying to chain assertions on different elements instead of the same one.

Better to combine assertions in one .should() callback for efficiency and clarity.

javascript

/* Wrong way: multiple separate should calls can be slower and less clear */
cy.get('input').should('be.visible')
cy.get('input').should('have.value', 'test')

/* Right way: chain on the same element */
cy.get('input').should('be.visible').should('have.value', 'test')

/* Best way: combine assertions in one callback */
cy.get('input').should(($el) => {
  expect($el).to.be.visible
  expect($el).to.have.value('test')
})

📊

Quick Reference

Assertion Style	Example	Description
Single .should()	cy.get('el').should('be.visible')	Check one condition on element
Chained .should()	cy.get('el').should('be.visible').should('contain', 'Hi')	Check multiple conditions in sequence
Callback .should()	cy.get('el').should($el => { expect($el).to.be.visible; expect($el).to.contain('Hi'); })	Combine multiple assertions in one function

✅

Key Takeaways

Use chained .should() commands to check multiple conditions on the same element smoothly.

Combine multiple assertions inside one .should() callback for clearer and faster tests.

Always ensure the element is ready before asserting to avoid flaky tests.

Avoid repeating cy.get() for the same element when chaining assertions.

Chained assertions improve test readability and maintainability.