yujunjun/playwright
1
0
Fork 0
mirror of https://github.com/microsoft/playwright.git synced 2025-06-26 21:40:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

docs(node): intro vs code improvements (#15761)

Browse Source
This commit is contained in:
Debbie O'Brien 2022-07-19 09:04:04 +02:00 committed by GitHub
parent 184b6baa7a
commit d34830c96f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 30 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
docs/src/getting-started-vscode-js.md
View File

@ -5,7 +5,7 @@ title: "Getting started - VS Code"
Playwright Test was created specifically to accommodate the needs of end-to-end testing. Playwright supports all modern rendering engines including Chromium, WebKit, and Firefox. Test on Windows, Linux, and macOS, locally or on CI, headless or headed with native mobile emulation of Google Chrome for Android and Mobile Safari.
Get started by installing Playwright and generating a test to see it in action.
Get started by installing Playwright and generating a test to see it in action. Alternatively you can also get started and run your tests using the [CLI](./intro.md).
## Installation
@ -13,19 +13,30 @@ Install the [VS Code extension from the marketplace](https://marketplace.visuals
<img width="535" alt="image" src="https://user-images.githubusercontent.com/13063165/177198887-de49ec12-a7a9-48c2-8d02-ad53ea312c91.png"></img>
Once installed, open the command panel and type "Install Playwright" and select "Test: Install Playwright". 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.
Once installed, open the command panel and type:
```bash
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.
## 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. 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. As you record your user actions your test code will be generated in the newly created file.
[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>
As you hover over an element Playwright will highlight the element with the [selector](./selectors.md) shown underneath it. If you click the element [CodeGen](./codegen.md) will generate the test for you in the test file that was created.
### 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>
@ -35,14 +46,20 @@ You can run a single test by clicking the green triangle next to your test block
<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="812" alt="image" src="https://user-images.githubusercontent.com/13063165/177201231-f26e11da-2860-43fa-9a31-b04bba55d52e.png" />
### Run All Tests
Run all tests by clicking on the white triangle as you hover over the tests in the testing sidebar.
<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" />
@ -53,7 +70,14 @@ With the VS Code extension you can debug your tests right in VS Code see error m
<img width="1025" alt="image" src="https://user-images.githubusercontent.com/13063165/178027941-0d9d5f88-2426-43fb-b204-62a2add27415.png" />
Modify your test right in VS Code while debugging and Playwright 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.
### Live Debugging with VS Code
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="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)

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

@ -5,7 +5,7 @@ title: "Installation"
Playwright Test was created specifically to accommodate the needs of end-to-end testing. Playwright supports all modern rendering engines including Chromium, WebKit, and Firefox. Test on Windows, Linux, and macOS, locally or on CI, headless or headed with native mobile emulation of Google Chrome for Android and Mobile Safari.
Get started by installing Playwright and running the example test to see it in action.
Get started by installing Playwright and running the example test to see it in action. Alternatively you can also get started and run your tests using the [VS Code Extension](./getting-started-vscode.md).
<Tabs
defaultValue="npm"