Playwright Test for VS Code
This extension integrates Playwright Test into your VSCode workflow. Here is what it can do:
- Install Playwright Test
- Run tests with a single click
- Follow the execution line
- Debug step-by-step, explore selectors
- Record new tests
- Tune selectors
Requirements
This extension works with Playwright Test version v1.19+ or newer.
If you are looking for the old extension that supported Playwright v1.14+, switch to v0.0.9 of this extension manually. Having said that, we highly recommend using the latest version of Playwright Test!
Install Playwright Test
If you don't have the Playwright Test NPM package installed in your project, or if you are starting with a new testing project, "Install Playwright" action will help you get started.
Pick the browsers you'd like to use by default, don't worry, you'll be able to change them later to add or configure the browsers used.
The extension automatically detects if you have Playwright Test installed and loads the Playwright Test projects into Visual Studio Code. By default it will select the first project as a run profile and inside the test explorer you can change this behavior to run a single test in multiple or different browsers.
Run tests with a single click
You can use Tests sidebar to run a test or a group of tests with a single click.
Follow the execution line
While tests are running, execution line is highlighted, once the line has completed, step time is rendered as an editor decoration.
Debug step-by-step, explore selectors
Right click and start breakpoint debugging. Set a breakpoint, hover over a value. When your cursor is on some Playwright action or a locator, corresponding element (or elements) are highlighted in the browser.
Record new tests
Record new tests via performing the test actions in the browser.
Tune selectors
You can edit test source code to fine-tune selectors while on a breakpoint. A selector playground on every line of your test script!