跳转到主要内容

调试测试

Playwright Inspector

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

Playwright Inspector

在调试模式下运行

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

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

逐步执行您的测试

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

Playwright Inspector and browser

从特定断点运行测试

为了加快调试过程,您可以向测试中添加一个 page.pause() 方法。 这样您就不必逐步执行测试的每个操作即可到达想要调试的点。

page.pause()

添加 page.pause() 调用后,以调试模式运行测试。单击 Inspector 中的“Resume”按钮将运行测试,并且只在 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 读取日志
  • 检查网络活动和其他开发者工具功能
Browser Developer Tools with Playwright object

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

page.pause()

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

PWDEBUG=console pytest -s

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 pytest -s
注意

对于 WebKit:在执行期间启动 WebKit Inspector 将阻止 Playwright 脚本继续执行,并重置预配置的用户代理和设备仿真。

有头模式

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

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

# Chromium, Firefox, or WebKit
chromium.launch(headless=False, slow_mo=100)