Выбор опций из выпадающих списков

Веб-приложения часто используют выпадающие списки для выбора значений пользователем. В тестировании важно корректно взаимодействовать с такими элементами, чтобы проверять правильность поведения интерфейса. WebdriverIO предоставляет гибкие методы для работы с <select> элементами, а также с кастомными выпадающими списками на основе <div> и <ul>.

Стандартные HTML <select> элементы

Для стандартных HTML <select> доступны встроенные методы:

const select = await $('#country'); // находим элемент select
await select.selectByVisibleText('Россия'); // выбираем по видимому тексту
await select.selectByAttribute('value', 'ru'); // выбираем по значению атрибута value
await select.selectByIndex(3); // выбираем по индексу опции

Особенности:

  • selectByVisibleText(text) — выбирает опцию по тексту, который виден пользователю.
  • selectByAttribute(attribute, value) — выбирает по значению указанного атрибута, чаще всего value.
  • selectByIndex(index) — полезно, если текст или значения динамические и известен только индекс.

Для проверки выбранной опции можно использовать метод .getValue():

const value = await select.getValue();
console.log(value); // ru

Также можно получить все доступные опции через $$:

const options = await select.$$('option');
for (const option of options) {
    console.log(await option.getText());
}

Кастомные выпадающие списки

Современные интерфейсы часто используют кастомные компоненты на основе <div>, <ul> и <li> вместо стандартного <select>. Для их тестирования стандартные методы selectByVisibleText не подходят. Необходимо симулировать действия пользователя:

  1. Открыть список:
const dropdown = await $('.dropdown');
await dropdown.click();
  1. Выбрать опцию:
const option = await $('//li[text()="Россия"]');
await option.click();
  1. Проверка выбранного значения:
const selected = await $('.dropdown .selected');
const text = await selected.getText();
console.log(text); // Россия

Совет: XPath удобно использовать для поиска опций по тексту. Если список динамический, можно добавить ожидание:

await option.waitForDisplayed({ timeout: 5000 });

Работа с динамическими и асинхронными списками

Иногда список загружается через AJAX после клика. В этом случае важно дождаться появления опций:

await dropdown.click();
const options = await $$('.dropdown li');
await browser.waitUntil(
    async () => (await options.length) > 0,
    { timeout: 5000, timeoutMsg: 'Опции не загрузились' }
);
await options[0].click();

Особенности:

  • Использование waitUntil позволяет предотвратить ошибки, связанные с попыткой кликнуть по элементу, который ещё не появился в DOM.
  • Можно комбинировать с isDisplayed() для проверки видимости.

Множественный выбор

Если список поддерживает множественный выбор (multiple в <select>), можно выбирать несколько опций:

const multiSelect = await $('#fruits');
await multiSelect.selectByVisibleText('Яблоко');
await multiSelect.selectByVisibleText('Банан');

const selectedValues = await multiSelect.getValue();
console.log(selectedValues); // ['apple', 'banana']

Для кастомных компонент множественный выбор реализуется аналогично: клики по каждой опции с проверкой состояния выбранности через CSS-классы.

Полезные методы для проверки

  • isSelected() — проверяет, выбрана ли опция.
  • getText() — возвращает текст опции или выбранного элемента.
  • getAttribute('value') — возвращает значение атрибута value.
  • waitForDisplayed() — ожидание появления элемента в DOM.

Пример проверки выбора в кастомном списке:

const selectedOption = await $('.dropdown .selected');
await selectedOption.waitForDisplayed();
const text = await selectedOption.getText();
expect(text).toBe('Россия');

Практические рекомендации

  • Для стандартных <select> всегда использовать встроенные методы selectBy*, так как они напрямую работают с DOM.
  • Для кастомных списков симулировать реальные действия пользователя: клик на список → клик на опцию → проверка выбранного значения.
  • Всегда учитывать асинхронную загрузку данных и использовать waitForDisplayed или waitUntil.
  • Для динамических списков XPath и CSS-селекторы с текстом опции дают наибольшую стабильность.
  • Проверка выбранного значения должна быть отдельным шагом теста, чтобы убедиться, что клик действительно сработал.

Работа с выпадающими списками в WebdriverIO требует понимания структуры элемента и особенностей интерфейса. Правильное использование методов выбора и ожиданий позволяет создавать надежные тесты, покрывающие как стандартные, так и кастомные компоненты.

Оглавление