Home

Awesome

<h1 align="center">MCP Server Playwright</h1> <p align="center"> <a href="https://www.automatalabs.io"><img alt="MCP Playwright" src="https://automatalabs.io/icon.svg" height="250"/></a> </p> <p align="center"> <b>A Model Context Protocol server that provides browser automation capabilities using Playwright</b></br> <sub>Enable LLMs to interact with web pages, take screenshots, and execute JavaScript in a real browser environment</sub> </p> <p align="center"> <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> <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> <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> <a href="https://smithery.ai/protocol/@automatalabs/mcp-server-playwright"><img alt="Smithery Installs" src="https://smithery.ai/badge/@automatalabs/mcp-server-playwright" height="20"/></a> </p>

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

Table of Contents

Features

Installation

Installing via Smithery

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

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

  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:

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

playwright_navigate

Navigate to any URL in the browser

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

playwright_screenshot

Capture screenshots of the entire page or specific elements

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

playwright_click

Click elements on the page using CSS selector

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

playwright_click_text

Click elements on the page by their text content

{
  "text": "Click me"
}

playwright_hover

Hover over elements on the page using CSS selector

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

playwright_hover_text

Hover over elements on the page by their text content

{
  "text": "Hover me"
}

playwright_fill

Fill out input fields

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

playwright_select

Select an option in a SELECT element using CSS selector

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

playwright_select_text

Select an option in a SELECT element by its text content

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

playwright_evaluate

Execute JavaScript in the browser console

{
  "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.