Even Better Playwright

You get a sandboxed Playwright-based MCP server that lets you automate browsers with a full Playwright API, while keeping DOM structure compact, assigning stable element refs, and offering DevTools-like debugging capabilities. This enables practical, repeatable browser automation workflows inside your MCP client setup.

How to use

Configure your MCP client to talk to the Playwright MCP server, then use the snapshot and execute tools to discover elements and drive actions. You obtain a compressed page structure with stable refs like [ref=e1], which you refer to with the shorthand $('e1') in your code. After navigation, refresh the refs by taking a new snapshot.

Practical usage pattern:

• Get the page structure to identify interactive elements and their refs.
• Use the execute tool to perform actions like click, fill, or navigate using the Playwright API.
• When you navigate, call the snapshot tool again to refresh refs because they can become stale.

Advanced capabilities let you inspect the page, set breakpoints, and inspect styles or component sources via the embedded DevTools-like features. You can also capture screenshots with optional visual labels that overlay ref markers for easier interaction.

How to install

# Prerequisites
- Node.js (>= 14.x) with npm

# Install globally so you can run the server from any directory
npm install -g even-better-playwright-mcp

# Or run directly with npx without a global install
npx even-better-playwright-mcp

Configuration and usage notes

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": ["even-better-playwright-mcp"]
    }
  }
}

In your MCP client settings, reference the server by the key you provide (here, playwright). You initialize the server by running the command shown above, and your client will connect using the provided args. No additional URL is required for this local MCP server configuration.

Examples and common workflows

# Basic usage (launches Chromium in headed mode)
even-better-playwright-mcp

# Use Firefox in headless mode
even-better-playwright-mcp --browser firefox --headless

# Connect to an existing Chrome instance via CDP (if supported)
even-better-playwright-mcp --cdp-endpoint ws://localhost:9222

# Use a persistent browser profile
even-better-playwright-mcp --user-data-dir ./browser-profile

Notes on references and snapshots

• Refs are generated during snapshot and are usable in the execute tool as $('e1'), $('e2'), etc.
• Refs become stale after navigation, so always refresh with a new snapshot when you navigate or reload a page.

Security and sandboxing

The Playwright MCP server runs within a sandboxed VM with a scoped filesystem and a safe module allowlist. Only approved modules can be required in browser_execute code, protecting your environment while enabling powerful automation.

Available tools

snapshot

Get compressed page structure with ref IDs for element targeting and a shorthand locator $('e#') to interact with elements.

browser_execute

Execute Playwright code with full API access inside a sandboxed VM, exposing page, context, state, and a ref-based locator $('e#').

screenshot

Capture page images with optional ref labeling overlays to identify elements visually.

browser_search_snapshot

Search the last captured snapshot using regex patterns to locate elements or content quickly.