cy.select() for dropdowns in Cypress - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to select the option with value 'option2' from the dropdown.

Cypress

cy.get('select#dropdown').[1]('option2')

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

Aselect

Btype

Ccheck

Dclick

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'click' instead of 'select' to choose an option.

Trying to use 'type' on a dropdown element.

The select command is used to choose an option from a dropdown menu by its value or visible text.

2fill in blank

medium

Complete the code to select the option with visible text 'Banana' from the dropdown.

Cypress

cy.get('select.fruits').[1]('Banana')

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

Aclick

Bselect

Ctype

Dcheck

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'click' to try to select an option by text.

Using 'type' which does not work on dropdowns.

The select command can select options by their visible text, not just by value.

3fill in blank

hard

Fix the error in the code to select the option with value '3' from the dropdown.

Cypress

cy.get('select#numbers').[1]('3')

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

Aclick

Btype

Cselect

Dcheck

Attempts:

3 left

💡 Hint

Common Mistakes

Passing a number instead of a string to the select command.

Using 'click' or 'type' instead of 'select'.

The select command requires the option value as a string, so passing a number without quotes causes an error.

4fill in blank

hard

Fill both blanks to select the option with value 'green' and then verify the selection.

Cypress

cy.get('select#colors').[1]('green').should('[2]', 'value', 'green')

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

Aselect

Bclick

Chave.attr

Dhave.property

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'click' instead of 'select' to choose the option.

Using 'have.property' instead of 'have.attr' for verification.

First, use select to choose the option. Then, use should('have.attr', 'value', 'green') to verify the dropdown's value attribute.

5fill in blank

hard

Fill all three blanks to select the option with text 'Apple', verify the value is '1', and check the dropdown is visible.

Cypress

cy.get('select#fruits').[1]('Apple').should('[2]', '[3]').should('be.visible')

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

Aselect

Bhave.attr

C1

Dhave.value

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'have.attr' instead of 'have.value' for value check.

Passing the visible text instead of the value in the assertion.

Use select to pick 'Apple'. Then verify the value with should('have.value', '1'). Finally, check visibility with should('be.visible').