microsoft/playwright
1
1
Fork 0
mirror of https://github.com/microsoft/playwright.git synced 2024-12-15 14:11:50 +03:00
Code Issues Projects Releases Wiki Activity

docs: add VS Code extension (#12372)

Browse Source
This commit is contained in:
Marcus Felling 2022-03-30 09:31:35 -07:00 committed by GitHub
parent 7d734802fc
commit 705a994f18
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 48 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
docs/src/intro-js.md
View File

@ -24,9 +24,23 @@ Playwright Test was created specifically to accommodate the needs of the end-to-
Playwright has its own test runner for end-to-end tests, we call it Playwright Test.
### Using the VS Code extension
Install the VS Code extension from the [marketplace](https://marketplace.visualstudio.com/items?itemName=ms-playwright.playwright).
If you don't have the Playwright Test npm package installed in your project, or if you are starting with a new testing project, "Install Playwright" action will help you get started.
<img width="446" alt="Install Playwright" src="https://user-images.githubusercontent.com/883973/153693073-a83fc6e6-a17a-4011-b11e-2423f75ce584.png">
Pick the browsers you'd like to use by default, don't worry, you'll be able to change them later to add or configure the browsers used.
<img width="579" alt="Choose browsers" src="https://user-images.githubusercontent.com/883973/153693126-258646eb-0d4c-41eb-8c4a-7ac248384078.png">
The extension automatically detects if you have [Playwright Test] installed and loads the [Playwright Test] projects into Visual Studio Code. By default it will select the first project as a run profile and inside the test explorer you can change this behavior to run a single test in multiple or different browsers.
### Using init command
The easiest way to get started with Playwright Test is to run the init command.
Alternatively, you can scaffold your project using the init command.
```bash
# Run from your project's root directory
@ -285,6 +299,39 @@ test.describe('feature foo', () => {
});
```
## VS Code extension
Install the VS Code extension from the [marketplace](https://marketplace.visualstudio.com/items?itemName=ms-playwright.playwright).
### Run tests with a single click
You can use Tests sidebar to run a test or a group of tests with a single click.
![run_tests](https://user-images.githubusercontent.com/883973/152095110-46667a83-1f56-4964-8e99-094b880b70a0.gif)
### Follow the execution line
While tests are running, execution line is highlighted, once the line has completed, step time is rendered as an editor decoration.
![execution_line](https://user-images.githubusercontent.com/883973/152095192-b85fb222-051a-40b2-8a6e-899d43d383c0.gif)
### Debug step-by-step, explore selectors
Right click and start breakpoint debugging. Set a breakpoint, hover over a value. When your cursor is on some Playwright action or a locator, corresponding element (or elements) are highlighted in the browser.
![step_explore](https://user-images.githubusercontent.com/883973/152095220-b68a2a3c-8395-4252-9be8-5c6adf35eddf.gif)
### Record new tests
Record new tests via performing the test actions in the browser.
![recording](https://user-images.githubusercontent.com/883973/153694515-f25fdd12-7a7c-4fec-9695-36b19b1d6a6b.gif)
### Tune selectors
You can edit test source code to fine-tune selectors while on a breakpoint. A selector playground on every line of your test script!
![tune_selectors](https://user-images.githubusercontent.com/883973/152095248-7dda7d77-b8ee-42ab-8902-9cf462d1f334.gif)
## Command line