cy.siblings() and cy.closest() in Cypress - Cheat Sheet & Quick Revision

Recall & Review

beginner

What does cy.siblings() do in Cypress?

cy.siblings() selects all sibling elements of the current element. Siblings share the same parent.

beginner

What is the purpose of cy.closest() in Cypress?

cy.closest() finds the nearest ancestor element that matches a selector, starting from the current element and moving up the DOM tree.

intermediate

How does cy.siblings() differ from cy.closest()?

cy.siblings() selects elements at the same level (same parent), while cy.closest() selects the nearest matching ancestor (parent or higher).

beginner

Example: How to select all siblings of a button with class .submit-btn?

cy.get('button.submit-btn').siblings()

This selects all elements that share the same parent as the button with class submit-btn.

beginner

Example: How to find the closest <form> ancestor of an input field?

cy.get('input').closest('form')

This finds the nearest form element that contains the input.

What does cy.siblings() select?

A The first child element of the current element

B The closest ancestor element matching a selector

C All child elements of the current element

D All sibling elements of the current element

cy.siblings() selects all siblings, which are elements sharing the same parent as the current element.

What does cy.closest('div') do?

A Finds the nearest ancestor <code>div</code> element

B Selects all child <code>div</code> elements

C Selects all sibling <code>div</code> elements

D Finds the first child <code>div</code> element

cy.closest('div') finds the nearest ancestor div starting from the current element upwards.

Which command would you use to select elements at the same level as the current element?

A cy.closest()

B cy.siblings()

C cy.children()

D cy.parent()

cy.siblings() selects elements sharing the same parent, i.e., siblings.

If you want to find the nearest section ancestor of an element, which command is correct?

A cy.get('section')

B cy.siblings('section')

C cy.closest('section')

D cy.children('section')

cy.closest('section') finds the nearest ancestor section element.

True or False: cy.siblings() can select the current element itself.

A False

B True

C Only if specified

D Depends on the selector

cy.siblings() selects only siblings, not the current element itself.

Explain in your own words the difference between cy.siblings() and cy.closest().

Think about where the elements are located relative to the current element.

Describe a real-life scenario where you would use cy.closest() in a test.

Imagine you want to check something about a parent container of an element.