docs: improve intro screenshots (#20148)
This commit is contained in:
Debbie O'Brien
GitHub
parent
57210147f3
commit
700145e627
|
|
@ -7,13 +7,15 @@ When installing Playwright you are given the option to add a [GitHub Actions](ht
|
|||
|
||||
**What you will learn:**
|
||||
|
||||
- [How to use GitHub Actions to run your tests](#github-actions)
|
||||
- [How to create a repo and push to GitHub](#create-a-repo-and-push-to-github)
|
||||
- [How to open the workflows](#opening-the-workflows)
|
||||
- [How to view the test logs](#viewing-test-logs)
|
||||
- [How to download the report from GitHub](#downloading-the-html-report)
|
||||
- [How to view the report](#viewing-the-html-report)
|
||||
- [How to view the trace](#viewing-the-trace)
|
||||
- [GitHub Actions](#github-actions)
|
||||
- [Create a Repo and Push to GitHub](#create-a-repo-and-push-to-github)
|
||||
- [Opening the Workflows](#opening-the-workflows)
|
||||
- [Viewing Test Logs](#viewing-test-logs)
|
||||
- [HTML Report](#html-report)
|
||||
- [Downloading the HTML Report](#downloading-the-html-report)
|
||||
- [Viewing the HTML Report](#viewing-the-html-report)
|
||||
- [Viewing the Trace](#viewing-the-trace)
|
||||
- [What's Next](#whats-next)
|
||||
|
||||
## GitHub Actions
|
||||
|
||||
|
|
@ -92,7 +94,7 @@ Locally opening the report will not work as expected as you need a web server in
|
|||
npx playwright show-report name-of-my-extracted-playwright-report
|
||||
```
|
||||
|
||||
<img width="752" alt="Viewing the HTML Report" src="https://user-images.githubusercontent.com/13063165/183437645-b47dd175-2e07-4ecc-a469-27d5b150b7ed.png" />
|
||||
<img width="1404" alt="Playwright HTML Report" src="https://user-images.githubusercontent.com/13063165/212745273-c19487d2-bc5e-483f-9f67-f9c9e5413ff4.png" />
|
||||
|
||||
To learn more about reports check out our detailed guide on [HTML Reporter](/test-reporters.md#html-reporter)
|
||||
|
||||
|
|
@ -100,14 +102,12 @@ To learn more about reports check out our detailed guide on [HTML Reporter](/tes
|
|||
|
||||
Once you have served the report using `npx playwright show-report`, click on the trace icon next to the test's file name as seen in the image above. You can then view the trace of your tests and inspect each action to try to find out why the tests are failing.
|
||||
|
||||
|
||||
<img width="1907" alt="Viewing the Trace" src="https://user-images.githubusercontent.com/13063165/183879653-d442e6b4-14f5-4d0e-99f3-9ba19f82c7cf.png"/>
|
||||
<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).
|
||||
|
||||
To learn more about running tests on CI check out our detailed guide on [Continuous Integration](/ci.md).
|
||||
|
||||
|
||||
## What's Next
|
||||
|
||||
- [Learn how to use Locators](./locators.md)
|
||||
|
|
|
|||
|
|
@ -94,8 +94,7 @@ Once your test has finished running a [HTML Reporter](./test-reporters.md#html-r
|
|||
npx playwright show-report
|
||||
```
|
||||
|
||||
<img width="739" alt="HTML Reporter" src="https://user-images.githubusercontent.com/13063165/181803518-1f554349-f72a-4ad3-a7aa-4d3d1b4cad13.png" />
|
||||
|
||||
<img width="1392" alt="HTML Reporter" src="https://user-images.githubusercontent.com/13063165/212743312-edf1e8ed-3fc2-48aa-9c93-24ae3e36504d.png" />
|
||||
|
||||
## What's next
|
||||
|
||||
|
|
|
|||
|
|
@ -79,28 +79,41 @@ Since Playwright runs in Node.js, you can debug it with your debugger of choice
|
|||
- Debugging a test from the line number where the `test(..` is defined:
|
||||
|
||||
```bash
|
||||
npx playwright test example.spec.ts:42 --debug
|
||||
npx playwright test example.spec.ts:10 --debug
|
||||
```
|
||||
|
||||
<img width="1350" alt="Debugging Tests with the Playwright inspector" src="https://user-images.githubusercontent.com/13063165/197800771-50cb2f39-2345-4153-b4ed-de9fe63ba29b.png" />
|
||||
|
||||
<img width="1394" alt="Debugging Tests with the Playwright inspector" src="https://user-images.githubusercontent.com/13063165/212744309-4b7e431b-de2a-45ca-b287-6360124adc33.png" />
|
||||
|
||||
Check out our [debugging guide](./debug.md) to learn more about the [Playwright Inspector](./debug.md#playwright-inspector) as well as debugging with [Browser Developer tools](./debug.md#browser-developer-tools).
|
||||
|
||||
|
||||
## Test Reports
|
||||
|
||||
The [HTML Reporter](././test-reporters.md#html-reporter) shows you a full report of your tests allowing you to filter the report by browsers, passed tests, failed tests, skipped tests and flaky tests. By default, the HTML report is opened automatically if some of the tests failed.
|
||||
The [HTML Reporter](./test-reporters.md#html-reporter) is a built in reporter which shows you a full report of all your tests that have been ran. It shows the name of the test as well as the file name with the line number of the test next to it as well as how long each test took to run and what browsers they were ran on. You can filter the report by passed tests, failed tests, skipped tests or flaky tests. You can also filter by browsers by clicking on the name of the browser next to a test. You can also search for a particular test or browser using the search bar.
|
||||
|
||||
To open the report first run your tests:
|
||||
|
||||
```bash
|
||||
npx playwright test
|
||||
```
|
||||
|
||||
By default, the HTML report is opened automatically if some of the tests failed. If you need to open the report manually you can use the following command:
|
||||
|
||||
```bash
|
||||
npx playwright show-report
|
||||
```
|
||||
|
||||
<img width="963" alt="HTML Report > Test Reports view" src="https://user-images.githubusercontent.com/13063165/189140120-71a6bc41-f921-40be-a7a4-61d44da33b20.png" />
|
||||
<img width="1392" alt="HTML Report > Test Reports view" src="https://user-images.githubusercontent.com/13063165/212744633-826cce1b-fab1-455a-8ca7-68867c4d4698.png" />
|
||||
|
||||
You can click on each test and explore the tests errors as well as each step of the test.
|
||||
You can open a detailed view of each test by clicking on the test name. You can then explore the tests errors as well as expand each step of the test to see the code for that step and how long each step took to run.
|
||||
|
||||
<img width="955" alt="HTML Reporter > Test Reports detailed view" src="https://user-images.githubusercontent.com/13063165/189140263-0e3ac2d9-4e75-40c8-b29c-58323c8be433.png" />
|
||||
<img width="1247" alt="HTML Reporter > Test Reports detailed view" src="https://user-images.githubusercontent.com/13063165/212868173-2bf680bb-274a-4aec-932b-d07255adcc74.png" />
|
||||
|
||||
|
||||
For projects created with `create-playwright` the HTML report is enabled by default. If you have a config which does not use the HTML report or running the show-report command yields to no reports, you can run it with `--reporter=html`.
|
||||
|
||||
```bash
|
||||
npx playwright show-report --reporter=html
|
||||
```
|
||||
|
||||
## What's Next
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue