轨迹查看器

简介

Playwright 轨迹查看器是一个 GUI 工具，可帮助您在脚本运行后探索记录的 Playwright 轨迹。轨迹是在测试在 CI 上失败时调试测试的绝佳方法。您可以本地打开轨迹，也可以在浏览器中打开 trace.playwright.dev 上的轨迹。

轨迹查看器功能

操作

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

选择每个操作将显示

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

截图

当使用启用的 截图 选项（默认）进行跟踪时，每个轨迹都会记录屏幕录像并将其呈现为胶片卷轴。您可以将鼠标悬停在胶片卷轴上以查看每个操作和状态的放大图像，这将帮助您轻松找到要检查的操作。

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

快照

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

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

以下是典型的操作快照的外观

请注意它如何突出显示 DOM 节点以及精确的点击位置。

源

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

调用

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

日志

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

错误

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

控制台

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

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

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

网络

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

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

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

元数据

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

记录轨迹

可以通过使用 --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")

异步

browser = await chromium.launch()
context = await browser.new_context()

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

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

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

打开轨迹

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

playwright show-trace trace.zip

使用 trace.playwright.dev

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

查看远程轨迹

您可以使用远程轨迹的 URL 打开它。它们可以在 CI 运行时生成，这使得查看远程轨迹变得容易，而无需手动下载文件。

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

您还可以将上传的轨迹的 URL（例如在您的 CI 中）从某个可访问的存储作为参数传递。CORS（跨域资源共享）规则可能适用。

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