/playwright-cli

Tracing

Part of the playwright-cli skill. See SKILL.md for full context.

Capture detailed execution traces for debugging and analysis. Traces include DOM snapshots, screenshots, network activity, and console logs.

Basic Usage

# Start trace recording
playwright-cli tracing-start

# Perform actions
playwright-cli open https://example.com
playwright-cli click e1
playwright-cli fill e2 "test"

# Stop trace recording
playwright-cli tracing-stop

Trace Output Files

When you start tracing, Playwright creates a traces/ directory with several files:

trace-{timestamp}.trace

Action log - The main trace file containing:

• Every action performed (clicks, fills, navigations)
• DOM snapshots before and after each action
• Screenshots at each step
• Timing information
• Console messages
• Source locations

trace-{timestamp}.network

Network log - Complete network activity:

• All HTTP requests and responses
• Request headers and bodies
• Response headers and bodies
• Timing (DNS, connect, TLS, TTFB, download)
• Resource sizes
• Failed requests and errors

resources/

Resources directory - Cached resources:

• Images, fonts, stylesheets, scripts
• Response bodies for replay
• Assets needed to reconstruct page state

What Traces Capture

Use Cases

Debugging Failed Actions

playwright-cli tracing-start
playwright-cli open https://app.example.com

# This click fails - why?
playwright-cli click e5

playwright-cli tracing-stop
# Open trace to see DOM state when click was attempted

Analyzing Performance

playwright-cli tracing-start
playwright-cli open https://slow-site.com
playwright-cli tracing-stop

# View network waterfall to identify slow resources

Capturing Evidence

# Record a complete user flow for documentation
playwright-cli tracing-start

playwright-cli open https://app.example.com/checkout
playwright-cli fill e1 "4111111111111111"
playwright-cli fill e2 "12/25"
playwright-cli fill e3 "123"
playwright-cli click e4

playwright-cli tracing-stop
# Trace shows exact sequence of events

Trace vs Video vs Screenshot

Best Practices

1. Start Tracing Before the Problem

# Trace the entire flow, not just the failing step
playwright-cli tracing-start
playwright-cli open https://example.com
# ... all steps leading to the issue ...
playwright-cli tracing-stop

2. Clean Up Old Traces

Traces can consume significant disk space:

# Remove traces older than 7 days
find .playwright-cli/traces -mtime +7 -delete

Limitations

• Traces add overhead to automation
• Large traces can consume significant disk space
• Some dynamic content may not replay perfectly