Настройка CI

Введение

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

В этом руководстве вы узнаете

Настройка GitHub Actions

При установке Playwright с помощью расширения для VS Code или npm init playwright@latest вам будет предложено добавить рабочий процесс GitHub Actions. В результате в папке .github/workflows будет создан файл playwright.yml со всем необходимым для запуска тестов при каждом push и pull request в ветку main/master. Вот как выглядит этот файл:

name: Playwright Tests
on:
  push:
    branches: [ main, master ]
  pull_request:
    branches: [ main, master ]
jobs:
  test:
    timeout-minutes: 60
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v6
    - uses: actions/setup-node@v6
      with:
        node-version: lts/*
    - name: Install dependencies
      run: npm ci
    - name: Install Playwright Browsers
      run: npx playwright install --with-deps
    - name: Run Playwright tests
      run: npx playwright test
    - uses: actions/upload-artifact@v4
      if: ${{ !cancelled() }}
      with:
        name: playwright-report
        path: playwright-report/
        retention-days: 30

Рабочий процесс выполняет следующие действия:

Клонирует ваш репозиторий
Устанавливает Node.js
Устанавливает зависимости NPM
Устанавливает браузеры Playwright
Запускает тесты Playwright
Загружает HTML-отчёт в интерфейс GitHub

Подробнее об этом читайте в статье «Основные сведения о GitHub Actions».

Создание репозитория и отправка кода на GitHub

После настройки рабочего процесса GitHub Actions вам останется только создать репозиторий на GitHub или отправить код в существующий репозиторий. Следуйте инструкциям на GitHub и не забудьте инициализировать репозиторий git с помощью команды git init, чтобы вы могли добавлять, фиксировать и отправлять свой код.

Просмотр рабочих процессов

Нажмите вкладку Actions, чтобы просмотреть рабочие процессы. Здесь можно узнать, прошли ваши тесты или завершились с ошибкой.

Просмотр журналов тестов

Нажмите на запуск рабочего процесса, чтобы увидеть все действия, выполненные GitHub. Нажмите Run Playwright tests, чтобы увидеть сообщения об ошибках, ожидаемые и фактические результаты, а также журнал вызовов.

HTML-отчёт

HTML-отчёт содержит полную информацию о ваших тестах. Вы можете отфильтровать отчёт по браузерам, пройденным, завершившимся с ошибкой и пропущенным тестам, а также по нестабильным тестам.

Скачивание HTML-отчёта

В разделе Artifacts нажмите playwright-report, чтобы скачать отчёт в формате ZIP-архива.

Просмотр HTML-отчёта

Открыть отчёт локально не получится: для корректной работы необходим веб-сервер. Сначала распакуйте ZIP-архив, желательно в папку, где уже установлен Playwright. В командной строке перейдите в каталог с отчётом и выполните npx playwright show-report, указав имя распакованной папки. Это запустит сервер для отчёта и позволит просматривать его в браузере.

npx playwright show-report name-of-my-extracted-playwright-report

Подробнее об отчётах читайте в подробном руководстве по HTML Reporter.

Просмотр трассировки

После публикации отчёта с помощью npx playwright show-report нажмите значок трассировки рядом с именем файла теста, как показано на изображении выше. Вы сможете просмотреть трассировку тестов и изучить каждое действие, чтобы выяснить, почему тесты завершаются с ошибкой.

Публикация отчёта в интернете

Скачивать HTML-отчёт в виде ZIP-архива не очень удобно. Однако мы можем воспользоваться возможностями статического веб-хостинга Azure Storage, чтобы просто и эффективно публиковать HTML-отчёты в интернете с минимальной настройкой.

Создайте учётную запись Azure Storage.
Включите хостинг статического веб-сайта для учётной записи хранилища.
Создайте Service Principal в Azure и предоставьте ему доступ к Azure Blob Storage. После успешного выполнения команды отобразятся учётные данные, которые понадобятся на следующем шаге.
```
az ad sp create-for-rbac --name "github-actions" --role "Storage Blob Data Contributor" --scopes /subscriptions/<SUBSCRIPTION_ID>/resourceGroups/<RESOURCE_GROUP_NAME>/providers/Microsoft.Storage/storageAccounts/<STORAGE_ACCOUNT_NAME>
```
Используйте учётные данные из предыдущего шага, чтобы настроить зашифрованные секреты в репозитории GitHub. Откройте настройки репозитория, перейдите в раздел секретов GitHub Actions и добавьте следующие секреты:
- AZCOPY_SPA_APPLICATION_ID
- AZCOPY_SPA_CLIENT_SECRET
- AZCOPY_TENANT_ID
Подробные инструкции по авторизации субъекта-службы с помощью секрета клиента см. в документации Microsoft.

Добавьте шаг для загрузки HTML-отчёта в Azure Storage.

...
    - name: Upload HTML report to Azure
      shell: bash
      run: |
        REPORT_DIR='run-${{ github.run_id }}-${{ github.run_attempt }}'
        azcopy cp --recursive "./playwright-report/*" "https://<STORAGE_ACCOUNT_NAME>.blob.core.windows.net/\$web/$REPORT_DIR"
        echo "::notice title=HTML report url::https://<STORAGE_ACCOUNT_NAME>.z1.web.core.windows.net/$REPORT_DIR/index.html"
      env:
        AZCOPY_AUTO_LOGIN_TYPE: SPN
        AZCOPY_SPA_APPLICATION_ID: '${{ secrets.AZCOPY_SPA_APPLICATION_ID }}'
        AZCOPY_SPA_CLIENT_SECRET: '${{ secrets.AZCOPY_SPA_CLIENT_SECRET }}'
        AZCOPY_TENANT_ID: '${{ secrets.AZCOPY_TENANT_ID }}'

Содержимое контейнера хранилища $web можно просматривать в браузере, используя общедоступный URL-адрес веб-сайта.

примечание

Этот шаг не сработает для pull request, созданных из форка репозитория, поскольку такой рабочий процесс не имеет доступа к секретам.

Правильная работа с секретами

Такие артефакты, как файлы трассировки, HTML-отчёты и даже журналы консоли, содержат сведения о выполнении тестов. В них могут быть конфиденциальные данные, например учётные данные пользователя для тестирования, токены доступа к промежуточному серверу, исходный код тестов, а иногда и исходный код приложения. Обращайтесь с этими файлами так же осторожно, как и с самими конфиденциальными данными. Если вы загружаете отчёты и трассировки в рамках CI-процесса, убедитесь, что они попадают только в надёжные хранилища артефактов, или зашифруйте файлы перед загрузкой. То же относится к обмену артефактами с членами команды: используйте надёжное хранилище файлов или зашифруйте файлы перед отправкой.

Введение​

В этом руководстве вы узнаете​

Настройка GitHub Actions​

Создание репозитория и отправка кода на GitHub​

Просмотр рабочих процессов​

​

Просмотр журналов тестов​

​

HTML-отчёт​

Скачивание HTML-отчёта​

Просмотр HTML-отчёта​

Просмотр трассировки​

Публикация отчёта в интернете​

Правильная работа с секретами​

Что дальше​