MCP Server Playwright

1<h1 align="center">MCP Server Playwright</h1>
2<p align="center">
3  <a href="https://www.automatalabs.io"><img alt="MCP Playwright" src="https://automatalabs.io/icon.svg" height="250"/></a>
4</p>
5<p align="center">
6  <b>A Model Context Protocol server that provides browser automation capabilities using Playwright</b></br>
7  <sub>Enable LLMs to interact with web pages, take screenshots, and execute JavaScript in a real browser environment</sub>
8</p>
9 
10<p align="center">
11  <a href="https://www.npmjs.com/package/@automatalabs/mcp-server-playwright"><img alt="NPM Version" src="https://img.shields.io/npm/v/@automatalabs/mcp-server-playwright.svg" height="20"/></a>
12  <a href="https://npmcharts.com/compare/@automatalabs/mcp-server-playwright?minimal=true"><img alt="Downloads per month" src="https://img.shields.io/npm/dm/@automatalabs/mcp-server-playwright.svg" height="20"/></a>
13  <a href="https://github.com/Automata-Labs-team/MCP-Server-Playwright/blob/main/LICENSE"><img alt="License" src="https://img.shields.io/github/license/Automata-Labs-team/MCP-Server-Playwright.svg" height="20"/></a>
14  <a href="https://smithery.ai/server/@automatalabs/mcp-server-playwright"><img alt="Smithery Installs" src="https://smithery.ai/badge/@automatalabs/mcp-server-playwright" height="20"/></a>
15</p>
16 
17<a href="https://glama.ai/mcp/servers/9q4zck8po5"><img width="380" height="200" src="https://glama.ai/mcp/servers/9q4zck8po5/badge" alt="MCP-Server-Playwright MCP server" /></a>
18 
19## Table of Contents
20 
21- [Features](#features)
22- [Installation](#installation)
23- [Configuration](#configuration)
24- [Components](#components)
25  - [Tools](#tools)
26  - [Resources](#resources)
27- [License](#license)
28 
29## Features
30 
31- 🌐 Full browser automation capabilities
32- 📸 Screenshot capture of entire pages or specific elements
33- 🖱️ Comprehensive web interaction (navigation, clicking, form filling)
34- 📊 Console log monitoring
35- 🔧 JavaScript execution in browser context
36 
37## Installation
38 
39### Installing via Smithery
40 
41To install MCP Server Playwright for Claude Desktop automatically via [Smithery](https://smithery.ai/server/@automatalabs/mcp-server-playwright):
42 
43```bash
44npx -y @smithery/cli install @automatalabs/mcp-server-playwright --client claude
45```
46 
47You can install the package using either npx or mcp-get:
48 
49Using npx:
50```bash
51npx @automatalabs/mcp-server-playwright install
52```
53This command will:
541. Check your operating system compatibility (Windows/macOS)
552. Create or update the Claude configuration file
563. Configure the Playwright server integration
57 
58The configuration file will be automatically created/updated at:
59- Windows: `%APPDATA%\Claude\claude_desktop_config.json`
60- macOS: `~/Library/Application Support/Claude/claude_desktop_config.json`
61 
62Using mcp-get:
63```bash
64npx @michaellatman/mcp-get@latest install @automatalabs/mcp-server-playwright
65```
66 
67## Configuration
68 
69The installation process will automatically add the following configuration to your Claude config file:
70 
71```json
72{
73  "mcpServers": {
74    "playwright": {
75      "command": "npx",
76      "args": ["-y", "@automatalabs/mcp-server-playwright"]
77    }
78  }
79}
80```
81## Using with Cursor
82 
83You can also use MCP Server Playwright with [Cursor](https://www.cursor.so/), an AI-powered code editor. To enable browser automation in Cursor via MCP:
84 
851. **Install Playwright browsers** (if not already):
86    ```bash
87    npx playwright install
88    ```
89 
902. **Install MCP Server Playwright for Cursor** using Smithery:
91    ```bash
92    npx -y @smithery/cli install @automatalabs/mcp-server-playwright --client cursor
93    ```
94 
953. **Configuration file setup**:  
96   If you do not use Claude, the configuration file (`claude_desktop_config.json`) may not be created automatically.  
97   - On Windows, create a folder named `Claude` in `%APPDATA%` (usually `C:\Users\<YourName>\AppData\Roaming\Claude`).
98   - Inside that folder, create a file named `claude_desktop_config.json` with the following content:
99   
100    ```json
101    {
102      "serverPort": 3456
103    }
104    ```
105 
1064. **Follow the remaining steps in the [Installation](#installation) section above** to complete the setup.
107 
108Now, you can use all the browser automation tools provided by MCP Server Playwright directly from Cursor’s AI features, such as web navigation, screenshot capture, and JavaScript execution.
109 
110> **Note:** Make sure you have Node.js installed and `npx` available in your system PATH.
111 
112## Components
113 
114### Tools
115 
116#### `browser_navigate`
117Navigate to any URL in the browser
118```javascript
119{
120  "url": "https://stealthbrowser.cloud"
121}
122```
123 
124#### `browser_screenshot`
125Capture screenshots of the entire page or specific elements
126```javascript
127{
128  "name": "screenshot-name",     // required
129  "selector": "#element-id",     // optional
130  "fullPage": true              // optional, default: false
131}
132```
133 
134#### `browser_click`
135Click elements on the page using CSS selector
136```javascript
137{
138  "selector": "#button-id"
139}
140```
141 
142#### `browser_click_text`
143Click elements on the page by their text content
144```javascript
145{
146  "text": "Click me"
147}
148```
149 
150#### `browser_hover`
151Hover over elements on the page using CSS selector
152```javascript
153{
154  "selector": "#menu-item"
155}
156```
157 
158#### `browser_hover_text`
159Hover over elements on the page by their text content
160```javascript
161{
162  "text": "Hover me"
163}
164```
165 
166#### `browser_fill`
167Fill out input fields
168```javascript
169{
170  "selector": "#input-field",
171  "value": "Hello World"
172}
173```
174 
175#### `browser_select`
176Select an option in a SELECT element using CSS selector
177```javascript
178{
179  "selector": "#dropdown",
180  "value": "option-value"
181}
182```
183 
184#### `browser_select_text`
185Select an option in a SELECT element by its text content
186```javascript
187{
188  "text": "Choose me",
189  "value": "option-value"
190}
191```
192 
193#### `browser_evaluate`
194Execute JavaScript in the browser console
195```javascript
196{
197  "script": "document.title"
198}
199```
200 
201### Resources
202 
2031. **Console Logs** (`console://logs`)
204   - Access browser console output in text format
205   - Includes all console messages from the browser
206 
2072. **Screenshots** (`screenshot://<n>`)
208   - Access PNG images of captured screenshots
209   - Referenced by the name specified during capture
210 
211## License
212 
213This project is licensed under the MIT License - see the [LICENSE](https://github.com/Automata-Labs-team/MCP-Server-Playwright/blob/main/LICENSE) file for details.
214