跟踪查看器
简介
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 运行中下载文件。
playwright 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
记录跟踪
可以通过使用 --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")
跟踪查看器功能
操作
在“操作”选项卡中，你可以查看每个操作使用的定位器以及每个操作运行所需的时间。将鼠标悬停在测试的每个操作上，可以直观地看到 DOM 快照中的变化。你可以前后回溯时间，点击某个操作进行检查和调试。使用“之前”和“之后”选项卡可以直观地查看操作发生前后的情况。
选择每个操作会显示
- 操作快照
- 操作日志
- 源代码位置
屏幕截图
当开启屏幕截图选项 (默认) 进行跟踪时，每个跟踪都会记录一段屏幕录像并将其渲染为胶片条。你可以将鼠标悬停在胶片条上，查看每个操作和状态的放大图像，这有助于你轻松找到想要检查的操作。
双击某个操作以查看该操作的时间范围。你可以使用时间轴中的滑块增加选定的操作，这些操作将显示在“操作”选项卡中，并且所有控制台日志和网络日志都将只显示选定操作的日志。
快照
当开启快照选项 (默认) 进行跟踪时，Playwright 会捕获每个操作的一组完整的 DOM 快照。根据操作类型，它会捕获
| 类型 | 描述 |
|---|---|
| 之前 | 调用操作时的快照。 |
| 操作 | 执行输入操作时的快照。当查看 Playwright 具体点击位置时，这种类型的快照特别有用。 |
| 之后 | 操作完成后的快照。 |
典型的操作快照如下所示
注意它是如何同时高亮显示 DOM 节点和精确的点击位置的。
源代码
当你点击侧边栏中的某个操作时，源代码面板中会高亮显示该操作的代码行。
调用
“调用”选项卡显示有关操作的信息，例如所花费的时间、使用的定位器、是否处于严格模式以及使用了哪个键。
日志
查看测试的完整日志，以便更好地了解 Playwright 在幕后所做的工作，例如滚动到视图中、等待元素可见、启用和稳定，以及执行点击、填写、按下等操作。
错误
如果你的测试失败，你将在“错误”选项卡中看到每个测试的错误消息。时间轴上也会显示一条红线，高亮显示错误发生的位置。你还可以点击“源代码”选项卡，查看错误在源代码中的哪一行。
控制台
查看来自浏览器和测试的控制台日志。显示不同的图标来表明控制台日志是来自浏览器还是测试文件。
双击操作侧边栏中测试的某个操作。这将过滤控制台，仅显示在该操作期间生成的日志。点击“显示全部”按钮再次查看所有控制台日志。
使用时间轴通过点击开始点并拖动到结束点来过滤操作。控制台选项卡也将被过滤，仅显示在选定操作期间生成的日志。
网络
“网络”选项卡显示测试期间发出的所有网络请求。你可以按不同类型的请求、状态码、方法、请求、内容类型、持续时间和大小进行排序。点击某个请求可以查看更多信息，例如请求头、响应头、请求体和响应体。
双击操作侧边栏中测试的某个操作。这将过滤网络请求，仅显示在该操作期间发出的请求。点击“显示全部”按钮再次查看所有网络请求。
使用时间轴通过点击开始点并拖动到结束点来过滤操作。网络选项卡也将被过滤，仅显示在选定操作期间发出的网络请求。
元数据
在“操作”选项卡旁边是“元数据”选项卡，它会显示有关测试的更多信息，例如浏览器、视口大小、测试持续时间等。