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

快速入门：使用 Microsoft Playwright Testing 预览版大规模运行端到端测试

项目
05/21/2024

在本快速入门中，你会了解如何使用 Microsoft Playwright Testing 预览版通过高度并行的云浏览器运行 Playwright 测试。使用云基础结构跨多个浏览器、设备和操作系统验证应用程序。

完成本快速入门后，你会拥有 Microsoft Playwright Testing 工作区，用于大规模运行 Playwright 测试。

重要

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

先决条件

具有活动订阅的 Azure 帐户。如果没有 Azure 订阅，请在开始之前创建一个免费帐户。
Azure 帐户需要所有者、参与者或经典管理员角色之一。
Playwright 项目。如果没有项目，请使用 Playwright 入门文档创建一个，或使用 Microsoft Playwright Testing 示例项目。

创建工作区

要开始在云浏览器中大规模运行 Playwright 测试，请先在 Playwright 门户中创建 Microsoft Playwright Testing 工作区。

使用 Azure 帐户登录到 Playwright 门户。
如果已有工作区，请选择现有工作区，然后转到下一步。

提示

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

如果还没有工作区，请选择“+ 新建工作区”，然后提供以下信息：

字段	说明
工作区名称	输入唯一名称以标识工作区。该名称只能包含字母数字字符，长度介于 3 到 64 个字符之间。
Azure 订阅	选择要用于此 Microsoft Playwright Testing 工作区的 Azure 订阅。
区域	选择要托管工作区的地理位置。这是为工作区存储测试运行数据的位置。

选择“创建工作区”以在订阅中创建工作区。

在工作区创建期间，Azure 订阅中会创建新的资源组和 Microsoft Playwright Testing Azure 资源。

工作区创建完成后，会重定向到设置指南。

创建用于服务身份验证的访问令牌

Microsoft Playwright Testing 使用访问令牌授权用户通过服务运行 Playwright 测试。首先在 Playwright 门户中生成服务访问令牌，然后将该值存储在环境变量中。

要生成访问令牌，请执行以下步骤：

在工作区设置指南的“创建访问令牌”中，选择“生成令牌”。
复制工作区的访问令牌。

需要访问令牌值以在后面的步骤中配置环境。

配置服务区域终结点

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

要获取服务终结点 URL，请执行以下步骤：

在“在设置中添加区域终结点”中，复制工作区的区域终结点。

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

设置你的环境

要设置环境，必须使用在前面的步骤中获取的值配置PLAYWRIGHT_SERVICE_ACCESS_TOKEN和PLAYWRIGHT_SERVICE_URL环境变量。

建议使用dotenv模块管理环境。使用dotenv，可以在.env文件中定义环境变量。

将dotenv模块添加到项目：
```
npm i --save-dev dotenv
```
在 Playwright 项目中的 playwright.config.ts 文件旁边创建 .env 文件：
```
PLAYWRIGHT_SERVICE_ACCESS_TOKEN={MY-ACCESS-TOKEN}
PLAYWRIGHT_SERVICE_URL={MY-REGION-ENDPOINT}
```
请务必将 {MY-ACCESS-TOKEN} 和 {MY-REGION-ENDPOINT} 文本占位符替换为之前复制的值。

注意

请确保不要将.env文件添加到源代码存储库，以避免泄露访问令牌值。

添加服务配置文件

要在 Microsoft Playwright Testing 工作区中运行 Playwright 测试，需要将服务配置文件与 Playwright 配置文件一起添加。服务配置文件引用环境变量以获取工作区终结点和访问令牌。

要将服务配置添加到项目：

连同 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 : [{}]
});

保存文件。

使用 Microsoft Playwright Testing 大规模运行测试

现在，你已准备好使用 Microsoft Playwright Testing 在云中运行 Playwright 测试的配置。可以使用 Playwright CLI 运行测试，也可以使用Playwright Test Visual Studio Code 扩展。

大规模运行单个测试

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

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

执行以下步骤以使用 Microsoft Playwright Testing 运行单个 Playwright 测试：

Playwright CLI
Visual Studio Code

要使用 Playwright CLI 通过 Microsoft Playwright Testing 运行测试，请将服务配置文件作为命令行参数传递。

打开终端窗口。
输入以下命令，以在工作区的远程浏览器上运行 Playwright 测试：

将{name-of-file.spec.ts}文本占位符替换为测试规范文件的名称。
```
npx playwright test {name-of-file.spec.ts} --config=playwright.service.config.ts
```
测试完成后，可以在终端中查看测试状态。
```
Running 1 test using 1 worker
    1 passed (2.2s)

To open last HTML report run:

npx playwright show-report
```

要使用 Microsoft Playwright Testing 在 Visual Studio Code 中运行单个 Playwright 测试，请在测试资源管理器视图中选择服务配置文件。然后从测试列表中选择并运行测试。

