How to Select Multiple Items From a Dropdown in Cypress

How to Select Multiple Items From a Dropdown in Cypress

Ferenc Almasi β€’ 2022 August 16 β€’ Read time 2 min read
  • twitter
  • facebook

If you need to select an item from a dropdown in Cypress, you can use the select command, passing the value, text content, or the index of the option you want to select. Let's say you have the following select in your document:

Copied to clipboard!
<select>
    <option value="evergreen">🌲</option>
    <option value="christmas">πŸŽ„</option>
</select>

In order to select the first option in Cypress, we can do one of the following:

Copied to clipboard!
cy.get('select').select('🌲').should('have.value', 'evergreen')
cy.get('select').select(0).should('have.value', 'evergreen')
cy.get('select').select('evergreen').should('have.value', 'evergreen')

Apart from passing the text content, we can pass an index to the select command, starting from 0. We also have the possibility to use the value attribute to grab the necessary option. The three lines in the above code example are equivalent. All of them select the first option from the select.


How to Grab Multiple Items from a Dropdown

To grab more than one item from a dropdown, we can pass an array of values, text content, or indexes.

Copied to clipboard! Playground
// Using text content
cy.get('select').select(['🌲', 'πŸŽ„'])
  .invoke('val')
  .should('deep.equal', ['evergreen', 'christmas'])

// Using indexes
cy.get('select').select([0, 1])
  .invoke('val')
  .should('deep.equal', ['evergreen', 'christmas'])

// Using values
cy.get('select').select(['evergreen', 'christmas'])
  .invoke('val')
  .should('deep.equal', ['evergreen', 'christmas'])
All of the above code select the same options

Then we can use a combination of invoke('val') with should('deep.equal') to verify all of their values in one go.


Select Items from a Disabled Dropdown

In case you are working with a disabled dropdown, but you still need to interact with it to verify some cases, you can pass a force: true configuration to your select command:

Copied to clipboard!
cy.get('select').select('🌲', { force: true })
  .should('have.value', 'evergreen')
Forcing actionability for select inputs

This will work regardless of whether your select is not displayed, or it's just disabled.

Want to learn Cypress from end to end? Check out my Cypress course on Educative where I cover everything:

Learn Cypress with Educative
How to Select Multiple Items From a Dropdown in Cypress
If you would like to see more webtips, follow @flowforfrank
Looking to improve your skills? Check out our interactive course to master Cypress from start to finish.
Master Cypressinfo Remove ads

Resources:

  • twitter
  • facebook
Did you find this page helpful?
πŸ“š More Webtips
Mentoring

Rocket Launch Your Career

Speed up your learning progress with our mentorship program. Join as a mentee to unlock the full potential of Webtips and get a personalized learning experience by experts to master the following frontend technologies:

Courses

Recommended

This site uses cookies We use cookies to understand visitors and create a better experience for you. By clicking on "Accept", you accept its use. To find out more, please see our privacy policy.