Travis CI

Travis CI — это сервис непрерывной интеграции, который позволяет автоматизировать запуск тестов и сборку проектов на различных языках программирования, включая JavaScript. Интеграция Puppeteer с Travis CI открывает возможности для полноценного автоматического тестирования веб-приложений в реальном браузере без необходимости вручную запускать тесты на локальной машине.

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

Travis CI по умолчанию использует виртуальные среды Linux с ограниченным набором зависимостей. Puppeteer требует наличия браузера Chromium и некоторых системных библиотек. Для корректной работы необходимо настроить окружение.

Пример конфигурации .travis.yml:

language: node_js
node_js:
  - "18"
dist: focal
addons:
  apt:
    packages:
      - 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
      - libx11-6
      - libx11-xcb1
      - libxcb1
      - libxcomposite1
      - libxcursor1
      - libxdamage1
      - libxext6
      - libxfixes3
      - libxi6
      - libxrandr2
      - libxrender1
      - libxss1
      - libxtst6
      - ca-certificates
      - fonts-liberation
      - libappindicator1
      - libnss3
      - lsb-release
      - xdg-utils
      - wget

Этот блок addons гарантирует, что виртуальная машина Travis CI имеет все необходимые зависимости для запуска Chromium, который Puppeteer использует по умолчанию.

Установка Puppeteer и настройка скриптов тестирования

В проекте Puppeteer устанавливается через npm:

npm install puppeteer --save-dev

Для автоматического запуска тестов создается скрипт в package.json:

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

Файл runTests.js может содержать следующий минимальный пример:

const puppeteer = require(&

(async () => {
  const browser = await puppeteer.launch({ headless: true });
  const page = await browser.newPage();
  await page.goto('https://example.com');
  
  const title = await page.title();
  if(title !== 'Example Domain') {
    console.error('Тест не пройден: неверный заголовок');
    process.exit(1);
  }

  console.log('Тест пройден успешно');
  await browser.close();
})();

Особенности запуска Puppeteer в Travis CI

Headless режим Travis CI не поддерживает графический интерфейс, поэтому Puppeteer должен работать в headless-режиме (headless: true).
Запуск Chromium без песочницы Иногда в CI окружении требуется отключить песочницу Chromium для корректного запуска:
```
const browser = await puppeteer.launch({ args: ['--no-sandbox', '--disable-setuid-sandbox'] });
```
Установка переменных окружения Для тестирования разных конфигураций или API ключей можно использовать переменные Travis CI:
```
env:
  global:
    - NODE_ENV=test
    - API_KEY=secret_key
```
Проверка логов браузера В Travis CI вывод всех ошибок браузера Puppeteer отображается в логах сборки, что облегчает диагностику проблем, связанных с загрузкой страниц или взаимодействием с DOM.

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

Для масштабируемого проекта рекомендуется структурировать тесты следующим образом:

project/
├─ tests/
│  ├─ runTests.js
│  ├─ login.test.js
│  ├─ navigation.test.js
│  └─ form.test.js

Каждый файл теста экспортирует функцию или класс с описанием сценариев, а runTests.js выполняет их по очереди, фиксируя результат:

const loginTests = require('./login.test');
const navTests = require('./navigation.test');
const formTests = require('./form.test');

(async () => {
  try {
    await loginTests();
    await navTests();
    await formTests();
    console.log('Все тесты пройдены успешно');
  } catch (err) {
    console.error('Ошибка при выполнении тестов', err);
    process.exit(1);
  }
})();

Интеграция с Travis CI

После настройки .travis.yml и тестов Puppeteer, каждый коммит автоматически запускает CI:

Travis CI клонирует репозиторий.
Устанавливает зависимости через npm install.
Запускает тесты через npm test.
Отображает результат в логах сборки. При ошибке тестов сборка помечается как неуспешная.

Это позволяет отслеживать корректность работы веб-приложения на разных этапах разработки и гарантирует стабильность интерфейса при обновлениях.