Интеграция с GitHub Actions

1. Регистрация и API ключ

Зарегистрируйтесь в панели SnapStack и создайте новый проект. Скопируйте ваш SNAPSTACK_API_KEY из раздела «Настройки проекта». Этот ключ необходим для аутентификации запросов от вашего CI-сервера.

2. Настройка секретов в GitHub

Перейдите в настройки вашего репозитория на GitHub: Settings > Secrets and variables > Actions. Нажмите New repository secret и сохраните ключ с именем SNAPSTACK_API_KEY. Это гарантирует, что ваши учетные данные не попадут в лог сборки.

3. Установка CLI-инструмента

SnapStack предоставляет легковесный CLI для удобной интеграции. Добавьте шаг установки в начало вашего воркфлоу:

npm install -g @snapstack/cli

Или используйте бинарный файл для Linux-нод GitHub Actions.

4. Конфигурация воркфлоу

Создайте файл .github/workflows/visual-tests.yml. Ниже приведен пример конфигурации для запуска тестов при каждом пуше в ветку main:

name: Visual Regression Tests
on: [push]

jobs:
  snapstack-test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - name: Setup Node
        uses: actions/setup-node@v3
        with:
          node-version: '18'
      - name: Run SnapStack
        run: snapstack run --config snapstack.config.json
        env:
          SNAPSTACK_API_KEY: ${{ secrets.SNAPSTACK_API_KEY }}

5. Написание тестовых сценариев

Создайте файл конфигурации snapstack.config.json в корне проекта. Укажите URL вашей локально поднятой версии приложения (доступной через туннель, например, ngrok) и список селекторов для захвата.

{
  "baseUrl": "http://localhost:3000",
  "screenshots": [
    { "id": "homepage-hero", "selector": ".hero-section" },
    { "id": "dashboard-table", "selector": "#main-table" }
  ]
}