跳到主要内容

调试测试

Playwright 调试器​

Playwright 调试器是一款图形用户界面（GUI）工具，可帮助你调试 Playwright 测试。它允许你逐步执行测试、实时编辑定位器、选择定位器并查看可操作性日志。

Playwright 调试器

以调试模式运行​

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

  • 浏览器以有头模式启动
  • 默认超时时间设置为 0（即无超时）

配置源文件位置​

要告知 Playwright 到何处查找正在调试的源代码，请通过 PLAYWRIGHT_JAVA_SRC 环境变量传入源目录列表。在 macOS 和 Linux 上，列表中的路径应以 : 分隔，在 Windows 上则以 ; 分隔。


# 在 macOS 和 Linux 上，列表中的源目录以 : 分隔，在 Windows 上以 ; 分隔。
PWDEBUG=1 PLAYWRIGHT_JAVA_SRC=<java 源目录> mvn test

逐步执行测试​

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

Playwright 检查器和浏览器

从特定断点运行测试​

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

page.pause();

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

使用 page.pause 的测试

实时编辑定位器​

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

实时编辑定位器

选择定位器​

在调试时，你可能需要选择一个更可靠的定位器。你可以通过点击 选择定位器 按钮，然后将鼠标悬停在浏览器窗口中的任何元素上来实现。当鼠标悬停在某个元素上时，你会看到定位该元素所需的代码在下方突出显示。在浏览器中点击某个元素，会将定位器添加到相应字段中，然后你可以对其进行调整，或将其复制到代码中。

选择定位器

Playwright 会分析你的页面并找出最佳定位器，优先使用 角色、文本和测试 ID 定位器。如果 Playwright 找到多个与定位器匹配的元素，它会优化该定位器，使其更可靠并能唯一标识目标元素，这样你就无需担心因定位器问题导致测试失败。

可操作性日志​

当 Playwright 在点击操作处暂停时，它已经执行了 可操作性检查，这些检查信息可在日志中找到。这有助于你了解测试过程中发生了什么，以及 Playwright 做了什么或试图做什么。日志会告诉你元素是否可见、启用且稳定，定位器是否解析到某个元素，是否滚动到可见区域等等。如果无法达到可操作性，它会将该操作显示为挂起状态。

可操作性日志

追踪查看器​

Playwright 追踪查看器 是一款图形用户界面（GUI）工具，可用于浏览测试中记录的 Playwright 追踪信息。在左侧，你可以前后浏览每个操作，并直观地看到操作过程中发生的情况。在屏幕中间，可以看到该操作的 DOM 快照。在右侧，可以看到操作详细信息，如时间、参数、返回值和日志。你还可以浏览控制台消息、网络请求和源代码。

若要详细了解如何记录追踪信息以及使用追踪查看器，请查阅 追踪查看器 指南。

浏览器开发者工具​

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

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

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

带有 Playwright 对象的浏览器开发者工具

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

page.pause();

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


# 在 macOS 和 Linux 上，列表中的源目录用 : 分隔，在 Windows 上用 ; 分隔。
PWDEBUG=console PLAYWRIGHT_JAVA_SRC=<java 源目录> 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 ()
  - 元素: button
  - 元素列表: [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 检查器将阻止 Playwright 脚本进一步执行，并将重置预先配置的用户代理和设备模拟。

有头模式​

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

你还可以使用 setSlowMo 选项来减慢执行速度（每次操作减慢 N 毫秒），以便在调试时跟踪执行过程。

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