快速入门：通过 Playwright Workspaces 的报告功能进行高级诊断

在本快速入门中，你将学习如何使用 Playwright 工作区中的报告功能调试 Playwright 测试。 通过将测试报告保存到 Azure 存储并使用 Playwright 工作区报告在 Azure 门户中查看报告，对 Playwright 测试执行高级诊断。

先决条件

• 拥有有效订阅的 Azure 帐户。 如果没有 Azure 订阅，请在开始之前创建一个免费帐户。
• Azure 帐户需要所有者、参与者或经典管理员角色之一。
• 使用 Playwright 运行器和 JavaScript SDK 的 Playwright 项目（目前不支持 NUnit 和其他运行器）。 如果没有项目，请使用 Playwright 入门文档 创建一个项目，或使用 Playwright Workspaces 示例项目。
• Playwright 项目必须使用 Playwright 包（@plawright/test）1.57 或更高版本。
• Azure CLI。 如果你没有 Azure CLI，请参阅安装 Azure CLI。
• Playwright 工作区必须使用 Microsoft Entra ID 身份验证。 报告不支持使用访问令牌进行身份验证。

启用报告并将存储帐户链接到工作区

若要开始使用 Playwright Workspaces 报告，第一步是在工作区中启用报告，并链接存储帐户来存储报告文件。 可以开始使用新工作区或使用现有工作区。

为链接的存储帐户添加基于角色的访问控制 (RBAC) 角色

1. 在 Azure 门户中打开链接的存储帐户。

2. 转到“访问控制 (IAM)”选项卡。

   

3. 选择“添加角色分配”。

   

4. 在 “作业功能角色”下，搜索并选择“ 存储 Blob 数据参与者 ”角色，然后单击“ 下一步”。

   

5. 选择并添加运行测试的所有成员。

   

6. 单击“ 审阅 + 分配”。

安装 Playwright Workspaces 包

若要使用 Playwright Workspaces，请安装 Playwright Workspaces 包。

npm init @azure/playwright@latest

此命令将生成一个 playwright.service.config.ts 文件，该文件用于指引并验证 Playwright 到 Playwright Workspaces。

如果已有此文件，包会要求你覆盖它。

启用 HTML 和 Playwright 工作区报告

若要使用 Playwright Workspaces 报告功能，请通过在 playwright.service.config.ts 文件中添加以下设置来启用 HTML 和 Playwright Workspaces 报告插件。

reporter: [
    ["html", { open: "never" }], // HTML reporter must come first
    ["@azure/playwright/reporter"], // Azure reporter uploads HTML report
]

在 Playwright 设置中启用工件

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

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

配置浏览器终结点

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

若要获取浏览器终结点 URL，请执行以下步骤：

1. 使用 Azure 帐户登录到 Azure 门户 ，并导航到工作区。

2. 选择“入门”页。

   

3. 在将浏览器终结点添加到您的设置时，复制终结点 URL。

   请确保此 URL 在环境变量中 PLAYWRIGHT_SERVICE_URL 可用。

   

配置你的环境

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

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

1. 将dotenv模块添加到项目：

   npm i --save-dev dotenv
   

2. 在以下代码片段中添加 playwright.service.config.ts：

   require('dotenv').config();
   

3. 在 Playwright 项目中的 .env 文件旁边创建 playwright.config.ts 文件：

   PLAYWRIGHT_SERVICE_URL={MY-REGION-ENDPOINT}
   

   请务必将 {MY-REGION-ENDPOINT} 文本占位符替换为之前复制的值。

设置身份验证

要在 Playwright 工作区中运行 Playwright 测试，需要对使用该服务运行测试的 Playwright 客户端进行身份验证。 从本地开发计算机或 CI 计算机进行身份验证。

使用 Microsoft Entra ID 设置身份验证

Microsoft Entra ID 是 Playwright Workspace 中使用报告功能的唯一受支持的身份验证。 在本地开发计算机上，可以使用 Azure CLI 登录

az login

使用 Playwright Workspaces 运行测试

你已完成使用 Playwright Workspaces 在云中运行 Playwright 测试的配置。 可以使用 Playwright CLI 运行测试，也可以使用Playwright Test Visual Studio Code 扩展。

在 Azure 门户中调试测试运行和结果

为链接的存储帐户添加基于角色的访问控制 (RBAC) 角色

1. 在 Azure 门户中打开链接的存储帐户。

2. 转到“访问控制 (IAM)”选项卡。

   

3. 选择“添加角色分配”。

   

4. 在 “特权管理员角色”下，搜索并选择“ 参与者*”角色，然后单击“ 下一步”。

   

5. 选择并添加可以查看测试报告的所有成员。

   

6. 单击“ 审阅 + 分配”。

（仅当启用跟踪时）在链接的存储帐户中允许列出公共跟踪查看器

1. 在 Azure 门户中打开链接的存储帐户。

2. 转到“设置 -> 资源共享”（CORS）。

   

3. 在 Blob 服务下，添加新记录：

   • 允许的源：https://trace.playwright.dev
   • 允许的方法： GETOPTIONS
   • 最大年龄：输入介于 0 和 2147483647 之间的值。

   

4. 选择“保存”。

在 Azure 门户中查看保存的测试报告

现在可以在 Azure 门户中对失败的测试用例进行故障排除。

1. 测试运行完成后，记者会在 Azure 门户中生成“测试运行”页的链接。 打开此链接查看详细的测试结果和相关工件。

   

2. “ 测试运行”页 提供故障排除所需的所有信息。 您可以：

   • 查看 详细的错误日志、 测试步骤和附加项目，例如 屏幕截图 或 视频。
   • 直接导航到跟踪查看器进行深入分析。

   

3. 通过 跟踪查看器 ，可以直观地逐步执行测试。 您可以：

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