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

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

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

Внимание

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

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

• Учетная запись Azure с активной подпиской. Если у вас нет подписки Azure, создайте бесплатную учетную запись, прежде чем приступить к работе.

• Рабочая область Microsoft Playwright Testing. Выполните краткое руководство. Выполните тесты Playwright в масштабе , чтобы создать рабочую область.

GitHub Actions

• Учетная запись GitHub. Если у вас нет учетной записи GitHub, ее можно создать бесплатно.
• Репозиторий GitHub, содержащий спецификации тестирования Playwright и рабочий процесс GitHub Actions. Сведения о создании репозитория см. в статье "Создание нового репозитория".
• Рабочий процесс GitHub Actions. Если вам нужна помощь по началу работы с GitHub Actions, см . статью о создании первого рабочего процесса.

Azure Pipelines

• Организация и проект Azure DevOps. Если у вас нет организации Azure DevOps, ее можно создать бесплатно.
• Определение конвейера. Если вам нужна помощь по началу работы с Azure Pipelines, см . статью о создании первого конвейера.

Настройка маркера доступа к службе

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

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

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

2. Щелкните значок параметров рабочей области и перейдите на страницу маркеров доступа.

   

3. Выберите "Создать новый маркер", чтобы создать новый маркер доступа для рабочего процесса CI.

4. Введите сведения о маркере доступа и нажмите кнопку "Создать маркер".

   

   

5. Сохраните маркер доступа в секрете рабочего процесса CI, чтобы избежать указания маркера в четком тексте в определении рабочего процесса:

   GitHub Actions

   1. Перейдите в репозиторий GitHub и выберите "Параметры секретов>и переменных>Действия".

   2. Нажмите Создать секрет репозитория.

   3. Введите сведения о секрете и нажмите кнопку "Добавить секрет", чтобы создать секрет CI/CD.

      Параметр	Значение
      Имя	PLAYWRIGHT_SERVICE_ACCESS_TOKEN
      Value	Вставьте скопированный ранее маркер доступа к рабочей области.

   4. Нажмите кнопку "ОК ", чтобы создать секрет рабочего процесса.

   Azure Pipelines

   1. Перейдите в проект Azure DevOps.

   2. Перейдите на страницу Pipelines (Конвейеры), выберите соответствующий конвейер и нажмите кнопку Edit (Изменить).

   3. Найдите Variables (Переменные) для этого конвейера.

   4. Добавьте новую переменную.

   5. Введите сведения о переменной и нажмите кнопку "Добавить секрет", чтобы создать секрет CI/CD.

      Параметр	Значение
      Имя	PLAYWRIGHT_SERVICE_ACCESS_TOKEN
      Value	Вставьте скопированный ранее маркер доступа к рабочей области.
      Сохранение секрета этого значения	Проверьте это значение

   6. Нажмите кнопку "ОК", а затем сохраните , чтобы создать секрет рабочего процесса.

