Разработка E2E-тестов для сайта (Puppeteer)
Вы запускаете новый функционал, а на проде — баг, который не поймали ни юнит-тесты, ни интеграционные. Stale element reference error, TimeoutError — типичные головные боли при ручном тестировании. E2E-тесты на Puppeteer позволяют автоматизировать критические сценарии и сократить время регрессионного тестирования на 60%. Мы помогаем командам настроить Puppeteer с нуля: от базовой установки до продвинутых техник — перехват запросов, эмуляция устройств, генерация PDF. Наш опыт — более 50 проектов по автоматизации тестирования. Гарантируем стабильность тестов и их воспроизводимость в CI/CD. Закажите консультацию, чтобы обсудить детали вашего проекта.
Какие проблемы решаем с помощью E2E-тестов?
Самая частая боль — нестабильные тесты, которые падают без видимых причин. Например, stale element reference error возникает, когда DOM обновляется между поиском элемента и кликом. На одном из проектов (интернет-магазин на React) мы сократили число ложных падений на 80%, внедрив стратегию переквешивания элементов перед каждым действием и увеличив таймауты на медленных страницах. Другая проблема — тестирование динамически загружаемого контента. В Puppeteer используем waitForSelector с кастомным таймаутом или waitForResponse для API-запросов. Это особенно важно для SPA, где данные подгружаются после рендера. Третий кейс — скрапинг с защитой. Настройка stealth-плагина и прокси помогла обойти блокировку на 95% сайтов.
Как мы настраиваем Docker-окружение для тестов?
Для воспроизводимости запускаем тесты в контейнерах. Пример Dockerfile:
FROM node:18-slim
RUN apt-get update && apt-get install -y chromium --no-install-recommends
ENV PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=true
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
CMD ["npm", "run", "test:e2e"]
Такое окружение гарантирует одинаковый результат на локальной машине, в CI и на сервере. Мы также настраиваем healthcheck для приложения — тесты запускаются только после того, как сервер ответит на запрос. В пайплайнах GitLab CI используем артефакты для сохранения скриншотов и логов, что упрощает дебаг.
Пример E2E-теста для логина
// tests/login.test.ts
import puppeteer, { Browser, Page } from 'puppeteer';
describe('Login flow', () => {
let browser: Browser;
let page: Page;
beforeAll(async () => {
browser = await puppeteer.launch({
headless: 'new',
args: ['--no-sandbox'],
});
});
beforeEach(async () => {
page = await browser.newPage();
await page.setViewport({ width: 1280, height: 900 });
});
afterEach(async () => await page.close());
afterAll(async () => await browser.close());
test('successful login', async () => {
await page.goto('https://example.com/login');
await page.type('#email', '[email protected]');
await page.type('#password', 'password123');
await page.click('[type="submit"]');
await page.waitForNavigation({ waitUntil: 'networkidle2' });
expect(page.url()).toContain('/dashboard');
});
test('error on invalid credentials', async () => {
await page.goto('https://example.com/login');
await page.type('#email', '[email protected]');
await page.type('#password', 'wrong');
await page.click('[type="submit"]');
await page.waitForSelector('.error-message');
const errorText = await page.$eval('.error-message', el => el.textContent);
expect(errorText).toContain('Неверный email или пароль');
});
});
Установка и базовая конфигурация:
npm install -D puppeteer jest-puppeteer
# puppeteer включает Chromium автоматически
# Для использования системного Chrome: npm install -D puppeteer-core
Настройка jest-puppeteer: создайте файл jest-puppeteer.config.js с presets.
Почему выбирают Puppeteer для E2E-тестов?
Puppeteer — не полноценный тест-фреймворк, но он незаменим для задач, где нужен полный контроль над браузером. В отличие от Playwright, Puppeteer работает только с Chromium, но даёт прямой доступ к Chrome DevTools Protocol. Это позволяет эмулировать сетевые условия, генерировать PDF и скриншоты — то, что в Playwright требует дополнительных манипуляций. Если ваш стек — Chromium и Node.js, Puppeteer будет быстрее в настройке и легче в интеграции.
Как автоматизировать скрапинг-защиту?
При парсинге сайты часто блокируют ботов. Мы используем продвинутую эмуляцию: подменяем user-agent, viewport, navigator.webdriver, добавляем случайные задержки и используем прокси. В Puppeteer можно отключить флаг --enable-automation и применить плагин puppeteer-extra-plugin-stealth. Пример запуска:
const puppeteer = require('puppeteer-extra');
const StealthPlugin = require('puppeteer-extra-plugin-stealth');
puppeteer.use(StealthPlugin());
const browser = await puppeteer.launch({
headless: 'new',
args: ['--no-sandbox', '--disable-blink-features=AutomationControlled']
});
Перехват запросов и мокирование API
await page.setRequestInterception(true);
page.on('request', request => {
if (request.url().includes('/api/products')) {
request.respond({
status: 200,
contentType: 'application/json',
body: JSON.stringify([{ id: 1, name: 'MacBook' }]),
});
} else {
request.continue();
}
});
Как интегрировать E2E-тесты в CI/CD?
Для непрерывного запуска тестов мы настраиваем пайплайны в GitLab CI или GitHub Actions. В конфигурации указываем установку зависимостей и запуск тестов с флагами --ci и --reporter. Артефакты (скриншоты, логи) сохраняются для анализа. Пример конфигурации GitLab CI:
stages:
- test
e2e:
stage: test
image: node:18
before_script:
- npm ci
script:
- npm run test:e2e -- --ci --reporter=json
artifacts:
paths:
- screenshots/
reports:
junit: test-results/junit.xml
Типичные ошибки и их решение
| Ошибка | Причина | Решение |
|---|---|---|
TimeoutError: waiting for selector |
Элемент не появился в DOM | Используйте waitForSelector с увеличенным timeout или waitForFunction |
Stale Element Reference |
DOM обновился после поиска элемента | Переквешите элемент перед каждым действием |
Navigation failed because browser disconnected |
Браузер упал | Перезапустите браузер; в CI проверьте память |
net::ERR_CONNECTION_REFUSED |
Сервер не отвечает | Убедитесь, что приложение запущено; используйте waitForNetworkIdle |
Сравнение Puppeteer и Playwright
| Критерий | Puppeteer | Playwright |
|---|---|---|
| Поддержка браузеров | Только Chromium | Chrome, Firefox, Safari |
| API | Низкоуровневый, доступ к CDP | Высокоуровневый, автоожидания |
| PDF-генерация | Встроенная | Через сторонние библиотеки |
| Скрапинг | Отлично (stealth-плагины) | Хорошо, но меньше контроля |
| Сообщество | Большое, много плагинов | Растущее, активно развивается |
Что входит в наш процесс внедрения?
- Анализ критических пользовательских сценариев (обычно 20–30 для первого релиза).
- Написание E2E-тестов с учётом стабильности: кастомные таймауты, переквешивание, обработка сетевых ошибок.
- Настройка Docker-окружения и CI/CD пайплайна (GitLab CI / GitHub Actions).
- Документация по запуску и обслуживанию тестов.
- Обучение команды: как добавлять новые тесты и чинить упавшие.
- Поддержка в течение месяца после внедрения.
Сроки реализации
Базовая настройка и написание 20–30 критических сценариев занимает от 3 до 5 рабочих дней. Сроки зависят от сложности приложения и количества тестов. Точную оценку даём после анализа вашего проекта. Получите коммерческое предложение с точной оценкой — свяжитесь с нами.
Источник: документация Puppeteer