Автоматизация форм с помощью Puppeteer: Ввод текста, заполнение форм и моделирование работы пользователя

Puppeteer — это библиотека для Node.js, которая позволяет автоматизировать браузеры, такие как Chrome, упрощая рутинные задачи: заполнение форм, ввод текста и взаимодействие с пользователем. Вот что можно делать с её помощью:

• Автоматизировать заполнение форм: текстовые поля, выпадающие списки, чекбоксы и даже динамические формы.
• Имитировать человеческий ввод: добавлять задержки, исправления и паузы для реалистичности.
• Работать со сложными формами: календарями, многошаговыми формами и валидацией в реальном времени.
• Эмулировать действия пользователя: перемещение курсора, скроллинг и навигацию.

Ключевые преимущества:

• Экономия времени: сокращение ручной работы до 50%.
• Повышение точности: исключение человеческих ошибок.
• Масштабируемость: одновременная обработка множества форм.
• Снижение затрат: автоматизация повторяющихся задач.

await page.type('#username', 'exampleUser');  
await page.type('#password', 'examplePass');  
await page.click('#submit-button');

Puppeteer подходит для автоматизации логинов, многошаговых форм и работы с динамическим контентом. Готовы начать? Давайте разберёмся, как это работает.

Основные методы ввода данных

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

Автоматизация текстовых полей

Вот методы для автоматизации ввода текста:

‍

Пример автоматизации логина:

await page.type('#username', 'tomsmith');  
await page.type('#password', 'SuperSecretPassword!');  
await page.keyboard.press('Enter');

Чтобы ввод выглядел естественнее, можно добавить задержки между нажатиями. Подробнее об этом — в следующем разделе.

Имитация человеческого печатания

Для реалистичности можно использовать переменные задержки, исправления и паузы. Плагин puppeteer-extra-plugin-human-typing помогает создать такой эффект:

await page.type('#search-input', 'автоматизация тестирования', { delay: 100 });  

await page.typeHuman('[name="q"]', 'Это печатает робот?', {  
 backspaceMaximumDelayInMs: 1500,  
 backspaceMinimumDelayInMs: 750,  
 maximumDelayInMs: 650,  
 minimumDelayInMs: 150  
});

Этот метод делает ввод более естественным за счёт:

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

Пример более сложного взаимодействия:

await page.focus('#input-field');  
await page.type('#input-field', 'Привет, мир!');

Автоматизация сложных форм

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

Работа с выпадающими списками и чекбоксами

Автоматизация выпадающих списков, чекбоксов и радиокнопок:

// Выбор значения из списка  
await page.select('#country-select', 'RUS'); // Выбирает "Россия"  

// Взаимодействие с чекбоксом  
await page.click('#terms-checkbox');  

// Выбор радиокнопки  
await page.click('[id=Mortgagees_0__MortgageeType][value=COR]');

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

Автоматизация полей с датами

Календари могут быть разной сложности. Вот как с ними работать:

// Прямой ввод даты  
await page.type("#datepicker", "26/01/2025");  

// Изменение поля с атрибутом readonly  
await page.$eval('#txt_FromDateText', el => el.removeAttribute('readonly'));  
await page.type('#txt_FromDateText', '17/03/2025');  

// Работа с календарём  
await page.click('#calendar-trigger'); // Открыть календарь  
await page.waitForSelector('.calendar-grid'); // Дождаться загрузки  
await page.click(`[data-date="2025-03-17"]`); // Выбрать дату

Обработка динамических форм

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

Пример для полей с динамической валидацией:

// Ожидание загрузки поля  
await page.waitForSelector('#dynamic-input');  

// Ввод данных и ожидание завершения валидации  
await page.type('#dynamic-input', '[email protected]');  
await page.waitForFunction(  
 selector => !document.querySelector(selector).classList.contains('error'),  
 {},  
 '.validation-indicator'  
);

Обработка многошаговых форм:

// Переход к следующему шагу  
await page.click('#next-button');  
await page.waitForNavigation();  

// Обработка диалогов подтверждения  
page.on('dialog', async dialog => {  
 await dialog.accept();  
});

