Skip to main content

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
# Trace saved to .playwright-cli/trace.zip

Playwright Trace Viewer 中查看追踪:

🌐 View the trace in the Playwright Trace Viewer:

npx playwright show-trace .playwright-cli/trace.zip

追踪查看器显示每个操作的时间轴,包括 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
# Share trace with the team for full timeline analysis

自动会话录制

🌐 Automatic session recording

使用 --save-session 标志自动保存每个会话的痕迹:

🌐 Save traces for every session automatically with the --save-session flag:

playwright-cli --save-session