Common assertions (exist, be.visible, have.text) in Cypress - Test Execution Trace

Test Overview

This test checks if a specific button exists on the page, is visible to the user, and has the correct text label. It verifies these common assertions using Cypress commands.

Test Code - Cypress

Cypress

describe('Common assertions test', () => {
  it('checks button existence, visibility, and text', () => {
    cy.visit('https://example.cypress.io')
    cy.get('#query-btn')
      .should('exist')
      .and('be.visible')
      .and('have.text', 'Button')
  })
})

Execution Trace - 8 Steps

Step	Action	System State	Assertion	Result
1	Test starts	Test runner initialized, no browser opened yet	-	PASS
2	Browser opens	Browser window opens ready for navigation	-	PASS
3	Navigates to 'https://example.cypress.io'	Page loads with example Cypress site content	-	PASS
4	Finds element with selector '#query-btn' using cy.get	Button element with id 'query-btn' is present in DOM	Checks element exists in DOM	PASS
5	Checks element 'exist' assertion	Element is confirmed present	Element exists in the DOM	PASS
6	Checks element 'be.visible' assertion	Element is visible on the page	Element is visible to the user	PASS
7	Checks element 'have.text' assertion with text 'Button'	Element text content is 'Button'	Element text matches expected 'Button'	PASS
8	Test ends	All assertions passed, test completes successfully	-	PASS

Failure Scenario

Failing Condition: The element with selector '#query-btn' does not exist, is hidden, or has different text

Execution Trace Quiz - 3 Questions

What does the 'exist' assertion check in this test?

A The element has the correct text

B The element is visible to the user

C The element is present in the page's HTML DOM

D The element is clickable

Key Result

Use multiple chained assertions in Cypress to verify different properties of the same element efficiently, improving test clarity and reliability.