Day 13: Debugging — Trace Viewer, UI Mode, and Inspector
This is Day 13 of the 21-Day Playwright with TypeScript Challenge. One lesson per day. Zero to production-ready in 3 weeks.
🎭 Want to master this with real projects? Join the Playwright Automation Mastery course at The Testing Academy.
Stop adding console.log. Playwright has 3 built-in debugging tools that show exactly what happened, step by step.
Contents
Trace Viewer — Post-Mortem Debugging
// Enable in config
use: { trace: 'retain-on-failure' }
// Open trace after failure
// npx playwright show-trace test-results/my-test/trace.zipShows: action timeline, DOM snapshots before/after each step, network requests with bodies, console logs, source code mapping.
UI Mode — Interactive Testing
npx playwright test --uiWatch tests execute in real-time. Click any step to see DOM state. Re-run individual tests. Filter by file. Time-travel through test execution.
🚀 Level Up Your Playwright
From locators to CI pipelines — build a production-grade Playwright + TypeScript framework step by step.
Inspector — Step-by-Step
npx playwright test --debugPauses at each action. Step through one action at a time. Inspect element selectors live. Evaluate locators in console.
60-Second Debugging Workflow
- Open trace file (5s)
- Jump to failing action in timeline (10s)
- Compare DOM before/after (15s)
- Check network tab — did API return expected data? (15s)
- Check console for JS errors (10s)
- Root cause identified (5s)
Tomorrow (Day 14): Test data management — factories, Faker, cleanup strategies.
🎓 Master Playwright End to End
Join hundreds of SDETs building real automation frameworks. Lifetime access, hands-on projects, and a job-ready portfolio.
