跟踪查看器

介绍

Playwright 跟踪查看器是一个 GUI 工具，可帮助您在脚本运行后探索录制的 Playwright 跟踪。跟踪是调试测试（尤其是测试在 CI 上失败时）的好方法。您可以在 本地 或浏览器中的 trace.playwright.dev 上打开跟踪。

跟踪查看器功能

操作

在“操作”选项卡中，您可以查看每个操作使用了什么定位器以及每个操作的运行时间。将鼠标悬停在测试的每个操作上，直观地查看 DOM 快照的变化。在时间轴上前后移动，并单击操作以进行检查和调试。使用“之前”和“之后”选项卡直观地查看操作之前和之后发生了什么。

选择每个操作将显示

• 操作快照
• 操作日志
• 源代码位置

截图

在使用 setScreenshots 选项（默认情况下）进行跟踪时，每个跟踪都会记录屏幕截图并将其渲染为胶片条。您可以将鼠标悬停在胶片条上以查看每个操作和状态的放大图像，这有助于您轻松找到要检查的操作。

双击操作以查看该操作的时间范围。您可以使用时间轴上的滑块来增加所选操作，这些操作将显示在“操作”选项卡中，所有控制台日志和网络日志将被过滤以仅显示所选操作的日志。

快照

在使用 setSnapshots 选项（默认情况下）进行跟踪时，Playwright 会为每个操作捕获一组完整的 DOM 快照。根据操作的类型，它将捕获

类型	描述
之前	在调用操作时的一个快照。
操作	在执行输入时的一个快照。这种类型的快照在探索 Playwright 到底在哪里单击时特别有用。
之后	操作后的一个快照。

以下是典型的“操作”快照的样子

注意，它同时突出显示了 DOM 节点和确切的单击位置。

源代码

单击侧边栏中的操作时，该操作的代码行将在源代码面板中突出显示。

调用

“调用”选项卡显示有关操作的信息，例如它花费的时间、使用了什么定位器、是否处于严格模式以及使用了什么键。

日志

查看测试的完整日志，以更好地了解 Playwright 在幕后做了什么，例如滚动到视图中、等待元素可见、启用并稳定，以及执行单击、填充、按压等操作。

错误

如果测试失败，您将在“错误”选项卡中看到每个测试的错误消息。时间轴也将显示一条红线，突出显示错误发生的位置。您还可以单击“源代码”选项卡以查看错误发生在源代码的哪一行。

控制台

查看来自浏览器以及测试的控制台日志。不同的图标显示控制台日志来自浏览器还是测试文件。

双击操作侧边栏中的测试操作。这将过滤控制台以仅显示在该操作期间生成的日志。单击“显示所有”按钮以再次查看所有控制台日志。

使用时间轴来过滤操作，方法是单击一个起点并拖动到一个终点。控制台选项卡也将被过滤以仅显示在所选操作期间生成的日志。

网络

“网络”选项卡显示您在测试期间发出的所有网络请求。您可以按不同类型的请求、状态代码、方法、请求、内容类型、持续时间和大小进行排序。单击请求以查看有关它的更多信息，例如请求标头、响应标头、请求主体和响应主体。

双击操作侧边栏中的测试操作。这将过滤网络请求以仅显示在该操作期间发出的请求。单击“显示所有”按钮以再次查看所有网络请求。

使用时间轴来过滤操作，方法是单击一个起点并拖动到一个终点。“网络”选项卡也将被过滤以仅显示在所选操作期间发出的网络请求。

元数据

在“操作”选项卡旁边，您将找到“元数据”选项卡，其中将显示有关测试的更多信息，例如浏览器、视窗大小、测试持续时间等。

录制跟踪

可以使用 BrowserContext.tracing() API 录制跟踪，如下所示

Browser browser = browserType.launch();
BrowserContext context = browser.newContext();

// Start tracing before creating / navigating a page.
context.tracing().start(new Tracing.StartOptions()
  .setScreenshots(true)
  .setSnapshots(true)
  .setSources(true));

Page page = context.newPage();
page.navigate("https://playwright.net.cn");

// Stop tracing and export it into a zip archive.
context.tracing().stop(new Tracing.StopOptions()
  .setPath(Paths.get("trace.zip")));

这将记录跟踪并将它放置到名为 trace.zip 的文件中。

打开跟踪

您可以使用 Playwright CLI 或在浏览器中的 trace.playwright.dev 上打开保存的跟踪。请确保添加 trace.zip 文件所在的完整路径。

mvn exec:java -e -D exec.mainClass=com.microsoft.playwright.CLI -D exec.args="show-trace trace.zip"

使用 trace.playwright.dev

trace.playwright.dev 是跟踪查看器的静态托管变体。您可以使用拖放上传跟踪文件。

查看远程跟踪

您可以使用其 URL 打开远程跟踪。它们可以在 CI 运行中生成，这使得在无需手动下载文件的情况下查看远程跟踪变得很容易。

mvn exec:java -e -D exec.mainClass=com.microsoft.playwright.CLI -D exec.args="show-trace https://example.com/trace.zip"

您还可以将上传的跟踪的 URL（例如在您的 CI 中）从一些可访问的存储作为参数传递。可能会应用 CORS（跨源资源共享）规则。

https://trace.playwright.dev/?trace=https://demo.playwright.dev/reports/todomvc/data/cb0fa77ebd9487a5c899f3ae65a7ffdbac681182.zip