cy.find() within parent in Cypress - Test Execution Trace

Test Overview

This test opens a webpage, locates a parent element, then uses cy.find() to find a child button inside it. It clicks the button and verifies the button text changes to confirm the click worked.

Test Code - Cypress

Cypress

describe('Test cy.find() within parent', () => {
  it('finds a button inside a parent and clicks it', () => {
    cy.visit('https://example.cypress.io/commands/actions')
    cy.get('.action-form')
      .find('button')
      .should('have.text', 'Submit')
      .click()
      .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/commands/actions'	Page loaded with form containing a button labeled 'Submit'	-	PASS
3	Find element with class '.action-form' using cy.get()	Parent form element found on page	-	PASS
4	Within the parent form, find the child 'button' element using cy.find()	Button element inside form located with text 'Submit'	Check button text is exactly 'Submit'	PASS
5	Click the found button	Button clicked, page updates button text to 'Clicked'	Verify button text changed to 'Clicked'	PASS
6	Test ends successfully	Button text confirmed changed, test passed	-	PASS

Failure Scenario

Failing Condition: Button inside the parent form is not found or text does not match 'Submit'

Execution Trace Quiz - 3 Questions

What does cy.find() do in this test?

A Clicks the parent element

B Finds any element on the page regardless of parent

C Finds a child element inside the previously found parent element

D Navigates to a new page

Key Result

Using cy.find() helps scope searches to a specific parent element, making tests more reliable and faster by avoiding searching the whole page.