Filip/playwright
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

docs: improve getting started guide for vs code (#16097)

Browse source
This commit is contained in:
Debbie O'Brien 2022-08-01 19:15:28 +02:00 committed by GitHub
parent ecf55b01c6
commit 5f5906a962
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 44 additions and 31 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

75
docs/src/getting-started-vscode-js.md
View file

@ -11,7 +11,7 @@ Get started by installing Playwright and generating a test to see it in action.
Install the [VS Code extension from the marketplace](https://marketplace.visualstudio.com/items?itemName=ms-playwright.playwright).
<img width="535" alt="image" src="https://user-images.githubusercontent.com/13063165/177198887-de49ec12-a7a9-48c2-8d02-ad53ea312c91.png"></img>
<img width="535" alt="image" src="https://user-images.githubusercontent.com/13063165/182146928-b2a46ce5-3008-409c-be10-d2b255bd5e91.jpeg"></img>
Once installed, open the command panel and type:
@ -21,63 +21,76 @@ Install Playwright
<img width="538" alt="image" src="https://user-images.githubusercontent.com/13063165/177199115-ce90eb84-f12a-4b95-bd3a-17ff870fcec2.png"></img>
Select "Test: Install Playwright" and Choose the browsers you would like to run your tests on. These can be later configured in the [playwright.config file](./test-configuration.md) file. You can also choose if you would like to have a GitHub Actions setup to run your tests on CI.
Select "Test: Install Playwright" and Choose the browsers you would like to run your tests on. These can be later configured in the [playwright.config](./test-configuration.md) file. You can also choose if you would like to have a GitHub Actions setup to run your tests on CI.
## Generating Tests with Codegen
[CodeGen](./codegen.md) will auto generate your tests for you and is a great way to quickly get started. Click on the Testing icon in the left menu to open the testing sidebar.
### Recording a Test
To record a test click on the record icon. This will create a `test-1.spec.ts` file as well as open up a browser window.
<img width="810" alt="image" src="https://user-images.githubusercontent.com/13063165/177197869-40b32235-ae7c-4a6e-8b7e-e69aea17ea1b.png"></img>
### Generating a Test
As you interact with the page Codegen will generate the test for you in the newly created file in VS Code. When you hover over an element Playwright will highlight the element and show the [selector](./selectors.md) underneath it.
<img width="958" alt="image" src="https://user-images.githubusercontent.com/13063165/177199982-42dc316f-3438-48b1-a6a6-417be77be658.png"></img>
## Running Tests
You can run a single test by clicking the green triangle next to your test block to run your test. Playwright will run through each line of the test and when it finishes you will see a green tick next to your test block as well as the time it took to run the test.
<img width="813" alt="image" src="https://user-images.githubusercontent.com/13063165/177201109-e0a17553-88cc-496e-a717-9a60247db935.png"></img>
### View All Tests
View all tests in the testing sidebar and extend the tests by clicking on each test. Tests that have not been run will not have the green check next to them.
<img width="750" alt="image" src="https://user-images.githubusercontent.com/13063165/182153398-101bf809-deca-40f8-9ac7-314eab2ff119.png" />
<img width="812" alt="image" src="https://user-images.githubusercontent.com/13063165/177201231-f26e11da-2860-43fa-9a31-b04bba55d52e.png" />
### View and Run All Tests
### Run All Tests
View all tests in the testing sidebar and extend the tests by clicking on each test. Tests that have not been run will not have the green check next to them. Run all tests by clicking on the white triangle as you hover over the tests in the testing sidebar.
Run all tests by clicking on the white triangle as you hover over the tests in the testing sidebar.
<img width="755" alt="image" src="https://user-images.githubusercontent.com/13063165/182154055-6ff7af95-3787-475e-b0c0-8aa521aaa31b.png" />
<img width="252" alt="image" src="https://user-images.githubusercontent.com/13063165/178029941-d9555c43-0966-4699-8739-612a9664e604.png" />
### Run Tests on Specific Browsers
The VS Code test runner runs your tests on the default browser of Chrome. To run on other/multiple browsers click the play button's dropdown and choose the option of "Select Default Profile" and select the browsers you wish to run your tests on.
<img width="506" alt="image" src="https://user-images.githubusercontent.com/13063165/178030111-3c422349-a501-4190-9ad6-ec0bdc187b9e.png" />
<img width="753" alt="image" src="https://user-images.githubusercontent.com/13063165/182154251-89f8d4f1-a9c3-42bc-9659-7db6412e96fe.png" />
## Debugging Tests
With the VS Code extension you can debug your tests right in VS Code see error messages and create breakpoints. Click next to the line number so a red dot appears and then run the tests in debug mode by right clicking on the line next to the test you want to run. A browser window will open and the test will run and pause at where the breakpoint is set.
With the VS Code extension you can debug your tests right in VS Code see error messages, create breakpoints and live debug your tests.
<img width="1025" alt="image" src="https://user-images.githubusercontent.com/13063165/178027941-0d9d5f88-2426-43fb-b204-62a2add27415.png" />
### Error Messages
### Live Debugging with VS Code
If your test fails VS Code will show you error messages right in the editor showing what was expected, what was received as well as a complete call log.
Modify your test right in VS Code while debugging and Playwright Test will highlight the selector you are modifying in the browser. You can step through the tests, pause the test and rerun the tests from the menu in VS Code.
<img width="848" alt="image" src="https://user-images.githubusercontent.com/13063165/182155225-d91ec237-f69e-4ace-9a5f-a149800aba75.png" />
### Run in Debug Mode
To set a breakpoint click next to the line number where you want the breakpoint to be until a red dot appears. Run the tests in debug mode by right clicking on the line next to the test you want to run. A browser window will open and the test will run and pause at where the breakpoint is set.
<img width="847" alt="image" src="https://user-images.githubusercontent.com/13063165/182156149-f683f62d-9555-4ce2-93d2-e80de8087411.png" />
### Live Debugging
You can modify your test right in VS Code while debugging and Playwright will highlight the selector in the browser. This is a great way of seeing if the selector exits or if there is more than one result. You can step through the tests, pause the test and rerun the tests from the menu in VS Code.
<img width="858" alt="image" src="https://user-images.githubusercontent.com/13063165/182157241-c8da5eff-edbc-4ae1-80e3-8e42fa5fe659.png" />
## Generating Tests
CodeGen will auto generate your tests for you as you perform actions in the browser and is a great way to quickly get started. The viewport for the browser window is set to a specific width and height. See the [configuration guide](./test-configuration.md) to change the viewport or emulate different environments.
### Recording a Test
To record a test click on the record icon. This will create a `test-1.spec.ts` file as well as open up a browser window.
<img width="798" alt="image" src="https://user-images.githubusercontent.com/13063165/182149486-a30fbd3f-5e88-4ac2-b1df-4e33d4a893c7.png" />
### Selector Highlighting
As you interact with the page Codegen will generate the test for you in the newly created file in VS Code. When you hover over an element Playwright will highlight the element and show the [selector](./selectors.md) underneath it.
<img width="860" alt="image" src="https://user-images.githubusercontent.com/13063165/182151374-03273172-38cd-4f27-add5-cb3d3cdc7bcd.png" />
<img width="1044" alt="image" src="https://user-images.githubusercontent.com/13063165/178029249-e0a85f53-b8d4-451f-b3e5-df62b0c57929.png" />
## What's next
- [Write tests using web first assertions, page fixtures and locators](./writing-tests.md)
- [See a trace of your tests](./trace-viewer.md)
- [See test reports](./running-tests.md#test-reports)
- [See a trace of your tests](./trace-viewer.md)