Skip to main content

Trace viewer

Introduction

Playwright Trace Viewer is a GUI tool that lets you explore recorded Playwright traces of your tests meaning you can go back and forward though each action of your test and visually see what was happening during each action.

You will learn

  • How to record a trace
  • How to open the HTML report
  • How to open the trace viewer

Recording a trace

Traces can be recorded using the BrowserContext.Tracing API as follows:

namespace PlaywrightTests;

[Parallelizable(ParallelScope.Self)]
[TestFixture]
public class Tests : PageTest
{
[SetUp]
public async Task Setup()
{
await Context.Tracing.StartAsync(new()
{
Title = TestContext.CurrentContext.Test.ClassName + "." + TestContext.CurrentContext.Test.Name,
Screenshots = true,
Snapshots = true,
Sources = true
});
}

[TearDown]
public async Task TearDown()
{
// This will produce e.g.:
// bin/Debug/net8.0/playwright-traces/PlaywrightTests.Tests.Test1.zip
await Context.Tracing.StopAsync(new()
{
Path = Path.Combine(
TestContext.CurrentContext.WorkDirectory,
"playwright-traces",
$"{TestContext.CurrentContext.Test.ClassName}.{TestContext.CurrentContext.Test.Name}.zip"
)
});
}

[Test]
public async Task TestYourOnlineShop()
{
// ..
}
}

This will record the trace and place it into the bin/Debug/net8.0/playwright-traces/ directory.

Opening the trace

You can open the saved trace using the Playwright CLI or in your browser on trace.playwright.dev. Make sure to add the full path to where your trace.zip file is located. This should include the test-results directory followed by the test name and then trace.zip.

pwsh bin/Debug/netX/playwright.ps1 show-trace trace.zip

Viewing the trace

View traces of your test by clicking through each action or hovering using the timeline and see the state of the page before and after the action. Inspect the log, source and network during each step of the test. The trace viewer creates a DOM snapshot so you can fully interact with it, open devtools etc.

playwright trace viewer

To learn more check out our detailed guide on Trace Viewer.

What's next