DEV Community

Cover image for I Built a VS Code Extension That Turns Playwright Into an Interactive REPL
Steve Zhang
Steve Zhang

Posted on

I Built a VS Code Extension That Turns Playwright Into an Interactive REPL

#playwright #vscode #testing #webdev

Playwright REPL VS Code Extension

Writing Playwright tests follows the same loop: write code, run it, wait for the browser, see it fail, tweak a locator, run again. Each cycle takes seconds. I wanted something more interactive — type a command, see the result immediately.

So I built a VS Code extension that adds an interactive REPL, visual element picker, assertion builder, and recorder on top of Playwright's Test Explorer. Everything shares one persistent browser — no restarts between runs.

The workflow: Record → Pick → Assert → Run

The extension adds three panels to VS Code's bottom bar: REPL, Locator, and Assert.

Launch Browser

Click "Launch Browser" in the Testing sidebar. Chrome opens and stays open between test runs — zero startup overhead on each run.

REPL Panel

Type keyword commands directly:

pw> goto https://demo.playwright.dev/todomvc/
pw> fill "What needs to be done?" Buy groceries
pw> press Enter
pw> snapshot
pw> verify text 1 item left
Enter fullscreen mode Exit fullscreen mode

Instead of writing page.locator('[placeholder="What needs to be done?"]').fill('Buy groceries'), you type fill "What needs to be done?" Buy groceries. Same Playwright engine, simpler syntax.

JavaScript works too:

pw> await page.title()
pw> page.locator('.todo-list li').count()
Enter fullscreen mode Exit fullscreen mode

You get command history (up/down arrows), inline screenshots, execution timing, and meta-commands like .clear and .history.

REPL Panel

Pick Locator

Click the pick arrow, hover over any element in the browser. The Locator panel shows:

  • The generated locator (editable — modify and re-test)
  • A highlight toggle to verify it targets the right element
  • The element's ARIA snapshot for accessibility inspection

No more inspecting the DOM to find the right selector.

Locator Panel

Assert Builder

This is my favorite feature. Pick an element, and the Assert Builder shows you Playwright matchers — smart-filtered by element type:

  • Input field → toHaveValue, toBeEnabled, toBeDisabled
  • Text element → toContainText, toHaveText, toBeVisible
  • Checkbox → toBeChecked
  • Any element → toBeAttached, toHaveAttribute, toHaveCount

13 matchers total. Click Verify to run the assertion against the live page. Green or red, instantly. Supports negation (not checkbox) and editable expected values.

No more guessing whether your assertion is correct before running the full test.

Assert Builder

Recorder

Hit Record, interact with the browser normally. Every click, fill, and navigation is captured as Playwright JavaScript — ready to paste into your test file.

Recorder

Run Tests

The Test Explorer runs your existing playwright.config.ts tests. With "Show Browser" enabled, browser-only tests take a fast path: the script is sent directly to the browser via the extension bridge, bypassing worker startup, TypeScript compilation, and fixture setup entirely.

Tests that need Node APIs (fs, net, etc.) fall back to the standard Playwright runner with CDP browser reuse — still fast, just not instant.

How it works

The extension launches Chrome with --remote-debugging-port and a companion Chrome extension (Dramaturg) sideloaded. The REPL, Test Explorer, Recorder, and Picker all share this single browser instance via CDP.

Each keyword command maps directly to a Playwright API call:

"click"     → locator.click()
"goto"      → page.goto()
"fill"      → locator.fill()
"snapshot"  → accessibility tree via CDP
Enter fullscreen mode Exit fullscreen mode

The keyword syntax is just a thin layer on top of the Playwright API — same engine, same locator resolution, same browser automation. No MCP, no daemon, no external process.

For the bridge fast path, the test script is bundled with esbuild and evaluated inside the browser context where page, expect, and all Playwright globals are already available. The result comes back via WebSocket. No test runner process involved at all.

Browser reuse: one browser for everything

This is the architectural decision that makes the whole thing work. Instead of launching a new browser per test run (the Playwright default), the extension keeps one browser open:

  • REPL sends commands to it
  • Test Explorer runs tests in it
  • Recorder captures interactions from it
  • Picker inspects elements in it

Same browser, same context, same cookies. Switch between REPL exploration and test execution seamlessly.

Built on Playwright Test for VS Code

The extension is built on top of Microsoft's official Playwright Test for VS Code extension (Apache 2.0). Both can coexist — you keep the official one installed and use this alongside it. Same playwright.config.ts, same test files, same Test Explorer interface.

The added layers (REPL, Picker, Assert Builder, Recorder) are what turns it from a test runner into an interactive development environment.

Getting started

  1. Install "Playwright REPL" from the VS Code Marketplace
  2. Open a project with a playwright.config.ts — or clone the demo repo to try it immediately
  3. Click Launch Browser in the Testing sidebar
  4. Open the REPL panel in the bottom bar and type goto https://example.com
  5. Use Pick Locator to inspect elements, Assert Builder to verify values, and Record to capture interactions

Requirements: VS Code 1.93+, Node.js 18+, @playwright/test 1.58+ in your project.

What's next

I'm focused on making the record → assert → test loop as tight as possible. If you have ideas or find bugs, the repo is at github.com/stevez/playwright-repl.

Links:

Top comments (0)