Child commands in Cypress - Test Execution Trace

Test Overview

This test uses Cypress child commands to find a list and click a specific item inside it. It verifies that the clicked item has the expected text.

Test Code - Cypress

Cypress

describe('Child commands test', () => {
  it('Clicks a child item in a list and verifies text', () => {
    cy.visit('https://example.cypress.io/commands/actions')
    cy.get('.action-list')
      .find('li')
      .contains('Click')
      .click()
      .should('have.text', 'Click')
  })
})

Execution Trace - 7 Steps

Step	Action	System State	Assertion	Result
1	Test starts	Cypress test runner initialized	-	PASS
2	Browser opens and navigates to 'https://example.cypress.io/commands/actions'	Page with action commands loaded, showing a list with class 'action-list'	-	PASS
3	Find element with class '.action-list'	List element found containing multiple <li> items	Element '.action-list' exists	PASS
4	Within '.action-list', find all 'li' child elements	List items found inside '.action-list'	Child 'li' elements exist	PASS
5	From the 'li' elements, find the one containing text 'Click'	Specific list item with text 'Click' found	List item text contains 'Click'	PASS
6	Click the found list item	List item clicked, page may respond to click	-	PASS
7	Assert the clicked item has text 'Click'	Text verified on clicked item	Text equals 'Click'	PASS

Failure Scenario

Failing Condition: The list item with text 'Click' is not found inside '.action-list'

Execution Trace Quiz - 3 Questions

What does the command '.find('li')' do in this test?

A It verifies the text of the list

B It clicks the first 'li' element on the page

C It finds all 'li' child elements inside '.action-list'

D It navigates to a new page

Key Result

Using child commands like '.find()' helps narrow down elements inside a parent, making tests more precise and easier to maintain.