Select an <option> within a <select>.

Syntax

.select(value)
.select(values)
.select(value, options)
.select(values, options)

Usage

Correct Usage

cy.get('select').select('user-1') // Select the 'user-1' option

Incorrect Usage

cy.select('John Adams')  // Errors, cannot be chained off 'cy'
cy.location().select()   // Errors, 'location' does not yield <select> element

Arguments

value (String)

The value or text content of the <option> to be selected.

values (Array)

An array of values or text contents of the <option>s to be selected.

options (Object)

Pass in an options object to change the default behavior of .select().

Option	Default	Description
log	true	Displays the command in the Command log
force	false	Forces the action, disables waiting for actionability
timeout	defaultCommandTimeout	Time to wait for .select() to resolve before timing out

Yields

• .select() yields the same subject it was given from the previous command.

Examples

Text Content

Select the option with the text apples

<select>
  <option value="456">apples</option>
  <option value="457">oranges</option>
  <option value="458">bananas</option>
</select>

// yields <option value="456">apples</option>
cy.get('select')
  .select('apples').should('have.value', '456')

Value

Select the option with the value “456”

<select>
  <option value="456">apples</option>
  <option value="457">oranges</option>
  <option value="458">bananas</option>
</select>

// yields <option value="456">apples</option>
cy.get('select')
  .select('456').should('have.value', '456')

Select multiple options

Select the options with the texts “apples” and “bananas”

<select multiple>
  <option value="456">apples</option>
  <option value="457">oranges</option>
  <option value="458">bananas</option>
</select>

cy.get('select')
  .select(['apples', 'bananas']).invoke('val')
  .should('deep.equal', ['456', '458'])

Select the options with the values “456” and “457”

<select multiple>
  <option value="456">apples</option>
  <option value="457">oranges</option>
  <option value="458">bananas</option>
</select>

cy.get('select')
  .select(['456', '457']).invoke('val')
  .should('deep.equal', ['456', '457'])

Notes

Actionability

.select() is an “action command” that follows all the rules defined here.

Rules

Requirements

• .select() requires being chained off a command that yields DOM element(s).

• .select() requires the element to be a select.

Assertions

• .select() will automatically wait for the element to reach an actionable state.

• .select() will automatically wait for assertions you've chained to pass.

Timeouts

• .select() can time out waiting for the element to reach an actionable state.

• .select() can time out waiting for assertions you've added to pass.

Command Log

Select the option with the text “Homer Simpson”

cy.get('select').select('Homer Simpson')

The commands above will display in the Command Log as:

When clicking on select within the command log, the console outputs the following:

See also

• .click()