cy.siblings() and cy.closest() in Cypress - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

What elements does cy.siblings() select?

Given the following HTML structure:

<ul>
  <li class="item">Item 1</li>
  <li class="item selected">Item 2</li>
  <li class="item">Item 3</li>
</ul>

And the Cypress command:

cy.get('.selected').siblings()

Which elements will be selected by cy.siblings()?

Cypress

cy.get('.selected').siblings()

A No elements are selected

B Only the <li> element with text 'Item 2'

C All <li> elements including 'Item 2'

D The <li> elements with text 'Item 1' and 'Item 3'

💡 Hint

Remember, siblings() selects elements sharing the same parent except the element itself.

The cy.get('.selected') selects the <li> with text 'Item 2'. The siblings() command selects all sibling elements sharing the same parent but excludes the element itself. So it selects the <li> elements with text 'Item 1' and 'Item 3'.

❓ Predict Output

intermediate

What element does cy.closest() select?

Given the HTML:

<div class="container">
  <section>
    <article class="post">
      <p class="text">Hello</p>
    </article>
  </section>
</div>

And the Cypress command:

cy.get('.text').closest('section')

Which element will be selected by closest('section')?

Cypress

cy.get('.text').closest('section')

A The &lt;article&gt; element with class 'post'

B The &lt;section&gt; element that contains the &lt;p&gt;

C The &lt;div&gt; with class 'container'

D The &lt;p&gt; element with class 'text'

💡 Hint

The closest() command finds the nearest ancestor matching the selector.

The closest('section') command starts from the element with class 'text' and looks up the DOM tree for the nearest ancestor that matches the selector 'section'. It finds the <section> element wrapping the <article>.

❓ assertion

advanced

Which assertion correctly verifies cy.siblings() selection count?

You want to check that the siblings of the element with id 'active' are exactly 3.
Which assertion is correct?

Cypress

cy.get('#active').siblings()

A cy.get('#active').siblings().should('have.length', 3)

B cy.get('#active').siblings().should('contain.length', 3)

C cy.get('#active').siblings().should('have.count', 3)

D cy.get('#active').siblings().should('length', 3)

💡 Hint

Check the correct Cypress assertion syntax for length.

The correct assertion to check the number of elements is should('have.length', number). Other options use invalid or incorrect assertion names.

🔧 Debug

advanced

Why does cy.closest() fail to find the element?

Given this code:

cy.get('.button').closest('.container')

But the test fails because no element is found.
HTML snippet:

<div class="wrapper">
  <button class="button">Click</button>
</div>

Why does closest('.container') fail?

Cypress

cy.get('.button').closest('.container')

A Because there is no ancestor with class 'container' wrapping the button

B Because <code>closest()</code> only searches siblings, not ancestors

C Because the selector '.button' is incorrect

D Because <code>closest()</code> requires a tag name, not a class selector

💡 Hint

Check the HTML structure and the selector used in closest().

The closest() command looks for the nearest ancestor matching the selector. Since the button is inside a <div> with class 'wrapper' but not 'container', it fails to find any matching ancestor.

🧠 Conceptual

expert

How do cy.siblings() and cy.closest() differ in element selection?

Choose the best description of the difference between cy.siblings() and cy.closest().

A <code>cy.siblings()</code> selects the element itself; <code>cy.closest()</code> selects child elements.

B <code>cy.siblings()</code> selects all ancestor elements; <code>cy.closest()</code> selects all sibling elements.

C <code>cy.siblings()</code> selects elements sharing the same parent except the element itself; <code>cy.closest()</code> selects the nearest ancestor matching a selector.

D <code>cy.siblings()</code> selects descendants; <code>cy.closest()</code> selects elements with the same class.

💡 Hint

Think about the relationship in the DOM tree each command targets.

cy.siblings() finds elements that share the same parent but excludes the element itself. cy.closest() finds the nearest ancestor element that matches the selector, moving up the DOM tree.