cy.contains() for text matching in Cypress - Test Execution Trace

Test Overview

This test checks if a button with specific text is present on the page and clicks it. It verifies that the button click triggers the expected change in the page content.

Test Code - Cypress

Cypress

describe('Test cy.contains() for text matching', () => {
  it('Finds button by text and clicks it', () => {
    cy.visit('https://example.cypress.io')
    cy.contains('type').click()
    cy.url().should('include', '/commands/actions')
    cy.get('.action-email').should('be.visible')
  })
})

Execution Trace - 5 Steps

Step	Action	System State	Assertion	Result
1	Test starts	Test runner initialized, no browser opened yet	-	PASS
2	Browser opens and navigates to 'https://example.cypress.io'	Browser shows the Cypress example homepage	-	PASS
3	Finds element containing text 'type' using cy.contains('type')	Button or link with text 'type' is visible on the page	Element with text 'type' is found	PASS
4	Clicks the element found by cy.contains('type')	Page navigates to '/commands/actions' section	URL includes '/commands/actions'	PASS
5	Finds input element with class '.action-email' and checks visibility	Input field for email is visible on the page	Element '.action-email' is visible	PASS

Failure Scenario

Failing Condition: The text 'type' is not found on the page, so cy.contains() fails to find the element

Execution Trace Quiz - 3 Questions

What does cy.contains('type') do in this test?

A Finds an element with the class 'type'

B Finds an element with the id 'type'

C Finds an element that has the text 'type' anywhere inside it

D Finds an element with the attribute type='button'

Key Result

Using cy.contains() is a simple and readable way to find elements by their visible text, making tests easier to write and understand.