Поделиться через


Краткое руководство. Настройка непрерывного сквозного тестирования с помощью Предварительной версии Microsoft Playwright Testing

В этом кратком руководстве вы настроили непрерывное комплексное тестирование с помощью Предварительной версии Microsoft Playwright Testing, чтобы проверить правильность работы веб-приложения в разных браузерах и операционных системах с каждым фиксацией кода и устранением неполадок с помощью панели мониторинга службы. Узнайте, как добавить тесты Playwright в рабочий процесс непрерывной интеграции (CI), например GitHub Actions, Azure Pipelines или другие платформы CI.

После выполнения этого краткого руководства у вас есть рабочий процесс CI, который запускает набор тестов Playwright в большом масштабе и помогает легко устранять неполадки с помощью Microsoft Playwright Testing.

Внимание

Тестирование Microsoft Playwright в настоящее время находится в предварительной версии. Юридические условия, применимые к функциям Azure, которые находятся в бета-версии, предварительной версии или в противном случае еще не выпущены в общедоступную версию, см . в дополнительных условиях использования для предварительных версий Microsoft Azure.

Необходимые компоненты

Получение URL-адреса конечной точки региона службы

В конфигурации службы необходимо предоставить конечную точку службы для конкретного региона. Конечная точка зависит от региона Azure, выбранного при создании рабочей области.

Чтобы получить URL-адрес конечной точки службы и сохранить его в виде секрета рабочего процесса CI, выполните следующие действия:

  1. Войдите на портал Playwright с помощью учетной записи Azure.

  2. На домашней странице рабочей области выберите руководство по настройке представления.

    Совет

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

  3. Чтобы добавить конечную точку региона в настройке, скопируйте URL-адрес конечной точки службы.

    URL-адрес конечной точки соответствует региону Azure, выбранному при создании рабочей области.

  4. Сохраните URL-адрес конечной точки службы в секрете рабочего процесса CI:

    Имя секрета Значение
    PLAYWRIGHT_SERVICE_URL Вставьте URL-адрес конечной точки, скопированный ранее.

Добавление файла конфигурации службы

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

  1. Создайте файл playwright.service.config.ts вместе с файлом playwright.config.ts .

    При необходимости используйте playwright.service.config.ts файл в примере репозитория.

  2. Добавьте в него следующее содержимое:

    import { defineConfig } from '@playwright/test';
    import { getServiceConfig, ServiceOS } from '@azure/microsoft-playwright-testing';
    import config from './playwright.config';
    
    /* Learn more about service configuration at https://aka.ms/mpt/config */
    export default defineConfig(
      config,
      getServiceConfig(config, {
        exposeNetwork: '<loopback>',
        timeout: 30000,
        os: ServiceOS.LINUX,
        useCloudHostedBrowsers: true
      }),
      {
        /* 
        Playwright Testing service reporter is added by default.
        This will override any reporter options specified in the base playwright config.
        If you are using more reporters, please update your configuration accordingly.
        */
        reporter: [['list'], ['@azure/microsoft-playwright-testing/reporter']],
      }
    );
    

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

    • Ускорение конвейеров сборки путем параллельного выполнения тестов с помощью браузеров, размещенных в облаке.
    • Упрощение устранения неполадок с простым доступом к результатам теста и артефактам, опубликованным в службе.

    Однако вы можете использовать любой из этих функций или обоих. Узнайте , как использовать функции службы и обновить файл конфигурации службы в соответствии с вашими требованиями.

  3. Сохраните и зафиксируйте файл в репозиторий исходного кода.

Обновление файла package.json

Обновите файл в репозитории package.json , чтобы добавить сведения о пакете службы Тестирования Microsoft Playwright в devDependencies разделе.

"devDependencies": {
    "@azure/microsoft-playwright-testing": "^1.0.0-beta.6"
}

Включение артефактов в конфигурации Playwright

playwright.config.ts В файле проекта убедитесь, что вы собираете все необходимые артефакты.

  use: {
    trace: 'on-first-retry',
    video:'retain-on-failure',
    screenshot:'on'
  },

