Playwright Web Browser

by kotelberg

Not rated

GitHub

About

Enables web browsing capabilities through Playwright automation for navigating websites, extracting content, identifying interactive elements, and performing browser actions in a containerized Docker environment.

Details

Author: kotelberg
Repository: Kotelberg/playwright-mcp-server
Categories: Productivity, Design, Developer Tools, AI, Frontend, Infrastructure, Automation

Setting up with Highlight

This MCP is not yet compatible with Highlight’s one-click setup. However, you can still use it with Highlight by following these steps:

Download and install Highlight from highlightai.com/download
Navigate to the plugins tab and select "Add Custom Plugin"
Configure the plugin with the settings below
Plugin Name Playwright Web Browser

Command (node, npx, python, etc.) npx
Arguments
- Argument 1 -y
- Argument 2 @highlight/mcp-server
Please refer to the README for specific instructions on how to obtain API keys or other required environment variables.
Enable "Start Automatically" if you want the plugin to start when Highlight launches

Setting up with Cursor

Open Cursor's settings
Navigate to the MCP section
Click "Add new Global MCP server"
Copy and paste the configuration below based on your operating system

JSON

{
    "mcpServers": {
        "playwright web browser": {
            "env": {},
            "args": [
                "-y",
                "@highlight/mcp-server"
            ],
            "command": "npx"
        }
    }
}

JSON

{
    "mcpServers": {
        "playwright web browser": {
            "env": {},
            "args": [
                "/c",
                "npx",
                "-y",
                "@highlight/mcp-server"
            ],
            "command": "cmd"
        }
    }
}

JSON

{
    "mcpServers": {
        "playwright web browser": {
            "env": {},
            "args": [
                "-y",
                "@highlight/mcp-server"
            ],
            "command": "npx"
        }
    }
}

Setting up with Claude Desktop

Open Claude Desktop's settings
Go to the Integrations tab
Click "Add MCP Server"
Use the configuration below based on your operating system

Note: Make sure Claude Desktop is running before attempting to connect.

JSON

{
    "mcpServers": {
        "playwright web browser": {
            "env": {},
            "args": [
                "-y",
                "@highlight/mcp-server"
            ],
            "command": "npx"
        }
    }
}

JSON

{
    "mcpServers": {
        "playwright web browser": {
            "env": {},
            "args": [
                "/c",
                "npx",
                "-y",
                "@highlight/mcp-server"
            ],
            "command": "cmd"
        }
    }
}

JSON

{
    "mcpServers": {
        "playwright web browser": {
            "env": {},
            "args": [
                "-y",
                "@highlight/mcp-server"
            ],
            "command": "npx"
        }
    }
}

Setting up with Windsurf

Open Windsurf's preferences
Go to the Integrations section
Click "Add MCP Integration"
Use the configuration below based on your operating system

JSON

{
    "mcpServers": {
        "playwright web browser": {
            "env": {},
            "args": [
                "-y",
                "@highlight/mcp-server"
            ],
            "command": "npx"
        }
    }
}

JSON

{
    "mcpServers": {
        "playwright web browser": {
            "env": {},
            "args": [
                "/c",
                "npx",
                "-y",
                "@highlight/mcp-server"
            ],
            "command": "cmd"
        }
    }
}

JSON

{
    "mcpServers": {
        "playwright web browser": {
            "env": {},
            "args": [
                "-y",
                "@highlight/mcp-server"
            ],
            "command": "npx"
        }
    }
}

Setting up with Cline

Open Cline's settings
Navigate to the Integrations section
Click "Add MCP Server"
Copy and paste the configuration below based on your operating system

Note: Make sure to restart Cline after adding the configuration.

JSON

{
    "mcpServers": {
        "playwright web browser": {
            "env": {},
            "args": [
                "-y",
                "@highlight/mcp-server"
            ],
            "command": "npx"
        }
    }
}

