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 trace viewer
Recording a trace
Traces can be recorded by running your tests with the --tracing
flag.
pytest --tracing on
Options for tracing are:
on
: Record trace for each testoff
: Do not record trace. (default)retain-on-failure
: Record trace for each test, but remove all traces from successful test runs.
This will record the trace and place it into the file named trace.zip
in your test-results
directory.
If you are not using Pytest, click here to learn how to record traces.
- Sync
- Async
browser = chromium.launch()
context = browser.new_context()
# Start tracing before creating / navigating a page.
context.tracing.start(screenshots=True, snapshots=True, sources=True)
page = context.new_page()
page.goto("https://playwright.dev")
# Stop tracing and export it into a zip archive.
context.tracing.stop(path = "trace.zip")
browser = await chromium.launch()
context = await browser.new_context()
# Start tracing before creating / navigating a page.
await context.tracing.start(screenshots=True, snapshots=True, sources=True)
page = await context.new_page()
await page.goto("https://playwright.dev")
# Stop tracing and export it into a zip archive.
await context.tracing.stop(path = "trace.zip")
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's zip file is located. Once opened you can click on each action or use the timeline to see the state of the page before and after each action. You can also 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 show-trace trace.zip
To learn more check out our detailed guide on Trace Viewer.