Data

Tools

Indexes

Applications

Experiments

Awesome

An open API service indexing awesome lists of open source software.

https://github.com/executeautomation/mcp-playwright

Playwright Model Context Protocol Server - Tool to automate Browsers and APIs in Claude Desktop, Cline, Cursor IDE and More 🔌
https://github.com/executeautomation/mcp-playwright

Last synced: about 2 months ago
JSON representation

Playwright Model Context Protocol Server - Tool to automate Browsers and APIs in Claude Desktop, Cline, Cursor IDE and More 🔌

Awesome Lists containing this project

README 

        


   Special thanks to:

   


   


   

      Warp sponsorship

   



### [Warp, the AI terminal for developers](https://www.warp.dev/?utm_source=github&utm_medium=referral&utm_campaign=mcp-playwright)

[Available for MacOS, Linux, & Windows](https://www.warp.dev/?utm_source=github&utm_medium=referral&utm_campaign=mcp-playwright)








# Playwright MCP Server 🎭



[![smithery badge](https://smithery.ai/badge/@executeautomation/playwright-mcp-server)](https://smithery.ai/server/@executeautomation/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.



mcp-playwright MCP server



## Screenshot

![Playwright + Claude](image/playwright_claude.png)



## [Documentation](https://executeautomation.github.io/mcp-playwright/) | [API reference](https://executeautomation.github.io/mcp-playwright/docs/playwright-web/Supported-Tools)



## Installation



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



Using npm:

```bash

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

```



Using mcp-get:

```bash

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

```

Using Smithery



To install Playwright MCP for Claude Desktop automatically via [Smithery](https://smithery.ai/server/@executeautomation/playwright-mcp-server):



```bash

npx -y @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:



[Install in VS Code](https://insiders.vscode.dev/redirect?url=vscode%3Amcp%2Finstall%3F%257B%2522name%2522%253A%2522playwright%2522%252C%2522command%2522%253A%2522npx%2522%252C%2522args%2522%253A%255B%2522-y%2522%252C%2522%2540executeautomation%252Fplaywright-mcp-server%2522%255D%257D) 

[Install in VS Code Insiders](https://insiders.vscode.dev/redirect?url=vscode-insiders%3Amcp%2Finstall%3F%257B%2522name%2522%253A%2522playwright%2522%252C%2522command%2522%253A%2522npx%2522%252C%2522args%2522%253A%255B%2522-y%2522%252C%2522%2540executeautomation%252Fplaywright-mcp-server%2522%255D%257D)



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



```bash

# For VS Code

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

```



```bash

# 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:



```json

{

  "mcpServers": {

    "playwright": {

      "command": "npx",

      "args": ["-y", "@executeautomation/playwright-mcp-server"]

    }

  }

}

```



## SSE (Server-Sent Events) Support



Playwright MCP Server now supports real-time event streaming via Server-Sent Events (SSE).



### How to Use



- The server exposes an SSE endpoint at `http://localhost:3001/events`.

- You can connect to this endpoint using any SSE-compatible client (such as EventSource in the browser or curl).

- Events are sent in real-time as they occur (e.g., new console logs, screenshots, etc.).



### Example (JavaScript)

```js

const evtSource = new EventSource('http://localhost:3001/events');

evtSource.addEventListener('console_log_entry', (event) => {

  const data = JSON.parse(event.data);

  console.log('Console log:', data.log);

});

evtSource.addEventListener('screenshot', (event) => {

  const data = JSON.parse(event.data);

  console.log('Screenshot event:', data);

});

```



### Available Events

- `console_log_entry`: Fired when a new console log is captured.

- `console_logs`: Fired when all logs are requested.

- `screenshot`: Fired when a screenshot is taken or requested.



This allows you to build real-time dashboards, monitoring tools, or simply observe browser activity as it happens.



## 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:



```bash

# 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.



## Star History



[![Star History Chart](https://api.star-history.com/svg?repos=executeautomation/mcp-playwright&type=Date)](https://star-history.com/#executeautomation/mcp-playwright&Date)