跳至主要内容

调试测试

Playwright Inspector

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

Playwright Inspector

以调试模式运行

设置 PWDEBUG 环境变量以在调试模式下运行 Playwright 测试。这将配置 Playwright 以进行调试并打开 Inspector。设置 PWDEBUG=1 时,会配置其他有用的默认设置

  • 浏览器以有头模式启动
  • 默认超时设置为 0(= 无超时)

配置源代码位置

要告诉 Playwright 在哪里查找您正在调试的源代码,请通过 PLAYWRIGHT_JAVA_SRC 环境变量传递源代码目录列表。列表中的路径应在 macOS 和 Linux 上用 : 分隔,在 Windows 上用 ; 分隔。

# Source directories in the list are separated by : on macos and linux and by ; on win.
PWDEBUG=1 PLAYWRIGHT_JAVA_SRC=<java source dirs> mvn test

逐步执行测试

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

Playwright Inspector and browser

从特定断点运行测试

为了加快调试过程,您可以在测试中添加 Page.pause() 方法。这样,您无需逐步执行测试的每个操作来达到您要调试的位置。

page.pause();

添加 page.pause() 调用后,在调试模式下运行测试。单击 Inspector 中的“恢复”按钮将运行测试,并且只会在 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.pause() 方法在测试中设置断点以暂停执行。

page.pause();

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

# Source directories in the list are separated by : on macos and linux and by ; on win.
PWDEBUG=console PLAYWRIGHT_JAVA_SRC=<java source dirs> mvn 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 mvn test
注意

对于 WebKit:在执行期间启动 WebKit Inspector 会阻止 Playwright 脚本进一步执行,并会重置预配置的用户代理和设备模拟。

有头模式

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

您还可以使用 setSlowMo 选项来减慢执行速度(每个操作 N 毫秒),并在调试时进行跟踪。

// Chromium, Firefox, or WebKit
chromium.launch(new BrowserType.LaunchOptions()
.setHeadless(false)
.setSlowMo(100));