What is Playwright

Playwright MCP Server is a Model Context Protocol server designed to facilitate browser automation using Playwright. It allows large language models (LLMs) to interact with web pages, take screenshots, generate testing code, scrape content, and execute JavaScript in a real browser environment, enhancing the capabilities of LLMs in web interactions.

Use cases

This server can be used for a variety of automation tasks including web scraping, automated testing, taking screenshots of webpages, generating test scripts, and executing JavaScript commands directly in the browser. Such capabilities are valuable in software testing, data extraction, and enhancing AI-driven applications.

How to use

To use the Playwright MCP Server, you can install it globally using npm, with mcp-get, or via Smithery. In Visual Studio Code, you can install the server directly through buttons or command line options. Additionally, configuration settings can be set in Claude Desktop to integrate the server for specific commands and arguments.

Key features

Key features of the Playwright MCP Server include support for multiple installation methods, a configuration setup for integration with development environments, the ability to run tests using Jest, and generating test coverage reports. It also supports dynamic environment configurations when running evaluations.

Where to use

The Playwright MCP Server can be utilized in various scenarios including development and testing environments, especially integrated within Visual Studio Code as a tool for developers. It is also suitable for AI applications where web interactions are required, making it applicable for projects involving testing frameworks, data scraping, and interactive AI systems.

MseeP.ai Security Assessment	Special thanks to Warp, the AI terminal for developers

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