cy.select() for dropdowns in Cypress - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

What is the result of this Cypress test code?

Consider the following Cypress test code that selects an option from a dropdown menu. What will be the test execution result?

Cypress

cy.get('#fruits').select('Banana').should('have.value', 'banana')

A Test passes because the option 'Banana' exists and its value is 'banana'.

B Test fails because the selector '#fruits' is invalid.

C Test fails because 'Banana' is not a valid option in the dropdown.

D Test fails due to syntax error in the select command.

💡 Hint

Check if the option text matches the value used in the assertion.

The select() command chooses the option with visible text 'Banana'. The assertion checks if the dropdown's value is 'banana', which matches the option's value attribute. Since both match, the test passes.

❓ assertion

intermediate

Which assertion correctly verifies the selected option in a dropdown?

You want to verify that the dropdown with id 'colors' has 'Red' selected after using cy.select(). Which assertion is correct?

Cypress

cy.get('#colors').select('Red')

A cy.get('#colors').should('have.value', 'red')

B cy.get('#colors').should('contain', 'Red')

C cy.get('#colors').should('have.text', 'Red')

D cy.get('#colors').should('be.visible')

💡 Hint

The selected option's value attribute is used for verification.

The have.value assertion checks the value attribute of the selected option. 'contain' and 'have.text' check the element's content but not the selected value. 'be.visible' only checks visibility.

❓ locator

advanced

Identify the best locator for selecting a dropdown in Cypress

Which locator is the best practice to select a dropdown with label 'Country' for accessibility and reliability?

A cy.get('#country-dropdown')

B cy.get('select').eq(0)

C cy.get('select').contains('Country')

D cy.get('select[aria-label="Country"]')

💡 Hint

Use locators that rely on accessibility attributes for stability.

Using aria-label ensures the locator is stable and accessible. ID selectors may change, and selecting by index or text content is fragile.

🔧 Debug

advanced

Why does this Cypress test fail when selecting a dropdown option?

Given this code, why does the test fail? cy.get('#pets').select('Dog').should('have.value', 'dog')

Cypress

<select id="pets">
  <option value="cat">Cat</option>
  <option value="doggo">Dog</option>
  <option value="bird">Bird</option>
</select>

A The selector '#pets' is incorrect and does not find the dropdown.

B The assertion uses 'dog' but the option's value is 'doggo', causing failure.

C The select command syntax is invalid and causes a runtime error.

D The option text 'Dog' does not match any option's value attribute 'doggo'.

💡 Hint

Check the value attribute of the option you want to select.

The select() command selects by visible text 'Dog', which exists. But the assertion checks for value 'dog', while the actual value is 'doggo'. This mismatch causes the test to fail.

❓ framework

expert

How to handle dynamic dropdown options in Cypress tests?

You have a dropdown whose options load dynamically after an API call. Which approach ensures your Cypress test selects the option 'Option 3' reliably?

A Select the option immediately after page load without waiting.

B Use cy.wait() with a fixed time before selecting the option.

C Use cy.intercept() to wait for the API call, then select the option.

D Use cy.get() with {timeout: 0} to select the option instantly.

💡 Hint

Wait for the network response that loads the dropdown options.

Using cy.intercept() to wait for the API call ensures the dropdown options are loaded before selection. Fixed waits are unreliable, and selecting too early causes failures.