跳到主要内容

调试测试

Playwright Inspector​

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

Playwright Inspector

在调试模式下运行​

设置 PWDEBUG 环境变量可在调试模式下运行 Playwright 测试。这会配置 Playwright 进行调试并打开 Inspector。设置 PWDEBUG=1 时还会配置额外的有用默认值：

  • 浏览器以可视模式启动
  • 默认超时设置为 0（= 无超时）
PWDEBUG=1 pytest -s

逐步执行测试​

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

Playwright Inspector and browser

从特定断点运行测试​

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

page.pause()

添加 page.pause() 调用后，在调试模式下运行测试。点击 Inspector 中的“恢复”按钮将运行测试并仅在 page.pause() 处停止。

test with page.pause

实时编辑定位符​

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

live editing locators

选择定位符​

调试时，您可能需要选择一个更健壮的定位符。您可以通过点击选择定位符按钮并悬停在浏览器窗口中的任何元素上来实现。悬停在元素上时，您将在下方看到高亮显示的用于定位该元素的代码。点击浏览器中的一个元素会将该定位符添加到字段中，然后您可以对其进行调整或将其复制到您的代码中。

Picking locators

Playwright 将查看您的页面并找出最佳定位符，优先使用role、text 和 test 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 运行测试。

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)​

在 Elements 面板中显示元素。

playwright.inspect('text=Log in')

playwright.locator(selector)​

创建定位符并查询匹配的元素，例如：

playwright.locator('.auth-form', { hasText: 'Log in' });

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

playwright.selector(element)​

为给定元素生成选择器。例如，在 Elements 面板中选择一个元素并传入 $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)