Playwright Browser Automation MCP server

Playwright MCP is a server that enables Language Learning Models (LLMs) to interact with web browsers through structured accessibility snapshots. It uses Playwright to provide browser automation capabilities without requiring screenshots or visual processing, making it fast, lightweight, and deterministic for LLM interactions with web pages.

Installation

To use the Playwright MCP server, you'll need:

• Node.js 18 or newer
• An MCP client (VS Code, Cursor, Windsurf, Claude Desktop, etc.)

Basic Installation

The most common way to install Playwright MCP is using npm with your MCP client:

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

Installing in VS Code

You can install the Playwright MCP server using the VS Code CLI:

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

Installing in Cursor

1. Go to Cursor Settings -> MCP -> Add new MCP Server
2. Name it as desired
3. Use command type with the command npx @playwright/mcp
4. Click Edit to verify config or add command arguments

Installing in Windsurf or Claude Desktop

Use the following configuration in the appropriate settings section:

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

Configuration Options

Playwright MCP supports various command-line arguments that can be added to the "args" array in your configuration:

# Example showing key options
npx @playwright/mcp@latest --headless --browser firefox --port 8080

Some useful options include:

• --browser <browser> - Select browser (chrome, firefox, webkit, msedge)
• --headless - Run browser in headless mode (headed by default)
• --port <port> - Port to listen on for SSE transport
• --device <device> - Emulate a specific device (e.g., "iPhone 15")
• --user-agent <ua string> - Specify a custom user agent
• --vision - Use screenshot-based mode instead of accessibility snapshots

User Profiles

Persistent Profile (Default)

By default, Playwright MCP stores login information and other state in a persistent profile:

# Windows
%USERPROFILE%\AppData\Local\ms-playwright\mcp-{channel}-profile

# macOS
~/Library/Caches/ms-playwright/mcp-{channel}-profile

# Linux
~/.cache/ms-playwright/mcp-{channel}-profile

You can override the location with --user-data-dir.

Isolated Mode

To use isolated mode where each session starts with a fresh profile:

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": [
        "@playwright/mcp@latest",
        "--isolated",
        "--storage-state=path/to/storage.json"
      ]
    }
  }
}

Using Configuration Files

You can create a JSON configuration file instead of using command-line arguments:

npx @playwright/mcp@latest --config path/to/config.json

The config file supports browser settings, server configuration, capabilities, and network options.

Running as a Standalone Server

For systems without a display or for running in worker processes:

npx @playwright/mcp@latest --port 8931

Then in your MCP client config:

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

Available Modes

Playwright MCP offers two modes:

1. Snapshot Mode (Default)

Uses accessibility snapshots for better performance and reliability

2. Vision Mode

Uses screenshots for visual-based interactions. Enable with:

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

Key Tools and Commands

Basic Interactions

• Page Snapshot: Capture accessibility snapshot with browser_snapshot
• Click: Click elements with browser_click
• Type: Enter text with browser_type
• Hover: Move mouse over elements with browser_hover

Navigation

• browser_navigate: Navigate to a URL
• browser_navigate_back: Go back to previous page
• browser_navigate_forward: Go forward to next page

Tab Management

• browser_tab_list: List open tabs
• browser_tab_new: Open a new tab
• browser_tab_select: Switch to a different tab
• browser_tab_close: Close a tab

Utility Functions

• browser_take_screenshot: Capture a screenshot
• browser_pdf_save: Save page as PDF
• browser_resize: Change browser window size
• browser_close: Close the browser

How to add this MCP server to Cursor

There are two ways to add an MCP server to Cursor. The most common way is to add the server globally in the ~/.cursor/mcp.json file so that it is available in all of your projects.

If you only need the server in a single project, you can add it to the project instead by creating or adding it to the .cursor/mcp.json file.

Adding an MCP server to Cursor globally

To add a global MCP server go to Cursor Settings > MCP and click "Add new global MCP server".

When you click that button the ~/.cursor/mcp.json file will be opened and you can add your server like this:

{
    "mcpServers": {
        "cursor-rules-mcp": {
            "command": "npx",
            "args": [
                "-y",
                "cursor-rules-mcp"
            ]
        }
    }
}

Adding an MCP server to a project

To add an MCP server to a project you can create a new .cursor/mcp.json file or add it to the existing one. This will look exactly the same as the global MCP server example above.

How to use the MCP server

Once the server is installed, you might need to head back to Settings > MCP and click the refresh button.

The Cursor agent will then be able to see the available tools the added MCP server has available and will call them when it needs to.

You can also explictly ask the agent to use the tool by mentioning the tool name and describing what the function does.