mirror of
https://github.com/bitsocialnet/5chan.git
synced 2026-08-03 07:41:04 +02:00
Tommaso CasaburiandGitHub
a92b185a66
* chore(ai-workflow): track repo-managed review tooling * fix(ai-workflow): remove repo-specific path assumptions Make shared workflow hooks and APK testing guidance resolve paths from the repo and contributor environment so the tooling works for all contributors, not just one machine.
140 lines
3.4 KiB
Markdown
140 lines
3.4 KiB
Markdown
# Tracing
|
|
|
|
Capture detailed execution traces for debugging and analysis. Traces include DOM snapshots, screenshots, network activity, and console logs.
|
|
|
|
## Basic Usage
|
|
|
|
```bash
|
|
# 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
|
|
|
|
| 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
|
|
|
|
```bash
|
|
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
|
|
|
|
```bash
|
|
playwright-cli tracing-start
|
|
playwright-cli open https://slow-site.com
|
|
playwright-cli tracing-stop
|
|
|
|
# View network waterfall to identify slow resources
|
|
```
|
|
|
|
### Capturing Evidence
|
|
|
|
```bash
|
|
# 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
|
|
|
|
| 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
|
|
|
|
```bash
|
|
# 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:
|
|
|
|
```bash
|
|
# 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
|