Child commands in Cypress

Introduction

Child commands help you find elements inside other elements on a web page. This makes tests more precise and easier to read.

When you want to check a button inside a specific form.

When you need to find a list item inside a certain list.

When you want to test a link inside a navigation menu.

When you want to limit your search to a part of the page to avoid confusion.

When you want to chain commands to make your test steps clear.

Syntax

Cypress

cy.get('parentSelector').find('childSelector')

cy.get() finds the parent element first.

.find() looks for child elements inside the parent.

Examples

Finds all buttons inside the form element.

Cypress

cy.get('form').find('button')

Finds all links inside the element with id 'menu'.

Cypress

cy.get('#menu').find('a')

Checks that the list has exactly 3 list items inside.

Cypress

cy.get('.list').find('li').should('have.length', 3)

Sample Program

This test visits a page, finds a button inside a form with class 'action-form', clicks it, and then checks the button has the class 'btn'.

Cypress

describe('Child commands example', () => {
  it('finds a button inside a form and clicks it', () => {
    cy.visit('https://example.cypress.io/commands/actions')
    cy.get('.action-form').find('button').click()
    cy.get('.action-form').find('button').should('have.class', 'btn')
  })
})

Important Notes

Always use specific selectors to avoid selecting wrong elements.

Child commands help keep tests organized and reduce errors.

Summary

Child commands find elements inside other elements.

Use .find() after cy.get() to locate children.

This makes tests clearer and more reliable.