Exploring Playwright’s Trace Viewer

Exploring Playwright’s Trace Viewer


One of Playwright’s most useful features is its Trace Viewer. This blog post explores what Playwright’s Trace Viewer is, how it can be used, and how it can help in web application testing.

If you need the latest version of Playwright, you can find it here.

Introduction to Playwright’s Trace Viewer

Playwright Trace Viewer is a powerful diagnostic tool that allows developers and testers to visually inspect what happened in a browser during a Playwright test run. This tool captures a wealth of information, including screenshots, network requests, API calls, and user interactions, providing an insightful look into the sequence of events that led to a particular state or issue.

Key Features

  1. Screenshots: Captures screenshots after each action, helping visualise the sequence of events.
  2. Network Activity: Logs all network requests and responses, making it easier to debug network-related issues.
  3. Console Logs: Records all browser console logs, errors, and warnings.
  4. User Interactions: Tracks user interactions like clicks, input events, and navigations.
  5. API Calls: Provides insights into the API calls made during the test.

Here are some screenshots from Playwrite: –

image-1024x631 Exploring Playwright's Trace Viewer
image-1-1024x631 Exploring Playwright's Trace Viewer

Here is what a snapshot looks like: –

image-2-1024x631 Exploring Playwright's Trace Viewer

If you hover over the actions in the left of the screen, you can see the source code from the test that created them on the right:

image-3-1024x631 Exploring Playwright's Trace Viewer

If there was a call to an endpoint, you can see that too: –

image-4-1024x631 Exploring Playwright's Trace Viewer

This includes the time it took, what was sent to the endpoint and what came back.

There is even a log of what Playwrite did: –

image-5-1024x631 Exploring Playwright's Trace Viewer

Errors can be viewed in detail: –

image-6-1024x631 Exploring Playwright's Trace Viewer

You can see the sites console messages: –

image-7-1024x631 Exploring Playwright's Trace Viewer

One of my favourite items is the network section. Here you can see what happened, where the site went to, how long the calls took, what was downloaded etc. :

image-8-1024x631 Exploring Playwright's Trace Viewer

You can view the metadata here: –

image-9-1024x631 Exploring Playwright's Trace Viewer

If you’re doing visual regression testing you can compare screenshots by examining the image diff, the actual image and the expected image. When you click on the expected image, you can use the slider to slide one image over the other so you can easily see the differences in your screenshots. This makes it much easier to see the differences instead of playing the game of ‘spot the difference’.

image-10-1024x631 Exploring Playwright's Trace Viewer

How to Use Playwright’s Trace Viewer

Setting Up Trace Collection

To use the Trace Viewer, you first need to enable trace collection in your Playwright tests. Here’s a basic setup:

// In your Playwright test script
const { chromium } = require('playwright');

(async () => {
  const browser = await chromium.launch();
  const context = await browser.newContext();

  // Start tracing before starting the scenario
  await context.tracing.start({ screenshots: true, snapshots: true });

  // ... your testing scenario ...

  // Stop tracing and export it into a zip archive
  await context.tracing.stop({ path: 'trace.zip' });

This script will generate a trace file that can be opened with Playwright’s Trace Viewer.

Opening the Trace Viewer

To open the Trace Viewer, use the command line:

npx playwright show-trace trace.zip

This will launch the Trace Viewer interface with the trace you recorded.

Why Playwright’s Trace Viewer is so useful

Comprehensive Debugging

The Trace Viewer offers a multi-dimensional view of the test execution. It’s not just about what happened, but also about the context in which it happened. This holistic approach is crucial for debugging complex scenarios.


Diagnosing issues in automated tests can be time-consuming. The Trace Viewer accelerates this process by providing a clear and interactive way to review test executions, reducing the time spent on identifying and fixing issues.

Collaboration Enhancement

With the ability to export and share traces, teams can collaborate more effectively. Rather than describing an issue, testers can provide a visual representation of the problem, making it easier for developers to understand and address it.

Easy Integration

Integrating Trace Viewer into existing Playwright tests is straightforward, as shown in the setup. This ease of integration means teams can start leveraging its benefits without a significant overhaul of their testing framework.


Playwright’s Trace Viewer is an indispensable tool for anyone involved in automated web testing. It simplifies the debugging process, saves time, enhances collaboration, and integrates seamlessly with your Playwright tests.

Whether you’re a developer trying to pinpoint a bug or a tester trying to understand the behaviour of a web application under test, the Trace Viewer provides the insights needed to make informed decisions and improve the quality of your web applications.

You can find some of my other Playwright posts here: –


Hi, my name is Stephen Finchett. I have been a software engineer for over 30 years and worked on complex, business critical, multi-user systems for all of my career. For the last 15 years, I have been concentrating on web based solutions using the Microsoft Stack including ASP.Net, C#, TypeScript, SQL Server and running everything at scale within Kubernetes.