VS Code Setup for Playwright: Extensions, Settings, and Productivity Tips

The official Playwright extension for VS Code adds a "Pick locator" button that resolves the right locator by clicking an element in a running browser, which eliminates most of the time spent writing selectors manually. It also wires the debugger so you can pause on a breakpoint and type await page.title() or await page.locator('...').isVisible() directly in the Debug Console without re-running the test. This article covers the five extensions worth installing, the VS Code settings that reduce friction, and the daily debugging and test-recording workflows.

Essential Extensions

1. Playwright Test for VS Code (Official)

This is the one non-negotiable extension. It adds:

• Test Explorer sidebar: See all your tests organized by file, run them with one click
• Run individual tests: Click the play button next to any test(...) block
• Debug tests: Set breakpoints, step through code, inspect page state
• Record new tests: Launch Playwright Codegen from inside VS Code
• Show browser: Run tests with the browser visible
• Pick locator: Click an element in the browser, get the right Playwright locator

After installing, look for the Playwright icon in the left sidebar (looks like a theater mask). Your tests should appear automatically if you have a playwright.config.ts in your project root.

1. Open the Testing panel (Ctrl+Shift+P → "Show Testing")

2. Expand your test files

3. Click ▶ to run, or the bug icon to debug

2. ESLint

Highlights code problems as you type. For TypeScript/Playwright projects, configure it with:

npm install -D eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin

Create .eslintrc.json:

{
  "parser": "@typescript-eslint/parser",
  "plugins": ["@typescript-eslint"],
  "extends": ["eslint:recommended", "plugin:@typescript-eslint/recommended"],
  "rules": {
    "no-unused-vars": "warn",
    "@typescript-eslint/no-explicit-any": "warn"
  }
}

3. Prettier

Auto-formats your code on save. Essential for consistent code style. Install:

npm install -D prettier

Create .prettierrc:

{
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "es5",
  "printWidth": 100
}

In VS Code settings, enable format on save:

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}

4. GitLens

Shows who last changed each line, full git history, branch comparison. Not Playwright-specific but invaluable for any team project. Especially useful when debugging: "who changed this test and why?"

5. Error Lens

Shows TypeScript/ESLint errors inline on the line where they occur, instead of just in the Problems panel. Catches mistakes faster.

VS Code Settings for Playwright Projects

Open Settings JSON (Ctrl+Shift+P → "Open User Settings JSON") and add:

{
  // Format on save
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  
  // TypeScript
  "typescript.tsdk": "node_modules/typescript/lib",
  "typescript.enablePromptUseWorkspaceTsdk": true,
  
  // Auto-imports
  "typescript.suggest.autoImports": true,
  
  // Cleaner editor
  "editor.minimap.enabled": false,
  "editor.wordWrap": "on",
  "editor.rulers": [100],
  
  // File associations
  "files.associations": {
    "*.spec.ts": "typescript"
  },
  
  // Terminal
  "terminal.integrated.defaultProfile.windows": "Git Bash",
  
  // Explorer
  "explorer.confirmDelete": false
}

Playwright-Specific VS Code Workflows

Running tests from the editor

You have three ways to run a test:

1. Test Explorer panel: Full test list, run all, run by file, run by tag

2. Green play button: Hover over a test( line, click the ▶ button

3. Terminal: npx playwright test (use flags like --headed, --debug)

The Test Explorer is best for running the full suite. The inline play button is best for running a single test quickly.

Debugging a failing test

1. Set a breakpoint on the line that's failing (click the left gutter)

2. In Test Explorer, right-click the test → "Debug Test"

3. VS Code pauses at your breakpoint

4. In the Debug Console, you can type Playwright commands:

- await page.title() — see the current page title

- await page.locator('[data-testid="btn"]').isVisible() — check element state

- page.url() — see where Playwright is

This is much more powerful than adding console.log and re-running.

Using Playwright Inspector from VS Code

1. Right-click a test → "Debug Test"

2. OR run PWDEBUG=1 npx playwright test in the terminal

The Playwright Inspector opens alongside your browser. You can:

• Step through actions one by one
• See what locator resolves to in real time
• Pick new locators by clicking elements

Recording a new test

1. In the Playwright extension sidebar, click "Record new"

2. A browser opens

3. Do the actions you want to automate

4. Click "Copy" to get the generated code

5. Paste into your test file, then refine the selectors

Good for getting a starting point, but always refine generated selectors to use data-testid attributes.

Project Structure in VS Code

A clean Playwright project layout that VS Code handles well:

my-playwright-project/
├── tests/
│   ├── e2e/
│   │   ├── login.spec.ts
│   │   ├── checkout.spec.ts
│   ├── api/
│   │   ├── users-api.spec.ts
│   ├── fixtures/
│   │   ├── auth.fixture.ts
│   │   └── index.ts
├── pages/
│   ├── LoginPage.ts
│   ├── DashboardPage.ts
├── playwright.config.ts
├── tsconfig.json
├── package.json
└── .env

VS Code's explorer collapses folders well, so this structure is easy to navigate.

Keyboard Shortcuts Worth Knowing

| Shortcut | What it does |

|----------|-------------|

| Ctrl+Shift+P | Command palette (search any command) |

| Ctrl+P | Quick file open |

| Ctrl+Shift+F | Search across all files |

| Ctrl+ | Toggle terminal |

| F2 | Rename symbol (rename a variable everywhere) |

| F12 | Go to definition |

| Alt+F12 | Peek definition (inline, don't navigate away) |

| Ctrl+D | Select next occurrence of selection |

| Alt+Shift+F | Format document |

| Ctrl+/ | Toggle line comment |

The most important for Playwright debugging: F5 starts debugging, F10 steps over, F11 steps into, F5 again continues to next breakpoint.

.env File Handling

Never commit secrets. Create .env for local environment variables:

BASE_URL=https://staging.yourapp.com
ADMIN_EMAIL=admin@test.com
ADMIN_PASSWORD=TestAdmin1
API_KEY=your-test-api-key

Add to .gitignore:

.env
.env.local
.env.*.local

In Playwright config:

import { defineConfig } from '@playwright/test';
import dotenv from 'dotenv';

dotenv.config();

export default defineConfig({
  use: {
    baseURL: process.env.BASE_URL || 'http://localhost:3000',
  },
});

Install dotenv: npm install -D dotenv

Tips for Staying Productive

The right VS Code setup removes friction from daily test automation work. Install the Playwright extension first — everything else can follow incrementally as you discover what you need.