Playwright

What is mcp-playwright?

mcp-playwright is a Playwright Model Context Protocol Server. It acts as a bridge, allowing AI models like Claude Desktop, Cline, and Cursor IDE to interact with web browsers and APIs programmatically. This server leverages Playwright, a powerful Node.js library, to provide robust browser automation capabilities.

How to use mcp-playwright?

mcp-playwright can be installed using npm, mcp-get, or Smithery. After installation, it can be configured within your AI environment (e.g., Claude Desktop) to enable browser automation. The project provides detailed documentation and API references for integrating and utilizing its functionalities.

Installation:

• npm: npm install -g @executeautomation/playwright-mcp-server
• mcp-get: npx @michaellatman/mcp-get@latest install @executeautomation/playwright-mcp-server
• Smithery: npx @smithery/cli install @executeautomation/playwright-mcp-server --client claude
• VS Code: Install directly via provided VS Code buttons or using the VS Code CLI: code --add-mcp '{"name":"playwright","command":"npx","args":["@executeautomation/playwright-mcp-server"]}'

Configuration (Example for Claude Desktop):

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

Key Features of mcp-playwright

• Browser Automation: Automate interactions with web pages.
• Web Scraping: Extract data from websites.
• Screenshot Generation: Capture screenshots of web pages.
• Test Code Generation: Generate Playwright test code.
• JavaScript Execution: Execute custom JavaScript in a real browser environment.
• Integration with LLMs: Designed to work seamlessly with AI models like Claude Desktop, Cline, and Cursor IDE.

Use Cases of mcp-playwright

• Automated Testing: Create and run end-to-end tests for web applications.
• Data Collection: Scrape data from various websites for analysis or other purposes.
• Content Monitoring: Monitor changes on web pages.
• AI-driven Web Interaction: Enable LLMs to perform complex web tasks, such as filling forms, navigating websites, and gathering information.

FAQ about mcp-playwright

• What is the Model Context Protocol (MCP)? MCP is a protocol that allows AI models to interact with external tools and services, extending their capabilities.
• What is Playwright? Playwright is a Node.js library for automating Chromium, Firefox, and WebKit with a single API.
• Can I use mcp-playwright with other AI models? While specifically mentioned for Claude Desktop, Cline, and Cursor IDE, its MCP server nature suggests potential compatibility with other MCP-enabled AI environments.
• Are there any limitations on tool names? Yes, when contributing new tools, be aware of the 60-character limit for the combined server and tool name in some clients (e.g., Cursor). The server name is playwright-mcp, so tool names should be kept short.

Playwright MCP Server 🎭

A Model Context Protocol server that provides browser automation capabilities using Playwright. This server enables LLMs to interact with web pages, take screenshots, generate test code, web scraps the page and execute JavaScript in a real browser environment.

Screenshot

Documentation | API reference

Installation

You can install the package using either npm, mcp-get, or Smithery:

Using npm:

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

Using mcp-get:

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

Using Smithery

To install Playwright MCP for Claude Desktop automatically via Smithery:

npx @smithery/cli install @executeautomation/playwright-mcp-server --client claude

Installation in VS Code

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

Alternatively, you can install the Playwright MCP server using the VS Code CLI:

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

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

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

Configuration to use Playwright Server

Here's the Claude Desktop configuration to use the Playwright server:

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

Testing

This project uses Jest for testing. The tests are located in the src/__tests__ directory.

Running Tests

You can run the tests using one of the following commands:

# Run tests using the custom script (with coverage)
node run-tests.cjs

# Run tests using npm scripts
npm test           # Run tests without coverage
npm run test:coverage  # Run tests with coverage
npm run test:custom    # Run tests with custom script (same as node run-tests.cjs)

The test coverage report will be generated in the coverage directory.

Running evals

The evals package loads an mcp client that then runs the index.ts file, so there is no need to rebuild between tests. You can load environment variables by prefixing the npx command. Full documentation can be found here.

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

Contributing

When adding new tools, please be mindful of the tool name length. Some clients, like Cursor, have a 60-character limit for the combined server and tool name (server_name:tool_name).

Our server name is playwright-mcp. Please ensure your tool names are short enough to not exceed this limit.

Star History