Chaining selectors in Cypress - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to select a button inside a form using chaining.

Cypress

cy.get('form').[1]('button')

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

Aclick

Bshould

Ccontains

Dfind

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'click' instead of 'find' will try to click the form, not select the button.

Using 'contains' searches for text, not a selector inside the form.

The find command is used to chain selectors and find a descendant element inside the previous selection.

2fill in blank

medium

Complete the code to get a list item with class 'active' inside a nav element.

Cypress

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

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

Ashould

Bclick

Cfind

Dcontains

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'click' will try to click the nav element, not select the list item.

Using 'contains' looks for text, not a selector.

find is used to locate elements inside the previously selected element.

3fill in blank

hard

Fix the error in chaining to get a child input inside a div with id 'search'.

Cypress

cy.get('#search').[1]('input').type('hello')

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

Afind

Bget

Cclick

Dcontains

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'get' again breaks the chain and searches the whole document.

Using 'click' tries to click the div, not select the input.

find is the correct command to locate a child element inside the current selection. Using get again resets the search to the whole document.

4fill in blank

hard

Fill both blanks to chain commands that select a form, then a text input inside it.

Cypress

cy.get('form').[1]('input').[2]('have.attr', 'type', 'text')

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

Afind

Bshould

Cinvoke

Dclick

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'click' instead of 'should' will try to click the input.

Using 'invoke' is for calling functions, not assertions.

First, find locates the input inside the form. Then, should asserts the input's type attribute is 'text'.

5fill in blank

hard

Fill all three blanks to chain commands selecting a list, then active item, then click it.

Cypress

cy.get('ul').[1]('li.active').[2]().[3]()

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

Afind

Bfirst

Cclick

Dshould

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'should' instead of 'click' will not perform the click action.

Skipping 'first' may cause multiple elements to be clicked.

Use find to get active list items inside the ul, first to pick the first one, then click to click it.

Practice

1. What does chaining selectors in Cypress help you do?
cy.get() followed by .find() means:

easy

A. Run tests faster by skipping elements

B. Find all elements on the page at once

C. Find a parent element first, then search inside it

D. Select elements randomly without order

Solution

1. Step 1: Understand cy.get() usage

   cy.get() selects a parent or root element on the page.

2. Step 2: Understand .find() usage

   .find() searches inside the previously selected element for child elements.

3. Final Answer:

   Find a parent element first, then search inside it -> Option C

4. Quick Check:

   Chaining selectors = parent then child [OK]

Hint: Remember: get parent first, then find child inside [OK]

Common Mistakes:

• Thinking .find() selects elements globally
• Confusing .find() with .get()
• Assuming chaining skips elements
• Believing chaining selects randomly

2. Which of the following is the correct syntax to chain selectors in Cypress to find a button inside a form with id 'login'?

easy

A. cy.get('#login').find('button')

B. cy.find('#login').get('button')

C. cy.get('button').find('#login')

D. cy.find('button').get('#login')

Solution

1. Step 1: Identify correct order of chaining

   First select the parent with cy.get('#login').

2. Step 2: Use .find() to locate child button

   Then use .find('button') to get the button inside the form.

3. Final Answer:

   cy.get('#login').find('button') -> Option A

4. Quick Check:

   Parent get, then child find = A [OK]

Hint: Use get() first for parent, then find() for child [OK]

Common Mistakes:

• Swapping get() and find() order
• Using find() as first method
• Selecting child before parent
• Incorrect selector syntax

3. What will the following Cypress code select?

cy.get('.menu').find('li.active')

medium

A. All li elements with class 'active' anywhere on the page

B. All elements with class 'menu' and class 'active'

C. Only the first li element with class 'active' on the page

D. All li elements with class 'active' inside elements with class 'menu'

Solution

1. Step 1: Understand cy.get('.menu')

   This selects all elements with class 'menu'.

2. Step 2: Understand .find('li.active')

   This finds all li elements with class 'active' inside those 'menu' elements.

3. Final Answer:

   All li elements with class 'active' inside elements with class 'menu' -> Option D

4. Quick Check:

   get('.menu') then find('li.active') = C [OK]

Hint: get() selects parent, find() filters children inside [OK]

Common Mistakes:

• Thinking find() searches globally
• Confusing combined classes with nested elements
• Assuming only first element is selected
• Ignoring the chaining order

4. Identify the error in this Cypress code snippet:

cy.find('.container').get('button.submit')

medium

A. Using find before get is incorrect

B. Selector '.container' is invalid

C. Missing parentheses after get

D. No error, code is correct

Solution

1. Step 1: Check method order

   cy.find() is not a valid Cypress command; cy.get() should be used first to select elements.

2. Step 2: Confirm correct chaining

   The correct order is cy.get('.container').find('button.submit').

3. Final Answer:

   Using find before get is incorrect -> Option A

4. Quick Check:

   get() first, then find() [OK]

Hint: Always start with cy.get(), then chain .find() [OK]

Common Mistakes:

• Using cy.find() instead of cy.get()
• Swapping get() and find() order
• Assuming find() works as a root selector
• Ignoring Cypress command syntax

5. You want to test a list where each li has a button inside. Which Cypress code correctly clicks the button inside the third li element within a ul with class 'items'?

hard

A. cy.get('ul.items').eq(2).find('li button').click()

B. cy.get('ul.items').find('li').eq(2).find('button').click()

C. cy.get('ul.items li button').eq(3).click()

D. cy.get('ul.items').find('button').eq(2).click()

Solution

1. Step 1: Select the parent list

   cy.get('ul.items') selects the ul with class 'items'.

2. Step 2: Find all li children and pick the third

   .find('li').eq(2) selects the third li (index starts at 0).

3. Step 3: Find the button inside that li and click

   .find('button').click() clicks the button inside the selected li.

4. Final Answer:

   cy.get('ul.items').find('li').eq(2).find('button').click() -> Option B

5. Quick Check:

   Parent get, child find, eq(2), then find button [OK]

Hint: Use eq(2) after finding li, then find button inside [OK]

Common Mistakes:

• Using eq(3) instead of eq(2) (index off by one)
• Selecting button before li
• Using eq on wrong element
• Not chaining find() properly