cy.parent() and cy.children() in Cypress - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

What is the output of this Cypress command chain?

Given the HTML structure below, what will cy.get('.item').parent().should('have.class', 'container') verify?

<div class="container">
  <ul>
    <li class="item">One</li>
    <li class="item">Two</li>
  </ul>
</div>

Cypress

cy.get('.item').parent().should('have.class', 'container')

A The test will fail because '.item' elements have no parent.

B The test will fail because the immediate parent of '.item' is 'ul', not '.container'.

C The test will pass because '.container' is an ancestor of '.item'.

D The test will pass because 'parent()' selects all ancestors with class '.container'.

💡 Hint

Remember that parent() selects only the immediate parent element, not all ancestors.

The parent() command in Cypress selects the direct parent of the element. Here, the direct parent of '.item' is the <ul> element, which does not have the class 'container'. Therefore, the assertion fails.

❓ assertion

intermediate

Which assertion correctly verifies the number of children elements?

Given this HTML snippet:

<div class="list">
  <span>A</span>
  <span>B</span>
  <span>C</span>
</div>

Which Cypress command correctly asserts that the .list element has exactly 3 children?

A cy.get('.list').children().should('have.length', 3)

B cy.get('.list').parent().should('have.length', 3)

C cy.get('.list').children('span').should('have.length', 3)

D cy.get('.list').children().should('contain.text', 3)

💡 Hint

Use children() to get direct children and should('have.length', n) to check count.

children() returns all direct child elements. The assertion should('have.length', 3) checks that there are exactly 3 children. Option A checks the parent, which is incorrect. Option A uses an invalid selector '.span' (should be 'span' without dot). Option A incorrectly uses contain.text to check count.

🔧 Debug

advanced

Why does this Cypress test fail to find the child element?

Consider this test code:

cy.get('.parent').children('.child').should('exist')

But the test fails even though the HTML contains a child with class 'child' inside '.parent'. What is the most likely reason?

A The '.child' class is misspelled in the HTML.

B The '.parent' selector is incorrect and does not match any element.

C The '.child' element is not a direct child but a deeper descendant of '.parent'.

D The 'children()' command selects all descendants, so the filter '.child' is ignored.

💡 Hint

Recall that children() only selects direct children, not nested descendants.

The children() command selects only direct children. If the '.child' element is nested deeper (e.g., a grandchild), it won't be found. Option C and C are possible but less likely if the test setup is correct. Option C is false because children() does not select all descendants.

🧠 Conceptual

advanced

What is the difference between cy.parent() and cy.parents() in Cypress?

Choose the statement that best describes the difference between cy.parent() and cy.parents() commands.

A <code>cy.parent()</code> selects children; <code>cy.parents()</code> selects siblings.

B <code>cy.parent()</code> selects all ancestor elements; <code>cy.parents()</code> selects only the immediate parent.

C <code>cy.parent()</code> selects siblings; <code>cy.parents()</code> selects children.

D <code>cy.parent()</code> selects the immediate parent element; <code>cy.parents()</code> selects all ancestor elements up to the root.

💡 Hint

Think about the difference between immediate and all ancestors in the DOM tree.

cy.parent() selects only the direct parent element of the current subject. cy.parents() selects all ancestor elements up to the root of the DOM tree. The other options confuse these relationships.

❓ framework

expert

How to chain cy.children() and cy.parent() to verify a sibling's class?

Given this HTML:

<div class="wrapper">
  <div class="parent">
    <span class="child">Hello</span>
  </div>
  <div class="sibling">World</div>
</div>

Which Cypress command chain correctly verifies that the sibling of '.parent' has class 'sibling'?

A cy.get('.child').parent().siblings().should('have.class', 'sibling')

B cy.get('.child').children().parent().should('have.class', 'sibling')

C cy.get('.child').parent().children().should('have.class', 'sibling')

D cy.get('.child').siblings().parent().should('have.class', 'sibling')

💡 Hint

Use parent() to go up, then siblings() to find siblings.

Starting from '.child', parent() selects '.parent'. Then siblings() selects elements at the same level as '.parent', which includes '.sibling'. The assertion checks that this sibling has class 'sibling'. Other options misuse chaining or select wrong elements.