cy.find() within parent in Cypress - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

Output of nested cy.find() commands

What will be the output of the following Cypress test code snippet when it runs successfully?

Cypress

cy.get('.parent').find('.child').should('have.length', 2);
cy.get('.parent').find('.child').eq(0).should('contain.text', 'First');

A Test fails because .child elements are not found inside .parent

B Test passes because there are exactly 2 .child elements inside .parent and the first contains 'First'

C Test fails because .find() cannot be chained after .get()

D Test passes but the assertion on text fails because the first .child does not contain 'First'

💡 Hint

Remember that cy.get() selects elements globally, and .find() searches within those elements.

cy.get('.parent') selects the parent element(s). Then .find('.child') searches only inside those parents. The test expects exactly 2 child elements and the first child's text to be 'First'.

❓ assertion

intermediate

Correct assertion for element found by cy.find()

Which assertion correctly verifies that a button inside a form with class '.login' is disabled using cy.find()?

A cy.get('button').find('.login').should('be.disabled');

B cy.find('.login button').should('be.disabled');

C cy.get('.login').find('button').should('be.disabled');

D cy.get('.login button').should('be.disabled');

💡 Hint

Use cy.get() to select the parent, then .find() to locate the child element inside it.

Option C correctly selects the form with class '.login' and then finds the button inside it, asserting it is disabled. Option C is invalid because cy.find() is not a global command. Option C reverses parent and child. Option C uses a combined selector but does not use .find().

🔧 Debug

advanced

Why does this cy.find() command fail?

Given the code below, why does the test fail to find the '.item' elements inside '.container'?

Cypress

cy.get('.container').find('.item').should('have.length', 3);

// HTML structure:
// <div class="container">
//   <div class="wrapper">
//     <div class="item">One</div>
//     <div class="item">Two</div>
//   </div>
//   <div class="item">Three</div>
// </div>

A The .find() searches all descendants, so it should find all 3 .item elements; failure is due to incorrect selector

B The .find() only searches direct children, so it misses nested .item inside .wrapper

C The test fails because .container does not exist in the DOM

D The .find() command is asynchronous and needs .then() to work properly

💡 Hint

Remember that .find() searches all descendants, not just direct children.

The .find() command searches all descendants, so it should find all three .item elements inside .container, including nested ones. If the test fails, it is likely due to a selector or timing issue, not because .find() misses nested elements.

❓ framework

advanced

Best practice for chaining cy.find() in Cypress tests

Which option describes the best practice when using cy.find() inside Cypress tests to locate elements within a parent?

A Use cy.get() with combined selectors instead of chaining .find() to avoid confusion

B Use cy.find() globally without cy.get() to reduce code length and improve performance

C Avoid using .find() because it causes flaky tests; instead, use global selectors only

D Always use cy.get() to select the parent, then chain .find() to locate child elements to ensure scoped searching and better test stability

💡 Hint

Think about test stability and scope when selecting elements.

Using cy.get() to select a parent element and then chaining .find() to locate children scopes the search and reduces the chance of selecting wrong elements, improving test reliability.

🧠 Conceptual

expert

Understanding cy.find() behavior with multiple parents

If cy.get('.list') selects multiple elements, what will cy.get('.list').find('.item') return?

A It returns all .item elements found inside each .list element combined into one set

B It returns only the .item elements inside the first .list element

C It returns an error because .find() cannot be used on multiple elements

D It returns only the first .item element found inside any .list element

💡 Hint

Consider how Cypress commands handle multiple elements and chaining.

cy.get('.list') can select multiple elements. When .find('.item') is chained, it searches inside each matched .list element and returns all matching .item elements combined.

Practice

1. What is the main purpose of using cy.find() in Cypress tests?

easy

A. To replace cy.get() for all element searches

B. To find elements anywhere on the page without restriction

C. To search for child elements within a specific parent element

D. To execute JavaScript code inside the browser console

Solution

1. Step 1: Understand cy.find() role

   cy.find() is used to look for elements inside a previously selected parent element, narrowing the search.

2. Step 2: Compare with other commands

   cy.get() searches the whole page, while cy.find() limits to children of a parent element.

