Выбор опций в select

Работа с элементами формы является одной из распространённых задач в автоматизированном тестировании веб-приложений. Одним из таких элементов является <select>, который представляет выпадающий список. В автоматизированных тестах необходимо правильно выбирать нужные опции, эмулируя действия пользователя. Puppeteer предоставляет несколько подходов для взаимодействия с такими элементами.

Описание элемента <select>

Элемент <select> состоит из набора <option>, каждая из которых представляет одну из возможных опций для выбора. В отличие от простых текстовых полей, <select> требует, чтобы пользователь выбирал один или несколько элементов из списка, который может быть отображён в виде выпадающего меню. 

<select id="country" name="country">
  <option value="us">США</option>
  <option value="ca">Канада</option>
  <option value="ru">Россия</option>
</select>

Взаимодействие с элементом <select> в Puppeteer

Для выбора нужной опции в элементе <select> Puppeteer предоставляет методы, которые могут эмулировать как выбор по индексу, так и выбор по значению или тексту. Рассмотрим основные подходы.

Выбор по значению (value)

Для выбора элемента в выпадающем списке по значению используется метод select. Этот метод принимает значение атрибута value из одного из элементов <option> и выбирает его.

Пример: 

await page.select(&


В данном примере выбирается опция с атрибутом value=“ru”.
Такой способ полезен, если заранее известно точное значение, которое
необходимо выбрать. Если элемент с таким значением существует, Puppeteer
выполнит выбор.




Выбор по индексу




Метод select также поддерживает выбор по индексу элемента в
списке. Индексация начинается с нуля. Это может быть полезно, если
известно, какая по порядку опция должна быть выбрана.




Пример:



await page.select('#country', '1');



В этом примере будет выбрана опция с индексом 1 (второй элемент в
списке). Однако важно помнить, что выбор по индексу зависит от порядка
элементов в HTML и может быть не таким стабильным, как выбор по
значению.




Выбор по тексту опции




В Puppeteer нет встроенной функции для выбора опции непосредственно по
её текстовому содержимому. Однако это можно сделать с помощью комбинации
методов page.$</code> и
<code>option.evaluate</code>.</p>
<p>Пример:</p>
<pre class="javascript"><code>const option = await
page.$('select#country option'); await option.evaluate(el =>
el.textContent === 'Россия' && el.selected = true);

В данном примере выбирается опция с текстом «Россия». Это может быть полезно, когда необходимо выбирать опцию, исходя не из её value, а из отображаемого текста.

Управление множественными выборами

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

Пример: 

<select id="languages" name="languages" multiple>
  <option value="en">English</option>
  <option value="fr">Français</option>
  <option value="de">Deutsch</option>
</select>

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

await page.select('#languages', 'en', 'fr');

В данном случае будут выбраны опции с value=“en” и value=“fr”.

Проверка выбранных опций

После того как был выполнен выбор, важно убедиться, что опция была выбрана корректно. Для этого можно получить текущее выбранное значение и сравнить его с ожидаемым.

Пример: 

const selectedValue = await page.$eval('#country', el => el.value);
console.log(selectedValue); // должен быть 'ru'

Метод $eval позволяет извлечь значение выбранной опции и проверить его.

Обработка динамических изменений

Часто элементы <select> могут быть динамическими, т.е. опции списка могут изменяться в ответ на действия пользователя или запросы к серверу. Puppeteer позволяет работать с такими элементами даже в случае их динамического обновления. Важно использовать методы, такие как waitForSelector, чтобы дождаться загрузки нужных опций.

Пример: 

await page.select('#country', 'us');
await page.waitForSelector('#country option[value="ca"]');

Этот код сначала выбирает опцию с value=“us”, а затем ждёт, пока не появится опция с value=“ca”.

Взаимодействие с элементами в модальных окнах и попапах

Когда элемент <select> находится внутри модального окна или попапа, его взаимодействие не отличается от обычного выбора, однако для начала работы с элементом требуется учитывать дополнительные действия. Например, может потребоваться сначала закрыть модальное окно или перейти в нужный фрейм.

Пример: 

await page.click('#openModal');
await page.waitForSelector('#modal select');
await page.select('#modal select#country', 'ca');

Здесь выполняется клик по кнопке для открытия модального окна, после чего ждём появления нужного элемента и выполняем выбор опции внутри модального окна.

Ошибки при выборе опций

При работе с элементами формы важно учитывать, что иногда может возникать ошибка, если элемент <select> не найден, если опция с указанным значением не существует или если выбор происходит слишком быстро, до того как элемент станет доступен.

В таких случаях полезно использовать конструкцию try/catch для перехвата ошибок и вывода диагностических сообщений: 

try {
  await page.select('#country', 'jp');
} catch (error) {
  console.log('Ошибка при выборе опции: ', error);
}

Заключение

Работа с элементами формы в Puppeteer — это важный аспект тестирования веб-приложений. Выбор опций в элементах <select> может быть выполнен различными способами: по значению, индексу или тексту опции. Важно учитывать особенности динамических изменений в списках и правильно управлять асинхронностью, чтобы обеспечить надёжность тестов.

Оглавление