cy.parent() and cy.children() in Cypress - Build an Automation Script

Verify parent and children elements using cy.parent() and cy.children()

Preconditions (2)

Step 1: Visit the web page at 'http://localhost:3000/menu'.

Step 2: Locate the <ul> element with id 'menu'.

Step 3: Use cy.children() on the <ul> element to get all <li> children.

Step 4: Assert that there are exactly 3 <li> children.

Step 5: Select the first <li> child and use cy.parent() to get its parent element.

Step 6: Assert that the parent element has id 'menu'.

✅ Expected Result: The test confirms that the <ul> element has exactly 3 <li> children and that the parent of the first <li> is the <ul> with id 'menu'.

Automation Requirements - Cypress

Assertions Needed:

Assert the number of children elements is 3

Assert the parent element has the correct id attribute

Best Practices:

Use cy.get() with id selector for locating elements

Chain commands properly to maintain readability

Use should() for assertions

Avoid hardcoding XPath selectors

Use descriptive test names

Automated Solution

Cypress

describe('Test cy.parent() and cy.children()', () => {
  it('should verify parent and children elements correctly', () => {
    cy.visit('http://localhost:3000/menu');

    // Get the <ul> element with id 'menu'
    cy.get('#menu')
      // Get all <li> children
      .children('li')
      // Assert there are exactly 3 children
      .should('have.length', 3)
      // Select the first <li> child
      .first()
      // Get its parent element
      .parent()
      // Assert the parent has id 'menu'
      .should('have.id', 'menu');
  });
});

The test starts by visiting the target page with cy.visit(). Then it locates the <ul> element by its id menu using cy.get('#menu'). Next, cy.children('li') fetches all <li> child elements of the <ul>. We assert that there are exactly 3 children using should('have.length', 3). Then, we select the first child with first() and get its parent element using cy.parent(). Finally, we assert that the parent element has the id menu with should('have.id', 'menu'). This confirms the parent-child relationship is correct.

Common Mistakes - 4 Pitfalls

Using cy.parent() on the parent element itself

{'mistake': 'Using cy.children() without specifying the child selector', 'why_bad': 'cy.children() returns all direct children, which may include unwanted elements, leading to flaky tests.', 'correct_approach': "Use cy.children('li') or the specific child selector to target only relevant children."}

{'mistake': 'Hardcoding XPath selectors instead of using id or class selectors', 'why_bad': 'XPath selectors are brittle and harder to maintain compared to CSS selectors like ids or classes.', 'correct_approach': "Use cy.get('#id') or cy.get('.class') for stable and readable selectors."}

Not chaining commands properly, causing timing issues

Bonus Challenge

Now add data-driven testing to verify parent and children for three different menu structures with varying number of <li> items.

Show Hint