Playwright

Table of Contents

• Features
• Installation
• Configuration
• Components
  • Tools
  • Resources
• License

Features

• 🌐 Full browser automation capabilities
• 📸 Screenshot capture of entire pages or specific elements
• 🖱️ Comprehensive web interaction (navigation, clicking, form filling)
• 📊 Console log monitoring
• 🔧 JavaScript execution in browser context

Installation

Installing via Smithery

To install MCP Server Playwright for Claude Desktop automatically via Smithery:

bashCopy code
npx -y @smithery/cli install @automatalabs/mcp-server-playwright --client claude

You can install the package using either npx or mcp-get:

Using npx:

bashCopy code
npx @automatalabs/mcp-server-playwright install

This command will:

1. Check your operating system compatibility (Windows/macOS)
2. Create or update the Claude configuration file
3. Configure the Playwright server integration

The configuration file will be automatically created/updated at:

• Windows: %APPDATA%\Claude\claude_desktop_config.json
• macOS: ~/Library/Application Support/Claude/claude_desktop_config.json

Using mcp-get:

bashCopy code
npx @michaellatman/mcp-get@latest install @automatalabs/mcp-server-playwright

Configuration

The installation process will automatically add the following configuration to your Claude config file:

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

Using with Cursor

You can also use MCP Server Playwright with Cursor, an AI-powered code editor. To enable browser automation in Cursor via MCP:

1. Install Playwright browsers (if not already):

   bashCopy code
   npx playwright install
   

2. Install MCP Server Playwright for Cursor using Smithery:

   bashCopy code
   npx -y @smithery/cli install @automatalabs/mcp-server-playwright --client cursor
   

3. Configuration file setup:
   If you do not use Claude, the configuration file (claude_desktop_config.json) may not be created automatically.

   • On Windows, create a folder named Claude in %APPDATA% (usually C:\Users\<YourName>\AppData\Roaming\Claude).
   • Inside that folder, create a file named claude_desktop_config.json with the following content:

   jsonCopy code
   {
     "serverPort": 3456
   }
   

4. Follow the remaining steps in the Installation section above to complete the setup.

Now, 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.

Note: Make sure you have Node.js installed and npx available in your system PATH.

Components

Tools

browser_navigate

Navigate to any URL in the browser

javascriptCopy code
{
  "url": "https://stealthbrowser.cloud"
}

browser_screenshot

Capture screenshots of the entire page or specific elements

javascriptCopy code
{
  "name": "screenshot-name",     // required
  "selector": "#element-id",     // optional
  "fullPage": true              // optional, default: false
}

browser_click

Click elements on the page using CSS selector

javascriptCopy code
{
  "selector": "#button-id"
}

browser_click_text

Click elements on the page by their text content

javascriptCopy code
{
  "text": "Click me"
}

browser_hover

Hover over elements on the page using CSS selector

javascriptCopy code
{
  "selector": "#menu-item"
}

browser_hover_text

Hover over elements on the page by their text content

javascriptCopy code
{
  "text": "Hover me"
}

browser_fill

Fill out input fields

javascriptCopy code
{
  "selector": "#input-field",
  "value": "Hello World"
}

browser_select

Select an option in a SELECT element using CSS selector

javascriptCopy code
{
  "selector": "#dropdown",
  "value": "option-value"
}

browser_select_text

Select an option in a SELECT element by its text content

javascriptCopy code
{
  "text": "Choose me",
  "value": "option-value"
}

browser_evaluate

Execute JavaScript in the browser console

javascriptCopy code
{
  "script": "document.title"
}

Resources

1. Console Logs (console://logs)

   • Access browser console output in text format
   • Includes all console messages from the browser

2. Screenshots (screenshot://<n>)

   • Access PNG images of captured screenshots
   • Referenced by the name specified during capture

License

This project is licensed under the MIT License - see the LICENSE file for details.