Получение 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. Добавьте в него следующее содержимое:

   /*
   * This file enables Playwright client to connect to remote browsers.
   * It should be placed in the same directory as playwright.config.ts.
   */
   
   import { defineConfig } from '@playwright/test';
   import config from './playwright.config';
   import dotenv from 'dotenv';
   
   // Define environment on the dev box in .env file:
   //  .env:
   //    PLAYWRIGHT_SERVICE_ACCESS_TOKEN=XXX
   //    PLAYWRIGHT_SERVICE_URL=XXX
   
   // Define environment in your GitHub workflow spec.
   //  env:
   //    PLAYWRIGHT_SERVICE_ACCESS_TOKEN: ${{ secrets.PLAYWRIGHT_SERVICE_ACCESS_TOKEN }}
   //    PLAYWRIGHT_SERVICE_URL: ${{ secrets.PLAYWRIGHT_SERVICE_URL }}
   //    PLAYWRIGHT_SERVICE_RUN_ID: ${{ github.run_id }}-${{ github.run_attempt }}-${{ github.sha }}
   
   dotenv.config();
   
   // Name the test run if it's not named yet.
   process.env.PLAYWRIGHT_SERVICE_RUN_ID = process.env.PLAYWRIGHT_SERVICE_RUN_ID || new Date().toISOString();
   
   // Can be 'linux' or 'windows'.
   const os = process.env.PLAYWRIGHT_SERVICE_OS || 'linux';
   
   export default defineConfig(config, {
     // Define more generous timeout for the service operation if necessary.
     // timeout: 60000,
     // expect: {
     //   timeout: 10000,
     // },
     workers: 20,
   
     // Enable screenshot testing and configure directory with expectations.
     // https://learn.microsoft.com/azure/playwright-testing/how-to-configure-visual-comparisons
     ignoreSnapshots: false,
     snapshotPathTemplate: `{testDir}/__screenshots__/{testFilePath}/${os}/{arg}{ext}`,
     
     use: {
       // Specify the service endpoint.
       connectOptions: {
         wsEndpoint: `${process.env.PLAYWRIGHT_SERVICE_URL}?cap=${JSON.stringify({
           // Can be 'linux' or 'windows'.
           os,
           runId: process.env.PLAYWRIGHT_SERVICE_RUN_ID
         })}`,
         timeout: 30000,
         headers: {
           'x-mpt-access-key': process.env.PLAYWRIGHT_SERVICE_ACCESS_TOKEN!
         },
         // Allow service to access the localhost.
         exposeNetwork: '<loopback>'
       }
     },
     // Tenmp workaround for config merge bug in OSS https://github.com/microsoft/playwright/pull/28224
     projects: config.projects? config.projects : [{}]
   });
   

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

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

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

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

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

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

   GitHub Actions

   - 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:
       # Access token and regional endpoint for Microsoft Playwright Testing
       PLAYWRIGHT_SERVICE_ACCESS_TOKEN: ${{ secrets.PLAYWRIGHT_SERVICE_ACCESS_TOKEN }}
       PLAYWRIGHT_SERVICE_URL: ${{ secrets.PLAYWRIGHT_SERVICE_URL }}
       PLAYWRIGHT_SERVICE_RUN_ID: ${{ github.run_id }}-${{ github.run_attempt }}-${{ github.sha }}
     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
   

   Azure Pipelines

   - task: PowerShell@2
     enabled: true
     displayName: "Install dependencies"
     inputs:
       targetType: 'inline'
       script: 'npm ci'
       workingDirectory: path/to/playwright/folder # update accordingly
   
   - task: PowerShell@2
     enabled: true
     displayName: "Run Playwright tests"
     env:
       PLAYWRIGHT_SERVICE_ACCESS_TOKEN: $(PLAYWRIGHT_SERVICE_ACCESS_TOKEN)
       PLAYWRIGHT_SERVICE_URL: $(PLAYWRIGHT_SERVICE_URL)
     inputs:
       targetType: 'inline'
       script: 'npx playwright test -c playwright.service.config.ts --workers=20'
       workingDirectory: path/to/playwright/folder # update accordingly
   
   - task: PublishPipelineArtifact@1
     displayName: Upload Playwright report
     inputs:
       targetPath: path/to/playwright/folder/playwright-report/ # update accordingly
       artifact: 'Playwright tests'
       publishLocation: 'pipeline'
   

3. Сохраните и зафиксируйте изменения.

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

Внимание

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

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

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

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

Включение отчетов о результатах теста

Microsoft Playwright Testing теперь поддерживает просмотр результатов теста на портале Playwright. Во время предварительного просмотра доступ доступен только по приглашению.

Внимание

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

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

1. На домашней странице рабочей области перейдите в раздел "Параметры".

   

2. В разделе "Параметры" выберите "Общие" и убедитесь, что отчеты включены.

   

3. Создайте личный маркер доступа GitHub, выполнив следующие действия.

   Необходимо предоставить read:packages разрешения маркеру. Этот маркер называется PAT_TOKEN_PACKAGE остальной частью этой статьи.

