GitLab CI

Puppeteer — это библиотека Node.js для управления браузером Chromium или Chrome через API DevTools. Она позволяет автоматизировать действия пользователя, тестировать интерфейсы и выполнять скрейпинг страниц. GitLab CI предоставляет возможность запускать такие скрипты в среде непрерывной интеграции, обеспечивая автоматическое тестирование на каждом коммите.

Настройка окружения в GitLab CI

Для работы Puppeteer в CI требуется обеспечить наличие браузера и зависимостей для запуска Chromium. В GitLab CI это делается через образ Docker и установку необходимых пакетов.

Пример базового .gitlab-ci.yml: 

image: node:20


stages: - test

puppeteer_test: stage: test script: - npm ci - npm run test:puppeteer
variables: PUPPETEER_SKIP_CHROMIUM_DOWNLOAD: &


Пояснения:



    

  • 
node:20 — официальный образ с Node.js.

    • 

  • 
npm ci — гарантирует чистую установку зависимостей.

    • 

  • 
PUPPETEER_SKIP_CHROMIUM_DOWNLOAD — переменная,
предотвращающая повторную загрузку Chromium, если используется
собственный образ с предустановленным браузером.

    • 




Для корректной работы Chromium в Docker необходимо установить системные
библиотеки:



before_script:
  - apt-get update && apt-get install -y \
    gconf-service libasound2 libatk1.0-0 libc6 libcairo2 libcups2 libdbus-1-3 \
    libexpat1 libfontconfig1 libgcc1 libgconf-2-4 libgdk-pixbuf2.0-0 libglib2.0-0 \
    libgtk-3-0 libnspr4 libpango-1.0-0 libstdc++6 libx11-6 libx11-xcb1 libxcb1 \
    libxcomposite1 libxcursor1 libxdamage1 libxext6 libxfixes3 libxi6 libxrandr2 \
    libxrender1 libxss1 libxtst6 ca-certificates fonts-liberation libnss3 lsb-release \
    xdg-utils wget



Это обеспечивает работу всех функций браузера в среде без графического
интерфейса.






Настройка Puppeteer для CI




При запуске Puppeteer в контейнере без дисплея нужно использовать
headless режим и дополнительные флаги:



const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch({
    headless: 'new',
    args: [
      '--no-sandbox',
      '--disable-setuid-sandbox',
      '--disable-dev-shm-usage',
      '--disable-accelerated-2d-canvas',
      '--disable-gpu',
      '--window-size=1920,1080'
    ],
  });

  const page = await browser.newPage();
  await page.goto('https://example.com');
  const title = await page.title();
  console.log(`Title страницы: ${title}`);
  await browser.close();
})();



Ключевые моменты:



    

  • 
–no-sandbox и –disable-setuid-sandbox
обязательны для запуска в контейнере Docker с ограниченными правами.

    • 

  • 
–disable-dev-shm-usage предотвращает переполнение
/dev/shm при большом количестве одновременных страниц.

    • 

  • 
headless: ‘new’ активирует современный headless-режим
Puppeteer.

    • 






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




Рекомендуется отделять Puppeteer-тесты от других юнит-тестов:



project/
├─ tests/
│  ├─ puppeteer/
│  │  ├─ login.test.js
│  │  ├─ navigation.test.js
│  ├─ unit/
│  │  └─ math.test.js
├─ package.json
└─ .gitlab-ci.yml



В package.json добавляются команды:



{
  "scripts": {
    "test:puppeteer": "mocha tests/puppeteer/**/*.test.js --timeout 60000"
  }
}


    

  • 
Использование mocha позволяет организовать наборы тестов.

    • 

  • 
Увеличенный timeout (например, 60 секунд) необходим для
работы в CI, где страницы могут загружаться медленнее.

    • 






Параллельное выполнение и кэширование




Для ускорения CI-пайплайна можно запускать тесты параллельно и
использовать кэширование зависимостей:



cache:
  key: ${CI_COMMIT_REF_SLUG}
  paths:
    - node_modules/

puppeteer_test:
  stage: test
  parallel: 2
  script:
    - npm ci
    - npm run test:puppeteer


    

  • 
parallel: 2 запускает два параллельных процесса
тестирования.

    • 

  • 
Кэш node_modules ускоряет установку пакетов между сборками.

    • 






Сбор скриншотов и отчётов




Puppeteer позволяет сохранять артефакты тестов для отладки. В GitLab CI
можно настроить сбор и хранение скриншотов:



artifacts:
  paths:
    - tests/puppeteer/screenshots/
  expire_in: 1 week



В коде теста:



await page.screenshot({ path: `tests/puppeteer/screenshots/${Date.now()}.png` });



Это позволяет видеть визуальные результаты тестов, что особенно полезно
при выявлении ошибок интерфейса.






Логирование и дебаг




В CI окружении полезно включать логирование действий Puppeteer:



page.on('console', msg => console.log('PAGE LOG:', msg.text()));
page.on('pageerror', error => console.error('PAGE ERROR:', error));



Это помогает быстро локализовать проблемы при тестировании сложных
интерактивных страниц.






Интеграция с GitLab CI/CD pipelines




Puppeteer-тесты могут быть встроены в стандартные пайплайны:



stages:
  - lint
  - test
  - deploy

lint:
  stage: lint
  script: npm run lint

puppeteer_test:
  stage: test
  script:
    - npm ci
    - npm run test:puppeteer


    

  • 
Тесты запускаются после линтинга.

    • 

  • 
Пайплайн останавливается при ошибках тестов, предотвращая деплой с
багами.

    • 

  • 
Можно настроить уведомления GitLab о статусе тестов, что повышает
прозрачность процесса разработки.

    •
Оглавление