Trace Viewer

简介

Playwright Trace Viewer 是一个 GUI 工具，可帮助您在脚本运行后浏览记录的 Playwright 跟踪。跟踪是调试测试在 CI 上失败时的绝佳方式。您可以在本地或通过浏览器访问 trace.playwright.dev 打开跟踪。

打开 Trace Viewer

您可以使用 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 是 Trace Viewer 的一个静态托管变体。您可以使用拖放功能或通过“选择文件”按钮上传跟踪文件。

Trace Viewer 在您的浏览器中完全加载跟踪，并且不会将任何数据传输到外部。

查看远程跟踪

您可以直接使用 URL 打开远程跟踪。这使得无需手动从 CI 运行下载文件即可轻松查看远程跟踪，例如。

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

使用 trace.playwright.dev 时，您还可以将上传到某些可访问存储（例如您的 CI 内）的跟踪文件的 URL 作为查询参数传递。CORS（跨域资源共享）规则可能适用。

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

记录跟踪

可以使用 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 的文件中。

Trace Viewer 功能

操作

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

选择每个操作会显示

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

屏幕截图

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

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

快照

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

类型	描述
之前	调用操作时的快照。
操作	执行输入时的快照。这种类型的快照在探索 Playwright 究竟点击了哪里时特别有用。
之后	操作完成后的快照。

典型的操作快照如下所示

注意它是如何同时高亮显示 DOM 节点和精确的点击位置的。

源代码

当您点击侧边栏中的操作时，源代码面板中会高亮显示该操作对应的代码行。

调用

调用选项卡显示有关操作的信息，例如所花费的时间、使用了哪个定位符、是否处于严格模式以及使用了哪个键。

日志

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

错误

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

控制台

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

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

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

网络

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

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

使用时间轴通过点击起点并拖动到终点来过滤操作。网络选项卡也将被过滤，仅显示所选操作期间发出的网络请求。

元数据

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