cy.siblings() and cy.closest() in Cypress - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to select all siblings of the element with class 'active'.

Cypress

cy.get('.active').[1]()

Drag options to blanks, or click blank then click option'

Aparent

Bclosest

Csiblings

Dchildren

Attempts:

3 left

💡 Hint

Common Mistakes

Using closest() instead of siblings().

Using children() which selects child elements, not siblings.

The cy.siblings() command selects all sibling elements of the current element.

2fill in blank

medium

Complete the code to find the closest ancestor with class 'container' of the element with id 'submit'.

Cypress

cy.get('#submit').[1]('.container')

Drag options to blanks, or click blank then click option'

Aclosest

Bsiblings

Cparent

Dchildren

Attempts:

3 left

💡 Hint

Common Mistakes

Using siblings() which selects elements on the same level, not ancestors.

Using children() which selects descendants, not ancestors.

The cy.closest() command finds the nearest ancestor that matches the selector.

3fill in blank

hard

Fix the error in the code to correctly select siblings of the element with class 'item'.

Cypress

cy.get('.item').[1]('.active')

Drag options to blanks, or click blank then click option'

Asiblings

Bparent

Cfind

Dclosest

Attempts:

3 left

💡 Hint

Common Mistakes

Using closest() which selects ancestors, not siblings.

Using find() which selects descendants, not siblings.

To select siblings with a specific class, use siblings('.active').

4fill in blank

hard

Fill both blanks to select the closest ancestor with class 'list' and then get its siblings.

Cypress

cy.get('.selected').[1]('.list').[2]()

Drag options to blanks, or click blank then click option'

Aclosest

Bsiblings

Cparent

Dchildren

Attempts:

3 left

💡 Hint

Common Mistakes

Using parent() instead of closest() which may not find the correct ancestor.

Using children() instead of siblings().

First, closest('.list') finds the nearest ancestor with class 'list'. Then, siblings() selects its siblings.

5fill in blank

hard

Fill all three blanks to get the element with id 'start', find its closest ancestor with class 'wrapper', then get that ancestor's siblings.

Cypress

cy.get('#start').[1]('.wrapper').[2]().[3]()

Drag options to blanks, or click blank then click option'

Aclosest

Bsiblings

Cparent

Dchildren

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up the order of commands.

Using parent() instead of closest().

The code finds the closest ancestor with closest('.wrapper'), then gets its siblings with siblings(), and finally gets the children of those siblings with children().