Skip to main content

Настройка CI

Введение​

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

Вы узнаете​

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

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

.github/workflows/playwright.yml
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

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

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

Чтобы узнать больше об этом, см. "Понимание GitHub Actions".

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

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

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

Открытие рабочих процессов​

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

​

открытие рабочего процесса

Просмотр логов тестов​

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

​

Просмотр логов тестов

HTML-отчет​

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

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

В разделе Артефакты нажмите на playwright-report, чтобы загрузить ваш отчет в формате zip-файла.

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

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

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

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

просмотр HTML-отчета

Чтобы узнать больше об отчетах, ознакомьтесь с нашим подробным руководством по HTML Reporter

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

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

просмотр трассировки Playwright

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

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

  1. Создайте учетную запись Azure Storage.

  2. Включите хостинг статических веб-сайтов для учетной записи хранения.

  3. Создайте Сервисный Принципал в 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>

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

    • AZCOPY_SPA_APPLICATION_ID
    • AZCOPY_SPA_CLIENT_SECRET
    • AZCOPY_TENANT_ID

    Для подробного руководства о том, как авторизовать сервисный принципал с использованием клиентского секрета, обратитесь к этой документации Microsoft.

  5. Добавьте шаг, который загружает HTML-отчет в Azure Storage.

    .github/workflows/playwright.yml
    ...
        - 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 веб-сайта.

note

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

Что дальше​