追踪查看器
简介
Playwright 追踪查看器是一个 GUI 工具，它帮助你在脚本运行后探索记录的 Playwright 追踪数据。当测试在 CI 上失败时，追踪是调试测试的好方法。你可以在本地打开追踪数据，或者在浏览器中的 trace.playwright.dev 打开。
打开追踪查看器
你可以使用 Playwright CLI 或者在浏览器中访问 trace.playwright.dev 来打开保存的追踪数据。请确保添加你的 trace.zip 文件所在位置的完整路径。
playwright show-trace trace.zip
使用 trace.playwright.dev
trace.playwright.dev 是追踪查看器的一个静态托管版本。你可以通过拖放或点击 选择文件 按钮上传追踪文件。
追踪查看器会在你的浏览器中完全加载追踪数据，而不会将任何数据传输到外部。
查看远程追踪数据
你可以直接使用其 URL 打开远程追踪数据。这使得无需手动从 CI 运行中下载文件即可查看远程追踪变得简单。
``bash playwright show-trace https://example.com/trace.zip
当使用 [trace.playwright.dev](https://trace.playwright.dev) 时，你也可以将上传的追踪在某个可访问存储中的 URL（例如在你的 CI 内）作为查询参数传递。可能会应用 CORS（跨域资源共享）规则。
``txt
https://trace.playwright.dev/?trace=https://demo.playwright.dev/reports/todomvc/data/fa874b0d59cdedec675521c21124e93161d66533.zip
记录追踪数据
可以通过使用 --tracing 标志运行测试来记录追踪数据。
pytest --tracing on
追踪选项有：
on: 为每个测试记录追踪数据off: 不记录追踪数据（默认）retain-on-failure: 为每个测试记录追踪数据，但删除所有成功测试运行的追踪数据。
这将会记录追踪数据并将其放入名为 trace.zip 的文件中，并存放在你的 test-results 目录中。
如果你不使用 Pytest，请点击此处学习如何记录追踪数据。
- 同步
- 异步
browser = chromium.launch()
context = browser.new_context()
# 在创建/导航页面之前开始追踪。
context.tracing.start(screenshots=True, snapshots=True, sources=True)
page = context.new_page()
page.goto("https://playwright.dev")
# 停止追踪并导出为 zip 归档文件。
context.tracing.stop(path = "trace.zip")
browser = await chromium.launch()
context = await browser.new_context()
# 在创建/导航页面之前开始追踪。
await context.tracing.start(screenshots=True, snapshots=True, sources=True)
page = await context.new_page()
await page.goto("https://playwright.dev")
# 停止追踪并导出为 zip 归档文件。
await context.tracing.stop(path = "trace.zip")
追踪查看器功能
动作
在动作标签页中，你可以看到每个动作使用的定位器以及每个动作执行所花费的时间。将鼠标悬停在测试的每个动作上，可以直观地看到 DOM 快照的变化。可以在时间轴上前后移动并点击一个动作来检查和调试。使用“之前”和“之后”标签页，可以直观地看到动作前后的变化。
选择每个动作会显示：
- 动作快照
- 动作日志
- 源代码位置
截图
当启用 截图 选项进行追踪时（默认），每个追踪都会记录一个屏幕录制视频，并将其渲染为胶片条带。你可以将鼠标悬停在胶片条带上以查看每个动作和状态的放大图像，这有助于你轻松找到想要检查的动作。
双击动作栏中的一个动作可以看到该动作的时间范围。你可以使用时间轴中的滑块增加选中的动作，这些动作将在动作标签页中显示，所有控制台日志和网络日志也将仅显示所选动作的日志。
快照
当启用 快照 选项进行追踪时（默认），Playwright 会为每个动作捕获一组完整的 DOM 快照。根据动作类型不同，它会捕获：
| 类型 | 描述 |
|---|---|
| 之前 | 调用动作时的快照。 |
| 动作 | 执行输入时刻的快照。这种快照对于探索 Playwright 点击的确切位置特别有用。 |
| 之后 | 动作后的快照。 |
以下是典型的动作快照示例：
注意它是如何突出显示 DOM 节点以及确切的点击位置的。
源代码
当你在侧边栏中点击一个动作时，源代码面板会高亮显示该动作的代码行。
调用
调用标签页会显示有关动作的信息，如执行时间、使用的定位器、是否处于严格模式以及使用的键。
日志
查看测试的完整日志，以便更好地了解 Playwright 在幕后所做的操作，例如滚动到可见区域、等待元素变为可见、可用和稳定，以及执行点击、填写、按下等动作。
错误
如果测试失败，你将在错误标签页中看到每个测试的错误信息。时间轴还会显示一条红线，突出显示错误发生的位置。你也可以点击源代码标签页，查看错误发生在源代码的哪一行。
控制台
查看来自浏览器以及你的测试的控制台日志。不同的图标会显示控制台日志是来自浏览器还是测试文件。
在动作侧边栏中双击你的测试中的一个动作。这将过滤控制台，仅显示该动作期间生成的日志。点击 显示全部 按钮可以再次查看所有控制台日志。
使用时间轴过滤动作，点击一个起点并拖动到终点。控制台标签页也会被过滤，仅显示所选动作期间生成的日志。
网络
网络标签页会显示测试期间发出的所有网络请求。你可以按不同类型的请求、状态码、方法、请求内容、内容类型、持续时间和大小进行排序。点击一个请求可以查看更多相关信息，如请求头、响应头、请求体和响应体。
在动作侧边栏中双击你的测试中的一个动作。这将过滤网络请求，仅显示该动作期间发出的请求。点击 显示全部 按钮可以再次查看所有网络请求。
使用时间轴过滤动作，点击一个起点并拖动到终点。网络标签页也会被过滤，仅显示所选动作期间发出的网络请求。
元数据
在动作标签页旁边，你会找到元数据标签页，它会为你提供有关测试的更多信息，如浏览器、视口大小、测试持续时间等等。