Playwright Browser Automation MCP server

The Playwright MCP server provides browser automation capabilities using Playwright, enabling LLMs to interact with web pages through structured accessibility snapshots without requiring screenshots or visually-tuned models.

Installation

To install the Playwright MCP server, you'll need Node.js 18 or newer and an MCP client like VS Code, Cursor, Windsurf, or Claude Desktop.

Basic Installation

Add the Playwright MCP server to your client configuration:

{
  "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"]}'

After installation, the Playwright MCP server will be available for use with your GitHub Copilot agent in VS Code.

Configuration Options

The Playwright MCP server supports various configuration arguments that can be provided in the JSON configuration as part of the "args" list:

npx @playwright/mcp@latest --help

Key options include:

• --browser <browser>: Specify browser to use (chrome, firefox, webkit, msedge)
• --headless: Run browser in headless mode (headed by default)
• --viewport-size <size>: Specify browser viewport size in pixels
• --user-agent <ua string>: Specify user agent string
• --isolated: Keep browser profile in memory, not saved to disk
• --port <port>: Port to listen on for SSE transport
• --vision: Run server using screenshots instead of accessibility snapshots

User Profiles

The Playwright MCP server can run with either persistent or isolated user profiles.

Persistent Profile

By default, all logged-in information is stored in a persistent profile. This profile is located at:

# 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 profile location with the --user-data-dir argument.

Isolated Mode

In isolated mode, each session runs in an isolated profile. When the browser is closed, all storage state for that session is lost:

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

Using a Configuration File

You can use a JSON configuration file to set up the Playwright MCP server:

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

Running as a Standalone Server

When running a headed browser on a system without a display, run the MCP server with the --port flag:

npx @playwright/mcp@latest --port 8931

Then in your MCP client config, set the url to the SSE endpoint:

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

Using Vision Mode

The server supports two modes:

1. Snapshot Mode (default): Uses accessibility snapshots for better performance and reliability
2. Vision Mode: Uses screenshots for visual-based interactions

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

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

Available Tools

The Playwright MCP server provides various tools for browser automation:

Basic Interactions

• browser_snapshot: Capture accessibility snapshot of the current page
• browser_click: Perform click on a web page
• browser_type: Type text into editable element
• browser_hover: Hover over element on page
• browser_wait_for: Wait for text to appear/disappear or a specific time

Navigation

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

Resource Management

• browser_take_screenshot: Take a screenshot of the current page
• browser_pdf_save: Save page as PDF
• browser_network_requests: List all network requests since loading the page
• browser_console_messages: Get all console messages

Tab Management

• browser_tab_list: List browser tabs
• browser_tab_new: Open a new tab
• browser_tab_select: Select a tab by index
• browser_tab_close: Close a tab

Each tool has specific parameters and usage patterns that can be used to automate browser interactions through the MCP protocol.

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.