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

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

项目
05/21/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 入门方面的帮助，请参阅创建第一个工作流

配置服务访问令牌

Microsoft Playwright Testing 使用访问令牌授权用户通过服务运行 Playwright 测试。可以在 Playwright 门户中生成服务访问令牌，然后在服务配置文件中指定访问令牌。

若要生成访问令牌并将其存储为 CI 工作流机密，请执行以下步骤：

使用 Azure 帐户登录到 Playwright 门户。
选择工作区设置图标，然后转到“访问令牌”页。
选择“生成新令牌”，为 CI 工作流创建一个新的访问令牌。
输入访问令牌详细信息，然后选择“生成令牌”。
将访问令牌存储在 CI 工作流机密中，以避免在工作流定义中以明文形式指定令牌：
- GitHub Actions
- Azure Pipelines
1. 转到 GitHub 存储库，选择“设置”>“机密和变量”>“操作”。
2. 选择“新建存储库机密”。
3. 输入机密详细信息，然后选择“添加机密”以创建 CI/CD 机密。
  
  参数值
  
  Name PLAYWRIGHT_SERVICE_ACCESS_TOKEN
  
  值粘贴之前复制的工作区访问令牌。
4. 选择“确定”以创建工作流机密。
1. 转到 Azure DevOps 项目。
2. 转到“管道”页，选择适当的管道，然后选择“编辑”。
3. 找到该管道的变量。
4. 添加新变量。
5. 输入变量详细信息，然后选择“添加机密”以创建 CI/CD 机密。
  
  参数值
  
  Name PLAYWRIGHT_SERVICE_ACCESS_TOKEN
  
  值粘贴之前复制的工作区访问令牌。
  
  保留此值为机密检查此值
6. 选择“确定”，然后选择“保存”以创建工作流机密。

参数	值
Name	PLAYWRIGHT_SERVICE_ACCESS_TOKEN
值	粘贴之前复制的工作区访问令牌。

参数	值
Name	PLAYWRIGHT_SERVICE_ACCESS_TOKEN
值	粘贴之前复制的工作区访问令牌。
保留此值为机密	检查此值

获取服务区域终结点 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 文件。

向新文件添加以下内容：

/*
* 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 : [{}]
});

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

更新工作流定义

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

打开 CI 工作流定义

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

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

GitHub Actions
Azure Pipelines

- 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

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

保存并提交更改。

触发 CI 工作流后，Playwright 测试将在云托管浏览器上的 Microsoft Playwright Testing 工作区中运行，跨 20 个并行辅助角色。

注意

通过 Microsoft Playwright Testing，根据测试总分钟数收取费用。如果你是第一次使用或开始使用免费试用版，可以大规模运行单个测试（而不是完整测试套件），以避免耗尽免费测试分钟数。

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

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

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

启用测试结果报告

Microsoft Playwright Testing 现支持在 Playwright 门户中查看测试结果。在预览版期间，只能通过仅限邀请访问。

重要

Microsoft Playwright Testing 服务的报告功能在仅限受邀者使用的预览版期间免费。但是，云托管浏览器的现有功能都会根据Azure 定价计划继续计费。

访问报告工具后，请按照以下步骤设置测试。

在工作区主页中，导航到“设置”。
在“设置”中，选择“常规”并确保报告“已启用”。
按照以下步骤创建 GitHub 个人访问令牌。

你需要向令牌提供 read:packages 权限。在本文剩余部分中，此令牌称为 PAT_TOKEN_PACKAGE。
将 GitHub 令牌存储在 CI 工作流机密中，以避免在工作流定义中以明文形式指定令牌：
- GitHub Actions
- Azure Pipelines
1. 转到 GitHub 存储库，选择“设置”>“机密和变量”>“操作”。
2. 选择“新建存储库机密”。
3. 输入机密详细信息，然后选择“添加机密”以创建 CI/CD 机密。
  
  参数值
  
  Name PAT_TOKEN_PACKAGE
  
  值粘贴之前复制的工作区访问令牌。
4. 选择“确定”以创建工作流机密。
1. 转到 Azure DevOps 项目。
2. 转到“管道”页，选择适当的管道，然后选择“编辑”。
3. 找到该管道的变量。
4. 添加新变量。
5. 输入变量详细信息，然后选择“添加机密”以创建 CI/CD 机密。
  
  参数值
  
  Name PAT_TOKEN_PACKAGE
  
  值粘贴之前复制的工作区访问令牌。
  
  保留此值为机密检查此值
6. 选择“确定”，然后选择“保存”以创建工作流机密。

参数	值
Name	PAT_TOKEN_PACKAGE
值	粘贴之前复制的工作区访问令牌。

参数	值
Name	PAT_TOKEN_PACKAGE
值	粘贴之前复制的工作区访问令牌。
保留此值为机密	检查此值

使用包更新 package.json 文件。

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

更新 Playwright 配置文件。

按照使用其他报告器的相同方式将 Playwright Testing 报告器添加到 Playwright.config.ts。

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

更新 CI 工作流定义以在运行测试之前安装报告包，从而在 Microsoft Playwright Testing 中发布 Playwright 测试的报告。

GitHub Actions
Azure Pipelines

- 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

- 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 ${{secrets 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 Testing 服务将测试结果发布到独立于云托管浏览器功能的门户。

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

通过

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

先决条件

配置服务访问令牌

获取服务区域终结点 URL

添加服务配置文件

更新工作流定义

启用测试结果报告

反馈

反馈

其他资源

通过

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

先决条件

配置服务访问令牌

获取服务区域终结点 URL

添加服务配置文件

更新工作流定义

启用测试结果报告

相关内容

反馈

反馈

其他资源