你当前正在访问 Microsoft Azure Global Edition 技术文档网站。如果需要访问由世纪互联运营的 Microsoft Azure 中国技术文档网站，请访问 https://docs.azure.cn。

快速入门：使用 Microsoft Playwright Testing（预览版）设置持续端到端测试

项目
11/19/2024

在本快速入门中，你将使用 Microsoft Playwright Testing（预览版）设置持续端到端测试，以验证 Web 应用在每次提交代码时是否可以在不同浏览器和操作系统上正确运行，并使用服务仪表板轻松对测试进行故障排除。了解如何将 Playwright 测试添加到持续集成 (CI) 工作流，例如 GitHub Actions、Azure Pipelines 或其他 CI 平台。

完成本快速入门后，你将拥有一个 CI 工作流，此工作流使用 Microsoft Playwright Testing 大规模运行 Playwright 测试套件并帮助你轻松对测试进行故障排除。

重要

Microsoft Playwright Testing 目前以预览版提供。有关 beta 版、预览版或尚未正式发布的 Azure 功能所适用的法律条款，请参阅 Microsoft Azure 预览版的补充使用条款。

先决条件

具有活动订阅的 Azure 帐户。如果没有 Azure 订阅，请在开始之前创建一个免费帐户。
Microsoft Playwright Testing 工作区。完成快速入门：大规模运行 Playwright 测试创建工作区。

GitHub Actions
Azure Pipelines

一个 GitHub 帐户。如果没有 GitHub 帐户，可以免费创建一个。
包含 Playwright 测试规范和 GitHub Actions 工作流的 GitHub 存储库。若要创建存储库，请参阅创建新存储库。
GitHub Actions 工作流。如需 GitHub Actions 入门方面的帮助，请参阅创建第一个工作流
设置从 GitHub Actions 到 Azure 的身份验证。请参阅使用 GitHub Actions 连接到 Azure

获取服务区域终结点 URL

在服务配置中，必须提供特定于区域的服务终结点。终结点取决于在创建工作区时选择的 Azure 区域。

若要获取服务终结点 URL 并将其存储为 CI 工作流机密，请执行以下步骤：

使用 Azure 帐户登录到 Playwright 门户。
在工作区主页上，选择“查看设置指南”。

提示

如果有多个工作区，可以通过选择页面顶部的工作区名称切换到另一个工作区，然后选择“管理所有工作区”。
在“在设置中添加区域终结点”中，复制服务终结点 URL。

终结点 URL 与创建工作区时选择的 Azure 区域匹配。
将服务终结点 URL 存储在 CI 工作流机密中：

密钥名称值

PLAYWRIGHT_SERVICE_URL 粘贴之前复制的终结点 URL。

密钥名称	值
PLAYWRIGHT_SERVICE_URL	粘贴之前复制的终结点 URL。

添加服务配置文件

如果尚未配置 Playwright 测试以用服务运行测试，请将服务配置文件添加到存储库。下一步，在 Playwright CLI 上指定此服务配置文件。

连同 playwright.config.ts 文件一起创建新文件 playwright.service.config.ts。

（可选）使用示例存储库中的 playwright.service.config.ts 文件。

向新文件添加以下内容：

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']],
  }
);

默认情况下，服务配置可让你：

使用云托管浏览器并行运行测试，以加速生成管道。
简化故障排除，轻松访问发布到服务的测试结果和工件。

但是，你可以选择同时使用这两种功能或使用其中一个。请参阅如何使用服务功能，并根据需要更新服务配置文件。

保存文件并提交到源代码存储库。

更新 package.json 文件

更新存储库中的 package.json 文件，以在 devDependencies 部分中添加有关 Microsoft Playwright Testing 服务包的详细信息。

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

在 Playwright 配置中启用工件

在项目的 playwright.config.ts 文件中，请确保收集所有必需的工件。

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

设置服务配置

在项目的根目录中创建一个新文件 PlaywrightServiceSetup.cs。此文件有助于使用服务对客户端进行身份验证。

向新文件添加以下内容：

using Azure.Developer.MicrosoftPlaywrightTesting.NUnit;
using NUnit.Framework;

