Playwright E2E Explorer
Discover, run, and debug Playwright end-to-end tests from VS Code's native Testing tab.
Features
- Native Testing Tab — Tests appear in VS Code's built-in Testing sidebar alongside your other test frameworks
- Project Support — Respects
projects in playwright.config.ts (smoke, chromium, auth-tests, etc.)
- Run & Debug — Run/Debug profiles with proper Playwright CLI integration
- CodeLens — Run/Debug buttons above
test() and test.describe() in your spec files
- Inline Errors — Failed test errors shown inline in the editor
- Status Bar — Live run progress and results summary
- Rerun Support — Rerun Last, Rerun Failed, Debug Last commands
- HTML Reports — One-click to open Playwright's HTML report
- File Watching — Auto-refresh test tree when spec files change
- Dev Mode — Toggle
PLAYWRIGHT_DEV=1 for dev server
- Headed Mode — Toggle
--headed for visible browser
- Multi-Root — Supports workspaces with multiple
playwright.config.ts files
Quick Start
- Install the extension
- Open a workspace containing
playwright.config.ts
- Tests appear automatically in the Testing tab (beaker icon)
- Click Run/Debug buttons or use CodeLens in spec files
Commands
| Command |
Description |
| Refresh Tests |
Re-discover all tests |
| Run Current File |
Run the active spec file |
| Run Project... |
Pick a project and run all its tests |
| Select Default Project |
Set the default project for runs |
| Open HTML Report |
Open Playwright's HTML report in browser |
| Toggle Dev Mode |
Enable/disable PLAYWRIGHT_DEV=1 |
| Toggle Headed Mode |
Enable/disable --headed |
| Rerun Last Run |
Repeat the last test run |
| Rerun Failed Tests |
Re-run only tests that failed |
| Debug Last Run |
Debug the last test run |
| Clear Test Results |
Clear all test result decorations |
| Show Output |
Open the Playwright E2E output channel |
| Open Playwright Config |
Open the config file in editor |
Keyboard Shortcuts
| Shortcut |
Command |
Ctrl+; Ctrl+L |
Rerun Last Run |
Ctrl+; Ctrl+F |
Rerun Failed Tests |
Settings
| Setting |
Default |
Description |
playwrightE2E.configPath |
playwright.config.ts |
Path to Playwright config file |
playwrightE2E.defaultProject |
"" |
Default project to run (empty = all) |
playwrightE2E.environmentVariables |
{} |
Extra environment variables |
playwrightE2E.headed |
false |
Run in headed browser mode |
playwrightE2E.devMode |
false |
Set PLAYWRIGHT_DEV=1 |
playwrightE2E.workers |
null |
Number of parallel workers |
playwrightE2E.retries |
null |
Number of retries for failed tests |
playwrightE2E.showSkippedTests |
true |
Show skipped tests in tree |
playwrightE2E.reportPath |
"" |
Custom HTML report directory path |
playwrightE2E.packageManager |
npx |
Package manager: npx, pnpm, or yarn |
playwrightE2E.autoRefresh |
true |
Auto-refresh tree on file changes |
playwrightE2E.useAuthoritativeList |
false |
Use playwright --list instead of regex |
Supported Test Syntax
The extension parses the following Playwright test constructs:
test("title", async ({ page }) => { ... })
test.only("title", ...)
test.skip("title", ...)
test.fixme("title", ...)
test.fail("title", ...)
test.slow("title", ...)
test.describe("title", () => { ... })
test.describe.parallel("title", () => { ... })
test.describe.serial("title", () => { ... })
test.describe.skip("title", () => { ... })
Tags are also supported:
test("title", { tag: "@smoke" }, async ({ page }) => { ... })
test("title", { tag: ["@smoke", "@fast"] }, async ({ page }) => { ... })
Known Limitations
- Dynamic/parameterized tests — Tests generated in loops are only discovered via
playwright --list, not regex scanning
- Template literal titles —
test(`title ${var}`, ...) is not parsed by regex
- Re-exported test objects —
const myTest = test.extend(...) then myTest("title", ...) is not parsed
- Non-TypeScript tests — Only
.spec.ts files are scanned (not .spec.js)
How It Works
- Discovery: Parses
playwright.config.ts to find projects and their test directories, then scans *.spec.ts files using regex to extract test() and test.describe() blocks
- Execution: Runs tests via
npx playwright test (or pnpm/yarn) with --reporter=json to a temp file for structured results
- Results: Maps JSON reporter output back to test items in the tree, showing pass/fail/skip status and inline errors
