What is Trace Viewer?
Trace Viewer is a Playwright GUI tool for exploring recorded traces after a test has run. A trace shows each action with DOM snapshots from before and after it, plus console logs, network requests and errors. You open one with npx playwright show-trace or at trace.playwright.dev, which makes it ideal for debugging CI failures.
No account needed · Scored in under a minute against a senior rubric
What does Trace Viewer mean in practice?
You record traces with the trace option under use in the test config. For CI, the docs recommend trace: 'on-first-retry', which records a trace only when a test is retried for the first time. Other values include 'off', 'on', 'on-all-retries', 'retain-on-first-failure', 'retain-on-failure-and-retries' and 'retain-on-failure', which records every test but removes the traces of passing runs. 'on' records every test and is not recommended, because it is performance heavy. While developing, npx playwright test --trace on records traces for a single run.
To open a trace, run npx playwright show-trace path/to/trace.zip. show-trace also accepts a URL to a trace stored remotely. You can also drag the file into trace.playwright.dev, a statically hosted version of the viewer.
The viewer is split into tabs. Actions shows the locator each action used and how long it took, with Before and After snapshots. Source highlights the line of code for the selected action. Log shows what Playwright did behind the scenes, such as waiting for an element to be visible, enabled and stable. Console and Network show browser logs and requests, and both can be filtered to the actions you select. Errors shows the failure message, and the timeline marks where it happened.
Outside the test runner, the BrowserContext.tracing API records traces: call context.tracing.start({ screenshots: true, snapshots: true }) before creating or navigating a page, then context.tracing.stop({ path: 'trace.zip' }) after the test steps to export the trace as a zip archive.
Why do interviewers ask about Trace Viewer?
A CI failure you cannot reproduce locally is slow to fix. A trace lets you step through the failed run as it happened. Interviewers ask about it to see how you debug flaky tests without rerunning them again and again.
What does Trace Viewer look like in a real project?
A checkout test fails on CI about once a week and never on a laptop. The team sets retries to 1 and trace to 'on-first-retry'. The next failure leaves a trace.zip. The Network tab shows a slow cart request, and the Before snapshot of the failing click shows the total had not updated yet. The fix is an assertion on the total before the click.
How should you talk about Trace Viewer in an interview?
Say which trace setting you use on CI and why: 'on-first-retry' or 'retain-on-failure' keeps the cost low while still capturing failures. Then walk through how you read a trace: the error first, then the action before it, then the network calls around it.
Go Deeper on Trace Viewer
Know the term. These are the courses that turn the concept into something you can demonstrate.
Common questions about Trace Viewer
How do I open a Playwright trace?
Run npx playwright show-trace path/to/trace.zip, or upload the file at trace.playwright.dev with drag and drop or the Select file button. show-trace also accepts a URL to a trace stored remotely, for example inside your CI.
Which trace option should I use on CI?
Playwright's docs recommend trace: 'on-first-retry', which records a trace only when a test is retried for the first time. If you do not enable retries, trace: 'retain-on-failure' records every test and keeps only the traces of failed runs. Avoid 'on' on CI, because recording every test is performance heavy.
Which terms relate to Trace Viewer?
Explore related glossary terms to deepen your understanding.
Related Resources
Dive deeper with these related interview prep pages.
Free QA career tools, no account needed
Instant and private, everything runs in your browser. Try them before you sign up.
QA Resume Checker
Instant 0-100 score on automation keywords, impact, and ATS formatting.
QA Cover Letter Generator
A tailored 3-paragraph QA cover letter from your resume and a job post.
QA Application Tracker
Drag-and-drop kanban to track every QA application from Applied to Offer.
QA Take-Home Test Generator
A realistic take-home assignment with a scenario, tasks, and a rubric.
QA LinkedIn Headline Generator
A recruiter-searchable headline, About section, and skills list.
QA STAR Story Builder
Structure a QA behavioral answer with the STAR method and instant checks.
QA Bug Report Generator
Build a clean, reproducible bug report for Markdown, Jira, or plain text.
Boundary Value Analysis Generator
Generate boundary value and equivalence partitioning test cases from a range.
QA Metrics Calculator
Calculate DRE, defect leakage, defect density, and pass rate with interpretation.
QA Test Plan Generator
Build a structured test plan (scope, approach, criteria, risks) in Markdown.
QA Salary Calculator
Estimate QA, SDET, and automation tester pay by level, market, and skills.
QA Offer Evaluator
See total comp, a counter range, and a ready-to-send negotiation message.
Ready to Ace Your QA Interview?
Practice explaining trace viewer and other key concepts with our AI interviewer.
Join 600+ QA engineers already practicing with AssertHired.
A test passes locally but fails in CI about one run in five. Walk me through what you check first, and why.
This single answer is scored on four dimensions: Technical accuracy · Coverage · Clarity · Best practices.
Rather skip ahead? Create a free account