cy.get() with CSS selectors in Cypress - Test Execution Trace

Test Overview

This test opens a webpage, finds a button using a CSS selector with cy.get(), clicks it, and verifies the button's text changes as expected.

Test Code - Cypress

Cypress

describe('Button click test', () => {
  it('finds button by CSS selector and verifies text change', () => {
    cy.visit('https://example.cypress.io')
    cy.get('button.btn-primary').click()
    cy.get('button.btn-primary').should('have.text', 'Clicked!')
  })
})

Execution Trace - 6 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 example Cypress page	-	PASS
3	Finds button element with CSS selector 'button.btn-primary' using cy.get()	Button with class 'btn-primary' is visible on the page	Element found successfully	PASS
4	Clicks the found button	Button is clicked, page updates button text	-	PASS
5	Finds the same button again with cy.get('button.btn-primary')	Button is visible with updated text	Element found successfully	PASS
6	Asserts the button text is 'Clicked!' using .should('have.text', 'Clicked!')	Button text is 'Clicked!'	Button text equals 'Clicked!'	PASS

Failure Scenario

Failing Condition: Button with CSS selector 'button.btn-primary' is not found or text does not change to 'Clicked!'

Execution Trace Quiz - 3 Questions

What does cy.get('button.btn-primary') do in this test?

A Clicks the button automatically

B Finds the button element with class 'btn-primary' on the page

C Checks if the button is visible

D Changes the button text

Key Result

Use clear and specific CSS selectors with cy.get() to reliably find elements. Always verify the element exists before interacting.