Chaining selectors in Cypress - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

What is the output of this chained selector test?

Consider the following Cypress test code snippet. What will be the result of the assertion?

Cypress

cy.get('form#login').find('input[type="text"]').should('have.length', 2)

A Test fails because 'find' cannot be chained after 'get'

B Test passes if the page contains any 2 text input fields anywhere

C Test passes if the form with id 'login' contains exactly 2 text input fields

D Test fails because 'should' cannot be used with 'have.length'

💡 Hint

Remember that chaining selectors narrows down the search within the previous element.

The 'get' command selects the form with id 'login'. The 'find' command searches inside that form for input elements of type text. The assertion checks that exactly 2 such inputs exist inside that form. This is valid chaining and assertion.

❓ assertion

intermediate

Which assertion correctly verifies the chained selector result?

You have chained selectors to get all buttons inside a div with class 'container'. Which assertion correctly checks that there are 3 buttons?

Cypress

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

A .should('contain.text', '3')

B .should('have.length', 3)

C .should('have.text', '3')

D .should('exist', 3)

💡 Hint

Check the assertion that verifies the number of elements found.

The 'have.length' assertion checks the number of elements matched by the chained selector. The others check text content or existence incorrectly.

❓ locator

advanced

Which chained selector correctly finds all visible links inside a nav with id 'main-nav'?

Choose the correct Cypress chained selector to find all visible elements inside the nav with id 'main-nav'.

A cy.get('nav#main-nav').find('a:visible')

B cy.get('nav#main-nav').filter('a:visible')

C cy.get('nav#main-nav a:visible')

D cy.get('nav#main-nav').find('a').filter(':visible')

💡 Hint

Remember that Cypress does not support jQuery pseudo selectors directly in 'find'.

Option D chains 'find' to get all elements inside nav#main-nav, then filters visible ones. Option D uses ':visible' inside 'find' which is not supported. Option D selects all visible inside nav#main-nav but is not chaining. Option D filters nav itself, not its children.

🔧 Debug

advanced

Why does this chained selector test fail with 'Cannot read property' error?

Analyze the code below and select the reason for the failure: cy.get('.list').find('li').first().click().find('button').click()

A The 'click()' command returns undefined, so chaining 'find' after it causes an error

B The selector '.list' does not exist, causing the failure

C The 'first()' command cannot be chained after 'find()'

D The 'button' inside 'li' does not exist, causing the error

💡 Hint

Consider what commands return and how chaining works in Cypress.

In Cypress, commands like 'click()' do not return a chainable subject but a promise-like object. Chaining 'find' after 'click()' is invalid and causes a runtime error.

❓ framework

expert

In Cypress, what is the correct way to chain selectors and assertions to verify a nested element's text?

You want to check that a inside a

contains the text 'Success'. Which chained Cypress code is correct?

A cy.get('div.card').find('span').should('have.text', 'Success')

B cy.get('div.card').should('have.text', 'Success').find('span')

C cy.get('div.card span').should('contain', 'Success')

D cy.get('div.card').find('span').contains('Success')

💡 Hint

Think about the order of chaining and where assertions apply.

Option A correctly chains 'find' to get the span inside the div and asserts its exact text. Option A asserts text on the div, not the span. Option A uses a selector string but does not chain. Option A uses 'contains' as a command, which is valid but does not assert text equality.

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