4. Сохраните токен GitHub в секрете рабочего процесса CI, чтобы избежать указания маркера в четком тексте в определении рабочего процесса:

   GitHub Actions

   1. Перейдите в репозиторий GitHub и выберите "Параметры секретов>и переменных>Действия".

   2. Нажмите Создать секрет репозитория.

   3. Введите сведения о секрете и нажмите кнопку "Добавить секрет", чтобы создать секрет CI/CD.

      Параметр	Значение
      Имя	PAT_TOKEN_PACKAGE
      Value	Вставьте ранее скопированный GitHub личный маркер доступа.

   4. Нажмите кнопку "ОК ", чтобы создать секрет рабочего процесса.

   Azure Pipelines

   1. Перейдите в проект Azure DevOps.

   2. Перейдите на страницу Pipelines (Конвейеры), выберите соответствующий конвейер и нажмите кнопку Edit (Изменить).

   3. Найдите Variables (Переменные) для этого конвейера.

   4. Добавьте новую переменную.

   5. Введите сведения о переменной и нажмите кнопку "Добавить секрет", чтобы создать секрет CI/CD.

      Параметр	Значение
      Имя	PAT_TOKEN_PACKAGE
      Value	Вставьте ранее скопированный GitHub личный маркер доступа.
      Сохранение секрета этого значения	Проверьте это значение

   6. Нажмите кнопку "ОК", а затем сохраните , чтобы создать секрет рабочего процесса.

5. Обновите файл package.json с помощью пакета.

       "dependencies": {
           "@microsoft/mpt-reporter": "0.1.0-19072024-private-preview"
       }
   

6. Обновите файл конфигурации Playwright.

   Добавьте репортера Playwright.config.ts Playwright Testing таким же образом, как и другие репортеры.

   import { defineConfig } from '@playwright/test';
   
   export default defineConfig({
       reporter: [
       ['list'],
       ['json', {  outputFile: 'test-results.json' }],
       ['@microsoft/mpt-reporter'] // Microsoft Playwright Testing reporter
       ],
   });
   

   Убедитесь, что артефакты включены в конфигурации для улучшения устранения неполадок.

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

7. Обновите определение рабочего процесса CI, чтобы установить пакет отчетов перед выполнением тестов, чтобы опубликовать отчет о тестах Playwright в Microsoft Playwright Testing.

   GitHub Actions

   - name: Install reporting package
     working-directory: path/to/playwright/folder # update accordingly
     run: |
       npm config set @microsoft:registry=https://npm.pkg.github.com
       npm set //npm.pkg.github.com/:_authToken ${{secrets.PAT_TOKEN_PACKAGE}} 
       npm install
   
   - name: Run Playwright tests
     working-directory: path/to/playwright/folder # update accordingly
     env:
       # Access token and regional endpoint for Microsoft Playwright Testing
       PLAYWRIGHT_SERVICE_ACCESS_TOKEN: ${{ secrets.PLAYWRIGHT_SERVICE_ACCESS_TOKEN }}
       PLAYWRIGHT_SERVICE_URL: ${{ secrets.PLAYWRIGHT_SERVICE_URL }}
       PLAYWRIGHT_SERVICE_RUN_ID: ${{ github.run_id }}-${{ github.run_attempt }}-${{ github.sha }}
     run: npx playwright test
   

   Azure Pipelines

   - task: PowerShell@2
     enabled: true
     displayName: "Install reporting package"
     inputs:
       targetType: 'inline'
       script: |
           'npm config set @microsoft:registry=https://npm.pkg.github.com'
           'npm set //npm.pkg.github.com/:_authToken ${PAT_TOKEN_PACKAGE}'
           'npm install'
       workingDirectory: path/to/playwright/folder # update accordingly
   
   - task: PowerShell@2
     enabled: true
     displayName: "Run Playwright tests"
     env:
       PLAYWRIGHT_SERVICE_ACCESS_TOKEN: $(PLAYWRIGHT_SERVICE_ACCESS_TOKEN)
       PLAYWRIGHT_SERVICE_URL: $(PLAYWRIGHT_SERVICE_URL)
       PLAYWRIGHT_SERVICE_RUN_ID: $(Build.DefinitionName) - $(Build.BuildNumber) - $(System.JobAttempt)
     inputs:
       targetType: 'inline'
       script: 'npx playwright test -c playwright.service.config.ts --workers=20'
       workingDirectory: path/to/playwright/folder # update accordingly
   

   Совет

   Службу Тестирования Microsoft Playwright можно использовать для публикации результатов тестирования на портале независимо от функции облачных браузеров.

Связанный контент

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

• Предоставление пользователям доступа к рабочей области

• Управление рабочими областями