Настройка конфигурации службы

  1. Создайте новый файл PlaywrightServiceSetup.cs в корневом каталоге проекта. Этот файл упрощает проверку подлинности клиента с помощью службы.

  2. Добавьте в него следующее содержимое:

    using Azure.Developer.MicrosoftPlaywrightTesting.NUnit;
    using NUnit.Framework;
    
    namespace PlaywrightTests; // Remember to change this as per your project namespace
    
    [SetUpFixture]
    public class PlaywrightServiceSetup : PlaywrightServiceNUnit { };
    
  3. Сохраните и зафиксируйте файл в репозиторий исходного кода.

Установка пакета службы

В проекте установите пакет Microsoft Playwright Testing.

dotnet add package Azure.Developer.MicrosoftPlaywrightTesting.NUnit --prerelease

Эта команда обновляет файл проекта csproj , добавив сведения о пакете службы в ItemGroup раздел. Не забудьте зафиксировать эти изменения.

  <ItemGroup>
    <PackageReference Include="Azure.Developer.MicrosoftPlaywrightTesting.NUnit" Version="1.0.0-beta.2" />
  </ItemGroup>

Добавьте или обновите .runsettings файл для проекта.

Если вы еще не настроили тесты Playwright для запуска с помощью службы, добавьте .runsettings файл в репозиторий. На следующем шаге необходимо указать этот файл конфигурации службы в интерфейсе командной строки playwright.

  1. Создайте новый файл .runsettings.

    При необходимости используйте .runsettings файл в примере репозитория.

  2. Добавьте в него следующее содержимое:

    <?xml version="1.0" encoding="utf-8"?>
    <RunSettings>
        <TestRunParameters>
            <!-- The below parameters are optional -->
            <Parameter name="Os" value="linux" />
            <!--<Parameter name="RunId" value="sample-run-id1" />-->
            <Parameter name="ServiceAuthType" value="EntraId" />
            <Parameter name="UseCloudHostedBrowsers" value="true" />
            <Parameter name="AzureTokenCredentialType" value="DefaultAzureCredential" />
            <!--<Parameter name="ManagedIdentityClientId" value="{clientId-value}" />-->
            <Parameter name="EnableGitHubSummary" value="false" />
            <!--<Parameter name="ExposeNetwork" value="*" />-->
        </TestRunParameters>
      <!-- NUnit adapter -->  
      <NUnit>
        <!-- Adjust parallel workers, parallel worker would also be bound by number of unit test files -->
        <NumberOfTestWorkers>10</NumberOfTestWorkers>
      </NUnit>
      <!-- General run configuration -->
      <RunConfiguration>
        <EnvironmentVariables>
          <!-- For debugging selectors, it's recommend to set the following environment variable -->
            <!--<DEBUG>pw:api*</DEBUG>--> 
        </EnvironmentVariables>
      </RunConfiguration>
      <!-- Playwright -->  
      <Playwright>
        <BrowserName>chromium</BrowserName>
        <ExpectTimeout>5000</ExpectTimeout>
        <LaunchOptions>
          <Headless>false</Headless>
          <!--Channel>msedge</Channel-->
        </LaunchOptions>
      </Playwright>
        <LoggerRunSettings>
            <Loggers>
                <!--microsoft playwright testing service logger for reporting -->
                <Logger friendlyName="microsoft-playwright-testing" enabled="True" />
                <!--could enable any logger additionally -->
                <Logger friendlyName="trx" enabled="false" />
            </Loggers>
        </LoggerRunSettings>
    </RunSettings>
    

    Параметры в этом файле позволяют:

    • Ускорение конвейеров сборки путем параллельного выполнения тестов с помощью браузеров, размещенных в облаке.
    • Опубликуйте результаты теста и артефакты в службе для быстрого устранения неполадок.

    Однако вы можете использовать любой из этих функций или обоих. Узнайте , как использовать функции службы и обновить файл конфигурации службы в соответствии с вашими требованиями.

  3. Сохраните и зафиксируйте файл в репозиторий исходного кода.

Включение артефактов в настройке Playwright

Настройте playwright для записи артефактов, таких как снимок экрана, видео и трассировки.

После сбора этих артефактов подключите их к TestContext ним, чтобы убедиться, что они доступны в тестовых отчетах. Дополнительные сведения см . в нашем примере проекта для NUnit.

Настройка проверки подлинности

Компьютер CI, на котором выполняются тесты Playwright, должен пройти проверку подлинности с помощью службы тестирования Playwright, чтобы получить браузеры для выполнения тестов и публикации результатов теста и артефактов.

