Работа с формами

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

  1. Заполнение текстовых полей

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

const input = await page.$(&
await input.type('testuser');

Если необходимо имитировать ввод с задержкой, чтобы он выглядел более натурально, можно использовать параметр delay: 

await input.type('testuser', { delay: 100 }); // задержка в 100 миллисекунд между символами

  1. Отправка формы

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

const submitButton = await page.$('button[type="submit"]');
await submitButton.click();

Если форма содержит несколько кнопок отправки, то необходимо выбрать конкретную кнопку по её типу или уникальному идентификатору. После этого можно выполнить клик по нужной кнопке.

  1. Работа с чекбоксами

Для работы с чекбоксами используется метод check() для выбора и uncheck() для снятия выбора. Метод check() будет имитировать установку галочки в чекбоксе. 

const checkbox = await page.$('input[type="checkbox"]');
await checkbox.check();  // Устанавливаем галочку

Если чекбокс уже выбран, метод check() ничего не изменит. Для снятия галочки используется метод uncheck(). 

await checkbox.uncheck();  // Снимаем галочку

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

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

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

Puppeteer также позволяет работать с радиокнопками с учетом их состояния. Метод click() установит выбранную кнопку, если она не выбрана, и не произведет изменений, если она уже выбрана.

  1. Выбор из выпадающего списка

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

await page.select('select[name="country"]', 'USA');

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

await page.select('select[name="countries"]', 'USA', 'Canada');

Метод select() работает с элементами <select>, которые содержат вложенные элементы <option>.

  1. Обработка ошибок при взаимодействии с формами

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

try {
  const submitButton = await page.$('button[type="submit"]');
  await submitButton.click();
} catch (error) {
  console.error('Ошибка при отправке формы:', error);
}

Также можно использовать метод waitForSelector(), чтобы дождаться появления элемента перед взаимодействием с ним, что уменьшает вероятность ошибок. 

await page.waitForSelector('input[name="username"]');
const input = await page.$('input[name="username"]');
await input.type('testuser');

  1. Валидация данных формы

После отправки формы важно провести валидацию данных, чтобы убедиться, что форма была успешно отправлена. Например, можно проверить, что после отправки формы на странице появилась ожидаемая надпись, подтверждающая успешную отправку. 

await page.waitForSelector('.success-message');
const successMessage = await page.$eval('.success-message', el => el.textContent);
console.log(successMessage); // Должен быть текст о успешной отправке

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

await page.waitForSelector('.error-message');
const errorMessage = await page.$eval('.error-message', el => el.textContent);
console.log(errorMessage); // Сообщение об ошибке

  1. Параллельная работа с несколькими формами

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

const form1 = await page.$(&#39;#form1&#39;);
const form2 = await page.$('#form2');








await Promise.all([ form1.type('input[name="username"]', 'user1'),
form2.type('input[name="username"]', 'user2')]);

Этот подход помогает ускорить выполнение тестов и взаимодействие с несколькими элементами формы одновременно.

  1. Использование куки и локальных данных

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

Для работы с куки можно использовать метод page.cookies(), чтобы получить текущие куки, и page.setCookie(), чтобы установить куки. 

// Получение куки const cookies = await page.cookies();

// Установка куки await page.setCookie({ name: 'auth_token', value:
'some-token-value', domain: 'example.com', });

Для работы с локальными данными используется API localStorage и sessionStorage, которые можно взаимодействовать через page.evaluate(). 

// Установить значение в localStorage
await page.evaluate(() => {
  localStorage.setItem('user', JSON.stringify({ username: 'testuser' }));
});

  1. Асинхронная обработка данных форм

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

await page.waitForResponse(response => response.url().includes('/api/data') && response.status() === 200);
const submitButton = await page.$('button[type="submit"]');
await submitButton.click();

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

Заключение

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

Оглавление