docs: improve screenshots getting started (#17222)
This commit is contained in:
parent
5b61b46f31
commit
b4259d7527
|
|
@ -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
|
||||
|
||||
|
|
|
|||
|
|
@ -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).
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -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).
|
||||
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue