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.

Practice

1. What does the Cypress command cy.parent() do?

easy

A. Finds all child elements of the current element

B. Finds the immediate parent element of the current element

C. Finds all sibling elements of the current element

D. Finds the first child element of the current element

Solution

1. Step 1: Understand the purpose of cy.parent()

   This command is used to get the immediate parent of the currently selected element in the DOM tree.

2. Step 2: Compare with other options

   cy.children() finds children, siblings are not targeted by cy.parent(), and it does not find the first child specifically.

3. Final Answer:

   Finds the immediate parent element of the current element -> Option B

4. Quick Check:

   cy.parent() = immediate parent [OK]

Hint: Parent means one level up in the DOM tree [OK]

Common Mistakes:

• Confusing parent with children
• Thinking it finds all ancestors
• Assuming it finds siblings

2. Which of the following is the correct syntax to get all direct children of an element with class container in Cypress?

easy

A. cy.get('.container').children()

B. cy.get('.container').parent()

C. cy.get('.container').child()

D. cy.get('.container').parents()

Solution

1. Step 1: Identify the correct command for children

   The command to get direct children is children(), so cy.get('.container').children() is correct.

2. Step 2: Check other options for correctness

   parent() gets the parent, child() is not a valid Cypress command, and parents() gets all ancestors, not children.

3. Final Answer:

   cy.get('.container').children() -> Option A

4. Quick Check:

   children() gets direct children [OK]

Hint: Use children() to get direct children elements [OK]

Common Mistakes:

• Using parent() instead of children()
• Using incorrect method child()
• Confusing parents() with children()

3. Consider the following HTML structure:

<div class='grandparent'>
  <div class='parent'>
    <span class='child'>Hello</span>
    <span class='child'>World</span>
  </div>
</div>

What will cy.get('.child').parent().should('have.class', 'parent') assert?

medium

A. That the grandparent has class 'parent'

B. That the children of .parent have class 'child'

C. That the parent of each .child element has class 'parent'

D. That the .child elements have class 'parent'

Solution

1. Step 1: Understand the command chain

   cy.get('.child') selects both span elements. parent() gets their immediate parent, which is the div with class 'parent'.

2. Step 2: Analyze the assertion

   The assertion checks if the parent element has class 'parent', which is true for both .child elements.

3. Final Answer:

   That the parent of each .child element has class 'parent' -> Option C

4. Quick Check:

   parent() gets immediate parent with class 'parent' [OK]

Hint: parent() gets immediate parent element of selected children [OK]

Common Mistakes:

• Thinking parent() gets grandparent
• Confusing children with parent
• Assuming assertion checks children classes

4. You wrote this Cypress test:

cy.get('.list').children('.item').parent('.container')

But it fails with an error. What is the likely cause?

medium

A. The parent() command does not accept a selector argument

B. The children() command cannot filter by class

C. The parent() command returns all ancestors, not immediate parent

D. The children() command returns siblings, not children

Solution

1. Step 1: Check parent() usage

   The parent() command in Cypress does not accept any selector argument; it always returns the immediate parent element.

2. Step 2: Verify other commands

   children() can filter by selector, so that part is valid. parent() does not return all ancestors, only immediate parent. children() returns direct children, not siblings.

3. Final Answer:

   The parent() command does not accept a selector argument -> Option A

4. Quick Check:

   parent() takes no selector argument [OK]

Hint: parent() never takes a selector; children() can filter [OK]

Common Mistakes:

• Passing selector to parent()
• Confusing children() filtering
• Thinking parent() returns all ancestors

5. Given this HTML:

<ul class='menu'>
  <li class='item'>Home</li>
  <li class='item'>About</li>
  <li class='item'>Contact</li>
</ul>
<div class='footer'>Footer content</div>

Which Cypress command chain correctly selects the <ul> element starting from the <li> elements with class item?

hard

A. cy.get('.item').children('ul')

B. cy.get('.item').parent().parent()

C. cy.get('.item').children()

D. cy.get('.item').parent()

Solution

1. Step 1: Identify the parent of .item elements

   Each <li class='item'> is a direct child of the <ul class='menu'> element.

2. Step 2: Use parent() to get immediate parent

   cy.get('.item').parent() correctly gets the immediate parent <ul class='menu'> element.

3. Step 3: Check other options

   children('ul') is wrong because <li> elements do not have <ul> children. parent().parent() goes too far up. children() gets children, not parent.

4. Final Answer:

   cy.get('.item').parent() -> Option D

5. Quick Check:

   parent() gets immediate parent [OK]

Hint: Use parent() to get immediate parent element [OK]

Common Mistakes:

• Using children() to get parent
• Going two levels up unnecessarily
• Assuming children() returns parent