cy.find() within parent in Cypress - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to find a button inside a parent element using Cypress.

Cypress

cy.get('.parent').[1]('button').click();

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

Afind

Bcontains

Cget

Dchildren

Attempts:

3 left

💡 Hint

Common Mistakes

Using get instead of find which searches the whole document.

Using contains which looks for text content, not element selectors.

The find command searches for descendants of the selected element. Here, it finds the button inside .parent.

2fill in blank

medium

Complete the code to find a child element with class 'item' inside a parent with id 'list'.

Cypress

cy.get('#list').[1]('.item').should('be.visible');

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

Afind

Bparent

Cget

Dchildren

Attempts:

3 left

💡 Hint

Common Mistakes

Using get which searches the entire document.

Using parent which goes up the DOM tree.

find searches for descendants inside the selected element. It is the correct choice to locate '.item' inside '#list'.

3fill in blank

hard

Fix the error in the code to correctly find a span inside a div with class 'container'.

Cypress

cy.get('.container').[1]('span').should('exist');

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

Aparent

Bfind

Csiblings

Dclosest

Attempts:

3 left

💡 Hint

Common Mistakes

Using parent which goes up the DOM tree.

Using siblings which looks at elements at the same level.

The find command correctly searches for span elements inside the selected .container div.

4fill in blank

hard

Fill both blanks to find all list items inside a nav element and check their count.

Cypress

cy.get('nav').[1]('li').[2]('have.length', 5);

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

Afind

Bshould

Cchildren

Dexpect

Attempts:

3 left

💡 Hint

Common Mistakes

Using children which only finds direct children, not all descendants.

Using expect which is not chained like this in Cypress.

find locates all li elements inside nav. Then should asserts the count is 5.

5fill in blank

hard

Fill all three blanks to find a button inside a form, click it, and verify it is disabled.

Cypress

cy.get('form').[1]('button').[2]().[3]('be.disabled');

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

Afind

Bclick

Cshould

Dget

Attempts:

3 left

💡 Hint

Common Mistakes

Using get instead of find which searches the whole document.

Forgetting to chain click before the assertion.

find locates the button inside the form. click clicks it. should asserts the button is disabled after clicking.

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