From ecc2e4aa577f7d00e19bc1d9f1fda38520dec13b Mon Sep 17 00:00:00 2001 From: Debbie O'Brien Date: Mon, 13 Feb 2023 19:43:05 +0100 Subject: [PATCH] docs: add videos for vscode guide (#20865) --- docs/src/getting-started-vscode-js.md | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) diff --git a/docs/src/getting-started-vscode-js.md b/docs/src/getting-started-vscode-js.md index fec54ee963..91be2814bd 100644 --- a/docs/src/getting-started-vscode-js.md +++ b/docs/src/getting-started-vscode-js.md @@ -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). + + ## 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. + + ### 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. + + ### 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.