跳到主要内容

调试测试

Playwright 检查器

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

Playwright 检查器

以调试模式运行

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

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

逐步执行测试

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

Playwright 检查器和浏览器

从特定断点运行测试

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

page.pause()

一旦添加了 page.pause() 调用,请在调试模式下运行您的测试。点击检查器中的“继续”按钮将运行测试,并且只会在 page.pause() 处停止。

带有 page.pause 的测试

实时编辑定位器

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

实时编辑定位器

选择定位器

调试期间,您可能需要选择一个更具弹性的定位器。您可以点击“选择定位器”按钮,然后悬停在浏览器窗口中的任何元素上来完成此操作。悬停在元素上时,下方会突出显示定位此元素所需的代码。点击浏览器中的元素会将定位器添加到字段中,然后您可以对其进行调整或复制到代码中。

选择定位器

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

可操作性日志

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

可操作性日志

痕迹查看器

Playwright 痕迹查看器 是一个 GUI 工具,让您能够探索录制的测试轨迹。您可以通过左侧的每个操作向后和向前浏览,直观地看到操作期间发生的事情。在屏幕中间,您可以看到该操作的 DOM 快照。在右侧,您可以查看操作详细信息,如时间、参数、返回值和日志。您还可以探索控制台消息、网络请求和源代码。

要了解更多关于如何录制轨迹和使用轨迹查看器的信息,请查阅轨迹查看器指南。

浏览器开发者工具

当以调试模式运行时与 PWDEBUG=console,开发者工具控制台中将提供一个 playwright 对象。开发者工具可以帮助您:

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

这还将把 Playwright 的默认超时设置为 0(= 无超时)。

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

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

page.pause()

一旦在测试中设置了断点,就可以使用 PWDEBUG=console 运行测试。

PWDEBUG=console pytest -s

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

playwright.$(selector)

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

playwright.$('.auth-form >> text=登录');

<button>登录</button>

playwright.$$(selector)

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

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

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

playwright.inspect(selector)

在 Elements 面板中显示元素。

playwright.inspect('text=登录')

playwright.locator(selector)

创建一个定位器并查询匹配的元素,例如:

playwright.locator('.auth-form', { hasText: '登录' });

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

playwright.selector(element)

为给定元素生成选择器。例如,选择 Elements 面板中的一个元素并传递 $0

playwright.selector($0)

"div[id=\"glow-ingress-block\"] >> text=/.*你好.*/"

详细的 API 日志

Playwright 支持通过 DEBUG 环境变量进行详细日志记录。

DEBUG=pw:api pytest -s
备注

对于 WebKit: 在执行期间启动 WebKit 检查器会阻止 Playwright 脚本执行任何进一步的操作,并会重置预配置的用户代理和设备仿真。

有头模式

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

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

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