安装Playwright Test Visual Studio Code 扩展。
在活动栏中打开“测试列表编辑器”视图。

测试列表编辑器会自动检测项目中的 Playwright 测试和服务配置。
选择“选择默认配置文件”，然后从服务配置文件中选择默认项目。

请注意，服务运行配置文件来自之前添加的playwright.service.config.ts文件。

通过设置默认配置文件，可以使用服务自动运行测试，也可以同时运行多个 Playwright 项目。
从测试列表中，选择测试旁边的“运行测试”按钮以运行测试。

测试在默认配置文件中选择的项目上运行。如果从服务配置中选择了一个或多个项目，测试会在工作区的远程浏览器上运行。

提示

使用调试测试按钮在远程浏览器上运行测试时，仍可以调试测试代码。
可以直接在 Visual Studio Code 中查看测试结果。

现在可以使用服务运行多个测试，也可以在远程浏览器上运行整个测试套件。

注意

根据测试套件的大小，对于超出分配的免费测试分钟数的测试分钟数，可能会产生额外费用。

大规模运行完整测试套件

现在，你已验证能否使用 Microsoft Playwright Testing 运行单个测试，可以大规模运行完整的 Playwright 测试套件。

执行以下步骤以使用 Microsoft Playwright Testing 运行完整的 Playwright 测试套件：

Playwright CLI
Visual Studio Code

使用 Microsoft Playwright Testing 运行多个 Playwright 测试或完整测试套件时，可以选择将并行辅助角色数指定为命令行参数。

打开终端窗口。
输入以下命令，以在工作区的远程浏览器上运行 Playwright 测试套件：
```
npx playwright test --config=playwright.service.config.ts --workers=20
```
根据测试套件的大小，此命令最多可在 20 个并行辅助角色上运行测试。

测试完成后，可以在终端中查看测试状态。
```
Running 6 tests using 6 workers
    6 passed (18.2s)

To open last HTML report run:

    npx playwright show-report
```

在 Playwright 门户中查看测试运行

转到“Playwright 门户”以查看工作区的测试运行元数据和活动日志。

每个测试的活动日志列表运行以下详细信息：测试完成总时间、并行辅助角色数和测试分钟数。

在 Playwright 门户中查看测试结果

Microsoft Playwright Testing 现支持在 Playwright 门户中查看测试结果。此功能仅以限受邀者使用的功能这种形式提供。

重要

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

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

在工作区主页中，导航到“设置”。
在“设置”中，选择“常规”并确保报告“已启用”。
请确保环境已正确设置，如“设置环境”部分中所述。
安装报告包

由于该功能当前不公开，因此需要执行几个额外的步骤来安装包。该功能公开后，便无需执行这些步骤。
1. 在 Playwright 配置文件所在的同一位置创建名为 .npmrc 的文件。
2. 将以下内容添加到文件中并保存。
```
@microsoft:registry=https://npm.pkg.github.com
```
3. 按照以下步骤创建 GitHub 个人访问令牌。
你需要向令牌提供 read:packages 权限。在本文剩余部分中，此令牌称为 PAT_TOKEN_PACKAGE。
1. 在终端中 Playwright 配置文件的位置运行以下命令。将 PAT_TOKEN_PACKAGE 替换为上一步中生成的令牌。
```
    npm set //npm.pkg.github.com/:_authToken PAT_TOKEN_PACKAGE
```
2. 使用包更新 package.json 文件。
```
 "dependencies": {
            "@microsoft/mpt-reporter": "0.1.1-alpha-8839338250-1.0"
    }
```
3. 运行 npm install 以安装包。

更新 Playwright.config 文件

按照使用其他报告器的相同方式将 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',
    }

运行 Playwright 测试

可以在 Playwright Testing 门户中运行 npx playwright test 命令并查看结果和项目。

提示

可以使用 Microsoft Playwright Testing 服务将测试结果发布到独立于云托管浏览器功能的门户。

优化并行辅助角色配置

测试通过服务顺利运行后，请试验不同的并行辅助角色数量，以确定可最大程度缩短测试完成时间的最佳配置。

借助 Microsoft Playwright Testing，最多可以运行 50 个并行辅助角色。多个因素会影响项目的最佳配置，例如客户端计算机的 CPU、内存和网络资源、目标应用程序的负载处理容量以及测试中执行的操作类型。

可以在 Playwright CLI 命令行上指定并行辅助角色数，或者在 Playwright 服务配置文件中配置workers属性。

详细了解如何确定优化测试套件完成的最佳配置。

下一步

已成功在 Playwright 门户中创建 Microsoft Playwright Testing 工作区，并在云浏览器中运行 Playwright 测试。

转到下一个快速入门，在 CI/CD 工作流中运行 Playwright 测试以设置连续端到端测试。

在 CI/CD 中设置连续端到端测试

Share via