namespace PlaywrightTests; // Remember to change this as per your project namespace

[SetUpFixture]
public class PlaywrightServiceSetup : PlaywrightServiceNUnit { };

保存文件并提交到源代码存储库。

更新项目的 .csproj 文件

更新存储库中的 csproj 文件，以在 ItemGroup 部分中添加有关 Microsoft Playwright Testing 服务包的详细信息。

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

为项目添加或更新 `.runsettings` 文件。

如果尚未配置 Playwright 测试以用服务运行测试，请将 .runsettings 文件添加到存储库。下一步，在 Playwright CLI 上指定此服务配置文件。

创建新的 .runsettings 文件。

（可选）使用示例存储库中的 .runsettings 文件。

向新文件添加以下内容：

<?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>

此文件中的设置使你能够：

使用云托管浏览器并行运行测试，以加速生成管道。
将测试结果和生成工件发布到服务，以便更快地进行故障排除。

但是，你可以选择同时使用这两种功能或使用其中一个。请参阅如何使用服务功能，并根据需要更新服务配置文件。

保存文件并提交到源代码存储库。

在 Playwright 设置中启用工件

启用 Playwright 捕获的项目，例如屏幕截图、视频和跟踪。

有关屏幕截图，请参阅捕获屏幕截图
有关视频，请参阅录制测试的视频
有关跟踪，请参阅录制跟踪

收集这些项目后，将它们附加到 TestContext，以确保它们在测试报告中可用。有关详细信息，请参阅我们的 NUnit 示例项目

更新工作流定义

更新 CI 工作流定义，以使用 Playwright CLI 运行 Playwright 测试。将服务配置文件作为 Playwright CLI 的输入参数传递。通过指定环境变量来配置环境。

打开 CI 工作流定义

添加以下步骤以在 Microsoft Playwright Testing 中运行 Playwright 测试。

以下步骤介绍了 GitHub Actions 或 Azure Pipelines 的工作流更改。同样，可以在其他 CI 平台中使用 Playwright CLI 运行 Playwright 测试。

GitHub Actions
Azure Pipelines


  # 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. 
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 }} 
    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_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

- task: PowerShell@2
  enabled: true
  displayName: "Install dependencies"
  inputs:
    targetType: 'inline'
    script: 'npm ci'
    workingDirectory: path/to/playwright/folder # update accordingly

- task: AzureCLI@2
  displayName: Run Playwright Test  
    env:
    PLAYWRIGHT_SERVICE_URL: $(PLAYWRIGHT_SERVICE_URL)
    PLAYWRIGHT_SERVICE_RUN_ID: ${{ parameters.runIdPrefix }}$(Build.DefinitionName) - $(Build.BuildNumber) - $(System.JobAttempt) 
  inputs:
    azureSubscription: My_Service_Connection # Service connection used to authenticate this pipeline with Azure to use the service
    scriptType: 'pscore'
    scriptLocation: 'inlineScript'
    inlineScript: |
      npx playwright test -c playwright.service.config.ts --workers=20
  addSpnToEnvironment: true
  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'

更新 CI 工作流定义，以使用 Playwright NUnit CLI 运行 Playwright 测试。将 .runsettings 文件作为 Playwright CLI 的输入参数传递。通过指定环境变量来配置环境。

打开 CI 工作流定义。

添加以下步骤以在 Microsoft Playwright Testing 中运行 Playwright 测试。

以下步骤介绍了 GitHub Actions 或 Azure Pipelines 的工作流更改。同样，可以在其他 CI 平台中使用 Playwright CLI 运行 Playwright 测试。

GitHub Actions
Azure Pipelines

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 }} 
          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_RUN_ID: ${{ github.run_id }}-${{ github.run_attempt }}-${{ github.sha }}
        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

- task: UseDotNet@2
  inputs:
    packageType: 'sdk'
    version: '8.x'
    installationPath: $(Agent.ToolsDirectory)/dotnet

- checkout: self

- script: dotnet restore
  displayName: 'Restore dependencies'
  workingDirectory: path/to/playwright/folder # update accordingly

- script: dotnet build --no-restore
  displayName: 'Build'
  workingDirectory: path/to/playwright/folder # update accordingly

