跳至主要内容

调试测试

Playwright 检查器​

Playwright 检查器是一个 GUI 工具，可帮助您调试 Playwright 测试。它允许您逐步执行测试、实时编辑定位器、选择定位器并查看可操作性日志。

Playwright Inspector

以调试模式运行​

设置PWDEBUG环境变量以调试模式运行 Playwright 测试。这将配置 Playwright 进行调试并打开检查器。当设置PWDEBUG=1时，会配置其他有用的默认值

  • 浏览器以有头模式启动
  • 默认超时设置为 0（= 无超时）
PWDEBUG=1 dotnet test

逐步执行您的测试​

您可以使用检查器顶部的工具栏播放、暂停或逐步执行测试的每个操作。您可以在测试代码中看到当前突出显示的操作，并在浏览器窗口中看到突出显示的匹配元素。

Playwright Inspector and browser

从特定断点运行测试​

为了加快调试过程，您可以向测试中添加Page.PauseAsync()方法。这样，您就不必逐步执行测试的每个操作才能到达要调试的点。

await page.PauseAsync();

添加page.pause()调用后，以调试模式运行测试。单击检查器中的“恢复”按钮将运行测试，并且仅在page.pause()处停止。

test with page.pause

实时编辑定位器​

在调试模式下运行时，您可以实时编辑定位器。在“选择定位器”按钮旁边，有一个字段显示测试暂停的定位器。您可以在**选择定位器**字段中直接编辑此定位器，并在浏览器窗口中突出显示匹配的元素。

live editing locators

选择定位器​

在调试过程中，您可能需要选择更可靠的定位器。您可以通过单击**选择定位器**按钮并将鼠标悬停在浏览器窗口中的任何元素上来执行此操作。将鼠标悬停在元素上时，您将看到下方突出显示用于查找此元素所需的代码。单击浏览器中的元素会将定位器添加到字段中，然后您可以在其中调整它或将其复制到您的代码中。

Picking locators

Playwright 将查看您的页面并找出最佳定位器，优先考虑角色、文本和测试 ID 定位器。如果 Playwright 找到多个与定位器匹配的元素，它将改进定位器以使其具有弹性并唯一识别目标元素，因此您不必担心由于定位器导致测试失败。

可操作性日志​

当 Playwright 在单击操作上暂停时，它已经执行了可以在日志中找到的可操作性检查。这可以帮助您了解测试期间发生了什么以及 Playwright 做了什么或尝试了什么。日志会告诉您元素是否可见、已启用和稳定，定位器是否解析为元素，是否滚动到视图中，以及更多内容。如果无法达到可操作性，它将显示操作为挂起。

Actionability Logs

跟踪查看器​

Playwright 跟踪查看器是一个 GUI 工具，允许您浏览测试的已记录 Playwright 跟踪。您可以在左侧前后遍历每个操作，并在视觉上查看操作期间发生了什么。在屏幕中间，您可以看到操作的 DOM 快照。在右侧，您可以看到操作详细信息，例如时间、参数、返回值和日志。您还可以浏览控制台消息、网络请求和源代码。

要详细了解如何记录跟踪和使用跟踪查看器，请查看跟踪查看器指南。

浏览器开发者工具​

在使用PWDEBUG=console以调试模式运行时，playwright对象在开发者工具控制台中可用。开发者工具可以帮助您

  • 检查 DOM 树并**查找元素选择器**
  • 查看执行期间的控制台日志**（或了解如何通过 API 读取日志）
  • 检查**网络活动**和其他开发者工具功能

这还将 Playwright 的默认超时设置为 0（= 无超时）。

Browser Developer Tools with Playwright object

要使用浏览器开发者工具调试测试，请先在测试中设置断点以使用Page.PauseAsync()方法暂停执行。

await page.PauseAsync();

在测试中设置断点后，您可以使用PWDEBUG=console运行测试。

PWDEBUG=console dotnet test

Playwright 启动浏览器窗口后，您可以打开开发者工具。playwright对象将在控制台面板中可用。

playwright.$(selector)​

使用实际的 Playwright 查询引擎查询 Playwright 选择器，例如

playwright.$('.auth-form >> text=Log in');

<button>Log in</button>

playwright.$$(selector)​

与playwright.$相同，但返回所有匹配的元素。

playwright.$$('li >> text=John')

[<li>, <li>, <li>, <li>]

playwright.inspect(selector)​

在“元素”面板中显示元素。

playwright.inspect('text=Log in')

playwright.locator(selector)​

创建定位器并查询匹配的元素，例如

playwright.locator('.auth-form', { hasText: 'Log in' });

Locator ()
  - element: button
  - elements: [button]

playwright.selector(element)​

为给定元素生成选择器。例如，在“元素”面板中选择一个元素并传递$0

playwright.selector($0)

"div[id="glow-ingress-block"] >> text=/.*Hello.*/"

详细的 API 日志​

Playwright 使用DEBUG环境变量支持详细日志记录。

DEBUG=pw:api dotnet run
注意

对于 WebKit：在执行期间启动 WebKit 检查器将阻止 Playwright 脚本进一步执行，并将重置预配置的用户代理和设备模拟。

有头模式​

Playwright 默认以无头模式运行浏览器。要更改此行为，请使用headless: false作为启动选项。

您还可以使用SlowMo选项减慢执行速度（每个操作延迟 N 毫秒）并在调试时跟踪。

// Chromium, Firefox, or WebKit
await using var browser = await playwright.Chromium.LaunchAsync(new()
{
    Headless = false,
    SlowMo = 100
});