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

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

项目
11/19/2024

本快速入门介绍如何使用 Microsoft Playwright Testing 预览版通过高度并行的云浏览器运行 Playwright 测试和轻松排查测试失败的问题。使用云基础结构跨多个浏览器、设备和操作系统验证应用程序。将 Playwright 生成的结果和项目发布到服务，并在服务门户中查看它们。

完成本快速入门后，你将获得一个 Microsoft Playwright Testing 工作区，可在其中大规模运行 Playwright 测试，并在服务门户中查看测试结果和项目。

重要

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

先决条件

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

创建工作区

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

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

提示

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

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

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

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

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

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

安装 Microsoft Playwright Testing 包

若要使用该服务，请安装 Microsoft Playwright Testing 包。

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

这会生成 playwright.service.config.ts 文件，其作用如下：

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

如果你已有此文件，该包会询问你是否替代此文件。

若要使用该服务，请安装 Microsoft Playwright Testing 包。

dotnet add package Azure.Developer.MicrosoftPlaywrightTesting.NUnit --prerelease

配置服务区域终结点

在设置中，必须提供区域特定的服务终结点。终结点取决于在创建工作区时选择的 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} 文本占位符替换为之前复制的值。

设置服务配置

使用以下内容在项目中创建文件 PlaywrightServiceSetup.cs。

using Azure.Developer.MicrosoftPlaywrightTesting.NUnit;

namespace PlaywrightTests; // Remember to change this as per your project namespace

[SetUpFixture]
public class PlaywrightServiceSetup : PlaywrightServiceNUnit {};

注意

确保项目使用 Microsoft.Playwright.NUnit 版本 1.47 或更高版本。

设置身份验证

若要在 Microsoft Playwright Testing 工作区中运行 Playwright 测试，需要对使用该服务运行测试的 Playwright 客户端进行身份验证。这可能是本地开发计算机，也可能是 CI 计算机。

该服务提供两种身份验证方法：Microsoft Entra ID 和访问令牌。

Microsoft Entra ID 使用 Azure 凭据，这需要登录到 Azure 帐户进行安全访问。或者，可以从 Playwright 工作区生成访问令牌并在设置中使用它。

使用 Microsoft Entra ID 设置身份验证

Microsoft Entra ID 是该服务的默认身份验证方法，也是建议的方法。在本地开发计算机中，可以使用 Azure CLI 登录

az login

注意

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

使用访问令牌设置身份验证

可以从 Playwright Testing 工作区生成访问令牌并在设置中使用它。但是，我们强烈建议使用 Microsoft Entra ID 进行身份验证，因为它具有增强的安全性。访问令牌虽然很方便使用，但其功能类似于长期密码，因此更容易泄露。

默认情况下，已禁用使用访问令牌的身份验证。若要使用，请启用基于访问令牌的身份验证
使用访问令牌设置身份验证

注意

我们强烈建议使用 Microsoft Entra ID 对该服务进行身份验证。如果使用访问令牌，请参阅如何管理访问令牌

在 Playwright 设置中启用工件

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

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

启用 Playwright 捕获的项目，例如屏幕截图、视频和跟踪。

有关屏幕截图，请参阅捕获屏幕截图
有关视频，请参阅录制测试的视频
有关跟踪，请参阅录制跟踪

收集这些项目后，将它们附加到 TestContext，以确保它们在测试报告中可用。有关详细信息，请参阅我们的 NUnit 示例项目

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

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

使用服务运行单个测试

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

注意

默认为现有工作区启用报告功能。这将分阶段推出，需要几天时间。为避免失败，请在继续操作之前，确认工作区的 Rich diagnostics using reporting 设置为“开”。请参阅为工作区启用报告。

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

执行以下步骤以使用 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)

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

针对服务管理的浏览器运行 Playwright 测试，并使用上面创建的配置在统一门户中查看结果。

dotnet test --settings:.runsettings --logger "microsoft-playwright-testing" -- NUnit.NumberOfTestWorkers=20

在 .runsettings 文件中定义测试运行的设置。请参阅如何使用服务包选项

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

Starting test execution, please wait...

Initializing reporting for this test run. You can view the results at: https://playwright.microsoft.com/workspaces/<workspace-id>/runs/<run-id>

A total of 100 test files matched the specified pattern.

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

Passed!  - Failed:     0, Passed:     100, Skipped:     0, Total:     100, Duration: 59 s - PlaywrightTestsNUnit.dll (net7.0)

Workload updates are available. Run `dotnet workload list` for more information.

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

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

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

测试性运行完成后，可在终端中获得 Playwright 门户的链接。打开此链接即可查看详细的测试结果和关联的工件。该门户会显示基本信息，包括：
- CI 生成详细信息
- 总体测试运行状态
- 链接到测试运行的提交 ID
Playwright 门户会提供故障排除所需的所有信息。您可以：
- 查看详细的错误日志和附加项目（例如屏幕截图或视频）。
- 直接导航到“跟踪查看器”，进行更深入的分析。

注意

某些元数据（例如所有者、说明和类别）当前未显示在服务仪表板上。如果希望添加其他信息，请在我们的存储库中提交 GitHub 问题。

跟踪查看器让你可以直观地逐步查看测试执行情况。您可以：
- 使用时间线将鼠标悬停在各个步骤上，显示每个操作前后的页面状态。
- 检查每个步骤的详细日志、DOM 快照、网络活动、错误和控制台输出。

提示

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

注意

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

优化并行辅助角色配置

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

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

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

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

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

下一步

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

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

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

通过