跳转到主要内容

Trace 查看器

简介

Playwright 追踪查看器是一个图形用户界面工具,可帮助你在脚本运行后探索记录的 Playwright 追踪。当测试在 CI 上失败时,追踪是调试测试的好方法。你可以在本地或在浏览器中通过 trace.playwright.dev 打开追踪。

打开追踪查看器

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

playwright show-trace trace.zip

使用 trace.playwright.dev

trace.playwright.dev 是追踪查看器的一个静态托管版本。您可以使用拖放或通过 选择文件 按钮上传追踪文件。

追踪查看器完全在您的浏览器中加载追踪,不会向外部传输任何数据。

Drop Playwright Trace to load

查看远程追踪

您可以直接使用其 URL 打开远程追踪。这使得查看远程追踪变得容易,例如,无需手动从 CI 运行中下载文件。

playwright show-trace https://example.com/trace.zip

使用 trace.playwright.dev 时,你还可以将已上传追踪的 URL(例如在你的 CI 内部的某个可访问存储)作为查询参数传递。CORS(跨域资源共享)规则可能适用。

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

记录追踪

可以通过运行带有 --tracing 标志的测试来记录追踪。

pytest --tracing on

追踪选项有:

  • on:为每个测试记录追踪
  • off:不记录追踪。(默认)
  • retain-on-failure:为每个测试记录追踪,但删除所有成功测试运行的追踪。

这将记录追踪并将其放置在 test-results 目录中名为 trace.zip 的文件中。

如果你不使用 Pytest,请点击此处了解如何记录追踪。
browser = chromium.launch()
context = browser.new_context()

# Start tracing before creating / navigating a page.
context.tracing.start(screenshots=True, snapshots=True, sources=True)

page = context.new_page()
page.goto("https://playwright.net.cn")

# Stop tracing and export it into a zip archive.
context.tracing.stop(path = "trace.zip")

追踪查看器功能

操作

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

actions tab in trace viewer

选择每个操作将显示

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

截图

当开启 screenshots 选项(默认)进行追踪时,每个追踪都会记录一个截屏并将其渲染为电影胶片。你可以将鼠标悬停在电影胶片上,查看每个操作和状态的放大图像,这有助于你轻松找到要检查的操作。

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

timeline view in trace viewer

快照

当开启 snapshots 选项(默认)进行追踪时,Playwright 会为每个操作捕获一组完整的 DOM 快照。根据操作的类型,它将捕获

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

这是典型的动作快照:

action tab in trace viewer

请注意,它同时突出显示了 DOM 节点和精确的点击位置。

源代码

当您点击侧边栏中的一个操作时,该操作的代码行会在源面板中高亮显示。

showing source code tab in trace viewer

调用

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

showing call tab in trace viewer

日志

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

showing log of tests in trace viewer

错误

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

showing errors in trace viewer

控制台

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

showing log of tests in trace viewer

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

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

网络

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

network requests tab in trace viewer

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

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

元数据

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

meta data in trace viewer