YouTip

Playwright development is recommended to use **(#)**, as it provides strong support for JavaScript/TypeScript, debuggers, and extensions. ## Installing VS Code * Go to the (https://code.visualstudio.com/) to download and install. * After installation, it's suggested to also install the **Chinese language pack** (search `Chinese (Simplified)` in the extension marketplace). For more information on VS Code, refer to: [ * * * ## Essential Extensions In the Extensions panel of VS Code, search for and install the following plugins: **Playwright Test for VSCode** * Officially developed by Playwright * Features: running/debugging test cases, viewing test reports, recording scripts, generating traces * Extension ID: `ms-playwright.playwright` !(#) **JavaScript / TypeScript Support** (built-in to VS Code, usually no need to install separately) Optional recommendations: * **ESLint** (ensures consistent coding style) * **Prettier - Code formatter** (one-click code formatting) * * * ## Initializing a Playwright Project If you haven't initialized a project yet, first run: npm init playwright@lates The VS Code plugin will automatically recognize the **playwright.config.ts/js** file in your project and enable the testing view. * * * ## VS Code Settings Open VS Code settings (shortcut `Ctrl+,` or `Cmd+,`) and confirm the following configurations: * **Auto-format on save** Search for `format on save` → check `Editor: Format On Save` * **Default terminal shell** (choose according to your system) Windows recommends `PowerShell` or `Git Bash` macOS/Linux can use the default setting * * * ## Debug Configuration (`launch.json`) Click **Run and Debug** on the left side of VS Code → create a configuration, select **Node.js**, generate `.vscode/launch.json`, and add a Playwright debugging configuration, for example: ```json { "version": "0.2.0", "configurations": [ { "name": "Debug Playwright Test", "type": "node", "request": "launch", "program": "${workspaceFolder}/node_modules/.bin/playwright", "args": ["test", "--project=chromium", "--headed"], "console": "integratedTerminal", "internalConsoleOptions": "neverOpen" } ] } This way, you can press `F5` in VS Code to start debugging, and Playwright will run in headless mode, making it easy to observe. * * * ## Using the Playwright Plugin Panel After installing the **Playwright Test for VSCode** plugin, a "Playwright" icon will appear on the left side: * You can directly see the test files and test case list in your project * Click the ▶ button to the right of a test case to run it * Right-click and select **Debug Test** to perform step-by-step debugging * For failed tests, you can directly view the **trace file** * * * ## Common Commands Run the following commands in the VS Code terminal: npx playwright test # Run all tests npx playwright test login.spec.js # Run a specific file npx playwright codegen # Start the recording tool (automatically generates scripts) npx playwright show-report # Open the test report * * * ## Testing Sidebar After installing the extension, a Testing icon (laboratory beaker icon) will appear on the left side of VS Code. Clicking into the Testing Sidebar allows you to view the list of all test files. Here, you can: * Expand files to view each `describe` and `test` * Click the play button to run individual tests or all tests * View the real-time test execution status (green for passed, red for failed, gray for skipped) * Right-click on a test to access more options (debugging, jump to definition, etc.) * * * ## Debug Mode The VS Code extension lets you debug Playwright tests just like regular code: ### Setting Breakpoints Click on the left side of a line number to add a red breakpoint. Right-click next to the breakpoint and select Debug Test; the test will pause at that point. ### Debugging Features * Step over (F10), step into (F11), step out (Shift+F11) * View current variable values * View call stack * Execute expressions in the debug console * * * ## Live Debugging Live Debugging is a unique feature of the VS Code extension. When you enable the Show Browser option while running tests, clicking a Locator in the code will highlight the corresponding page element in the browser window. If the Locator matches multiple elements, Playwright will highlight all matching items simultaneously. You can directly edit Locators in the code, and the browser will display the updated match results in real time. * * * ## Pick Locator Click the Pick Locator button at the bottom of the Testing Sidebar. In the pop-up browser, click the target element, and the best locator will appear in the Pick Locator box in VS Code. Press Enter to copy it to the clipboard, then paste it into your test code. Playwright will automatically choose the most stable and semantic locating method (prioritizing role > text > testid). * * * ## Record New Test Click the Record new button in the Testing Sidebar. Playwright will open a browser window, and all your actions within it (navigation, clicks, inputs) will be recorded. You can also generate assertions via the toolbar: * Assert visibility —— assert that an element is visible * Assert text —— assert that an element contains specific text * Assert value —— assert that an element has a certain value After recording, close the browser, and the generated code will automatically appear in the `test-1.spec.ts` file. * * * ## Record at Cursor Place the cursor where you want to insert an action in existing test code, then click Record at cursor. Playwright will record subsequent actions in the browser and insert the generated code at the cursor position. This feature is especially useful for adding steps to existing tests.