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

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

在本快速入门中，你将使用 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

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

Azure Pipelines

• Azure DevOps 组织和项目。 如果没有 Azure DevOps 组织，可以免费创建一个。
• 管道定义。 如需 Azure Pipelines 入门方面的帮助，请参阅创建第一个管道。
• 用于通过 Azure Pipelines 安全地向服务进行身份验证的 Azure 资源管理器服务连接，请参阅 Azure 资源管理器服务连接

获取服务区域终结点 URL

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

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

1. 使用 Azure 帐户登录到 Playwright 门户。

2. 在工作区主页上，选择“查看设置指南”。

   提示

   如果有多个工作区，可以通过选择页面顶部的工作区名称切换到另一个工作区，然后选择“管理所有工作区”。

3. 在“在设置中添加区域终结点”中，复制服务终结点 URL。

   终结点 URL 与创建工作区时选择的 Azure 区域匹配。

4. 将服务终结点 URL 存储在 CI 工作流机密中：

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

添加服务配置文件

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

1. 连同 playwright.config.ts 文件一起创建新文件 playwright.service.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 文件，以在 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'
  },

更新工作流定义

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

1. 打开 CI 工作流定义

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

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

   GitHub Actions

   
     # 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: 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
   

   Azure Pipelines

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

3. 保存并提交更改。

   触发 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 管道问题。

1. 测试运行完成后，将生成一个指向 Playwright 门户的链接。 打开此链接即可查看详细的测试结果和关联的工件。 该门户会显示基本信息，包括：

   • CI 生成详细信息
   • 总体测试运行状态
   • 链接到测试运行的提交 ID

   

2. Playwright 门户会提供故障排除所需的所有信息。 您可以：

   • 在重试之间切换。
   • 查看详细的错误日志、测试步骤和附加工件（例如屏幕截图或视频）。
   • 直接导航到“跟踪查看器”，进行更深入的分析。

   

3. 跟踪查看器让你可以直观地逐步查看测试执行情况。 您可以：

   • 使用时间线将鼠标悬停在各个步骤上，显示每个操作前后的页面状态。
   • 检查每个步骤的详细日志、DOM 快照、网络活动、错误和控制台输出。

   

提示

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

注意

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

相关内容

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

• 向用户授予对工作区的访问权限

• 管理工作区