Служба предлагает два метода проверки подлинности: идентификатор Microsoft Entra и маркеры доступа. Настоятельно рекомендуется использовать идентификатор Microsoft Entra для проверки подлинности конвейеров.

Настройка проверки подлинности с помощью идентификатора Microsoft Entra

Если вы используете GitHub Actions, вы можете подключиться к службе с помощью GitHub OpenID Connect. Выполните действия, чтобы настроить интеграцию:

Необходимые компоненты

Вариант 1. Приложение Microsoft Entra

  • Создайте приложение Microsoft Entra с субъектом-службой, портал Azure, Azure CLI или Azure PowerShell.

  • Скопируйте значения для идентификатора клиента, идентификатора подписки и идентификатора каталога (клиента), чтобы использовать его позже в рабочем процессе GitHub Actions.

  • Owner Назначьте субъекту-службе роль или Contributor роль, созданную на предыдущем шаге. Эти роли должны быть назначены в рабочей области Playwright Testing. Дополнительные сведения см. в статье об управлении доступом.

  • Настройте учетные данные федеративного удостоверения в приложении Microsoft Entra для доверия маркеров, выданных GitHub Actions в репозитории GitHub.

Вариант 2. Управляемое удостоверение, назначаемое пользователем

Создавайте секреты GitHub
  • Добавьте значения, которые вы получили на предыдущем шаге в качестве секретов в репозиторий GitHub. См . раздел "Настройка секрета действия GitHub". Эти переменные используются в рабочем процессе GitHub Action в последующих шагах.
Секрет Github Источник (приложение Microsoft Entra или управляемое удостоверение)
AZURE_CLIENT_ID Client ID
AZURE_SUBSCRIPTION_ID ИД подписки
AZURE_TENANT_ID Идентификатор каталога (клиента)

Примечание.

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

Настройка проверки подлинности с помощью маркеров доступа

Внимание

Настоятельно рекомендуется использовать идентификатор Microsoft Entra для проверки подлинности в службе. Если вы используете маркеры доступа, см. инструкции по управлению маркерами доступа

Вы можете создать маркер доступа из рабочей области Playwright Testing и использовать его в настройке. Однако настоятельно рекомендуется использовать идентификатор Microsoft Entra для проверки подлинности из-за повышенной безопасности. Маркеры доступа, в то время как удобные, функции, такие как долгоживущие пароли и более подвержены скомпрометации.

  1. Проверка подлинности с помощью маркеров доступа по умолчанию отключена. Чтобы использовать, включите проверку подлинности на основе маркера доступа.

  2. Настройте проверку подлинности с помощью маркеров доступа.

  3. Сохраните маркер доступа в секрете рабочего процесса CI и используйте его в рабочем процессе GitHub Actions или yaml-файле Azure Pipeline.

Имя секрета Значение
PLAYWRIGHT_SERVICE_ACCESS_TOKEN Вставьте значение созданного ранее маркера доступа.

Обновление определения рабочего процесса

