Multiple assertions chaining in Cypress - Test Execution Trace

Test Overview

This test opens a webpage, finds a button, clicks it, and then checks multiple things about a message that appears. It verifies the message is visible, has the correct text, and has the right CSS color.

Test Code - Cypress

Cypress

describe('Multiple assertions chaining test', () => {
  it('checks message visibility, text, and color after button click', () => {
    cy.visit('https://example.cypress.io')
    cy.get('#show-message-btn').click()
    cy.get('#message')
      .should('be.visible')
      .and('have.text', 'Hello, Cypress!')
      .and('have.css', 'color', 'rgb(0, 128, 0)')
  })
})

Execution Trace - 9 Steps

Step	Action	System State	Assertion	Result
1	Test starts	Test runner is ready to execute the test	-	PASS
2	Browser opens and navigates to 'https://example.cypress.io'	The example Cypress page is loaded in the browser	-	PASS
3	Find element with id 'show-message-btn' using cy.get	Button with id 'show-message-btn' is found on the page	-	PASS
4	Click the button '#show-message-btn'	Button is clicked, triggering message display	-	PASS
5	Find element with id 'message' using cy.get	Message element is present in the DOM	-	PASS
6	Assert the message is visible using .should('be.visible')	Message is visible on the page	Message visibility is true	PASS
7	Assert the message text is 'Hello, Cypress!' using .and('have.text', ...)	Message text content is 'Hello, Cypress!'	Message text matches expected	PASS
8	Assert the message CSS color is 'rgb(0, 128, 0)' using .and('have.css', ...)	Message color style is green (rgb(0, 128, 0))	Message color matches expected	PASS
9	Test ends successfully	All assertions passed, test completed	-	PASS

Failure Scenario

Failing Condition: The message element is not visible, or text/color does not match expected values

Execution Trace Quiz - 3 Questions

What does the test check after clicking the button?

A That the message is visible, has correct text, and correct color

B That the button disappears

C That the page URL changes

D That an alert pops up

Key Result

Chaining multiple assertions on the same element in Cypress makes tests concise and readable while verifying several properties in one go.