跳至主要内容

调试测试

VS Code 调试器​

我们推荐使用VS Code扩展进行调试以获得更好的开发者体验。通过VS Code扩展，您可以直接在VS Code中调试测试、查看错误信息、设置断点并逐步执行测试。

running test in debug mode

错误消息​

如果您的测试失败，VS Code 将在编辑器中直接显示错误消息，展示预期结果、实际接收结果以及完整的调用日志。

error messaging in vs code

实时调试​

您可以在VS Code中实时调试测试。在勾选Show Browser选项运行测试后，点击VS Code中的任何定位器，它将在浏览器窗口中被高亮显示。Playwright还会显示是否存在多个匹配项。

live debugging in VS Code

您还可以在VS Code中编辑定位器，Playwright会在浏览器窗口中实时显示您的更改。

live debugging in VS Code

选择定位器​

选择一个定位器并通过点击测试侧边栏中的选择定位器按钮将其复制到您的测试文件中。然后在浏览器中点击您需要的元素，它现在会显示在VS Code的选择定位器框中。按键盘上的"enter"键将定位器复制到剪贴板，然后粘贴到代码中的任何位置。如果想取消，请按"escape"键。

Pick locators

Playwright 会分析您的页面并确定最佳定位器，优先考虑角色、文本和测试ID定位器。如果Playwright发现多个元素匹配定位器，它将优化定位器以提高其稳定性并唯一标识目标元素，因此您无需担心因定位器问题导致测试失败。

在调试模式下运行​

要设置断点，请在您希望断点出现的行号旁边点击，直到出现红点。通过右键点击您想要运行的测试旁边的行，以调试模式运行测试。

setting debug test mode

浏览器窗口将打开，测试将在设置的断点处运行并暂停。您可以通过VS Code菜单逐步执行测试、暂停测试以及重新运行测试。

running test in debug mode

在不同浏览器中调试​

默认情况下，调试是使用Chromium配置文件进行的。您可以通过右键点击测试侧边栏中的调试图标，并从下拉菜单中选择"选择默认配置文件"选项，来在不同浏览器上调试您的测试。

debugging on specific profile

然后选择您想要用于调试测试的测试配置文件。每次在调试模式下运行测试时，都将使用您选择的配置文件。您可以通过右键单击测试所在的行号并从菜单中选择"Debug Test"来在调试模式下运行测试。

choosing a profile for debugging

要了解更多关于调试的信息，请参阅Debugging in Visual Studio Code。

Playwright Inspector​

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

Playwright Inspector

在调试模式下运行​

使用--debug标志运行测试以打开检查器。这将配置Playwright进行调试并打开检查器。当使用--debug时，会配置一些额外的有用默认值：

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

在所有浏览器上调试所有测试​

要调试所有测试，请使用--debug标志运行测试命令。这将逐个运行测试，并为每个测试打开检查器和浏览器窗口。

npx playwright test --debug

在所有浏览器上调试一个测试​

要在特定行调试单个测试，请运行测试命令，后跟测试文件名和要调试的测试所在行号，再加上--debug标志。这将在playwright.config中配置的每个浏览器中运行单个测试并打开检查器。

npx playwright test example.spec.ts:10 --debug

在特定浏览器上调试​

在Playwright中，您可以在playwright.config中配置项目。配置完成后，您可以使用--project标志后跟playwright.config中配置的项目名称，在特定浏览器或移动视口上调试测试。

npx playwright test --project=chromium --debug
npx playwright test --project="Mobile Safari" --debug
npx playwright test --project="Microsoft Edge" --debug

在特定浏览器上调试单个测试​

要在特定浏览器上运行单个测试，请添加测试文件名以及您想要调试的测试行号，同时加上--project标志并跟随项目名称。

npx playwright test example.spec.ts:10 --project=webkit --debug

逐步执行您的测试​

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

Playwright Inspector and browser

从特定断点运行测试​

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

await page.pause();

一旦添加了page.pause()调用，请在调试模式下运行测试。点击检查器中的"Resume"按钮将运行测试，并仅在遇到page.pause()时暂停。

test with page.pause

实时编辑定位器​

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

live editing locators

选择定位器​

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

Picking locators

Playwright 会分析您的页面并确定最佳定位器，优先考虑角色、文本和测试ID定位器。如果Playwright发现多个元素匹配定位器，它将优化定位器以提高其稳定性并唯一标识目标元素，因此您无需担心因定位器问题导致测试失败。

可操作性日志​

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

Actionability Logs

追踪查看器​

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

要了解更多关于如何记录追踪记录和使用追踪查看器的信息，请查看Trace Viewer指南。

浏览器开发者工具​

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

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

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

Browser Developer Tools with Playwright object

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

await page.pause();

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

PWDEBUG=console npx playwright test

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

playwright.$(selector)​

查询Playwright选择器，使用实际的Playwright查询引擎，例如：

playwright.$('.auth-form >> text=Log in');

<button>Log in</button>

playwright.$$(选择器)​

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

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

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

playwright.inspect(selector)​

在元素面板中显示元素。

playwright.inspect('text=Log in')

playwright.locator(选择器)​

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

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

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

playwright.selector(元素)​

为给定元素生成选择器。例如，在元素面板中选择一个元素并传递$0：

playwright.selector($0)

"div[id="glow-ingress-block"] >> text=/.*Hello.*/"

详细API日志​

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

DEBUG=pw:api npx playwright test
note

对于WebKit：在执行过程中启动WebKit检查器将阻止Playwright脚本继续执行，并会重置预先配置的用户代理和设备模拟。

有界面模式​

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

您还可以使用slowMo选项来减慢执行速度（每次操作延迟N毫秒），以便在调试时跟随操作。

// Chromium, Firefox, or WebKit
await chromium.launch({ headless: false, slowMo: 100 });