VS Code
The VS Code extension is how I run tests while writing them. Click the play button next to a test, watch it execute in a browser window, and see errors inline without leaving the editor. The three features I use daily: Show Browser (see what's happening live), Pick Locator (find selectors by clicking), and Show Trace Viewer (debug failures).
Installing the extension
Search for "Playwright" in the VS Code Extensions panel and install the official one from Microsoft. After that, open Command Palette (Cmd+Shift+P) and run Test: Install Playwright — this walks you through browser selection and creates the initial playwright.config.ts.
After installation, click the Testing icon in the Activity Bar to see the Test Explorer — all your test files and describe blocks listed there.
Running tests — green play button
Click the play triangle next to any test, describe block, or file to run it. Results appear inline — green checkmark for pass, red X for fail, with time shown next to the name.
Show Browser in the sidebar opens a visible browser window while tests run — I keep this on when I'm writing tests, and turn it off for CI speed. To test against multiple browsers, check the boxes next to Chromium/Firefox/WebKit projects in the sidebar.
Debugging — breakpoints and live highlighting
Set a breakpoint by clicking in the gutter next to a line number. Then right-click the test → Debug Test. The test pauses at your breakpoint and you can inspect variables in the Debug panel.
With Show Browsers enabled, clicking on any locator in the test code highlights the matching element in the live browser window — great for verifying locators without running the test.
Show Trace Viewer in the sidebar: after a test run, the trace opens automatically showing the full timeline, DOM snapshots, and network tab.
Recording tests with Codegen
Record new opens a browser and records your clicks, fills, and navigation into test code automatically. Record at cursor adds actions at a specific point inside an existing test — useful for filling in missing steps.
Pick locator: click this button, then click any element in the browser window — Playwright suggests the best locator and copies it to clipboard. I use this constantly when I don't know the right selector for an element.
Project dependencies and global setup
If you use project dependencies (like a login setup project that runs before all others), those setup tests appear in the Test Explorer and can be run manually. Global setup and teardown can also be triggered from the Playwright sidebar.
If you have multiple playwright.config.ts files (like one for unit and one for e2e), switch between them using the gear icon in the sidebar.