mcpField
P
Playwright MCP Server

Playwright MCP Server

Local
github.com/showfiveBrowser Automation8Updated 87w ago
Repository

About Playwright MCP Server

Playwright MCP Server exposes browser navigation, page text retrieval, and mouse interaction through Playwright. It is intended for MCP clients that need to inspect and operate web pages.

Key features

  1. 01Navigate to URLs
  2. 02Retrieve full or visible page text
  3. 03Detect interactive elements and coordinates
  4. 04Simulate mouse movement, clicks, scrolling, and dragging
  5. 05Echo messages for testing

Use cases

  1. 01Read page content through an MCP client
  2. 02Locate interactive elements before browser actions
  3. 03Perform mouse-based page interactions
  4. 04Test an MCP connection with echo

MCP support

It is an MCP server that exposes Playwright navigation, page content, element detection, and mouse-operation tools to MCP clients.

#playwright#web-scraping#automation

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-mcp-server-showfive": {
      "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

Playwright MCP Server

smithery badge

English | 日本語

This project is a server that provides Playwright web page content retrieval functionality using the Model Context Protocol (MCP).

Features

  • Page navigation
  • Full page content retrieval
  • Visible content retrieval
  • Interactive elements detection
  • Mouse operation simulation
  • Echo functionality for testing

Installation

Installing via Smithery

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

npx -y @smithery/cli install @showfive/playwright-mcp-server --client claude
Manual Installation
npm install

Usage

Starting the Server
npm run build
npm start
MCP Tools

The following tools are available:

  1. navigate

    • Navigate to a specified URL
    • Arguments: { url: string }
    • Returns: Navigation result

  2. get_all_content

    • Retrieve content from the entire page
    • Arguments: None
    • Returns: All text content from the page

  3. get_visible_content

    • Retrieve currently visible content
    • Arguments: { minVisiblePercentage?: number }
    • Returns: Visible text content

  4. get_interactive_elements

    • Get position information of interactive elements (buttons, links, etc.) on the page
    • Arguments: None
    • Returns: Coordinates and boundary information of interactive elements

  5. move_mouse

    • Move mouse cursor to specified coordinates
    • Arguments: { x: number, y: number }
    • Returns: Operation result

  6. mouse_click

    • Execute mouse click at specified coordinates
    • Arguments: { x: number, y: number, button?: "left" | "right" | "middle", clickCount?: number }
    • Returns: Click operation result

  7. mouse_wheel

    • Execute mouse wheel scrolling
    • Arguments: { deltaY: number, deltaX?: number }
    • Returns: Scroll operation result

  8. drag_and_drop

    • Execute drag and drop operation
    • Arguments: { sourceX: number, sourceY: number, targetX: number, targetY: number }
    • Returns: Drag and drop operation result

  9. echo

    • Echo tool for testing
    • Arguments: { message: string }
    • Returns: Sent message

Development

Running Tests
# Run all tests
npm test

# Run tests in watch mode
npm run test:watch

# Generate coverage report
npm run test:coverage
Test Structure
  • tools/*.test.ts: Function tests for each tool
  • mcp-server.test.ts: MCP server function tests

Implementation Features

  1. Content Retrieval

    • Full page content retrieval
    • Visible content only retrieval
    • Proper HTML parsing

  2. Interaction

    • Detection and position information retrieval of interactive elements
    • Mouse operation simulation (movement, clicks, scrolling)
    • Drag and drop support

  3. Error Handling

    • Proper navigation error handling
    • Timeout processing
    • Invalid URL detection

  4. Configuration Flexibility

    • Headless/head mode selection
    • Custom user agent
    • Viewport size settings

Important Notes

  • Ensure necessary environment variables are set before using the MCP server
  • Follow the terms of service of target websites when retrieving web page content
  • Maintain appropriate intervals when sending multiple requests
  • When performing mouse operations, maintain appropriate intervals as they simulate actual user interactions

License

ISC

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.