E2E-тесты на Puppeteer: автоматизация браузера для стабильного сайта

Разработка 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 

Типичные ошибки и их решение

Сравнение Puppeteer и Playwright

Что входит в наш процесс внедрения?

• Анализ критических пользовательских сценариев (обычно 20–30 для первого релиза).
• Написание E2E-тестов с учётом стабильности: кастомные таймауты, переквешивание, обработка сетевых ошибок.
• Настройка Docker-окружения и CI/CD пайплайна (GitLab CI / GitHub Actions).
• Документация по запуску и обслуживанию тестов.
• Обучение команды: как добавлять новые тесты и чинить упавшие.
• Поддержка в течение месяца после внедрения.

Сроки реализации

Базовая настройка и написание 20–30 критических сценариев занимает от 3 до 5 рабочих дней. Сроки зависят от сложности приложения и количества тестов. Точную оценку даём после анализа вашего проекта. Получите коммерческое предложение с точной оценкой — свяжитесь с нами.

Источник: документация Puppeteer