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

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

Чекбоксы

Чекбокс — элемент формы, позволяющий пользователю выбрать один или несколько вариантов. Основные операции с чекбоксами включают проверку состояния и изменение его при необходимости.

Выбор чекбокса

Для установки флажка используется метод click():

const checkbox = await $('#subscribe');
await checkbox.click();

Если необходимо убедиться, что чекбокс установлен только если он ещё не выбран, применяют метод isSelected():

if (!await checkbox.isSelected()) {
    await checkbox.click();
}

Метод isSelected() возвращает булево значение true или false, позволяя безопасно управлять состоянием чекбокса без лишних кликов.

Снятие выбора

Снятие выбора чекбокса аналогично выбору, с проверкой текущего состояния:

if (await checkbox.isSelected()) {
    await checkbox.click();
}

Такой подход предотвращает случайное переключение состояния и делает тесты более стабильными.

Ассерты для чекбоксов

WebdriverIO интегрируется с библиотеками для ассертов, например expect-webdriverio:

await expect(checkbox).toBeSelected();
await expect(checkbox).not.toBeSelected();

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

Радиокнопки

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

Выбор радиокнопки

const radioOption = await $('input[name="gender"][value="male"]');
await radioOption.click();

При работе с группой радиокнопок рекомендуется проверять текущее состояние, чтобы не вызывать лишние клики:

if (!await radioOption.isSelected()) {
    await radioOption.click();
}

Ассерты для радиокнопок

await expect(radioOption).toBeSelected();
const otherOption = await $('input[name="gender"][value="female"]');
await expect(otherOption).not.toBeSelected();

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

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

Для массового управления элементами удобно использовать коллекции:

const checkboxes = await $$('input[type="checkbox"]');

for (const box of checkboxes) {
    if (!await box.isSelected()) {
        await box.click();
    }
}

Аналогично для радиокнопок:

const radios = await $$('input[name="gender"]');
for (const radio of radios) {
    const value = await radio.getAttribute('value');
    if (value === 'female' && !await radio.isSelected()) {
        await radio.click();
    }
}

Использование массивов элементов упрощает обработку больших форм и делает код более читаемым.

Динамические состояния и ожидания

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

await checkbox.waitForClickable({ timeout: 5000 });
await checkbox.click();
await expect(checkbox).toBeSelected();

Методы waitForClickable, waitForEnabled и waitForDisplayed позволяют дождаться готовности элемента перед взаимодействием, что снижает вероятность ошибок из-за гонок условий.

Дополнительные методы WebdriverIO

  • getAttribute('checked') — получение значения атрибута checked, особенно полезно для проверки состояния на стороне DOM.
  • isEnabled() — проверка доступности элемента для клика.
  • scrollIntoView() — прокрутка к элементу, если он вне видимой области страницы.

Пример проверки и взаимодействия с недоступным чекбоксом:

const checkbox = await $('#terms');
if (await checkbox.isEnabled()) {
    await checkbox.click();
}

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

  1. Не кликайте на элемент без проверки состояния, чтобы избежать непредсказуемых переключений.
  2. Используйте явные ожидания при работе с динамическими формами.
  3. Групповые операции упрощают тесты и делают код масштабируемым.
  4. Ассерты состояния помогают ловить баги на уровне UI, не полагаясь только на логику приложения.

Эффективное использование методов WebdriverIO для работы с чекбоксами и радиокнопками повышает стабильность автоматизированных тестов и снижает вероятность ложных срабатываний.

Оглавление