Some links on this page are affiliate links: if you buy through them we may earn a commission, at no extra cost to you.
Use a Playwright trace to explain what a test did and what the browser showed at each action. Use a HAR file to examine the HTTP conversation itself—requests, responses, headers, content, caching, and timing. They overlap because both can contain network evidence, but they answer different debugging questions. A trace is Playwright-aware and action-oriented; HAR is a standardized, HTTP-oriented archive. For a failed UI test, open the trace first. For an API, routing, replay, or latency investigation, start with the HAR. Capture both when a defect crosses the browser-and-network boundary.
What a Playwright trace contains
Microsoft describes Trace Viewer as a GUI for exploring recorded Playwright traces after a script has run. The artifact is a time-ordered record of execution, connecting each Playwright action with browser state and diagnostic context.
Action and locator context
Select an action in Trace Viewer to inspect the locator Playwright used, the action log, its source location, and timing. This lets you answer questions such as “Which element did the test resolve?” and “Where did the timeout occur?” rather than merely seeing that a request failed.
Free tools Windows power users keep installed
One-click scans. No signup required.
Visual and DOM evidence
Traces can include screenshots, a film-strip-style screencast, and DOM snapshots before and after actions. Those views reveal whether an overlay covered a button, a page rendered the wrong state, or a navigation stopped before the expected content appeared. Console output and related network records can be inspected alongside the selected action.
#1 Best Overall
Assertions are a separate concern
The low-level context.tracing API records browser operations and network activity, but it does not record test assertions. If the important symptom is an assertion failure, use Playwright Test tracing, which supplies the runner’s failure context, instead of relying only on low-level tracing.
Archive and viewing
Playwright exports traces as ZIP archives, commonly named trace.zip. Open one locally with:
npx playwright show-trace path/to/trace.zipYou can also open a trace in the browser at trace.playwright.dev. The hosted viewer documentation says the trace is loaded entirely in your browser and is not transmitted externally.
What a HAR file contains
HAR (HTTP Archive) is a standardized JSON format defined by the W3C for archiving HTTP transactions and detailed page-load performance data. Its root log object includes creator information and an entries array. Each entry represents a tracked HTTP request and can include:
- Request URL, method, headers, cookies, query data, and posted content.
- Response status, headers, cookies, body metadata, and resource content when captured.
- Cache information, redirects, and timing phases.
- Timing breakdowns such as blocking, DNS, connection, sending, waiting, receiving, and SSL where available.
HAR answers “What crossed the HTTP boundary, what came back, and how long did each phase take?” It does not provide Trace Viewer’s locator timeline, source mapping, DOM snapshots, or Playwright action model.
Trace vs. HAR at a glance
| Axis | Playwright trace | HAR file |
|---|---|---|
| Primary question | What did the Playwright test do, and what did the browser show at each action? | Which HTTP transactions occurred, what did they contain, and how long did they take? |
| Scope | Actions, browser state, screenshots, DOM snapshots, source, logs, and network context when enabled. | HTTP requests and responses, headers, cookies, content, cache data, and timings. |
| Typical viewer | Playwright Trace Viewer or show-trace; timeline and action inspection. |
Any HAR-compatible viewer or HTTP tool; the format is JSON. |
| Failed UI test | Best first choice: connects the failing action to the page state. | Usually secondary unless a request or response clearly caused the failure. |
| API, routing, or latency issue | Useful context for the action that initiated the call. | Best first choice: exposes request/response and timing fields directly. |
| Replay and routing | Playwright can capture HAR data for routing workflows. | Portable HTTP transaction representation consumed by other tools. |
| Assertions | Low-level tracing does not record assertions; Playwright Test tracing is preferred for assertion diagnosis. | No Playwright assertion model. |
| Potentially sensitive data | Screenshots, DOM, source, URLs, logs, and network data. | URLs, headers, cookies, request data, and response content. |
How to record a Playwright trace
Start tracing before the browser actions you need, then stop it in a cleanup path so a failure still produces an archive. The following JavaScript example uses screenshots and snapshots:
import { chromium } from 'playwright';
const browser = await chromium.launch();
const context = await browser.newContext();
await context.tracing.start({ screenshots: true, snapshots: true, sources: true });
try {
const page = await context.newPage();
await page.goto('https://example.com');
await page.getByRole('link', { name: 'More information...' }).click();
await page.screenshot({ path: 'after-click.png' });
} finally {
await context.tracing.stop({ path: 'trace.zip' });
await browser.close();
}For test suites, configure Playwright Test tracing according to whether you want every test, only retries, or traces on failure. A failure-focused policy limits storage while preserving the evidence needed for CI diagnosis.
Quick wins for a faster PC:
Scan for outdated or missing drivers - takes under a minuteDriver Scan →Repair Windows errors before they cause bigger problemsFix Now →Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →How to record a HAR with Playwright
HAR capture is separate from ordinary tracing. Start it on the browser context before navigation and stop it after the requests of interest have completed. The API is labeled as added in Playwright v1.60 in the current documentation.
import { chromium } from 'playwright';
const browser = await chromium.launch();
const context = await browser.newContext();
await context.routeFromHAR('session.har', { notFound: 'fallback' });
await context.tracing.start({ screenshots: true, snapshots: true });
const page = await context.newPage();
await page.goto('https://example.com');
await page.getByRole('button', { name: 'Load data' }).click();
await context.tracing.stop({ path: 'trace.zip' });
await browser.close();To create a HAR rather than consume one, use startHar and stopHar:
const context = await browser.newContext();
await context.startHar({
path: 'network.har',
content: 'attach',
mode: 'full'
});
const page = await context.newPage();
await page.goto('https://example.com');
await context.stopHar();Content and mode options
content: 'omit'excludes resource bodies;'embed'puts content in the HAR;'attach'stores bodies as files. When the path ends in.zip, attached response bodies can be kept inside that ZIP.mode: 'full'retains the complete capture.'minimal'keeps information needed for routing and omits fields such as sizes, timing, page, cookies, and security data that are not required for replay.
Choose the content mode deliberately: embedding or attaching bodies makes an artifact more useful for response inspection but increases its size and the amount of sensitive data you must protect.
Rank #3
Which artifact should you use?
Choose a trace first when
- A click targeted the wrong element or a locator resolved unexpectedly.
- An action timed out and you need the surrounding DOM, screenshot, and source line.
- A CI test shows a visually wrong page, missing overlay dismissal, or navigation race.
- You need to correlate a request with the exact action that triggered it.
Choose a HAR first when
- You need status codes, headers, cookies, redirects, response content, or cache behavior.
- The question concerns API failures, authentication headers, proxy behavior, or request-phase latency.
- Another HTTP tool or team needs a portable network artifact.
- You are preparing routing or replay data and want minimal transaction information.
Capture both when the defect crosses the boundary
A trace can show that a button click initiated a request and what the page displayed afterward. The HAR can then show the request’s headers, status, body, redirects, and timing. Keeping both avoids guessing whether the defect began in the UI action or in the server conversation.
PC Slower Than It Used to Be?
A free scan shows the junk files, broken settings and background clutter dragging Windows down - then fixes them in one click.Free scan · Windows 10 & 11Outdated Drivers Are Slowing You Down
One free scan finds every outdated or missing driver and matches the right update for your exact hardware.Free scan · exact hardware matchOpening, filtering, and sharing artifacts safely
Open a trace with npx playwright show-trace and inspect the selected action’s network records rather than searching an undifferentiated log. Open HAR JSON in a HAR-compatible viewer or an editor that preserves the log.entries structure. For large captures, filter by host, URL path, status, method, or timing before drawing conclusions.
Both formats can contain secrets. A trace may include screenshots, DOM text, source, URLs, console output, and network data. A HAR may contain authorization headers, cookies, query parameters, posted data, and response bodies. Treat captures as test data: restrict access, redact credentials and personal information before sharing, and choose content: 'omit' or minimal mode when full bodies are unnecessary.
Performance, storage, and reliability considerations
- Tracing with screenshots, snapshots, and sources produces richer evidence but larger ZIP files and more I/O.
- HAR files with embedded or attached bodies can grow quickly; omit content when timing and headers are sufficient.
- Start capture before the navigation or action under investigation and stop it after all relevant requests settle; starting late creates misleading gaps.
- Always stop capture in cleanup code. A crashed or forcibly terminated process can leave an incomplete artifact.
- For parallel CI workers, write unique paths per worker and test attempt to prevent archives overwriting one another.
- Keep browser, Playwright, and viewer versions aligned with the team’s support policy, especially when diagnosing version-specific behavior.
Troubleshooting common problems
The trace opens but has no useful actions
Tracing probably started after the action, stopped too early, or was not flushed because the process terminated. Start it before page creation or navigation and stop it in finally. In Playwright Test, verify that the selected trace policy actually records the failing attempt.
The assertion failure is missing
That is expected from low-level context.tracing; it records browser operations and network activity, not test assertions. Enable Playwright Test tracing for runner-level assertion context.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
The HAR has requests but no response bodies
Check the content option. omit intentionally excludes bodies. Use embed or attach when body inspection is required, and allow extra storage for the resulting file or ZIP.
HAR replay misses requests
Confirm that the URL, method, query string, and request conditions match the captured transaction. Minimal mode intentionally omits fields not needed for routing, so it is not a substitute for a full diagnostic capture.
The artifact is unexpectedly huge or unsafe to share
Disable screenshots or snapshots when they are not needed, use HAR content omission, and redact cookies, authorization values, personal data, and response bodies before distribution.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Or skip the browser setup
When your goal is simply a clean screenshot of a trace viewer, test report, or web page, ScreenshotNeo provides a single HTTP request instead of maintaining browser-capture code. It accepts consent banners as a visitor and removes more than 60 known consent platforms, newsletter popups, and chat widgets before capture; bot checks, blank pages, failed loads, timeouts, and cache hits are not billed, and each response identifies the result with X-Page-Verdict and X-Billed headers. Its MCP server provides take_screenshot, get_page_info, and capture_pdf tools for AI agents.
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://trace.playwright.dev -o shot.webpSee the ScreenshotNeo documentation for parameters and response handling.
import requests
r = requests.get("https://api.screenshotneo.com/v1/shot", params={"access_key": "YOUR_API_KEY", "url": "https://trace.playwright.dev"}, timeout=90)
open("shot.webp", "wb").write(r.content)const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://trace.playwright.dev' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);The Free plan includes 1,000 screenshots a month with no card; paid plans start at $5 for 3,000. Create a free ScreenshotNeo account.
FAQ
Can a Playwright trace replace a HAR?
No. A trace can include network records, but HAR’s standardized request, response, content, cache, and timing model is better for HTTP analysis and interoperability.
Does every trace include assertions?
No. Low-level tracing does not; use Playwright Test tracing when assertion context matters.
The Tool Desk
Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →Can one test produce both files?
Yes. Start tracing and HAR capture on the same context, then stop each after the scenario. This is useful when a UI symptom and a network symptom need correlation.
Why choose minimal HAR mode?
Minimal mode retains routing data while omitting fields such as timing, cookies, page, security, and sizes that replay does not require.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
