# Cypress Documentation
# Source: https://raw.githubusercontent.com/cypress-io/cypress-documentation/main/docs/api/commands/select.mdx
# Path: docs/api/commands/select.mdx

---
title: 'select | Cypress Documentation'
description: 'Select an option within a select in Cypress.'
sidebar_label: select
slug: /api/commands/select
---

<ProductHeading product="app" />

# select

Select an `<option>` within a `<select>`.

It is [unsafe](/app/core-concepts/retry-ability#Only-queries-are-retried) to
chain further commands that rely on the subject after `.select()`.

## Syntax

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

### Usage

<Icon name="check-circle" color="green" /> **Correct Usage**

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

<Icon name="exclamation-triangle" color="red" /> **Incorrect Usage**

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

### Arguments

<Icon name="angle-right" /> **value _(String, Number)_**

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

<Icon name="angle-right" /> **values _(Array)_**

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

<Icon name="angle-right" /> **options _(Object)_**

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

| Option    | Default                                                           | Description                                                                         |
| --------- | ----------------------------------------------------------------- | ----------------------------------------------------------------------------------- |
| `force`   | `false`                                                           | Forces the action, disables [waiting for actionability](#Assertions)                |
| `log`     | `true`                                                            | Displays the command in the [Command log](/app/core-concepts/open-mode#Command-Log) |
| `timeout` | [`defaultCommandTimeout`](/app/references/configuration#Timeouts) | Time to wait for `.select()` to resolve before [timing out](#Timeouts)              |

<HeaderYields />

- `.select()` yields the same subject it was given.
- It is [unsafe](/app/core-concepts/retry-ability#Only-queries-are-retried)
  to chain further commands that rely on the subject after `.select()`.

## Examples

### Text Content

#### Select the `option` with the text `apples`

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

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

### Value

#### Select the `option` with the value "456"

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

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

### Index

#### Select the `option` with index 0

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

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

### Select multiple options

#### Select the options with the texts "apples" and "bananas"

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

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

#### Select the options with the values "456" and "457"

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

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

#### Select the options with the indexes 0 and 1

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

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

:::info

**Note:** Passing an array into `cy.select()` will select only the options
matching values in the array, leaving all other options unselected (even those
that were previously selected). In the same manner, calling `cy.select([])` with
an empty array will clear selections on all options.

:::

### Force select

#### Force select a hidden `<select>`

```html
<select style="display: none;">
  <optgroup label="Fruits">
    <option value="banana">Banana</option>
    <option value="apple">Apple</option>
  </optgroup>

  <optgroup></optgroup>
</select>
```

```javascript
cy.get('select')
  .select('banana', { force: true })
  .invoke('val')
  .should('eq', 'banana')
```

#### Force select a disabled `<select>`

Passing `{ force: true }` to `.select()` will override the actionability checks
for selecting a disabled `<select>`. However, it will not override the
actionability checks for selecting a disabled `<option>` or an option within a
disabled `<optgroup>`. See
[this issue](https://github.com/cypress-io/cypress/issues/107) for more detail.

```html
<select disabled>
  <optgroup label="Veggies">
    <option value="okra">Okra</option>
    <option value="zucchini">Zucchini</option>
  </optgroup>

  <optgroup></optgroup>
</select>
```

```javascript
cy.get('select')
  .select('okra', { force: true })
  .invoke('val')
  .should('eq', 'okra')
```

### Selected option

You can get the currently selected option using the jQuery's
[:selected selector](https://api.jquery.com/selected-selector/).

```html
<select id="name">
  <option>Joe</option>
  <option>Mary</option>
  <option selected="selected">Peter</option>
</select>
```

```javascript
cy.get('select#name option:selected').should('have.text', 'Peter')
```

## Notes

### Actionability

`.select()` is an action command that follows the rules of
[Actionability](/app/core-concepts/interacting-with-elements).

However, passing `{ force: true }` to `.select()` will not override the
actionability checks for selecting a disabled `<option>` or an option within a
disabled `<optgroup>`. See
[this issue](https://github.com/cypress-io/cypress/issues/107) for more detail.

## Rules

<HeaderRequirements />

- `.select()` requires being chained off a command that yields DOM element(s).
- `.select()` requires the element to be a `select`.

<HeaderAssertions />

- `.select()` will automatically wait for the element to reach an
  [actionable state](/app/core-concepts/interacting-with-elements).
- `.select()` will automatically [retry](/app/core-concepts/retry-ability)
  until all chained assertions have passed.

<HeaderTimeouts />

- `.select()` can time out waiting for the element to reach an
  [actionable state](/app/core-concepts/interacting-with-elements).
- `.select()` can time out waiting for assertions you've added to pass.

## Command Log

**_Select the option with the text "Homer Simpson"_**

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

The commands above will display in the Command Log as:

<DocsImage
  src="/img/api/select/select-homer-option-from-browser-dropdown.png"
  alt="Command Log select"
/>

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

<DocsImage
  src="/img/api/select/console-log-for-select-shows-option-and-any-events-caused-from-clicking.png"
  alt="Console Log select"
/>

## See also

- Read
  [Working with Select elements and Select2 widgets in Cypress](https://www.cypress.io/blog/2020/03/20/working-with-select-elements-and-select2-widgets-in-cypress/)
- [`.click()`](/api/commands/click)