should() with chainers in Cypress - Build an Automation Script

Verify multiple properties of a button using should() with chainers

Preconditions (1)

Step 1: Locate the button with id 'submit-btn'

Step 2: Verify the button is visible

Step 3: Verify the button is enabled

Step 4: Verify the button has the text 'Submit'

✅ Expected Result: The button is visible, enabled, and displays the text 'Submit'

Automation Requirements - Cypress

Assertions Needed:

Verify element visibility

Verify element enabled state

Verify element text content

Best Practices:

Use should() with multiple chainers for concise assertions

Use data-cy or id selectors for stable element targeting

Avoid hardcoded waits; rely on Cypress automatic waits

Automated Solution

Cypress

describe('Button properties test', () => {
  beforeEach(() => {
    cy.visit('https://example.com/sample-page')
  })

  it('should verify button visibility, enabled state, and text using should() with chainers', () => {
    cy.get('#submit-btn')
      .should('be.visible')
      .and('be.enabled')
      .and('have.text', 'Submit')
  })
})

The test visits the sample page before each test to ensure a fresh state.

It locates the button using its id #submit-btn, which is a stable selector.

The should() command is used with multiple chainers: be.visible to check visibility, be.enabled to check if the button is enabled, and have.text to verify the button's text content.

This chaining makes the test concise and easy to read.

Cypress automatically waits for elements to appear, so no explicit waits are needed.

Common Mistakes - 3 Pitfalls

Using multiple separate should() calls instead of chaining

Using unstable selectors like classes that change frequently

Using hardcoded waits like cy.wait(5000)

Bonus Challenge

Now add data-driven testing to verify the button text for three different buttons with ids 'submit-btn', 'cancel-btn', and 'reset-btn' and their expected texts 'Submit', 'Cancel', and 'Reset' respectively.

Show Hint