Child commands in Cypress - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to get the child element with tag 'button' inside '#container'.

Cypress

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

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

Achild

Bfind

Cchildren

Dparent

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'child' which does not exist in Cypress.

Using 'find' which searches all descendants, not just direct children.

The 'children' command gets the direct child elements matching the selector inside the parent element.

2fill in blank

medium

Complete the code to get the first child element of '#list'.

Cypress

cy.get('#list').[1]().first()

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

Achildren

Bfind

Cparent

Dsiblings

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'find' which searches all descendants, not just direct children.

Using 'parent' which goes up the DOM tree.

The 'children' command gets all direct children, then '.first()' picks the first one.

3fill in blank

hard

Fix the error in the code to get the child element with class '.item' inside '#menu'.

Cypress

cy.get('#menu').[1]('.item')

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

Aparent

Bchildren

Cchild

Dsiblings

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'parent' which goes up the DOM tree.

Using 'siblings' which selects elements at the same level.

The 'children' command selects direct child elements matching the selector inside the parent element.

4fill in blank

hard

Fill both blanks to get all direct children with class '.active' inside '#nav' and click the first one.

Cypress

cy.get('#nav').[1]('[2]').first().click()

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

Achildren

Bchild

C.active

D#active

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'child' which selects only one child, not all.

Using '#active' which is an ID selector, not a class.

Use 'children' to get all direct children, and '.active' as the class selector for the children.

5fill in blank

hard

Fill all three blanks to get the child 'li' elements inside '#sidebar', filter those with class '.selected', and assert they exist.

Cypress

cy.get('#sidebar').[1]('[2]').filter('[3]').should('exist')

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

Achildren

Bli

C.selected

Dfind

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'find' which searches all descendants, not just direct children.

Using '#selected' which is an ID selector, not a class.

Use 'children' to get direct 'li' children, then filter those with '.selected' class, finally assert they exist.