Send your request Join Sii

In the first part of the series of articles on Playwright, I showed you how to use the tool along with C#. You can read the article on the Sii blog. This time I would like to discuss a useful feature available in Playwright – the so-called Trace Viewer. It distinguishes Playwright from other tools and gives the user access to a detailed test report. This allows finding errors and thoroughly tracing what went wrong, enabling catching an application error even more accurately. Additionally, it provides detailed information for developers.

What is Trace Viewer for?

Trace Viewer can support us through:

  • Screenshots – after each action, Playwright creates a screenshot. Thanks to the significant number of screenshots taken during the test, Playwright provides an accurate test run.
  • Snapshots – the entire HTML DOM for each action is downloaded.
  • Sources – this property allows setting information in the Trace Viewer about what line of code triggered a specific action.

All this information is useful when, for some reason, the test tends to work one time and not work another. Also, when the test is working properly, presenting the test in this form can be useful for the whole team, or when the error occurs in the application and not in the test itself, it is easier to trace what went wrong. It is easier for us to find out why a particular test does not pass. We can decide on our own through Playwright’s configuration files whether we want to enable the use of the Trace Viewer during tests or not.

Let’s begin!

To obtain useful logs, we need to initialize the use of “Tracing” during our tests.

inicjacja Tracingu

In the settings of the Context.Tracing.StartAsync() method, we define what logs are to be saved when we run our automated tests. Screenshots save a record of each action during the test. Snapshots save the HTML DOM of each action that happens. Sources allow collecting information about which line of code is responsible for a particular action.

In addition to using the StartAsync() method, in the end, we need to define in the class the ending of log saving in the TearDown method, which allows us to indicate the name under which we will save the .zip file with the logs. It is worth adding the so-called Guide in the name – it will give us a unique name for the log file every time we run a test. In a situation where the name is fixed, for example just “blog_sii_meetup”, every test run will exchange the report.

fragment kodu

After running the test, the .zip file with the logs will be saved in the project’s bin directory. You can find these methods alongside sample tests in the code available on Sii’s GitHub in the BaseSetup.cs class. I recommend downloading and checking them locally.

Running the test

First, I recommend going into the system’s directory, where the log file is located. The bin directory is the default location, unless you chose a different path during the Trace Viewer setup. Here, I open PowerShell and run the .playwright.ps1 script, which contains various useful features you can use.

In that case, to see the Trace Viewer, I run the command:

playwright.ps1 show-trace 
  • – this is the newly generated log file, created each time the test is run.
Newly generated file with logs
Fig. 1 Newly generated file with logs
widok konsoli

Displaying the report

After running the script, a menu with various options will be displayed. In this case, we are interested in the “show-trace” option, which, basing on a given .zip file, allows us to display a report. First, we see a screen with all the actions collected during the running test displayed on the left.

Show trace ¬– report display
Fig. 2 Show trace ­– report display

The first tab in the Trace Viewer is responsible for collecting actions performed during our test. The second, located next to it, is “Metadata”. It contains basic information about the duration, resolution, and time of conduct of the automated test.

The Metadata tab in Trace Viewer
Fig. 3 The Metadata tab in Trace Viewer

In the following steps, in the middle of the screen, the Trace Viewer provides us with a screenshot of the test run. In this case, this space is still empty because, in this step, the test has just started, and the viewer has not yet been launched.

On the right side of the Trace Viewer there are other useful options. They include information on:

  • actions,
  • console,
  • information derived from the console,
  • code references.
Test run in Trace Viewer
Fig. 4 Test run in Trace Viewer
  • Call – contains potential logs and information about what action took place and how long it lasted.
  • Console – contains information (if there is any) from the console.
  • Network – contains information (if there is any) about particular requests.
  • Source – contains information about which line of the code is responsible for the current step. In this case, it is line 17, which Playwright highlights here. Each subsequent action that we select from the menu on the left will be traceable. A screenshot will be available for the action of moving to a specific page (in this case, in line 19).
Wynik testu w Trace Viewerze
Fig. 5 Trace Viewer test results


In today’s post, I have shown you how to use the Trace Viewer and generate an accurate test run report. Keep in mind that the report itself is generated by default for each test separately and that it affects the timing of test runs. However, we can decide when we want to generate it, for instance, when an error sometimes occurs.

In the next article, I will demonstrate how we can record a video of the test and integrate Playwright with Allure, a popular tool for creating test reports.

Playwright Trace Viewer in practice


On our blog you will also find other articles about Playwright.

5/5 ( votes: 4)
5/5 ( votes: 4)
Michał Ślęzak

Test Architect in Sii Poland. Working with test automation for several years. He runs a blog:, one of the leaders and hosts the TestingParrot podcast: one of the first podcasts about testing in Poland. He wrote for / / Programista Magazyn. Outside of work he likes personal development, reading books and watching TV series.

Leave a comment

Your email address will not be published. Required fields are marked *

You might also like

More articles

Don't miss out

Subscribe to our blog and receive information about the latest posts.

Get an offer

If you have any questions or would like to learn more about our offer, feel free to contact us.

Send your request Send your request

Natalia Competency Center Director

Get an offer

Join Sii

Find the job that's right for you. Check out open positions and apply.

Apply Apply

Paweł Process Owner

Join Sii


Ta treść jest dostępna tylko w jednej wersji językowej.
Nastąpi przekierowanie do strony głównej.

Czy chcesz opuścić tę stronę?