mcpField
M
MCP Server Playwright

MCP Server Playwright

Local
github.com/aptcatsBrowser Automation0Updated 83w ago

About MCP Server Playwright

MCP Server Playwright connects Claude Desktop to browser automation, covering navigation, page interaction, screenshots, and JavaScript execution. It is for users who need browser tasks and page output available to an MCP client.

Key features

  1. 01Navigate to URLs
  2. 02Capture page or element screenshots
  3. 03Click and hover on page elements
  4. 04Fill and select form fields
  5. 05Run JavaScript in browser
  6. 06Read browser console logs

Use cases

  1. 01Navigate a browser to a specified page
  2. 02Capture a full-page or element screenshot
  3. 03Fill forms and interact with page controls
  4. 04Inspect console output or evaluate JavaScript

MCP support

Provides browser automation tools and exposes console logs and captured screenshots as MCP resources. The README documents integration with Claude Desktop.

Configuration

Local server config is the same for every client. Copy it into your client’s MCP config file.

mcp.json · Universal config
{
"mcpServers": {
"playwright": {
"command": "npx",
"args": [
"-y",
"@smithery/cli"
]
}
}
}
Run commandnpx -y @smithery/cli

Local servers need a runtime on your machine (e.g. Node.js 18+). Config file locations differ by client; see your client’s docs.

Packages
npm@smithery/cli

Tools

No tool list yet

Local servers expose tools only once running on your machine, and the maintainer has not provided a tool list.

Details

From the project README

MCP Server Playwright

Table of Contents

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:

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

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

Using npx:
npx @automatalabs/mcp-server-playwright install

This command will:

  • Check your operating system compatibility (Windows/macOS)
  • Create or update the Claude configuration file
  • 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:
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:

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

Components

Tools

browser_navigate

Navigate to any URL in the browser

{
  "url": "https://stealthbrowser.cloud"
}
browser_screenshot

Capture screenshots of the entire page or specific elements

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

Click elements on the page using CSS selector

{
  "selector": "#button-id"
}
browser_click_text

Click elements on the page by their text content

{
  "text": "Click me"
}
browser_hover

Hover over elements on the page using CSS selector

{
  "selector": "#menu-item"
}
browser_hover_text

Hover over elements on the page by their text content

{
  "text": "Hover me"
}
browser_fill

Fill out input fields

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

Select an option in a SELECT element using CSS selector

{
  "selector": "#dropdown",
  "value": "option-value"
}
browser_select_text

Select an option in a SELECT element by its text content

{
  "text": "Choose me",
  "value": "option-value"
}
browser_evaluate

Execute JavaScript in the browser console

{
  "script": "document.title"
}

Resources

Console Logs (console://logs)
  • Access browser console output in text format
  • Includes all console messages from the browser
Screenshots (screenshot://)
  • Access PNG images of captured screenshots
  • Referenced by the name specified during capture

License

MIT License

Comments

Markdown supported

New to MCP?

From what the protocol is to installing your first server, these answers cover most first questions.

An open protocol that defines how AI applications connect to external tools and data in a uniform way. Clients talk to the model; MCP servers provide tools, resources and prompt templates. They exchange standard messages, so one server can be reused by many clients.