Photo by Andres Siimon on Unsplash

Record and view our E2E test traces [Part 5]

Record and view our E2E test traces.

In the last part of this article we are going to see how we can save the test traces and how easy it is to use the Playwright trace viewer to investigate through the recorded traces.

Note that you can find all source code used in this article in this repository!

• Part 1 : Setup our application and our test projects and make an introduction of Playwright;
• Part 2 : Enable Playwright so that you can easily use it (including on your build agents);
• Part 3 : Start you Blazor app in order to debug and test it;
• Part 4 : Write a basic E2E test using the Codegen tool;
• Part 5 : Record and view our E2E test traces;

Save Traces

First, we need to set up the PlaywrightFixture in order to enable trace recording. Therefor we are going to update the GotoPageAsync method to Start and Stop the trace feature and to specify where to save the file.

A tracing object is available from the browser context instance we use to create the page. It provides a StartAsync method that start recording traces with an option object as argument. Through the option object we can specify what to save or not.

// Start tracing before creating the page.
await context.Tracing.StartAsync(new TracingStartOptions()
{
  Screenshots = true,
  Snapshots = true,
  Sources = true
});

Once the test is ended, we can actually stop recording the traces and save all data into a zip archive with the file path given as options:

// Stop tracing and save data into a zip archive.
await context.Tracing.StopAsync(new TracingStopOptions()
{
  Path = @"c:\Temp\trace.zip"
});

View the traces

Now that we have got the traces in the trace.zip file, we can use the Playwright trace viewer tool with the use of Playwright.ps1 script with the command show-trace.

MyAppTests\bin\Debug\net6.0\playwright.ps1 show-trace

Note that if we use the tool without specifying the trace file, you will get a windows asking to select or to drop a file.

The show-trace command can be used with the full file path as argument. It also can use an URL location in case of a trace file generated on a remote build agent.

$ playwright.ps1 show-trace c:\Temp\trace.zip

Note that you may need to run the install command the first time:

$ playwright.ps1 install

Note that to view the traces you can also use the inline tool directly at this location https://trace.playwright.dev/. All you need to do is to drop your archive file into the web page!

Once the traces are displayed, you can follow your test traces step by step on the actions view with the corresponding test line of code highlighted in the source view.

Last words

I hope you found this article very comprehensive and as you can see it is really easy to use Playwright to write your E2E tests.
If you have a look on the Playwright web site, you will see that it offers much more features like Screenshots, Browser storage handling….

Photo by Randy Tarampi on Unsplash

And once again all that is cross platform, cross language, cross browser….. and open source!

So don’t wait anymore, give it a try here!