Обновите определение рабочего процесса CI, чтобы запустить тесты Playwright с помощью интерфейса командной строки Playwright. Передайте файл конфигурации службы в качестве входного параметра для интерфейса командной строки Playwright. Вы настраиваете среду, указывая переменные среды.

  1. Открытие определения рабочего процесса CI

  2. Добавьте следующие шаги, чтобы запустить тесты Playwright в Microsoft Playwright Testing.

    Ниже описаны изменения рабочего процесса для действий GitHub или Azure Pipelines. Аналогичным образом можно выполнять тесты Playwright с помощью интерфейса командной строки Playwright на других платформах CI.

    
      # This step is to sign-in to Azure to run tests from GitHub Action workflow. 
      # Choose how to set up authentication to Azure from GitHub Actions. This is one example. 
      name: Playwright Tests (Microsoft Playwright Testing)
      on:
        push:
          branches: [main, master]
        pull_request:
          branches: [main, master]
    
      permissions: # Required when using Microsoft Entra ID to authenticate
        id-token: write
        contents: read
    
      jobs:
        test:
          timeout-minutes: 60
          runs-on: ubuntu-latest
          steps:
            - uses: actions/checkout@v4
    
            - name: Login to Azure with AzPowershell (enableAzPSSession true)
              uses: azure/login@v2
              with:
                client-id: ${{ secrets.AZURE_CLIENT_ID }} # GitHub Open ID connect values copied in previous steps
                tenant-id: ${{ secrets.AZURE_TENANT_ID }}
                subscription-id: ${{ secrets.AZURE_SUBSCRIPTION_ID }}
                enable-AzPSSession: true
    
            - name: Install dependencies
              working-directory: path/to/playwright/folder # update accordingly
              run: npm ci
    
            - name: Run Playwright tests
              working-directory: path/to/playwright/folder # update accordingly
              env:
                # Regional endpoint for Microsoft Playwright Testing
                PLAYWRIGHT_SERVICE_URL: ${{ secrets.PLAYWRIGHT_SERVICE_URL }}
                # PLAYWRIGHT_SERVICE_ACCESS_TOKEN: ${{ secrets.PLAYWRIGHT_SERVICE_ACCESS_TOKEN }} # Not recommended, use Microsoft Entra ID authentication. 
              run: npx playwright test -c playwright.service.config.ts --workers=20
    
            - name: Upload Playwright report
              uses: actions/upload-artifact@v3
              if: always()
              with:
                name: playwright-report
                path: path/to/playwright/folder/playwright-report/ # update accordingly
                retention-days: 10
    

Обновите определение рабочего процесса CI, чтобы запустить тесты Playwright с помощью интерфейса командной строки Playwright NUnit. .runsettings Передайте файл в качестве входного параметра для интерфейса командной строки Playwright. Вы настраиваете среду, указывая переменные среды.

  1. Откройте определение рабочего процесса CI.

  2. Добавьте следующие шаги, чтобы запустить тесты Playwright в Microsoft Playwright Testing.

    Ниже описаны изменения рабочего процесса для действий GitHub или Azure Pipelines. Аналогичным образом можно выполнять тесты Playwright с помощью интерфейса командной строки Playwright на других платформах CI.

    on:
      push:
        branches: [ main, master ]
      pull_request:
        branches: [ main, master ]
    permissions: # Required when using AuthType as EntraId
      id-token: write
      contents: read
    jobs:
      test:
        timeout-minutes: 60
        runs-on: ubuntu-latest
          steps:
          - uses: actions/checkout@v4
        # This step is to sign-in to Azure to run tests from GitHub Action workflow. 
        # Choose how to set up authentication to Azure from GitHub Actions. This is one example. 
    
          - name: Login to Azure with AzPowershell (enableAzPSSession true) 
            uses: azure/login@v2 
            with: 
              client-id: ${{ secrets.AZURE_CLIENT_ID }} # GitHub Open ID connect values copied in previous steps
              tenant-id: ${{ secrets.AZURE_TENANT_ID }}  
              subscription-id: ${{ secrets.AZURE_SUBSCRIPTION_ID }}  
              enable-AzPSSession: true 
    
          - name: Setup .NET
            uses: actions/setup-dotnet@v4
            with:
              dotnet-version: 8.0.x
    
          - name: Restore dependencies
            run: dotnet restore
            working-directory: path/to/playwright/folder # update accordingly
    
          - name: Build
            run: dotnet build --no-restore
            working-directory: path/to/playwright/folder # update accordingly
    
          - name: Run Playwright tests
              working-directory: path/to/playwright/folder # update accordingly
            env:
              # Regional endpoint for Microsoft Playwright Testing
              PLAYWRIGHT_SERVICE_URL: ${{ secrets.PLAYWRIGHT_SERVICE_URL }}
              # PLAYWRIGHT_SERVICE_ACCESS_TOKEN: ${{ secrets.PLAYWRIGHT_SERVICE_ACCESS_TOKEN }} # Not recommended, use Microsoft Entra ID authentication. 
            run: dotnet test --settings:.runsettings --logger "microsoft-playwright-testing" -- NUnit.NumberOfTestWorkers=20
    
          - name: Upload Playwright report
            uses: actions/upload-artifact@v3
            if: always()
            with:
              name: playwright-report
              path: path/to/playwright/folder/playwright-report/ # update accordingly
              retention-days: 10
    
  1. Сохраните и зафиксируйте изменения.

    При активации рабочего процесса CI тесты Playwright выполняются в рабочей области Microsoft Playwright Testing в облачных браузерах в 20 параллельных рабочих ролей. Собранные результаты и артефакты публикуются в службе и могут просматриваться на портале службы.

