home / mcp / playwright mcp server

Playwright MCP Server

Provides browser automation via Playwright to let MCP clients interact with web pages, capture screenshots, generate tests, and execute JavaScript in real browsers.

Installation

Add the following to your MCP client configuration file.

Configuration

View docs

{
  "mcpServers": {
    "bhanutj93-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "@executeautomation/playwright-mcp-server"
      ]
    }
  }
}

Playwright MCP Server provides browser automation capabilities through Playwright, enabling large language models to interact with web pages, take screenshots, generate test code, scrape content, and execute JavaScript in a real browser environment. This makes it possible to automate web workflows, validate UI behavior, and generate code from natural language prompts in a secure, reproducible way.

How to use

Connect your MCP client to the Playwright MCP Server using the provided stdio configuration. You will run the server locally and issue requests from your MCP client to control a real browser via Playwright. You can perform tasks like loading pages, taking screenshots, extracting data, and running JavaScript in the page context.

How to install

Prerequisites: ensure you have Node.js installed on your system. You will use npm or npx to install and run the MCP server.

npm install -g @executeautomation/playwright-mcp-server

npx @michaellatman/mcp-get@latest install @executeautomation/playwright-mcp-server

To install Playwright MCP for Claude Desktop automatically via Smithery:
```bash
npx @smithery/cli install @executeautomation/playwright-mcp-server --client claude

VS Code installation options allow you to add the MCP server to your environment directly from the editor.

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

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

Configuration to use Playwright Server in Claude Desktop is shown here. This defines the MCP server under the name playwright with the npx command and the server package.

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": ["-y", "@executeautomation/playwright-mcp-server"]
    }
  }
}

Testing

The project uses Jest for testing. Tests reside in the src/__tests__ directory and can be executed with various npm scripts. This helps verify functionality and coverage during development.

# Run tests with coverage
node run-tests.cjs

# Run tests without coverage
npm test

# Run tests with coverage (alternate script)
npm run test:coverage

# Run custom test script (same as node run-tests.cjs)
npm run test:custom

For evaluation scenarios, you can load an MCP client and run the evaluation script without rebuilding between tests. If you need to supply environment variables, prepend them to your command.

OPENAI_API_KEY=your-key  npx mcp-eval src/evals/evals.ts src/tools/codegen/index.ts

Configuration to run and connect

To run the Playwright MCP Server locally via the standard MCP method, use the following configuration in your client setup. This uses the npx command to start the server and passes the required package as an argument.

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": ["-y", "@executeautomation/playwright-mcp-server"]
    }
  }
}

Available tools

browse_web

Navigate web pages, interact with elements, and inspect page state using Playwright in an automated manner.

capture_screenshots

Take screenshots of pages or elements for verification, debugging, or visual regression checks.

generate_tests

Generate test code or snippets from prompts to accelerate test creation.

web_scrape

Extract information from web pages, parse content, and return structured results.

execute_js

Run JavaScript within the real browser context to perform computations or manipulate page state.