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

GitHub Actions представляет собой мощный инструмент для автоматизации процессов разработки и тестирования. В сочетании с Playwright, который обеспечивает быстрые и надежные автоматизированные тесты для веб-приложений, он становится идеальным решением для организации CI/CD процессов. В этой статье рассмотрим, как настроить интеграцию Playwright с GitHub Actions, чтобы автоматизировать запуск тестов на различных браузерах и платформах.

Основные принципы интеграции Playwright и GitHub Actions

GitHub Actions позволяет создавать автоматизированные рабочие процессы (workflows), которые запускаются при различных событиях в репозитории. Для автоматизации тестирования с использованием Playwright необходимо создать файл конфигурации workflow, в котором указываются все шаги, включая установку зависимостей, запуск тестов и сбор логов.

Шаг 1: Создание конфигурации GitHub Actions

Рабочий процесс GitHub Actions описывается в YAML файле, который размещается в директории .github/workflows вашего репозитория. Этот файл определяет последовательность шагов, которые GitHub будет выполнять, начиная с установки зависимостей и заканчивая запуском тестов.

Пример конфигурации workflow:

name: Run Playwright Tests

on:
  push:
    branches:
      - main
  pull_request:
    branches:
      - main

jobs:
  test:
    runs-on: ubuntu-latest
    strategy:
      matrix:
        browser: [chromium, firefox, webkit]
    steps:
      - name: Checkout repository
        uses: actions/checkout@v2

      - name: Set up Node.js
        uses: actions/setup-node@v2
        with:
          node-version: '16'

      - name: Install dependencies
        run: |
          npm install

      - name: Run Playwright Tests
        run: |
          npx playwright install
          npm test

Шаг 2: Описание компонентов конфигурации

  • name: Название workflow, которое будет отображаться в интерфейсе GitHub Actions.

  • on: Указывает, при каких событиях должен запускаться workflow. В примере выше workflow запускается при push в ветку main или при создании pull request в ту же ветку.

  • jobs: Описывает задачи, которые выполняются в рамках workflow. В примере только одна задача — тестирование.

    • runs-on: Указывает на какую операционную систему будет выполняться задача. В данном случае это ubuntu-latest.
    • strategy.matrix: Позволяет запускать тесты сразу на нескольких браузерах. В примере тесты будут запускаться на chromium, firefox и webkit.

  • steps: Содержит список шагов, которые будут выполнены:

    • Checkout repository: Загружает код из репозитория.
    • Set up Node.js: Настроит окружение Node.js версии 16.
    • Install dependencies: Устанавливает все зависимости, указанные в package.json, включая Playwright.
    • Run Playwright Tests: Устанавливает необходимые браузеры для Playwright и запускает тесты.

Шаг 3: Установка Playwright

Для корректной работы Playwright в вашем проекте необходимо установить несколько зависимостей. В package.json вашего проекта должна быть указана зависимость от Playwright. Например:

{
  "dependencies": {
    "playwright": "^1.20.0"
  },
  "scripts": {
    "test": "playwright test"
  }
}

После этого можно установить все зависимости с помощью команды:

npm install

Playwright автоматически установит все необходимые браузеры (Chromium, Firefox, WebKit), если они не были установлены ранее.

Шаг 4: Запуск тестов в GitHub Actions

GitHub Actions предоставляет возможность запускать тесты на нескольких браузерах одновременно благодаря использованию матриц. Это означает, что при каждом запуске workflow GitHub Actions будет запускать тесты на трех браузерах: chromium, firefox и webkit. Это обеспечит кросс-браузерную совместимость вашего веб-приложения.

В файле конфигурации workflow шаг Run Playwright Tests сначала установит все необходимые браузеры командой npx playwright install, а затем запустит тесты с помощью команды npm test. Эта команда должна быть прописана в секции scripts вашего package.json.

Пример использования матрицы для одновременного тестирования:

strategy:
  matrix:
    browser: [chromium, firefox, webkit]

В результате, при каждом запуске workflow будет создано три параллельных задания для каждого браузера.

Шаг 5: Просмотр логов и результатов тестов

GitHub Actions автоматически собирает логи выполнения каждого шага workflow, которые можно просмотреть в интерфейсе GitHub. Для просмотра логов необходимо перейти в раздел Actions, выбрать нужный workflow и кликнуть на соответствующий шаг.

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

Шаг 6: Использование артефактов для сохранения отчетов

Если необходимо сохранять результаты тестов или другие важные артефакты, можно использовать шаги для загрузки артефактов в GitHub. Это может быть полезно, если нужно сохранять отчеты или скриншоты, полученные во время тестирования. Пример использования артефактов:

      - name: Upload Playwright Test Report
        uses: actions/upload-artifact@v2
        with:
          name: playwright-test-report
          path: playwright-report/

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

Шаг 7: Дополнительные настройки и оптимизация

Для повышения надежности и скорости тестирования можно настроить кэширование зависимостей и установленных браузеров. GitHub Actions поддерживает кэширование с помощью встроенных actions, таких как actions/cache.

Пример добавления кэширования:

      - name: Cache Playwright browsers
        uses: actions/cache@v2
        with:
          path: ~/.cache/ms-playwright
          key: ${{ runner.os }}-playwright-${{ hashFiles('**/package-lock.json') }}
          restore-keys: |
            ${{ runner.os }}-playwright-

Этот шаг кэширует браузеры Playwright, чтобы избежать их повторной установки при каждом запуске workflow, что ускоряет процесс.

Заключение

Интеграция Playwright с GitHub Actions позволяет автоматизировать процесс тестирования веб-приложений, обеспечивая кросс-браузерное тестирование на разных платформах. С помощью этой интеграции можно легко настроить и запустить тесты при каждом изменении кода, что значительно повышает качество и стабильность приложения.

Оглавление