3. Final Answer:

   To search for child elements within a specific parent element -> Option C

4. Quick Check:

   cy.find() = child search inside parent [OK]

Hint: Remember: cy.find() searches only inside a parent element [OK]

Common Mistakes:

• Thinking cy.find() searches the whole page
• Confusing cy.find() with cy.get()
• Using cy.find() without a parent element first

2. Which of the following is the correct syntax to find a button with class submit-btn inside a div with id form-container using cy.find()?

easy

A. cy.find('div#form-container').find('button.submit-btn')

B. cy.get('#form-container').find('button.submit-btn')

C. cy.get('button.submit-btn').find('#form-container')

D. cy.find('#form-container').get('button.submit-btn')

Solution

1. Step 1: Select the parent element correctly

   Use cy.get('#form-container') to select the div with the given id.

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

   Call .find('button.submit-btn') on the parent to get the button inside it.

3. Final Answer:

   cy.get('#form-container').find('button.submit-btn') -> Option B

4. Quick Check:

   Parent get + find child = cy.get('#form-container').find('button.submit-btn') [OK]

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

Common Mistakes:

• Using cy.find() before cy.get() for parent
• Swapping order of get and find
• Using find on a selector string instead of a parent element

3. Given the HTML:

<div id='list'>
  <ul>
    <li class='item'>Apple</li>
    <li class='item'>Banana</li>
    <li class='item'>Cherry</li>
  </ul>
</div>

What will the following Cypress code return?

cy.get('#list').find('li.item').its('length')

medium

A. 3

B. 1

C. 0

D. Error: No elements found

Solution

1. Step 1: Select the parent div with id 'list'

   cy.get('#list') selects the div containing the list.

2. Step 2: Find all li elements with class 'item' inside the div

   .find('li.item') selects all three list items: Apple, Banana, Cherry.

3. Step 3: Get the length property

   .its('length') returns the number of matched elements, which is 3.

4. Final Answer:

   3 -> Option A

5. Quick Check:

   3 list items found inside parent [OK]

Hint: Count matched children with .find() then .its('length') [OK]

Common Mistakes:

• Assuming find returns only one element
• Confusing .get() and .find() scopes
• Expecting zero because of wrong selector

4. You wrote this Cypress code:

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

But the test fails with "Cannot read property 'click' of undefined". What is the likely cause?

medium

A. The selector '.button' does not exist inside '.container'

B. You should use cy.find() before cy.get()

C. You forgot to add .should('be.visible') before clicking

D. The .container selector is invalid syntax

Solution

1. Step 1: Understand the error message

   "Cannot read property 'click' of undefined" means the element was not found, so click() fails.

2. Step 2: Check the selectors used

   If '.button' does not exist inside '.container', then .find('.button') returns nothing, causing the error.

3. Final Answer:

   The selector '.button' does not exist inside '.container' -> Option A

4. Quick Check:

   Missing child element causes undefined click [OK]

Hint: Check if child selector exists inside parent before clicking [OK]

Common Mistakes:

• Using find before get
• Assuming visibility causes this error
• Thinking selector syntax is wrong without checking

5. You want to test a list where each div.card contains a button.delete. How do you click the delete button only inside the second card using cy.find()?

hard

A. cy.find('div.card').eq(1).get('button.delete').click()

B. cy.get('div.card').find('button.delete').eq(1).click()

C. cy.get('button.delete').eq(1).click()

D. cy.get('div.card').eq(1).find('button.delete').click()

Solution

1. Step 1: Select the second card div

   cy.get('div.card').eq(1) selects the second card (index 1).

2. Step 2: Find the delete button inside that card

   .find('button.delete') searches only inside the selected card.

3. Step 3: Click the found button

   .click() clicks the delete button inside the second card only.

4. Final Answer:

   cy.get('div.card').eq(1).find('button.delete').click() -> Option D

5. Quick Check:

   Get second card, then find button inside it [OK]

Hint: Select parent first with eq(), then find child inside it [OK]

Common Mistakes:

• Using find before get
• Selecting button globally then filtering
• Using eq() after find instead of before