Выбор опций в select элементах

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

Поиск элемента select

Для начала нужно найти сам элемент <select>. Для этого Playwright предоставляет несколько методов. Один из самых распространённых — это использование метода page.locator(). Он позволяет найти элемент на странице, используя различные CSS-селекторы. Например:

const selectElement = page.locator('select#my-select');

Здесь #my-select — это CSS-селектор элемента <select>, в котором необходимо выбрать одну из опций.

Выбор значения по индексу

Playwright позволяет выбирать значение в выпадающем списке по индексу, что является одним из самых быстрых способов взаимодействия с элементом <select>. Для этого используется метод selectOption(), который принимает объект с ключом index, указывающим на индекс выбранной опции.

Пример:

await selectElement.selectOption({ index: 2 });

В данном примере будет выбрана опция с индексом 2 (нумерация начинается с нуля).

Выбор значения по значению option

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

Пример:

await selectElement.selectOption({ value: 'option2' });

Здесь будет выбрана опция с атрибутом value="option2".

Выбор значения по тексту опции

Playwright также поддерживает выбор опции по тексту, который отображается в выпадающем списке. Для этого также используется метод selectOption(), но в качестве параметра передаётся текст.

Пример:

await selectElement.selectOption({ label: 'Опция 1' });

Этот метод выберет опцию, текст которой будет соответствовать “Опция 1”. Этот способ удобен, когда вам нужно выбрать опцию по её видимому названию, а не по значению или индексу.

Работа с несколькими опциями

Иногда требуется выбрать несколько опций в одном списке. Для этого необходимо передать массив объектов в метод selectOption(). Например:

await selectElement.selectOption([
  { value: 'option1' },
  { value: 'option3' }
]);

В данном случае будет выбрано сразу две опции с value="option1" и value="option3".

Ожидание загрузки опций

В случае, когда опции в выпадающем списке загружаются динамически через JavaScript (например, после выполнения асинхронных запросов), важно обеспечить, чтобы они были доступны для выбора до того, как будет выполнено действие. Для этого можно использовать методы ожидания, такие как waitForSelector() или locator.waitFor().

Пример:

await page.locator('select#my-select').waitFor();
await selectElement.selectOption({ value: 'option2' });

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

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

После того как опция выбрана, можно проверить, какая опция была активирована. Для этого используется метод inputValue() для получения текущего значения элемента <select>. Если элемент <select> позволяет выбрать только одно значение, то результат будет соответствовать значению атрибута value выбранной опции.

Пример:

const selectedValue = await selectElement.inputValue();
console.log(selectedValue);  // Выведет значение выбранной опции

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

const selectedValues = await selectElement.allSelectedOptions();
for (let option of selectedValues) {
  console.log(await option.textContent());
}

Особенности работы с элементами select в Playwright

  • Опции с disabled атрибутом: Playwright не позволяет выбрать опцию, которая имеет атрибут disabled. Если попытаться выбрать такую опцию, тест завершится с ошибкой. Это поведение соответствует стандартам HTML.
  • Обновления DOM: В случае, если выпадающий список обновляется после выборов пользователя (например, через JavaScript), важно правильно синхронизировать действия с состоянием страницы, чтобы избежать выборов из старого списка.
  • Скрытые элементы: Если элемент <select> или его опции скрыты с помощью CSS (например, display: none), Playwright не сможет с ними взаимодействовать, и метод выбора опции вызовет ошибку. Для этого следует использовать методы ожидания или обработку видимости элементов.

Пример теста с выбором из выпадающего списка

Ниже приведён пример теста, который проверяет, как выбрать опцию в выпадающем списке и проверяет правильность выбранного значения:

const { test, expect } = require('@playwright/test');

test('Выбор опции из выпадающего списка', async ({ page }) => {
  await page.goto('https://example.com');

  const selectElement = page.locator('select#my-select');

  // Ожидание загрузки элемента
  await selectElement.waitFor();

  // Выбор опции по значению
  await selectElement.selectOption({ value: 'option2' });

  // Проверка, что выбрана правильная опция
  const selectedValue = await selectElement.inputValue();
  expect(selectedValue).toBe('option2');
});

Этот тест открывает страницу, выбирает опцию по значению option2 и проверяет, что выбранное значение действительно соответствует ожидаемому.

Заключение

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

Оглавление