select

Выберите <option> в <select>.

Синтаксис

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

Использование

Правильное использование

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

Неправильное использование

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

Аргументы

value (Строка, Число)

Значение, index, или текстовое содержимое <option> для выбора.

values (Массив)

Массив значений, indexes, или текстового содержимого <option> для выбора.

options (Объект)

Передайте объект options, чтобы изменить поведение по умолчанию .select().

Параметр	Значение по умолчанию	Описание
`force`	`false`	Вынужденное выполнение, отключает ожидание возможности выполнения действий
`log`	`true`	Отображает команду в журнале команд
`timeout`	`defaultCommandTimeout`	Время ожидания разрешения `.select()` перед выходом из ожидания

Возвращаемое значение

.select() возвращает тот же объект, что и предыдущая команда.

Примеры

Текстовое содержимое

Выбор `option` с текстом `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')

Значение

Выбор `option` со значением "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')

Индекс

Выбор `option` с индексом 0

<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(0).should('have.value', '456')

Выбор нескольких опций

Выбор опций с текстами "apples" и "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'])

Выбор опций со значениями "456" и "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'])

Выбор опций с индексами 0 и 1

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

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

Примечание: Передача массива в cy.select() выберет только те опции, которые соответствуют значениям в массиве, оставив все остальные опции невыбранными (даже те, которые были выбраны ранее). Аналогично, вызов cy.select([]) с пустым массивом очистит все выбранные опции.

Вынужденный выбор

Вынужденный выбор скрытого `<select>`

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

  <optgroup></optgroup>
</select>

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

Вынужденный выбор отключенного `<select>`

Передача { force: true } в .select() переопределит проверки возможности выполнения для выбора отключенного <select>. Однако это не переопределит проверки возможности выполнения для выбора отключенного <option> или опции внутри отключенного <optgroup>. Подробнее см. эту проблему.

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

  <optgroup></optgroup>
</select>

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

Выбранная опция

Текущую выбранную опцию можно получить с помощью селектора jQuery's

selector.

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

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

Примечания

Возможность выполнения

.select() — это команда действия, которая подчиняется правилам возможности выполнения действий.

Однако, передача { force: true } в .select() не переопределит проверки возможности выполнения для выбора отключенного <option> или опции внутри отключенного <optgroup>. Подробнее см. эту проблему.

Правила

Требования

.select() требует использования в цепочке команд, возвращающих DOM элемент(ы).
.select() требует, чтобы элемент был select .

Утверждения

.select() автоматически будет ожидать, пока элемент достигнет состояния готовности к действию
.select() автоматически будет повторяться, пока все утверждения в цепочке не пройдут

Таймауты

.select() может выйти из ожидания, ожидая, пока элемент достигнет состояния готовности к действию.
.select() может выйти из ожидания, ожидая, пока утверждения, которые вы добавили, не пройдут.

Журнал команд

Выберите опцию с текстом "Homer Simpson"

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

Вышеупомянутые команды будут отображены в журнале команд как:

При нажатии на select в журнале команд консоль выводит следующее:

См. также

Прочитайте работу с элементами select и виджетами Select2 в Cypress
.click()