docs: improve screenshots getting started (#17222)

This commit is contained in:
Debbie O'Brien 2022-09-09 20:32:40 +02:00 committed by GitHub
parent 5b61b46f31
commit b4259d7527
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 7 additions and 21 deletions

View file

@ -96,11 +96,11 @@ The [HTML Reporter](././test-reporters.md#html-reporter) shows you a full report
npx playwright show-report
```
<img width="739" alt="HTML Report > Test Reports view" src="https://user-images.githubusercontent.com/13063165/181803518-1f554349-f72a-4ad3-a7aa-4d3d1b4cad13.png" />
<img width="963" alt="HTML Report > Test Reports view" src="https://user-images.githubusercontent.com/13063165/189140120-71a6bc41-f921-40be-a7a4-61d44da33b20.png" />
You can click on each test and explore the tests errors as well as each step of the test.
<img width="739" alt="HTML Reporter > Test Reports detailed view" src="https://user-images.githubusercontent.com/13063165/181814327-a597109f-6f24-44a1-b47c-0de9dc7f5912.png" />
<img width="955" alt="HTML Reporter > Test Reports detailed view" src="https://user-images.githubusercontent.com/13063165/189140263-0e3ac2d9-4e75-40c8-b29c-58323c8be433.png" />
## What's Next

View file

@ -103,18 +103,10 @@ playwright show-trace trace.zip
```bash csharp
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.
<img width="941" alt="image" src="https://user-images.githubusercontent.com/13063165/182618490-3340cfbf-7ac9-46e2-8157-6a8ce52dca28.png" />
<img width="1386" alt="Playwright Trace Viewer" src="https://user-images.githubusercontent.com/13063165/189136442-4fc6d7a3-6f0c-4a5f-9d36-2650018b018a.png" />
To learn more check out our detailed guide on [Trace Viewer](/trace-viewer.md).

View file

@ -65,11 +65,11 @@ npx playwright show-report
In the HTML report click on the trace icon to directly open the trace file.
<img width="744" alt="image" src="https://user-images.githubusercontent.com/13063165/182853447-e26f4d39-b4e2-4d9b-a890-ac1838c088e1.png" />
<img width="960" alt="Playwright HTML Report" src="https://user-images.githubusercontent.com/13063165/189138532-bbb95411-3167-4f5f-985a-8886082fa7ab.png" />
You can also click on the test file and then click the 'Retry #1' tab which will show you a traces section in your html report. Here you can open the trace by clicking on the screenshot.
You can also click on the test file and scroll down to the `'Traces'` tab and open the trace by clicking on the trace screenshot.
<img width="749" alt="image" src="https://user-images.githubusercontent.com/13063165/183130559-16a83a39-2f1d-4560-850c-d025fad789b3.png" />
<img width="978" alt="Playwright HTML Report" src="https://user-images.githubusercontent.com/13063165/189139117-8c3a9979-0289-4ae9-8a76-cb8ff1e76539.png" />
To learn more about reporters check out our detailed guide on reporters including the [HTML Reporter](/test-reporters.md#html-reporter).
@ -78,12 +78,6 @@ To learn more about reporters check out our detailed guide on reporters includin
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="941" alt="image" src="https://user-images.githubusercontent.com/13063165/182618490-3340cfbf-7ac9-46e2-8157-6a8ce52dca28.png" />
<img width="1386" alt="Playwright Trace Viewer" src="https://user-images.githubusercontent.com/13063165/189136442-4fc6d7a3-6f0c-4a5f-9d36-2650018b018a.png" />
To learn more about traces check out our detailed guide on [Trace Viewer](/trace-viewer.md).