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

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

Основы работы с чекбоксами

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

Клик по чекбоксу

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

const checkbox = await page.$(&
await checkbox.click();

Этот код выбирает первый чекбокс на странице и выполняет по нему клик.

Проверка состояния чекбокса

Чтобы проверить, выбран ли чекбокс, используется метод evaluate(), который позволяет извлечь информацию о DOM-элементе. Для чекбокса можно проверить его свойство checked. 

const isChecked = await page.evaluate(() => {
  const checkbox = document.querySelector('input[type="checkbox"]');
  return checkbox.checked;
});
console.log(isChecked);  // true или false

Этот код извлекает состояние первого чекбокса на странице и выводит в консоль его текущее состояние.

Выбор и снятие выбора с чекбокса

Иногда нужно программно установить состояние чекбокса в нужное положение, независимо от его текущего состояния. Для этого можно использовать метод click(), но с дополнительной проверкой текущего состояния. 

const checkbox = await page.$('input[type="checkbox"]');
const isChecked = await page.evaluate(checkbox => checkbox.checked, checkbox);

if (!isChecked) {
  await checkbox.click();  // Снимаем выбор, если он не установлен
}

Этот код сначала проверяет, выбран ли чекбокс, и если нет — выполняет клик по элементу, чтобы установить его в состояние “выбран”.

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

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

Клик по радиокнопке

Чтобы выбрать радиокнопку, необходимо использовать метод click() на соответствующем элементе: 

const radioButton = await page.$('input[type="radio"]');
await radioButton.click();

Этот код выберет первую радиокнопку на странице.

Проверка состояния радиокнопки

Как и в случае с чекбоксами, для проверки, выбран ли элемент, используется свойство checked: 

const isSelected = await page.evaluate(() => {
  const radioButton = document.querySelector('input[type="radio"]');
  return radioButton.checked;
});
console.log(isSelected);  // true или false

Этот код извлекает информацию о том, выбрана ли первая радиокнопка на странице.

Выбор радиокнопки в группе

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

const radioButton = await page.$('input[name="groupName"][value="option1"]');
await radioButton.click();

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

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

Для тестирования интерактивных форм важно учитывать, что изменения состояния чекбоксов и радиокнопок могут происходить не мгновенно, особенно если они зависят от асинхронных процессов. Puppeteer предоставляет несколько методов для ожидания событий, таких как waitForSelector() или waitForFunction(), которые можно использовать для ожидания изменения состояния элемента.

Пример ожидания изменения состояния чекбокса: 

const checkbox = await page.$('input[type="checkbox"]');
await checkbox.click();

// Ожидаем, пока чекбокс будет выбран
await page.waitForFunction(
  'document.querySelector("input[type=checkbox]").checked === true'
);

В этом примере скрипт будет ожидать, пока состояние чекбокса не станет true.

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

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

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

Пример работы с чекбоксом, который вызывает асинхронное обновление интерфейса: 

const checkbox = await page.$('input[type="checkbox"]');
await checkbox.click();

// Ожидаем, что после клика произойдут изменения на странице
await page.waitForSelector('.some-dynamic-element');

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

Советы и рекомендации

  1. Использование уникальных селекторов: Для повышения надёжности тестов старайтесь использовать уникальные селекторы для выбора элементов формы, таких как идентификаторы (id), имена (name) или специфичные классы, чтобы избежать ошибок при автоматизации.

  2. Асинхронные операции: Не забывайте использовать методы ожидания для асинхронных процессов, чтобы ваш тест был стабильным и надёжным.

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

Оглавление