Child commands in Cypress - Build an Automation Script

Verify child elements using Cypress child commands

Preconditions (1)

Step 1: Open the web page at 'http://localhost:3000/items'.

Step 2: Locate the container element with id 'item-list'.

Step 3: Within this container, find all child elements with the class 'item'.

Step 4: Verify that there are exactly 5 child elements with class 'item'.

Step 5: For the first child element, verify it contains the text 'Item 1'.

Step 6: For the last child element, verify it contains the text 'Item 5'.

✅ Expected Result: The container with id 'item-list' has exactly 5 child elements with class 'item'. The first child contains text 'Item 1' and the last child contains text 'Item 5'.

Automation Requirements - Cypress

Assertions Needed:

Assert the number of child elements with class 'item' is 5

Assert the first child element contains text 'Item 1'

Assert the last child element contains text 'Item 5'

Best Practices:

Use cy.get() to locate parent container

Use .children() to get child elements

Use .should() for assertions

Avoid hardcoding XPath selectors

Use explicit and clear selectors (id, class)

Chain commands properly to maintain Cypress flow

Automated Solution

Cypress

describe('Child commands test', () => {
  beforeEach(() => {
    cy.visit('http://localhost:3000/items');
  });

  it('should verify child elements inside #item-list', () => {
    cy.get('#item-list')
      .children('.item')
      .should('have.length', 5)
      .first()
      .should('contain.text', 'Item 1');

    cy.get('#item-list')
      .children('.item')
      .last()
      .should('contain.text', 'Item 5');
  });
});

The test starts by visiting the target URL in the beforeEach hook to ensure a fresh page load before each test.

We use cy.get('#item-list') to select the container by its id, which is a reliable and clear selector.

Then, .children('.item') fetches all direct child elements with the class item inside the container.

We assert the number of these child elements is exactly 5 using .should('have.length', 5).

Next, we check the first child element contains the text 'Item 1' using .first().should('contain.text', 'Item 1').

Similarly, we check the last child element contains the text 'Item 5' using .last().should('contain.text', 'Item 5').

This approach uses Cypress chaining and child commands properly, making the test clear, maintainable, and reliable.

Common Mistakes - 4 Pitfalls

{'mistake': "Using cy.get('.item') directly instead of using .children() from the parent container", 'why_bad': 'This can select elements outside the intended container, leading to false positives or negatives.', 'correct_approach': 'Always scope child element selection by first getting the parent container, then using .children() to get direct children.'}

{'mistake': 'Using hardcoded XPath selectors like cy.xpath(\'//div[@id="item-list"]//div[@class="item"]\')', 'why_bad': 'XPath selectors are less readable and harder to maintain compared to CSS selectors in Cypress.', 'correct_approach': 'Use CSS selectors with cy.get() and .children() for better readability and maintainability.'}

Not chaining commands properly and calling cy.get() multiple times unnecessarily

Using .find() instead of .children() when only direct children are needed

Bonus Challenge

Now add data-driven testing with 3 different containers each having different numbers of child items and verify their counts and first/last item texts.

Show Hint