Настройка CI

Введение

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

Вы узнаете

Настройка GitHub Actions

При установке Playwright с помощью расширения VS Code или с помощью npm init playwright@latest вам предоставляется возможность добавить GitHub Actions workflow. Это создаёт файл playwright.yml внутри папки .github/workflows, содержащий всё необходимое для запуска тестов при каждом push и pull запросе в ветку 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@v4
    - uses: actions/setup-node@v4
      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

Workflow выполняет следующие шаги:

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

Для получения дополнительной информации см. "Понимание GitHub Actions".

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

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

Открытие Workflow

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

opening the workflow

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

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

Viewing Test Logs

HTML-отчёт

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

Загрузка HTML-отчёта

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

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

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

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

viewing the HTML report

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

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

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

playwright trace viewer

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

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

Создайте учётную запись Azure Storage.
Включите хостинг статических веб-сайтов для учётной записи хранилища.
Создайте принципал службы в Azure и предоставьте ему доступ к хранилищу Azure Blob. После успешного выполнения команда отобразит данные, которые будут использоваться на следующем шаге.
```
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 secrets и добавьте следующие секреты:
- 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-запросов, созданных из форкнутого репозитория, поскольку подобный workflow не имеет доступа к секретам.

Введение​

Вы узнаете​

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

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

Открытие Workflow​

​

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

​

HTML-отчёт​

Загрузка HTML-отчёта​

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

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

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

Что дальше​