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

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

Чекбоксы

Чекбоксы представляют собой элементы, которые могут быть либо включены, либо выключены. Взаимодействие с чекбоксами в Playwright реализуется с помощью метода check() для установки состояния в «включено» и uncheck() для «выключения».

Пример установки чекбокса в состояние «включено»:
await page.locator('input[type="checkbox"]').check();

Если нужно убедиться, что чекбокс действительно включен, можно использовать метод isChecked(), который возвращает true, если элемент находится в состоянии «включено», и false в противном случае.

const isChecked = await page.locator('input[type="checkbox"]').isChecked();
console.log(isChecked);  // true или false

Ожидание изменения состояния чекбокса

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

await page.locator('input[type="checkbox"]').check({ force: true });
await page.locator('input[type="checkbox"]').waitFor({ state: 'checked' });

Радио-кнопки

Радио-кнопки отличаются от чекбоксов тем, что позволяют выбрать только одно значение в группе. Взаимодействие с радио-кнопками в Playwright осуществляется через методы check() и uncheck(), аналогичные чекбоксам.

Пример выбора радио-кнопки:
await page.locator('input[type="radio"]').check();

Важно, что при выборе радио-кнопки, остальные элементы в группе становятся неактивными, что соответствует стандартному поведению. При этом метод check() автоматически снимает выбор с других радио-кнопок в той же группе.

Проверка, что радио-кнопка выбрана

Как и с чекбоксами, можно использовать метод isChecked(), чтобы проверить, выбрана ли радио-кнопка.

const isRadioSelected = await page.locator('input[type="radio"]').isChecked();
console.log(isRadioSelected);  // true или false

Проверка нескольких чекбоксов или радио-кнопок

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

const checkboxes = await page.locator('input[type="checkbox"]');
for (let i = 0; i < await checkboxes.count(); i++) {
    const isChecked = await checkboxes.nth(i).isChecked();
    console.log(`Checkbox ${i} is checked: ${isChecked}`);
}

Тестирование с помощью чекбоксов и радио-кнопок

Автоматизация тестирования с использованием чекбоксов и радио-кнопок часто требует проверки правильности выбора. Для этого необходимо использовать методы Playwright для моделирования сценариев с этими элементами. Например, проверка формы, в которой необходимо выбрать один из вариантов из нескольких радио-кнопок, или тестирование формы, где пользователь может выбрать несколько опций через чекбоксы.

Пример выбора нескольких чекбоксов:
await page.locator('input[type="checkbox"][value="option1"]').check();
await page.locator('input[type="checkbox"][value="option2"]').check();
Пример тестирования группы радио-кнопок:
await page.locator('input[type="radio"][value="option1"]').check();
await page.locator('input[type="radio"][value="option2"]').check();  // Эта строка не выполнится, так как можно выбрать только один вариант

Сложные сценарии с чекбоксами и радио-кнопками

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

// Пример использования ожидания, если чекбокс должен появиться после клика
await page.locator('button#showCheckbox').click();
await page.locator('input[type="checkbox"]').waitFor({ state: 'visible' });
await page.locator('input[type="checkbox"]').check();

Также Playwright предоставляет возможности для выполнения проверки с условием на странице до совершения действия, что помогает гибко взаимодействовать с чекбоксами и радио-кнопками в зависимости от состояния других элементов интерфейса.

Советы по взаимодействию с чекбоксами и радио-кнопками

  • Используйте метод force: true для манипуляций с элементами, которые могут быть скрытыми или неактивными по умолчанию.
  • Для сложных форм или элементов, которые могут изменяться динамически, не забывайте использовать методы ожидания, такие как waitFor(), чтобы гарантировать корректное выполнение тестов.
  • Применяйте проверки состояния с помощью isChecked() для уверенности в правильности выполнения шагов, особенно когда состояние элементов критично для дальнейшего выполнения теста.

Playwright предоставляет гибкие и мощные инструменты для работы с чекбоксами и радио-кнопками, которые позволяют легко автоматизировать тестирование таких элементов, независимо от их сложности.

Оглавление