JSON

{
    "mcpServers": {
        "playwright web browser": {
            "env": {},
            "args": [
                "/c",
                "npx",
                "-y",
                "@highlight/mcp-server"
            ],
            "command": "cmd"
        }
    }
}

JSON

{
    "mcpServers": {
        "playwright web browser": {
            "env": {},
            "args": [
                "-y",
                "@highlight/mcp-server"
            ],
            "command": "npx"
        }
    }
}

Setting up with Goose

Open Goose's preferences
Go to the Integrations tab
Select "MCP Servers"
Click "Add New Server"
Use the configuration below based on your operating system

JSON

{
    "mcpServers": {
        "playwright web browser": {
            "env": {},
            "args": [
                "-y",
                "@highlight/mcp-server"
            ],
            "command": "npx"
        }
    }
}

JSON

{
    "mcpServers": {
        "playwright web browser": {
            "env": {},
            "args": [
                "/c",
                "npx",
                "-y",
                "@highlight/mcp-server"
            ],
            "command": "cmd"
        }
    }
}

JSON

{
    "mcpServers": {
        "playwright web browser": {
            "env": {},
            "args": [
                "-y",
                "@highlight/mcp-server"
            ],
            "command": "npx"
        }
    }
}

From the repository

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

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

npm install

```bash

`navigate`

Navigate to a specified URL. Arguments: { url: string }

`get_all_content`

Retrieve content from the entire page. Arguments: None

`get_visible_content`

Retrieve currently visible content. Arguments: { minVisiblePercentage?: number }

`get_interactive_elements`

Get position information of interactive elements (buttons, links, etc.) on the page. Arguments: None

`move_mouse`

Move mouse cursor to specified coordinates. Arguments: { x: number, y: number }

`mouse_click`

Execute mouse click at specified coordinates. Arguments: { x: number, y: number, button?: 'left' | 'right' | 'middle', clickCount?: number }

`mouse_wheel`

Execute mouse wheel scrolling. Arguments: { deltaY: number, deltaX?: number }

`drag_and_drop`

Execute drag and drop operation. Arguments: { sourceX: number, sourceY: number, targetX: number, targetY: number }

`echo`

Echo tool for testing. Arguments: { message: string }

Claude Desktop / Cursor

Paste into your MCP client config file to install this server.

{
    "mcpServers": {
        "playwright web browser": {
            "env": {},
            "args": [
                "-y",
                "@highlight/mcp-server"
            ],
            "command": "npx"
        }
    }
}

Linux

{
    "env": [],
    "args": [
        "-y",
        "@highlight/mcp-server"
    ],
    "command": "npx"
}

Macos

{
    "env": [],
    "args": [
        "-y",
        "@highlight/mcp-server"
    ],
    "command": "npx"
}

Windows

{
    "env": [],
    "args": [
        "/c",
        "npx",
        "-y",
        "@highlight/mcp-server"
    ],
    "command": "cmd"
}

Playwright MCP Server

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

No reviews yet — be the first

Use Google, GitHub, or an email account so ratings stay tied to real people.

Email sign in

No reviews posted yet.

About

Details

Jump to

Setting up with Highlight

From the repository

navigate

get_all_content

get_visible_content

get_interactive_elements

move_mouse

mouse_click

mouse_wheel

drag_and_drop

echo

Claude Desktop / Cursor

Linux

Macos

Windows

Playwright MCP Server

Features

Installation

Installing via Smithery

Manual Installation

Usage

Starting the Server

MCP Tools

Development

Running Tests

Run tests in watch mode

Generate coverage report

Test Structure

Implementation Features

Important Notes

License

Install

More like this

Time

Sentry

Github

Git

GitLab

Context 7

`navigate`

`get_all_content`

`get_visible_content`

`get_interactive_elements`

`move_mouse`

`mouse_click`

`mouse_wheel`

`drag_and_drop`

`echo`