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

教程：使用 Microsoft Playwright Testing 服务运行端到端 Playwright 测试

2024-12-21

本教程介绍如何将 Playwright 测试套件与 Microsoft Playwright Testing 集成，使用云托管的浏览器更快地运行测试，以及使用服务的报告功能高效进行故障排除。你将模拟 Playwright 测试套件，将其连接到服务以加快执行速度，并使用报告工具简化故障排除。

在本教程中，你将了解：

设置 Playwright 测试套件。
将 Playwright 测试套件与 Microsoft Playwright Testing 服务集成。
使用该服务运行测试套件，以便更快地执行和高效地故障排除。

先决条件

具有活动订阅的 Azure 帐户。如果没有 Azure 订阅，请在开始之前创建一个免费帐户。
在本地计算机上安装的 Azure CLI。
Azure CLI 版本 2.2.0 或更高版本。运行 az --version 以检查计算机上安装的版本。如果需要安装或升级 Azure CLI，请参阅如何安装 Azure CLI。
Visual Studio Code。如果尚未安装它，请下载并安装它。
Git。如果尚未安装它，请下载并安装它。

先决条件检查

开始之前验证环境：

登录 Azure 门户，并检查订阅是否处于活动状态。
通过运行 az --version 在终端或命令窗口中检查 Azure CLI 版本。有关最新版本，请参阅最新发行说明。

如果没有最新版本，请按照适用于你操作系统或平台的安装指南来更新安装。

设置 Playwright 测试套件

在此步骤中，你将创建一个与该服务集成的 Playwright 测试套件。

克隆示例存储库并导航到测试文件夹。

git clone https://github.com/microsoft/playwright-testing-service
cd playwright-testing-service/samples/get-started

安装依赖项。

npm install

运行 Playwright 测试。

运行此命令，在本地（服务外部）执行测试，以在与服务集成之前识别任何问题。后续步骤中使用此项目来与服务集成。

npx playwright test

将 Playwright 测试套件与 Microsoft Playwright Testing 服务集成

将你在上一教程中创建的 Playwright 测试套件与 Playwright Testing 服务集成。

按照以下步骤设置服务并集成测试套件。

创建 Playwright Testing 工作区

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

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

提示

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

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

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

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

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

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

安装 Microsoft Playwright Testing 包

若要安装服务包，请导航到你在上一教程中创建的测试套件的位置并运行以下命令：

npm init @azure/microsoft-playwright-testing@latest

此命令会生成 playwright.service.config.ts 文件，用于：

将 Playwright 定向到 Microsoft Playwright Testing 服务并对其进行身份验证。
添加一个报告程序来发布测试结果和项目。

配置服务区域终结点

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

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

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

终结点 URL 与创建工作区时选择的 Azure 区域匹配。请确保此 URL 在 PLAYWRIGHT_SERVICE_URL 环境变量中可用。

设置你的环境

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

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

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

设置身份验证

若要在 Microsoft Playwright Testing 工作区中运行 Playwright 测试，需要对使用该服务运行测试的 Playwright 客户端进行身份验证。向你运行 Playwright 测试的开发工作站进行身份验证。

Microsoft Entra ID 是该服务的默认身份验证方法，也是建议的方法。使用 Azure CLI 登录

az login

注意

如果你属于多个 Microsoft Entra 租户，请确保登录到你的工作区所属的租户。可以从 Azure 门户获取租户 ID。请参阅查找 Microsoft Entra 租户。获取 ID 后，使用命令 az login --tenant <TenantID> 登录

在 Playwright 设置中启用工件

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

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

使用 Microsoft Playwright Testing 大规模运行测试并轻松进行故障排除

现在，你已准备好使用 Microsoft Playwright Testing 在云中运行 Playwright 测试的配置。

使用该服务运行 Playwright 测试

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

按照以下步骤使用 Microsoft Playwright Testing 运行 Playwright 测试：

打开终端窗口。

输入以下命令，在远程浏览器上运行 Playwright 测试套件，并将测试结果发布到工作区。

npx playwright test --config=playwright.service.config.ts --workers=20

测试完成后，可以在终端中查看测试状态。

Running 600 tests using 20 workers
    600 passed (3m)

Test report: https://playwright.microsoft.com/workspaces/<workspace-id>/runs/<run-id>

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

现在，你可以在 Playwright 门户中排查失败的测试案例所存在的问题。

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

提示

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

注意

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

通过