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