调试测试

Playwright Inspector

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

在调试模式下运行

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

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

配置源代码位置

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

Bash

# 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

PowerShell

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

批处理

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

逐步执行您的测试

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

从特定断点运行测试

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

page.pause();

添加 page.pause() 调用后，以调试模式运行测试。单击 Inspector 中的“Resume”按钮将运行测试，并且只在 page.pause() 处停止。

实时编辑定位器

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

选择定位器

在调试期间，您可能需要选择一个更可靠的定位器。 您可以通过单击“拾取定位器”按钮并在浏览器窗口中的任何元素上悬停来实现此目的。 悬停在元素上时，您将看到定位此元素所需的代码在下方高亮显示。 单击浏览器中的元素会将定位器添加到字段中，然后您可以对其进行调整或将其复制到代码中。

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

可操作性日志

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

跟踪查看器

Playwright 跟踪查看器 (Trace Viewer) 是一个 GUI 工具，它允许您浏览记录的 Playwright 测试跟踪。您可以左右浏览左侧的每个操作，并直观地看到操作期间发生了什么。在屏幕中央，您可以看到该操作的 DOM 快照。在右侧，您可以看到操作的详细信息，如时间、参数、返回值和日志。您还可以探索控制台消息、网络请求和源代码。

要了解有关如何记录跟踪和使用跟踪查看器的更多信息，请参阅 跟踪查看器指南。

浏览器开发者工具

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

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

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

page.pause();

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

Bash

# 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

PowerShell

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

批处理

# Source directories in the list are separated by : on macos and linux and by ; on win.
set PLAYWRIGHT_JAVA_SRC=<java source dirs>
set PWDEBUG=console
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 环境变量进行详细日志记录。

Bash

DEBUG=pw:api mvn test

PowerShell

$env:DEBUG="pw:api"
mvn test

批处理

set 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));