Tracing
记录执行跟踪，捕获每个步骤的 DOM 快照、屏幕截图、网络活动和控制台日志。
🌐 Record execution traces that capture DOM snapshots, screenshots, network activity, and console logs at every step.
命令
🌐 Commands
playwright-cli tracing-start # start recording
playwright-cli tracing-stop # stop and save
基本录音
🌐 Basic recording
playwright-cli tracing-start
playwright-cli goto https://example.com
playwright-cli click e5
playwright-cli fill e3 "test"
playwright-cli tracing-stop
两个命令都会打印它们写入的路径：
🌐 Both commands print the paths they write to:
Trace recording stopped.
[Trace](.playwright-cli/traces/trace-1771097322679.trace)
[Network log](.playwright-cli/traces/trace-1771097322679.network)
[Resources](.playwright-cli/traces/resources)
跟踪是实时写入的——文件链接在 tracing-start 运行时就会出现，所以你可以在自动化还在进行时打开查看器。
🌐 The trace is written live — the file links appear as soon as tracing-start runs, so you can open
the viewer while the automation is still going.
| 文件 | 内容 |
|---|---|
trace-{timestamp}.trace | 动作，每个动作前后的 DOM 快照，截图，控制台信息，时间记录 |
trace-{timestamp}.network | 每个请求和响应，包括头信息、内容和时间 |
resources/ | 重放页面所需的缓存图片、字体、样式表和脚本 |
查看踪迹
🌐 Viewing a trace
npx playwright show-trace .playwright-cli/traces/trace-1771097322679.trace
Trace Viewer 显示每个操作的时间线，包括 DOM 快照（前后）、截图、网络请求和响应、控制台信息以及时间记录。
🌐 The Trace Viewer shows a timeline of every action with DOM snapshots (before and after), screenshots, network requests and responses, console messages, and timing.
工作流程：调试失败的场景
🌐 Workflow: debugging a failing scenario
# Start tracing
playwright-cli tracing-start
# Walk through the failing flow
playwright-cli goto https://store.example.com/checkout
playwright-cli fill e10 "4111111111111111"
playwright-cli click e15
# Check what went wrong
playwright-cli snapshot
# - text: "Payment processing failed"
playwright-cli console error
# [ERROR] POST /api/payment 422: {"error":"Card number must include expiry"}
# Save trace for analysis
playwright-cli tracing-stop
清理中
🌐 Cleaning up
跟踪可能会占用大量磁盘空间：
🌐 Traces can consume significant disk space:
find .playwright-cli/traces -mtime +7 -delete