Параметры тестового запуска можно определить в .runsettings файле. Дополнительные сведения см. в статье об использовании параметров пакета службы

Примечание.

Функция создания отчетов включена по умолчанию для существующих рабочих областей. Это развертывается на этапах и займет несколько дней. Чтобы избежать сбоев, убедитесь, что Rich diagnostics using reporting для рабочей области установлен параметр ON, прежде чем продолжить. Дополнительные сведения см. в разделе "Включение отчетов для рабочей области".

Внимание

При тестировании Microsoft Playwright плата взимается на основе количества общих минут тестирования, потребляемых и опубликованных результатов теста. Если вы являетесь первым пользователем или приступить к работе с бесплатной пробной версией, вы можете начать с выполнения одного теста в масштабе вместо полного набора тестов, чтобы избежать исчерпания бесплатных минут тестирования и результатов теста.

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

Вы можете выполнить один тест со службой с помощью следующей командной строки:

npx playwright test {name-of-file.spec.ts} --config=playwright.service.config.ts

Просмотр тестов и результатов на портале Playwright

Теперь можно устранить неполадки конвейера CI на портале Playwright.

  1. После завершения тестового запуска создается ссылка на портал Playwright. Откройте эту ссылку, чтобы просмотреть подробные результаты теста и связанные артефакты. На портале отображаются важные сведения, в том числе:

    • Сведения о сборке CI
    • Общее состояние выполнения теста
    • ИД фиксации, связанный с тестовой запуском

    Снимок экрана: список тестов в тестовом запуске.

  2. Портал Playwright предоставляет все необходимые сведения для устранения неполадок. Вы можете:

    • Переключение между повторными попытками.
    • Просмотр подробных журналов ошибок, шагов тестирования и присоединенных артефактов, таких как снимки экрана или видео.
    • Перейдите непосредственно к средству просмотра трассировки для более глубокого анализа.

    Снимок экрана: предварительный просмотр теста.

  3. Средство просмотра трассировки позволяет выполнять тест визуально. Вы можете:

    • Используйте временную шкалу, чтобы навести указатель мыши на отдельные шаги, показыв состояние страницы до и после каждого действия.
    • Проверьте подробные журналы, моментальные снимки DOM, сетевое действие, ошибки и выходные данные консоли для каждого шага.

    Снимок экрана: средство просмотра трассировки.

  1. После завершения тестового запуска вы получите ссылку на портал Playwright в терминале. Откройте эту ссылку, чтобы просмотреть подробные результаты теста и связанные артефакты. На портале отображаются важные сведения, в том числе:

    • Сведения о сборке CI
    • Общее состояние выполнения теста
    • ИД фиксации, связанный с тестовой запуском

    Снимок экрана: список тестов в тестовом запуске.

  2. Портал Playwright предоставляет все необходимые сведения для устранения неполадок. Вы можете:

    • Просмотр подробных журналов ошибок и присоединенных артефактов, таких как снимки экрана или видео.
    • Перейдите непосредственно к средству просмотра трассировки для более глубокого анализа.

    Снимок экрана: предварительный просмотр теста.

Примечание.

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

  1. Средство просмотра трассировки позволяет выполнять тест визуально. Вы можете:

    • Используйте временную шкалу, чтобы навести указатель мыши на отдельные шаги, показыв состояние страницы до и после каждого действия.
    • Проверьте подробные журналы, моментальные снимки DOM, сетевое действие, ошибки и выходные данные консоли для каждого шага.

    Снимок экрана: средство просмотра трассировки.

Совет

Функции службы Microsoft Playwright Testing можно использовать независимо. Вы можете публиковать результаты теста на портале без использования функции размещенных в облаке браузеров, а также использовать только облачные браузеры для ускорения набора тестов без публикации результатов теста. Дополнительные сведения см. в разделе "Использование функций службы".

Примечание.

Результаты теста и артефакты, которые вы публикуете, хранятся в службе в течение 90 дней. После этого они автоматически удаляются.

Вы успешно настроили непрерывный комплексный рабочий процесс тестирования для выполнения тестов Playwright в большом масштабе в облачных браузерах.