Настройка окружения для CI

Для работы с Puppeteer в тестировании на JavaScript необходимо обеспечить корректную установку пакета и всех зависимостей. Puppeteer поставляется с собственным экземпляром Chromium, что упрощает настройку, но требует внимания при интеграции в CI/CD пайплайны, где окружение может быть минимальным.

Установка через npm выполняется командой: 

npm install puppeteer --save-dev

Для облегчения веса проекта и ускорения сборки можно использовать puppeteer-core, если браузер будет устанавливаться отдельно: 

npm install puppeteer-core --save-dev

При использовании puppeteer-core важно настроить путь к исполняемому файлу браузера через опцию executablePath при запуске. 

const browser = await puppeteer.launch({
  executablePath: &
  headless: true,
});

Конфигурация CI окружения

В CI-средах (GitHub Actions, GitLab CI, Jenkins) часто отсутствуют стандартные системные библиотеки, необходимые для Chromium. Для успешного запуска Puppeteer нужно убедиться в наличии:

  • libnss3
  • libatk1.0-0
  • libatk-bridge2.0-0
  • libx11-xcb1
  • libxcomposite1
  • libxdamage1
  • libxrandr2
  • libasound2
  • libpangocairo-1.0-0
  • libpango-1.0-0
  • libcups2
  • libdbus-1-3
  • libxss1
  • libgconf-2-4
  • libnss3-dev

В GitHub Actions это реализуется через шаг run с установкой зависимостей: 

- name: Install dependencies
  run: sudo apt-get update && sudo apt-get install -y \
    libnss3 libatk1.0-0 libatk-bridge2.0-0 libx11-xcb1 \
    libxcomposite1 libxdamage1 libxrandr2 libasound2 \
    libpangocairo-1.0-0 libpango-1.0-0 libcups2 \
    libdbus-1-3 libxss1 libgconf-2-4

Настройка Headless режима и запуск браузера

В CI обычно применяется headless режим, который позволяет запускать тесты без графического интерфейса, минимизируя потребление ресурсов. 

const browser = await puppeteer.launch({
  headless: true,
  args: ['--no-sandbox', '--disable-setuid-sandbox']
});

Ключевые параметры:

  • –no-sandbox и –disable-setuid-sandbox — обязательны для многих CI-сред, иначе Chromium не запустится.
  • headless: true — минимизирует нагрузку на сервер.
  • args можно расширять для специфических требований, например, отключение GPU –disable-gpu или эмуляция мобильного устройства.

Организация скриптов тестирования

Для интеграции Puppeteer в CI лучше использовать отдельные npm-скрипты для запуска: 

{
  "scripts": {
    "test:e2e": "node tests/e2e/runTests.js"
  }
}

В runTests.js необходимо предусмотреть:

  • запуск браузера и страниц,
  • обработку ошибок и закрытие браузера в блоке finally,
  • генерацию отчётов (например, в формате JUnit или JSON для CI).

Пример организации кода: 

const puppeteer = require('puppeteer');

(async () => {
  let browser;
  try {
    browser = await puppeteer.launch({ headless: true, args: ['--no-sandbox'] });
    const page = await browser.newPage();
    await page.goto('https://example.com', { waitUntil: 'networkidle2' });
    
    const title = await page.title();
    console.log(`Title of the page: ${title}`);
  } catch (error) {
    console.error('Error during Puppeteer test:', error);
    process.exit(1);
  } finally {
    if (browser) await browser.close();
  }
})();

Кеширование браузера в CI

Чтобы ускорить сборку, рекомендуется использовать кеширование Chromium, поставляемого Puppeteer. В GitHub Actions это реализуется через actions/cache: 

- name: Cache Puppeteer Chromium
  uses: actions/cache@v3
  with:
    path: ~/.cache/puppeteer
    key: ${{ runner.os }}-puppeteer-${{ hashFiles('package-lock.json') }}
    restore-keys: |
      ${{ runner.os }}-puppeteer-

Логи и отладка в CI

Для корректной диагностики проблем в CI:

  • выводить console.log и console.error страницы через page.on(‘console’, …) и page.on(‘pageerror’, …),
  • сохранять скриншоты при падении теста: 
await page.screenshot({ path: 'screenshot-failure.png' });
  • при необходимости включать видео-запись сессий через сторонние библиотеки, например puppeteer-video-recorder.

Настройка окружения переменных

Puppeteer позволяет управлять поведением через переменные окружения:

  • PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=true — пропускать загрузку Chromium при установке, если он уже есть.
  • CHROME_BIN — указание пути к системному браузеру при использовании puppeteer-core.

Интеграция с CI/CD пайплайнами

При интеграции Puppeteer важно учитывать:

  • последовательность шагов: установка зависимостей → кеширование → запуск тестов,
  • отчётность тестов через форматы, поддерживаемые CI (JUnit, JSON, HTML),
  • использование headless режима и аргументов –no-sandbox для надежного запуска на серверах без GUI,
  • обработку ошибок и корректное завершение браузера для предотвращения утечек памяти и зависших процессов.

Этот подход обеспечивает стабильное выполнение e2e-тестов на Puppeteer в любых CI/CD средах, снижает вероятность сбоев и ускоряет процесс сборки.

Оглавление