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: add videos for vscode guide (#20865)

Browse Source
This commit is contained in:
Debbie O'Brien 2023-02-13 19:43:05 +01:00 committed by GitHub
parent 997dfa9274
commit ecc2e4aa57
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 17 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -3,10 +3,17 @@ id: getting-started-vscode
title: "Getting started - VS Code"
---
import LiteYouTube from '@site/src/components/LiteYouTube';
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. Alternatively you can also get started and run your tests using the [CLI](./intro.md).
<LiteYouTube
id="Xz6lhEzgI5I"
title="Getting Started with Playwright in VS Code"
/>
## Installation
Install the [VS Code extension from the marketplace](https://marketplace.visualstudio.com/items?itemName=ms-playwright.playwright) or from the extensions tab in VS Code.
@ -60,6 +67,11 @@ Choose various or all profiles to run tests on multiple profiles. These profiles
With the VS Code extension you can debug your tests right in VS Code see error messages, create breakpoints and live debug your tests.
<LiteYouTube
id="tJF7UhA59Gc"
title="Debugging Playwright tests in VS Code"
/>
### Error Messages
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.
@ -102,6 +114,11 @@ To learn more about debugging, see [Debugging in Visual Studio Code](https://cod
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.
<LiteYouTube
id="LM4yqrOzmFE"
title="Generating Playwright tests in VS Code"
/>
### Record a New Test
To record a test click on the **Record new** button from the Testing sidebar. This will create a `test-1.spec.ts` file as well as open up a browser window. In the browser go to the URL you wish to test and start clicking around. Playwright will record your actions and generate a test for you. Once you are done recording click the **cancel** button or close the browser window. You can then inspect your `test-1.spec.ts` file and see your generated test.