mygo/.agents/skills/playwright-cli/references/tracing.md

Tracing

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

Basic Usage

# Start trace recording
mise exec -- npm run playwright:cli -- tracing-start

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

# Stop trace recording
mise exec -- npm run 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

Category	Details
Actions	Clicks, fills, hovers, keyboard input, navigations
DOM	Full DOM snapshot before/after each action
Screenshots	Visual state at each step
Network	All requests, responses, headers, bodies, timing
Console	All console.log, warn, error messages
Timing	Precise timing for each operation

Use Cases

Debugging Failed Actions

mise exec -- npm run playwright:cli -- tracing-start
mise exec -- npm run playwright:cli -- open https://app.example.com

# This click fails - why?
mise exec -- npm run playwright:cli -- click e5

mise exec -- npm run playwright:cli -- tracing-stop
# Open trace to see DOM state when click was attempted

Analyzing Performance

mise exec -- npm run playwright:cli -- tracing-start
mise exec -- npm run playwright:cli -- open https://slow-site.com
mise exec -- npm run playwright:cli -- tracing-stop

# View network waterfall to identify slow resources

Capturing Evidence

# Record a complete user flow for documentation
mise exec -- npm run playwright:cli -- tracing-start

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

mise exec -- npm run playwright:cli -- tracing-stop
# Trace shows exact sequence of events

Trace vs Video vs Screenshot

Feature	Trace	Video	Screenshot
Format	.trace file	.webm video	.png/.jpeg image
DOM inspection	Yes	No	No
Network details	Yes	No	No
Step-by-step replay	Yes	Continuous	Single frame
File size	Medium	Large	Small
Best for	Debugging	Demos	Quick capture

Best Practices

1. Start Tracing Before the Problem

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

2. Clean Up Old Traces

Traces can consume significant disk space:

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

Limitations

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