Blog # 17: š§Ŗ Playwright Trace - Your Testās Black Box Recorder
Published on April 16, 2025
When I first started dabbling in Playwright for automation testing, I was amazed by its powerābut honestly, I was intimidated by debugging. Failed tests felt like cryptic puzzles. Why did that button click fail? Was it the DOM? The network?
Then I discovered Playwright Trace Viewer, and it was like getting a magnifying glass to solve my test mysteries. This isnāt just a featureāitās my trusty debugging sidekick. Hereās how I went from āWhat went wrong?ā to āIāve got this!ā using Trace Viewer.
Then I discovered Playwright Trace Viewer, and it was like getting a magnifying glass to solve my test mysteries. This isnāt just a featureāitās my trusty debugging sidekick. Hereās how I went from āWhat went wrong?ā to āIāve got this!ā using Trace Viewer.
āØ What is Trace Viewer?
Picture Trace Viewer as a time machine for your tests. It records everythingāclicks, navigations, network calls, console logs, and even what the page looked likeāand lets you rewind to spot exactly where things went off the rails.
For someone new like me, this was mind-blowing. Here's what Trace Viewer helped me see:
For someone new like me, this was mind-blowing. Here's what Trace Viewer helped me see:
ā Every actionālike a movie script of my test
š¼ļø Screenshots that said āThis is what the page looked like!ā
š Network logs that exposed API failures
š DOM snapshots for inspecting the structure
š„ Error lines from my script, without endless console.log hunts
It's like being a detective with all the clues pinned up on a digital evidence board.
 |
| Trace Viewer |
š ļø My First Step: How to Set Trace On
Getting started with tracing was easier than I expectedāand gave me instant clarity on failed test cases.
š¹ Option 1: CLI Shortcut
This command was my first win:
npx playwright test --trace=onThen I learned the smarter way for CI runs:
npx playwright test --trace=retain-on-failureā
Pro tip: This only saves traces for failed tests and helps avoid massive storage issues.
š¹ Option 2: Config File Setup (Set It & Forget It)
Once I realized tracing was gold, I made it permanent in my playwright.config.js:
import { defineConfig } from '@playwright/test';
export default defineConfig({
use: {
trace: 'retain-on-failure', // Ideal for CI
},
});
No more manually passing flagsātraces just work when I need them.
š Cracking Open the Case: How to View the Trace
After running my test, I found a shiny .zip file inside the test-results folder. Time to investigate!
š Option 1: Open via CLI
npx playwright show-trace relative path Example: npx playwright show-trace test-results/login-test/trace.zipOne command, and BOOMāTrace Viewer opens in the browser, like a full control center for your test run.
š Option 2: Web Interface (Drag-and-Drop)
Go to: https://trace.playwright.dev
šµļøāāļø The Thrill of the Investigation: Inside Trace Viewer
Using Trace Viewer felt like stepping into a debugging control room. Hereās what I explored:
ā¶ļø Actions Tab
A play-by-play of the testās moves: page.goto, page.click, and more.
Clicking an action showed the locator and duration. Hovering revealed screenshots and DOM snapshotsāactual time travel.
A play-by-play of the testās moves: page.goto, page.click, and more.
Clicking an action showed the locator and duration. Hovering revealed screenshots and DOM snapshotsāactual time travel.
ā³ Timeline
I could zoom in on specific moments and spot exactly when things broke (hello, red error line!).
I could zoom in on specific moments and spot exactly when things broke (hello, red error line!).
š¼ļø Screenshots Tab
Polaroid-style captures of the page stateāperfect for visual test debugging.
Polaroid-style captures of the page stateāperfect for visual test debugging.
š Network Tab
Helped me catch a delayed API that was silently breaking a test. Headers, payloadsāeverythingās visible.
š Logs Tab
Both browser and script logs, grouped by action. Super helpful for tracking sneaky bugs.
Both browser and script logs, grouped by action. Super helpful for tracking sneaky bugs.
ā Errors Tab
Pinpointed the exact line of failure and showed the full stack trace.
Pinpointed the exact line of failure and showed the full stack trace.
š§¾ Metadata & Attachments
From browser version to viewport sizeāevery detail, every clue.
From browser version to viewport sizeāevery detail, every clue.
ā¤ļø Why Iām Obsessed
Trace Viewer turned debugging from a chore into an interactive adventure. As a Playwright learner, itās helped me build confidence to investigate failures without panicking. Instead of guessing or drowning in logs, I follow the clues like a pro.
Itās not just a toolāitās my debugging superpower.
Itās not just a toolāitās my debugging superpower.
Other news