Trace 是什么
Playwright Trace Viewer 记录一次测试执行的完整现场：按时间轴回放的页面快照（DOM）、网络请求、控制台输出与执行步骤。产物是一个 trace.zip；用 npx playwright show-trace <文件> 打开，不必拥有原环境即可查看。适合排查 CI 上失败或不稳定的用例：比录像信息全、比截图可交互。
基本信息
| 适用平台 | Playwright（Node.js/TypeScript、Python、Java、.NET 绑定） |
|---|---|
| 生成方式 | 配置 use.trace 策略、context.tracing.start/stop、CLI 参数 --trace |
| 查看命令 | npx playwright show-trace trace.zip |
| 策略取值 | off / on / retain-on-failure / on-first-retry / on-all-retries |
典型使用场景
- CI 失败用例排错：回放确认是等待、选择器还是网络问题
- 不稳定用例：on-first-retry 只记录重试现场，控制体积
- 团队共享现场：trace.zip 作为构件上传，他人直接打开
- 分析慢用例：按时间轴查看每步耗时与等待空白段
- 前后端联调：网络面板直接看请求与响应载荷
配置与查看
配置与查看
# playwright.config.ts
retries: 1,
use: {
trace: 'on-first-retry', # 首次重试时开始记录，兼顾体积与现场
}
# 手动控制（脚本中）
await context.tracing.start({ screenshots: true, snapshots: true });
await context.tracing.stop({ path: 'trace.zip' });
# 查看
npx playwright show-trace test-results/.../trace.ziptrace 策略对照
| 取值 | 行为 | 适用 |
|---|---|---|
| off | 不记录 | 本地稳定套件 |
| on | 每个用例都记录 | 调试期临时使用，体积最大 |
| retain-on-failure | 记录但仅失败保留 | 希望每个用例都有现场 |
| on-first-retry | 首次重试开始记录 | CI 平衡体积与现场，推荐起点 |
| on-all-retries | 每次重试都记录 | 反复不稳定用例的深度排查 |
trace 记录的是逐动作可回放快照而非视频：能点开 DOM、控制台与网络详情；体积随页面快照数量增长，长用例更明显。
trace 内可能包含敏感数据（请求头中的令牌、用户信息）：作为 CI 构件上传时需限制访问范围，必要时先脱敏。
trace 与 video 取舍不同：video 直观但不可交互，trace 可点开 DOM 与控制台复查；CI 资源紧张时优先保 trace，需要给人看操作过程时再叠加 video。