cy.select() for dropdowns in Cypress

Introduction

We use cy.select() to pick an option from a dropdown menu in a web page during testing. It helps check if the dropdown works correctly.

When you want to test if a dropdown menu lets users choose the right option.

When you need to verify that selecting an option changes the page or form as expected.

When automating form filling that includes dropdown fields.

When checking that invalid or missing dropdown selections show proper error messages.

Syntax

Cypress

cy.get('selector').select('option')

selector is the CSS selector for the dropdown element.

option can be the visible text, the value attribute, or the index of the option.

Examples

Selects the option with visible text 'Red' from the dropdown with id 'colors'.

Cypress

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

Selects the option with value attribute 'banana' from the dropdown named 'fruits'.

Cypress

cy.get('select[name="fruits"]').select('banana')

Selects the third option (index starts at 0) from the dropdown with class 'dropdown'.

Cypress

cy.get('.dropdown').select(2)

Sample Program

This test visits a sample page, selects 'apples' from a dropdown with id 'select-example', and checks that the dropdown's value is now 'apples'.

Cypress

describe('Dropdown select test', () => {
  it('selects an option from dropdown', () => {
    cy.visit('https://example.cypress.io/commands/actions')
    cy.get('#select-example').select('apples')
    cy.get('#select-example').should('have.value', 'apples')
  })
})

Important Notes

Make sure the dropdown element is visible and enabled before selecting.

You can select multiple options if the dropdown supports it by passing an array to select().

If the option text or value does not exist, the test will fail, so use correct values.

Summary

cy.select() helps pick options from dropdowns in tests.

You can select by visible text, value, or index.

Always verify the selection with assertions like should('have.value').