- task: AzureCLI@2
  displayName: Run Playwright Test  
    env:
    PLAYWRIGHT_SERVICE_URL: $(PLAYWRIGHT_SERVICE_URL)
    PLAYWRIGHT_SERVICE_RUN_ID: ${{ parameters.runIdPrefix }}$(Build.DefinitionName) - $(Build.BuildNumber) - $(System.JobAttempt) 
  inputs:
    azureSubscription: My_Service_Connection # Service connection used to authenticate this pipeline with Azure to use the service
    scriptType: 'pscore'
    scriptLocation: 'inlineScript'
    inlineScript: |
      dotnet test --settings:.runsettings --logger "microsoft-playwright-testing" -- NUnit.NumberOfTestWorkers=20
  addSpnToEnvironment: true
  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'

保存并提交更改。

触发 CI 工作流后，Playwright 测试将在云托管浏览器上的 Microsoft Playwright Testing 工作区中运行，并且将跨 20 个并行辅助角色运行。收集的结果和项目将发布到服务，可以在服务门户中查看。

注意

默认为现有工作区启用报告功能。这将分阶段推出，需要几天时间。为避免失败，请在继续操作之前，确认工作区的 Rich diagnostics using reporting 设置为“开”。有关详细信息，请参阅为工作区启用报告。

注意

使用 Microsoft Playwright Testing 时，你将根据消耗的总测试分钟数和发布的测试结果数付费。如果你是第一次使用或开始使用免费试用版，可以大规模运行单个测试（而不是完整测试套件），以避免耗尽免费测试分钟数和测试结果数。

验证测试是否成功运行后，可以使用服务运行更多测试以逐步增加测试负载。

可以使用以下命令行对服务运行单个测试：

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

在 Playwright 门户中查看测试运行和结果

现在，你可以在 Playwright 门户中排查 CI 管道问题。

测试运行完成后，将生成一个指向 Playwright 门户的链接。打开此链接即可查看详细的测试结果和关联的工件。该门户会显示基本信息，包括：
- CI 生成详细信息
- 总体测试运行状态
- 链接到测试运行的提交 ID
Playwright 门户会提供故障排除所需的所有信息。您可以：
- 在重试之间切换。
- 查看详细的错误日志、测试步骤和附加工件（例如屏幕截图或视频）。
- 直接导航到“跟踪查看器”，进行更深入的分析。
跟踪查看器让你可以直观地逐步查看测试执行情况。您可以：
- 使用时间线将鼠标悬停在各个步骤上，显示每个操作前后的页面状态。
- 检查每个步骤的详细日志、DOM 快照、网络活动、错误和控制台输出。

提示

可以独立使用 Microsoft Playwright Testing 服务功能。无需使用云托管的浏览器功能即可将测试结果发布到门户，并可以仅使用云托管的浏览器来加快测试套件的速度，而无需发布测试结果。有关详细信息，请参阅如何使用服务功能。

注意

发布的测试结果和项目会在服务上保留 90 天。之后，它们会自动删除。

你已成功设置一个持续端到端测试工作流，以便在云托管浏览器上大规模运行 Playwright 测试。

通过

快速入门：使用 Microsoft Playwright Testing（预览版）设置持续端到端测试

先决条件

获取服务区域终结点 URL

添加服务配置文件

更新 package.json 文件

在 Playwright 配置中启用工件

设置服务配置

更新项目的 .csproj 文件

为项目添加或更新 `.runsettings` 文件。

在 Playwright 设置中启用工件

更新工作流定义

在 Playwright 门户中查看测试运行和结果

反馈

其他资源

通过

快速入门：使用 Microsoft Playwright Testing（预览版）设置持续端到端测试

先决条件

获取服务区域终结点 URL

添加服务配置文件

更新 package.json 文件

在 Playwright 配置中启用工件

设置服务配置

更新项目的 .csproj 文件

为项目添加或更新 .runsettings 文件。

在 Playwright 设置中启用工件

更新工作流定义

在 Playwright 门户中查看测试运行和结果

相关内容

反馈

其他资源

为项目添加或更新 `.runsettings` 文件。