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.