Trace Viewer
Playwright Trace Viewer 是一个 GUI 工具，可帮助您在脚本运行后探索记录的 Playwright trace。您可以在本地打开 trace，也可以在浏览器中访问 trace.playwright.dev 打开。
查看 Trace
您可以使用 Playwright CLI 或在浏览器中访问 trace.playwright.dev 打开保存的 trace。
playwright show-trace trace.zip
操作
打开 trace 后，您将在左侧看到 Playwright 执行的操作列表：
选择每个操作会显示：
- 操作快照，
- 操作日志，
- 源代码位置，
- 此操作的网络日志
在属性窗格中，您还将看到与每个操作关联的渲染 DOM 快照。
元数据
查看元数据，例如执行操作的时间、使用的浏览器引擎、视口大小、是否为移动设备以及记录了多少页面、操作和事件。
截图
当开启 screenshots 选项进行 tracing 时，每个 trace 都会记录截屏并将其渲染为胶片条：
您可以将鼠标悬停在胶片条上，查看每个操作和状态的放大图像，这有助于您轻松找到要检查的操作。
快照
当开启 snapshots 选项进行 tracing 时，Playwright 会为每个操作捕获一组完整的 DOM 快照。根据操作的类型，它将捕获：
| 类型 | 描述 |
|---|---|
| Before | 调用操作时的快照。 |
| Action | 执行输入时的快照。这种类型的快照在探索 Playwright 确切点击位置时特别有用。 |
| After | 操作后的快照。 |
以下是典型 Action 快照的样子：
注意它是如何突出显示 DOM 节点以及确切的点击位置的。
调用
查看调用了什么操作、时间和持续时间以及参数、返回值和日志。
控制台
查看操作的控制台输出，您可以在其中看到控制台日志或错误。
网络
查看操作期间发出的任何网络请求。
源代码
查看整个测试的源代码。
在 CI 上记录 trace
应在持续集成中通过在测试配置文件中设置 trace: 'on-first-retry' 选项，在第一次重试失败的测试时运行 trace。这将为每个重试的测试生成一个 trace.zip 文件。
可用的记录 trace 选项：
'on-first-retry'- 仅在第一次重试测试时记录 trace。'off'- 不记录 trace。'on'- 为每个测试记录 trace。（不推荐，因为性能开销大）'retain-on-failure'- 为每个测试记录 trace，但从成功的测试运行中删除它。
如果您不启用重试但仍希望获取失败测试的 trace，也可以使用 trace: 'retain-on-failure'。
如果您不使用 Playwright 作为测试运行器，请改用 browser_context.tracing API。
记录 trace
可以使用 browser_context.tracing API 记录 trace，如下所示：
- Sync
- Async
browser = chromium.launch()
context = browser.new_context()
# 在创建/导航页面之前开始 tracing。
context.tracing.start(screenshots=True, snapshots=True, sources=True)
page.goto("https://playwright.dev")
# 停止 tracing 并将其导出到 zip 归档中。
context.tracing.stop(path = "trace.zip")
browser = await chromium.launch()
context = await browser.new_context()
# 在创建/导航页面之前开始 tracing。
await context.tracing.start(screenshots=True, snapshots=True, sources=True)
await page.goto("https://playwright.dev")
# 停止 tracing 并将其导出到 zip 归档中。
await context.tracing.stop(path = "trace.zip")
这将记录 trace 并将其放入名为 trace.zip 的文件中。
查看 trace
您可以使用 Playwright CLI 或在浏览器中访问 trace.playwright.dev 打开保存的 trace。
playwright show-trace trace.zip
使用 trace.playwright.dev
trace.playwright.dev 是 Trace Viewer 的静态托管变体。您可以使用拖放上传 trace 文件。
查看远程 trace
您可以使用其 URL 打开远程 trace。它们可以在 CI 运行中生成，这使得查看远程 trace 变得容易，而无需手动下载文件。
playwright show-trace https://example.com/trace.zip
您还可以将上传的 trace 的 URL（例如在您的 CI 中）从某个可访问的存储作为参数传递。CORS（跨源资源共享）规则可能适用。
https://trace.playwright.dev/?trace=https://demo.playwright.dev/reports/todomvc/data/cb0fa77ebd9487a5c899f3ae65a7ffdbac681182.zip