mirror of
https://github.com/microsoft/playwright.git
synced 2025-06-26 21:40:17 +00:00
docs: improve trace viewer (#27205)
This commit is contained in:
Debbie O'Brien
GitHub
parent
ccaec034d8
commit
175ae09fef
@ -3,6 +3,8 @@ id: trace-viewer-intro
|
||||
title: "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**
|
||||
@ -12,26 +14,22 @@ Playwright Trace Viewer is a GUI tool that lets you explore recorded Playwright
|
||||
- How to open the trace viewer
|
||||
|
||||
## Recording a trace
|
||||
* langs: python
|
||||
|
||||
Traces can be recorded using the [`property: BrowserContext.tracing`] API as follows:
|
||||
Traces can be recorded by running your tests with the `--tracing` flag.
|
||||
|
||||
```java
|
||||
Browser browser = browserType.launch();
|
||||
BrowserContext context = browser.newContext();
|
||||
|
||||
// Start tracing before creating / navigating a page.
|
||||
context.tracing().start(new Tracing.StartOptions()
|
||||
.setScreenshots(true)
|
||||
.setSnapshots(true)
|
||||
.setSources(true));
|
||||
|
||||
Page page = context.newPage();
|
||||
page.navigate("https://playwright.dev");
|
||||
|
||||
// Stop tracing and export it into a zip archive.
|
||||
context.tracing().stop(new Tracing.StopOptions()
|
||||
.setPath(Paths.get("trace.zip")));
|
||||
```bash
|
||||
pytest --tracing on
|
||||
```
|
||||
Options for tracing are:
|
||||
- `on`: Record trace for each test
|
||||
- `off`: 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.
|
||||
|
||||
<details><summary>If you are not using Pytest, click here to learn how to record traces.
|
||||
</summary>
|
||||
|
||||
```python async
|
||||
browser = await chromium.launch()
|
||||
@ -61,6 +59,31 @@ page.goto("https://playwright.dev")
|
||||
context.tracing.stop(path = "trace.zip")
|
||||
```
|
||||
|
||||
</details>
|
||||
|
||||
## Recording a trace
|
||||
* langs: csharp, java
|
||||
|
||||
Traces can be recorded using the [`property: BrowserContext.tracing`] API as follows:
|
||||
|
||||
```java
|
||||
Browser browser = browserType.launch();
|
||||
BrowserContext context = browser.newContext();
|
||||
|
||||
// Start tracing before creating / navigating a page.
|
||||
context.tracing().start(new Tracing.StartOptions()
|
||||
.setScreenshots(true)
|
||||
.setSnapshots(true)
|
||||
.setSources(true));
|
||||
|
||||
Page page = context.newPage();
|
||||
page.navigate("https://playwright.dev");
|
||||
|
||||
// Stop tracing and export it into a zip archive.
|
||||
context.tracing().stop(new Tracing.StopOptions()
|
||||
.setPath(Paths.get("trace.zip")));
|
||||
```
|
||||
|
||||
```csharp
|
||||
await using var browser = await Playwright.Chromium.LaunchAsync();
|
||||
await using var context = await browser.NewContextAsync();
|
||||
@ -85,14 +108,9 @@ await context.Tracing.StopAsync(new()
|
||||
|
||||
This will record the trace and place it into the file named `trace.zip`.
|
||||
|
||||
|
||||
## Opening the trace
|
||||
|
||||
You can open the saved trace using Playwright CLI or in your browser on [`trace.playwright.dev`](https://trace.playwright.dev).
|
||||
|
||||
```bash js
|
||||
npx playwright show-trace trace.zip
|
||||
```
|
||||
You can open the saved trace using the Playwright CLI or in your browser on [`trace.playwright.dev`](https://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`.
|
||||
|
||||
```bash java
|
||||
mvn exec:java -e -D exec.mainClass=com.microsoft.playwright.CLI -D exec.args="show-trace trace.zip"
|
||||
@ -109,6 +127,11 @@ pwsh bin/Debug/netX/playwright.ps1 show-trace trace.zip
|
||||
|
||||
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.
|
||||
|
||||
<img width="1976" alt="Playwright Trace Viewer" src="https://user-images.githubusercontent.com/13063165/212869694-61368b16-f176-4083-bbc2-fc85b95131f0.png" />
|
||||
|
||||
|
||||
To learn more check out our detailed guide on [Trace Viewer](/trace-viewer.md).
|
||||
|
||||
## What's next
|
||||
|
||||
- [Run tests on CI with GitHub Actions](/ci-intro.md)
|
||||
- [Learn more about Trace Viewer](/trace-viewer.md)
|
||||
|
||||
@ -5,18 +5,21 @@ title: "Trace viewer"
|
||||
|
||||
import LiteYouTube from '@site/src/components/LiteYouTube';
|
||||
|
||||
## 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 through each action of your test and visually see what was happening during each action.
|
||||
|
||||
**You will learn**
|
||||
|
||||
- [How to record a trace](/trace-viewer-intro.md#recording-a-trace)
|
||||
- [How to open the HTML report](/trace-viewer-intro.md#opening-the-html-report)
|
||||
- [How to open and view the trace](/trace-viewer-intro.md#viewing-the-trace)
|
||||
- [How to open and view the trace](/trace-viewer-intro.md#opening-the-trace)
|
||||
|
||||
<LiteYouTube
|
||||
id="lfxjs--9ZQs"
|
||||
title="Viewing Playwright Traces"
|
||||
/>
|
||||
|
||||
## Recording a Trace
|
||||
|
||||
By default the [playwright.config](/test-configuration.md#record-test-trace) file will contain the configuration needed to create a `trace.zip` file for each test. Traces are setup to run `on-first-retry` meaning they will be run on the first retry of a failed test. Also `retries` are set to 2 when running on CI and 0 locally. This means the traces will be recorded on the first retry of a failed test but not on the first run and not on the second retry.
|
||||
@ -34,17 +37,13 @@ export default defineConfig({
|
||||
|
||||
To learn more about available options to record a trace check out our detailed guide on [Trace Viewer](/trace-viewer.md).
|
||||
|
||||
Traces are normally run in a Continuous Integration(CI) environment as locally you can use [debugging](/debug.md) methods to debug tests. However should you want to run traces locally you can force tracing to be on with `--trace on`.
|
||||
Traces are normally run in a Continuous Integration(CI) environment, because locally you can use [UI Mode](/test-ui-mode.md) for developing and debugging tests. However should you want to run traces locally without using [UI Mode](/test-ui-mode.md), you can force tracing to be on with `--trace on`.
|
||||
|
||||
```bash
|
||||
npx playwright test --trace on
|
||||
```
|
||||
|
||||
:::note
|
||||
The `trace-on` flag was introduced in Playwright v1.25. Check your `package.json` to make sure you have at least this version of Playwright installed.
|
||||
:::
|
||||
|
||||
## Opening the HTML Report
|
||||
## Opening the HTML report
|
||||
|
||||
The HTML report shows you a report of all your tests that have been ran and on which browsers as well as how long they took. Tests can be filtered by passed tests, failed, flakey or skipped tests. You can also search for a particular test. Clicking on a test will open the detailed view where you can see more information on your tests such as the errors, the test steps and the trace.
|
||||
|
||||
@ -52,21 +51,29 @@ The HTML report shows you a report of all your tests that have been ran and on w
|
||||
npx playwright show-report
|
||||
```
|
||||
|
||||
## Opening the trace
|
||||
|
||||
In the HTML report click on the trace icon next to the test name file name to directly open the trace for the required test.
|
||||
|
||||
<img width="1404" alt="Playwright HTML Report" src="https://user-images.githubusercontent.com/13063165/212745273-c19487d2-bc5e-483f-9f67-f9c9e5413ff4.png" />
|
||||
|
||||
|
||||
|
||||
You can also click open the detailed view of the test and scroll down to the `'Traces'` tab and open the trace by clicking on the trace screenshot.
|
||||
|
||||
<img width="1404" alt="Playwright HTML Report detailed view" src="https://user-images.githubusercontent.com/13063165/212745663-124dd56a-5bd3-4eac-94f4-971790587b13.png" />
|
||||
|
||||
|
||||
|
||||
To learn more about reporters check out our detailed guide on reporters including the [HTML Reporter](/test-reporters.md#html-reporter).
|
||||
|
||||
## Viewing the Trace
|
||||
## 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.
|
||||
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, errors and console during each step of the test. The trace viewer creates a DOM snapshot so you can fully interact with it and open the browser DevTools to inspect the HTML, CSS, etc.
|
||||
|
||||
<img width="1976" alt="Playwright Trace Viewer" src="https://user-images.githubusercontent.com/13063165/212869694-61368b16-f176-4083-bbc2-fc85b95131f0.png" />
|
||||
|
||||
|
||||
To learn more about traces check out our detailed guide on [Trace Viewer](/trace-viewer.md).
|
||||
|
||||
## What's next
|
||||
|
||||
- [Run tests on CI with GitHub Actions](/ci-intro.md)
|
||||
- [Learn more about Trace Viewer](/trace-viewer.md)
|
||||
|
||||
@ -5,7 +5,9 @@ title: "Trace viewer"
|
||||
|
||||
import LiteYouTube from '@site/src/components/LiteYouTube';
|
||||
|
||||
Playwright Trace Viewer is a GUI tool that helps you explore recorded Playwright traces after the script has ran. You can open traces [locally](#viewing-the-trace) or in your browser on [`trace.playwright.dev`](https://trace.playwright.dev).
|
||||
## Introduction
|
||||
|
||||
Playwright Trace Viewer is a GUI tool that helps you explore recorded Playwright traces after the script has ran. Traces are a great way for debugging your tests when they fail on CI. You can open traces [locally](#opening-the-trace) or in your browser on [trace.playwright.dev](https://trace.playwright.dev).
|
||||
|
||||
######
|
||||
* langs: js
|
||||
@ -15,73 +17,30 @@ Playwright Trace Viewer is a GUI tool that helps you explore recorded Playwright
|
||||
title="Viewing Playwright Traces"
|
||||
/>
|
||||
|
||||
######
|
||||
* langs: python, java, csharp
|
||||
## Trace Viewer features
|
||||
### Actions
|
||||
|
||||
<video width="100%" height="100%" controls muted>
|
||||
<source src="https://user-images.githubusercontent.com/13063165/219132713-17b9d75b-71e3-42c4-a43f-3f9e2e15f834.mp4" type="video/mp4" />
|
||||
Your browser does not support the video tag.
|
||||
</video>
|
||||
In the Actions tab you can see what locator was used for every action and how long each one took to run. Hover over each action of your test and visually see the change in the DOM snapshot. Go back and forward in time and click an action to inspect and debug. Use the Before and After tabs to visually see what happened before and after the action.
|
||||
|
||||
|
||||
## Viewing the trace
|
||||
|
||||
You can open the saved trace using Playwright CLI or in your browser on [`trace.playwright.dev`](https://trace.playwright.dev).
|
||||
|
||||
```bash js
|
||||
npx playwright show-trace trace.zip
|
||||
```
|
||||
|
||||
```bash java
|
||||
mvn exec:java -e -D exec.mainClass=com.microsoft.playwright.CLI -D exec.args="show-trace trace.zip"
|
||||
```
|
||||
|
||||
```bash python
|
||||
playwright show-trace trace.zip
|
||||
```
|
||||
|
||||
```bash csharp
|
||||
pwsh bin/Debug/netX/playwright.ps1 show-trace trace.zip
|
||||
```
|
||||
|
||||
## Actions
|
||||
|
||||
Once trace is opened, you will see the list of actions Playwright performed on the left hand side:
|
||||
|
||||
<img width="300" alt="Trace Viewer Actions Tab" src="https://user-images.githubusercontent.com/13063165/189152329-23e965de-581e-4a20-aed7-12cbf0583c92.png" />
|
||||
|
||||
<br/><br/>
|
||||
|
||||
|
||||
**Selecting each action reveals:**
|
||||
- action snapshots,
|
||||
- action log,
|
||||
- source code location,
|
||||
- network log for this action
|
||||
- action snapshots
|
||||
- action log
|
||||
- source code location
|
||||
|
||||
In the properties pane you will also see rendered DOM snapshots associated with each action.
|
||||
### Screenshots
|
||||
|
||||
## Metadata
|
||||
When tracing with the [`option: screenshots`] option turned on, each trace records a screencast and renders it as a film strip. You can hover over the film strip to see a magnified image of for each action and state which helps you easily find the action you want to inspect.
|
||||
|
||||
See metadata such as the time the action was performed, what browser engine was used, what the viewport was and if it was mobile and how many pages, actions and events were recorded.
|
||||
Double click on an action to see the time range for that action. You can use the slider in the timeline to increase the actions selected and these will be shown in the Actions tab and all console logs and network logs will be filtered to only show the logs for the actions selected.
|
||||
|
||||
<img width="296" alt="Trace Viewer Metadata Tab" src="https://user-images.githubusercontent.com/13063165/189155450-3865a993-cb45-439c-a02f-1ddfe60a1719.png" />
|
||||
|
||||
## Screenshots
|
||||
|
||||
When tracing with the [`option: screenshots`] option turned on, each trace records a screencast and renders it as a film strip:
|
||||
|
||||
<img width="1078" alt="Playwright Trace viewer > Film strip" src="https://user-images.githubusercontent.com/13063165/189174647-3e647d3d-6500-4be2-a237-9191f418eb12.png" />
|
||||
|
||||
<br/><br/>
|
||||
|
||||
You can hover over the film strip to see a magnified image of for each action and state which helps you easily find the action you want to inspect.
|
||||
|
||||
<img width="819" alt="Playwright Trace viewer magnify" src="https://user-images.githubusercontent.com/13063165/189174658-ba218339-2abc-4336-812e-526dbc4d2907.png" />
|
||||
|
||||
|
||||
|
||||
## Snapshots
|
||||
### Snapshots
|
||||
|
||||
When tracing with the [`option: snapshots`] option turned on, Playwright captures a set of complete DOM snapshots for each action. Depending on the type of the action, it will capture:
|
||||
When tracing with the [`option: snapshots`] option turned on (default), Playwright captures a set of complete DOM snapshots for each action. Depending on the type of the action, it will capture:
|
||||
|
||||
| Type | Description |
|
||||
|------|-------------|
|
||||
@ -93,40 +52,65 @@ When tracing with the [`option: snapshots`] option turned on, Playwright capture
|
||||
|
||||
Here is what the typical Action snapshot looks like:
|
||||
|
||||
<img width="634" alt="Playwright Trace Viewer > Snapshots" src="https://user-images.githubusercontent.com/13063165/189153245-0bdcad4d-16a3-4a71-90d8-71a8038c0720.png" />
|
||||
|
||||
|
||||
Notice how it highlights both, the DOM Node as well as the exact click position.
|
||||
|
||||
## Call
|
||||
### Source
|
||||
|
||||
See what action was called, the time and duration as well as parameters, return value and log.
|
||||
As you hover over each action of your test the line of code for that action is highlighted in the source panel.
|
||||
|
||||
<img width="321" alt="Trace Viewer Call Tab" src="https://user-images.githubusercontent.com/13063165/189155306-3c9275bc-d4cd-4e91-8b63-225832a66f51.png" />
|
||||
|
||||
|
||||
## Console
|
||||
### Call
|
||||
|
||||
See the console output for the action where you can see console logs or errors.
|
||||
The call tab shows you information about the action such as the time it took, what locator was used, if in strict mode and what key was used.
|
||||
|
||||
<img width="299" alt="Trace Viewer Console Tab" src="https://user-images.githubusercontent.com/13063165/189173154-41d438dd-9334-4664-8c77-ee85f5040061.png" />
|
||||
|
||||
|
||||
### Log
|
||||
|
||||
See a full log of your test to better understand what Playwright is doing behind the scenes such as scrolling into view, waiting for element to be visible, enabled and stable and performing actions such as click, fill, press etc.
|
||||
|
||||
|
||||
|
||||
### Errors
|
||||
|
||||
If your test fails you will see the error messages for each test in the Errors tab. The timeline will also show a red line highlighting where the error occurred. You can also click on the source tab to see on which line of the source code the error is.
|
||||
|
||||
|
||||
|
||||
### Console
|
||||
|
||||
See console logs from the browser as well as from your test. Different icons are displayed to show you if the console log came from the browser or from the test file.
|
||||
|
||||
|
||||
|
||||
|
||||
## Network
|
||||
### Network
|
||||
|
||||
See any network requests that were made during the action.
|
||||
The Network tab shows you all the network requests that were made during your test. You can sort by different types of requests, status code, method, request, content type, duration and size. Click on a request to see more information about it such as the request headers, response headers, request body and response body.
|
||||
|
||||
<img width="321" alt="Trace Viewer Network Tab" src="https://user-images.githubusercontent.com/13063165/189155367-e19f1c89-4e62-4258-970d-6a740e891711.png" />
|
||||
|
||||
|
||||
## Source
|
||||
### Metadata
|
||||
|
||||
See the source code for your entire test.
|
||||
Next to the Actions tab you will find the Metadata tab which will show you more information on your test such as the Browser, viewport size, test duration and more.
|
||||
|
||||
<img width="476" alt="Trace Viewer Source Tab" src="https://user-images.githubusercontent.com/13063165/189155239-c0f6045c-ab67-404a-8140-e98f78c58ae1.png" />
|
||||
|
||||
|
||||
### Attachments
|
||||
* langs: js
|
||||
|
||||
The "Attachments" tab allows you to explore attachments. If you're doing [visual regression testing](./test-snapshots.md), you'll be able to 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.
|
||||
|
||||
|
||||
|
||||
|
||||
## Recording a trace locally
|
||||
* langs: js
|
||||
|
||||
To record a trace during development mode set the `--trace` flag to `on` when running your tests.
|
||||
To record a trace during development mode set the `--trace` flag to `on` when running your tests. You can also use [UI Mode](./test-ui-mode.md) for a better developer experience.
|
||||
|
||||
```bash
|
||||
npx playwright test --trace on
|
||||
@ -179,7 +163,55 @@ You can also use `trace: 'retain-on-failure'` if you do not enable retries but s
|
||||
If you are not using Playwright as a Test Runner, use the [`property: BrowserContext.tracing`] API instead.
|
||||
|
||||
## Recording a trace
|
||||
* langs: java, csharp, python
|
||||
* langs: python
|
||||
|
||||
Traces can be recorded by running your tests with the `--tracing` flag.
|
||||
|
||||
```bash
|
||||
pytest --tracing on
|
||||
```
|
||||
Options for tracing are:
|
||||
- `on`: Record trace for each test
|
||||
- `off`: 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.
|
||||
|
||||
<details><summary>If you are not using Pytest, click here to learn how to record traces.
|
||||
</summary>
|
||||
|
||||
```python async
|
||||
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")
|
||||
```
|
||||
|
||||
```python sync
|
||||
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")
|
||||
```
|
||||
|
||||
</details>
|
||||
|
||||
## Recording a trace
|
||||
* langs: java, csharp
|
||||
|
||||
Traces can be recorded using the [`property: BrowserContext.tracing`] API as follows:
|
||||
|
||||
@ -201,32 +233,6 @@ context.tracing().stop(new Tracing.StopOptions()
|
||||
.setPath(Paths.get("trace.zip")));
|
||||
```
|
||||
|
||||
```python async
|
||||
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)
|
||||
|
||||
await page.goto("https://playwright.dev")
|
||||
|
||||
# Stop tracing and export it into a zip archive.
|
||||
await context.tracing.stop(path = "trace.zip")
|
||||
```
|
||||
|
||||
```python sync
|
||||
browser = chromium.launch()
|
||||
context = browser.new_context()
|
||||
|
||||
# Start tracing before creating / navigating a page.
|
||||
context.tracing.start(screenshots=True, snapshots=True, sources=True)
|
||||
|
||||
page.goto("https://playwright.dev")
|
||||
|
||||
# Stop tracing and export it into a zip archive.
|
||||
context.tracing.stop(path = "trace.zip")
|
||||
```
|
||||
|
||||
```csharp
|
||||
await using var browser = playwright.Chromium.LaunchAsync();
|
||||
await using var context = await browser.NewContextAsync();
|
||||
@ -251,12 +257,12 @@ await context.Tracing.StopAsync(new()
|
||||
|
||||
This will record the trace and place it into the file named `trace.zip`.
|
||||
|
||||
## Viewing the trace
|
||||
## Opening the trace
|
||||
|
||||
You can open the saved trace using Playwright CLI or in your browser on [`trace.playwright.dev`](https://trace.playwright.dev).
|
||||
You can open the saved trace using the Playwright CLI or in your browser on [`trace.playwright.dev`](https://trace.playwright.dev). Make sure to add the full path to where your `trace.zip` file is located. This should include the full path to your `trace.zip` file.
|
||||
|
||||
```bash js
|
||||
npx playwright show-trace trace.zip
|
||||
npx playwright show-trace path/to/trace.zip
|
||||
```
|
||||
|
||||
```bash java
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user