---
id: vs-code-extension
title: "VS Code Extension"
---

Install the VS Code extension from the [marketplace](https://marketplace.visualstudio.com/items?itemName=ms-playwright.playwright).

### Run tests with a single click

You can use Tests sidebar to run a test or a group of tests with a single click.

![run_tests](https://user-images.githubusercontent.com/883973/152095110-46667a83-1f56-4964-8e99-094b880b70a0.gif)

### 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.

![execution_line](https://user-images.githubusercontent.com/883973/152095192-b85fb222-051a-40b2-8a6e-899d43d383c0.gif)

### 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.

![step_explore](https://user-images.githubusercontent.com/883973/152095220-b68a2a3c-8395-4252-9be8-5c6adf35eddf.gif)

### Record new tests

Record new tests via performing the test actions in the browser.

![recording](https://user-images.githubusercontent.com/883973/153694515-f25fdd12-7a7c-4fec-9695-36b19b1d6a6b.gif)

### 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!

![tune_selectors](https://user-images.githubusercontent.com/883973/152095248-7dda7d77-b8ee-42ab-8902-9cf462d1f334.gif)