Обработка ошибок:

try {  
 await page.waitForSelector('#dynamic-content', { timeout: 5000 });  
} catch (error) {  
 console.error('Ошибка загрузки контента:', error);  
}

Имитация действий пользователя

Помимо ввода данных, Puppeteer позволяет эмулировать сложные взаимодействия: движения мыши, скроллинг и навигацию.

Движения мыши и скроллинг

Примеры:

// Наведение курсора  
await page.hover('#form-element');  

// Клик с задержкой  
await page.click('#submit-button', { delay: 5000 });  

// Плавный скроллинг  
await page.evaluate(() => {  
 window.scrollTo({ top: 500, behavior: 'smooth' });  
});

Бесконечный скроллинг:

await page.evaluate(async () => {  
 await new Promise((resolve) => {  
   let totalHeight = 0;  
   const distance = 100;  
   const timer = setInterval(() => {  
     const scrollHeight = document.body.scrollHeight;  
     window.scrollBy(0, distance);  
     totalHeight += distance;  
     if (totalHeight >= scrollHeight) {  
       clearInterval(timer);  
       resolve();  
     }  
   }, 100);  
 });  
});

Навигация по многошаговым формам

Для отладки можно замедлить выполнение:

const browser = await puppeteer.launch({  
 headless: false, // Показывать интерфейс браузера  
 slowMo: 100      // Задержка 100 мс между действиями  
});

Добавление случайных задержек:

‍

Обработка модальных окон:

page.on('dialog', async dialog => {  
 const message = dialog.message();  
 if (message.includes('подтвердить')) {  
   await dialog.accept();  
 } else {  
   await dialog.dismiss();  
 }  
});

Рекомендации по автоматизации форм

Обработка ошибок

Используйте try-catch для отлова ошибок:

try {  
 await page.type('#username', 'testuser');  
 await page.type('#password', 'password123');  
 await page.click('#submit');  
} catch (error) {  
 console.error(`Ошибка отправки формы: ${error.message}`);  
 await page.screenshot({ path: `error-${Date.now()}.png` });  
}

Проверка валидации:

// Поиск сообщений об ошибках  
const errorMessage = await page.$('.error-message-container');  
if (errorMessage) {  
 const text = await page.evaluate(el => el.textContent, errorMessage);  
 throw new Error(`Ошибка валидации: ${text}`);  
}  

// Проверка успешной отправки  
const success = await page.waitForSelector('.success-message', { timeout: 5000 })  
 .catch(() => false);  
if (!success) {  
 throw new Error('Таймаут отправки формы');  
}

Установка таймаутов:

await page.setDefaultNavigationTimeout(30000);  
await page.setDefaultTimeout(20000);

Оптимизация производительности

Советы:

‍

Пример настройки для продакшена:

‍

Режим headless ускоряет выполнение: тесты, занимавшие 5 секунд, завершаются за 3 секунды (ускорение на 40%).

Умные стратегии ожидания:

// Ожидание завершения сетевой активности  
await page.waitForNavigation({  
 waitUntil: 'networkidle0',  
 timeout: 30000  
});  

// Проверка видимости элемента перед взаимодействием  
await page.waitForSelector('#submit-button', {  
 visible: true,  
 timeout: 5000  
});

Итоги и дальнейшие шаги

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

‍

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

Дальнейшие шаги:

• Low-Code решения: Нодуль позволяет использовать Puppeteer без программирования. Например, можно настроить автоматическое сохранение страниц в PDF и загрузку в AWS S3.
• Расширенные возможности: Плагины Puppeteer Extra для анонимного просмотра. Для обхода CAPTCHA подходят сервисы вроде 2Captcha.
• Корпоративная интеграция: Компании, такие как TaskUs, успешно внедрили Puppeteer.

«Нодуль даёт клиентам гибкость в улучшении пользовательского опыта и рабочих процессов. Это ключевой инструмент для реализации наших идей.»
— Manish Pandya, SVP of Digital в TaskUs

Для надёжной автоматизации форм сосредоточьтесь на:

• Грамотной обработке ошибок.
• Умных стратегиях ожидания.
• Постоянном мониторинге.