Playwright MCP Server for Browser Automation

Overview

The Playwright MCP Server is a Model Context Protocol (MCP) server that enables browser automation using Playwright. It allows Large Language Models (LLMs) to interact with web pages through structured accessibility snapshots, eliminating the need for screenshots or visually-tuned models.

Key Features

• Fast and lightweight: Utilizes Playwright's accessibility tree instead of pixel-based input.
• LLM-friendly: Operates purely on structured data, avoiding the need for vision models.
• Deterministic tool application: Reduces ambiguity common in screenshot-based approaches.

Use Cases

• Web navigation and form-filling
• Data extraction from structured content
• Automated testing driven by LLMs
• General-purpose browser interaction for agents

Installation

Example Configuration

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": ["@playwright/mcp@latest"]
    }
  }
}

Installation in VS Code

Install the Playwright MCP server in VS Code using one of these buttons:

Alternatively, use the VS Code CLI:

# For VS Code
code --add-mcp '{"name":"playwright","command":"npx","args":["@playwright/mcp@latest"]}'

# For VS Code Insiders
code-insiders --add-mcp '{"name":"playwright","command":"npx","args":["@playwright/mcp@latest"]}'

Configuration

User Data Directory

Playwright MCP stores browser profiles in the following locations:

• Windows: %USERPROFILE%\AppData\Local\ms-playwright\mcp-chrome-profile
• macOS: ~/Library/Caches/ms-playwright/mcp-chrome-profile
• Linux: ~/.cache/ms-playwright/mcp-chrome-profile

Running Headless Browser

To run the browser without a GUI:

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": ["@playwright/mcp@latest", "--headless"]
    }
  }
}

Running Headed Browser on Linux Without DISPLAY

When running on systems without a display, use the --port flag:

npx @playwright/mcp@latest --port 8931

Configure the MCP client to use the SSE endpoint:

{
  "mcpServers": {
    "playwright": {
      "url": "http://localhost:8931/sse"
    }
  }
}

Tool Modes

Snapshot Mode (Default)

• browser_navigate: Navigate to a URL.
• browser_go_back: Go back to the previous page.
• browser_go_forward: Go forward to the next page.
• browser_click: Click on a web page element.
• browser_hover: Hover over an element.
• browser_drag: Perform drag and drop.
• browser_type: Type text into an editable element.
• browser_select_option: Select an option in a dropdown.
• browser_choose_file: Upload files.
• browser_press_key: Press a key on the keyboard.
• browser_snapshot: Capture an accessibility snapshot.
• browser_save_as_pdf: Save the page as a PDF.
• browser_take_screenshot: Capture a screenshot.
• browser_wait: Wait for a specified time.
• browser_close: Close the page.

Vision Mode

To enable Vision Mode, add the --vision flag:

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": ["@playwright/mcp@latest", "--vision"]
    }
  }
}

Vision Mode tools include:

• browser_navigate: Navigate to a URL.
• browser_go_back: Go back to the previous page.
• browser_go_forward: Go forward to the next page.
• browser_screenshot: Capture a screenshot.
• browser_move_mouse: Move the mouse to specified coordinates.
• browser_click: Click at specified coordinates.
• browser_drag: Perform drag and drop.
• browser_type: Type text at specified coordinates.
• browser_press_key: Press a key on the keyboard.
• browser_choose_file: Upload files.
• browser_save_as_pdf: Save the page as a PDF.
• browser_wait: Wait for a specified time.
• browser_close: Close the page.

Programmatic Usage with Custom Transports

import { createServer } from '@playwright/mcp';

const server = createServer({
  launchOptions: { headless: true }
});
transport = new SSEServerTransport("/messages", res);
server.connect(transport);

About

The Playwright MCP server is licensed under the Apache-2.0 license. For more details, visit the npm package page.

Resources

• Readme
• Code of Conduct
• Security Policy