Playwright Browser Automation MCP server for AI agents

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

Installation

Installing in VS Code

You can install the Playwright MCP server in VS Code using 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"]}'

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

Configuration

Add the following to your configuration file:

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

Usage

Tool Modes

The Playwright MCP server offers two operational modes:

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

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

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

Running Headless Browser

For background or batch operations, you can run the browser without a GUI:

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

Running on Linux without Display

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

npx @playwright/mcp@latest --port 8931

Then in your configuration:

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

User Data Directory

Playwright MCP creates a browser profile 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

You can delete this directory to clear the browser state between sessions.

Available Commands

Snapshot-based Interactions

These commands work with the default snapshot mode:

Basic Navigation

browser_navigate: Navigate to a URL
```
{"url": "https://example.com"}
```
browser_navigate_back: Go back to the previous page
browser_navigate_forward: Go forward to the next page

Element Interactions

browser_click: Click on an element

{
  "element": "Submit button",
  "ref": "element-ref-from-snapshot"
}

browser_hover: Hover over an element

{
  "element": "Dropdown menu",
  "ref": "element-ref-from-snapshot"
}

browser_type: Type text into an element

{
  "element": "Search input field",
  "ref": "element-ref-from-snapshot",
  "text": "search query",
  "submit": true
}

browser_select_option: Select dropdown options

{
  "element": "Country dropdown",
  "ref": "element-ref-from-snapshot",
  "values": ["United States"]
}

Page Information

browser_snapshot: Capture accessibility snapshot of the current page
browser_take_screenshot: Take a screenshot of the current page

Tab Management

browser_tab_list: List all browser tabs
browser_tab_new: Open a new tab
```
{"url": "https://example.com"}
```
browser_tab_select: Select a tab by index
```
{"index": 2}
```
browser_tab_close: Close a tab
```
{"index": 1}
```

Files and Media

browser_file_upload: Upload files

{"paths": ["/path/to/file1.jpg", "/path/to/file2.pdf"]}

browser_pdf_save: Save the current page as PDF

Utilities

browser_wait: Wait for a specified time
```
{"time": 3}
```
browser_close: Close the page
browser_install: Install the browser specified in the config

CLI Options

The server supports several command-line options:

--browser <browser>: Specify which browser to use (chrome, firefox, webkit, msedge)
--headless: Run browser in headless mode
--port <port>: Port to listen on for SSE transport
--user-data-dir <path>: Path to the user data directory
--vision: Use screenshot-based interaction mode
--caps <caps>: Specify comma-separated capabilities to enable
--cdp-endpoint <endpoint>: Connect to a specific CDP endpoint
--executable-path <path>: Use a specific browser executable

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.