追踪查看器
介绍
Playwright 追踪查看器是一个图形界面工具,帮助您在脚本运行后查看记录的 Playwright 追踪。追踪是调试失败的测试的绝佳方式,特别是在 CI 环境中。您可以在本地或通过浏览器访问 trace.playwright.dev 打开追踪。
追踪查看器功能
操作
在 “操作” 标签页中,您可以看到每个操作使用了什么定位器,以及每个操作的执行时间。将鼠标悬停在测试中的每个操作上,您可以直观地看到 DOM 快照中的变化。您可以在时间线上前后移动,点击一个操作来检查和调试。使用 “前” 与 “后” 标签来直观地查看操作前后的变化。

选择每个操作时,显示以下内容:
-
操作快照
-
操作日志
-
源代码位置
截图
当启用截图选项(默认开启)进行追踪时,每个追踪都会记录一段屏幕录制,并将其呈现为一条电影胶片条。您可以将鼠标悬停在胶片条上,查看每个操作的放大图像,这有助于您轻松找到要检查的操作。
双击操作以查看该操作的时间范围。您可以使用时间轴上的滑块来选择多个操作,这些操作会显示在 “操作” 标签页中,并且所有的控制台日志和网络日志会被过滤,只显示这些操作的日志。

快照
启用快照选项(默认开启)进行追踪时,Playwright 会为每个操作捕获一组完整的 DOM 快照。根据操作类型,它会捕获以下快照:
类型 | 描述 |
---|---|
Before |
操作被调用时的快照。 |
Action |
这是在执行输入操作时的快照。当探索 Playwright 点击的位置时,这种类型的快照特别有用。 |
After |
操作后的快照 |
下面是典型的 Action 快照:

注意它是如何高亮显示 DOM 节点以及精确的点击位置的。
控制台
查看来自浏览器和测试的控制台日志。不同的图标显示控制台日志来源,帮助您区分是来自浏览器还是测试文件。

双击测试中的操作,控制台将仅显示在该操作期间记录的日志。点击 “显示所有” 按钮,可以重新查看所有控制台日志。
使用时间轴筛选操作,通过点击起点并拖动至终点。控制台标签也会过滤,只显示所选操作期间的日志。
在本地录制追踪
要在开发模式下录制追踪,可以在运行测试时设置 --trace
标志为 on
。您还可以使用 UI 模式获得更好的开发者体验。
npx playwright test --trace on
bash
然后,您可以打开 HTML 报告,点击追踪图标打开追踪。
npx playwright show-report
bash
在 CI 上录制追踪
在 CI 上,应该在测试失败的第一次重试时录制追踪,方法是在测试配置文件中设置 trace: 'on-first-retry'
选项。这样每次重试的测试都会生成一个 trace.zip
文件。
import { defineConfig } from '@playwright/test'; export default defineConfig({ retries: 1, use: { trace: 'on-first-retry', }, });
typescript
const browser = await chromium.launch();
const context = await browser.newContext();
// Start tracing before creating / navigating a page.
await context.tracing.start({ screenshots: true, snapshots: true });
const page = await context.newPage();
await page.goto('https://playwright.dev');
// Stop tracing and export it into a zip archive.
await context.tracing.stop({ path: 'trace.zip' });
javascript
可用的录制追踪选项:
-
'on-first-retry'
- 仅在测试第一次重试时录制追踪。 -
'on-all-retries'
- 为所有测试重试录制追踪。 -
'off'
- 不录制追踪。 -
'on'
- 为每个测试录制追踪(不推荐,因为它会影响性能)。 -
'retain-on-failure'
- 为每个测试录制追踪,但仅保留失败的测试的追踪。
如果没有启用重试,但仍然希望记录失败测试的追踪,可以使用 trace: 'retain-on-failure'
。
还有更精细的选项可用,请参见 testOptions.trace
。
如果您没有使用 Playwright 作为测试运行器,请改用 browserContext.tracing
API。
打开追踪
您可以通过 Playwright CLI 或在浏览器上通过 trace.playwright.dev 打开保存的追踪。确保提供追踪文件的完整路径。
npx playwright show-trace path/to/trace.zip
bash
查看远程追踪
您可以使用其 URL 打开远程追踪。远程追踪可以通过 CI 生成,这使得您无需手动下载文件即可查看远程追踪。
npx playwright show-trace https://example.com/trace.zip
bash
您还可以通过传递上传的追踪文件的 URL(例如在 CI 中)作为参数来访问。CORS(跨源资源共享)规则可能适用。
https://trace.playwright.dev/?trace=https://demo.playwright.dev/reports/todomvc/data/cb0fa77ebd9487a5c899f3ae65a7ffdbac681182.zip
bash