Mcp 服务器 Playwright

创建者

Automata-Labs-team•Jul 23, 2025

MCP服务器用于使用Playwright进行浏览器自动化

概览

什么是 MCP-Server-Playwright？

MCP-Server-Playwright 是一个创新的服务器，旨在使用 Playwright 进行浏览器自动化。Playwright 是一个强大的库，使开发人员能够在各种浏览器中自动化 Web 应用程序。该项目特别适用于测试和网页抓取，允许用户模拟用户交互并高效地收集数据。

MCP-Server-Playwright 的特点

跨浏览器支持：MCP-Server-Playwright 支持多个浏览器，包括 Chrome、Firefox 和 Safari，确保您的自动化脚本可以在不同环境中无缝运行。
简易设置：该服务器设计为快速安装和配置，使所有技能水平的开发人员都能轻松访问。
强大的 API：它提供了一个全面的 API，允许对浏览器交互进行详细控制，包括导航、元素选择和事件处理。
无头模式：用户可以在无头模式下运行测试，这对于 CI/CD 管道和没有图形界面的环境非常理想。
广泛的文档：该项目附带详尽的文档，使开发人员更容易入门并有效利用所有功能。

如何使用 MCP-Server-Playwright

安装：首先从 GitHub 克隆该仓库：

git clone https://github.com/Automata-Labs-team/MCP-Server-Playwright.git
cd MCP-Server-Playwright

依赖项：使用 npm 或 yarn 安装必要的依赖项：
```
npm install
```
运行服务器：使用以下命令启动服务器：
```
npm start
```

创建自动化脚本：使用提供的 API 编写您的自动化脚本。以下是一个简单的示例，用于导航到网页：

const { chromium } = require('playwright');

(async () => {
    const browser = await chromium.launch();
    const page = await browser.newPage();
    await page.goto('https://example.com');
    await browser.close();
})();

测试和调试：利用内置的调试工具测试您的脚本，并确保它们按预期执行。

常见问题解答

什么是 Playwright？

Playwright 是由微软开发的开源自动化库，允许开发人员在不同浏览器中自动化 Web 应用程序。它支持现代 Web 应用程序功能，并提供丰富的浏览器交互 API。

我可以使用 MCP-Server-Playwright 进行网页抓取吗？

是的，MCP-Server-Playwright 非常适合网页抓取任务。它自动化浏览器操作的能力使得从网页中提取数据变得简单。

MCP-Server-Playwright 是免费使用的吗？

当然！MCP-Server-Playwright 是开源的，任何人都可以在 MIT 许可证下使用、修改和分发。

我如何为该项目做贡献？

欢迎贡献！您可以通过在 GitHub 仓库提交问题、功能请求或拉取请求来贡献。有关更多详细信息，请参阅文档中的贡献指南。

我在哪里可以找到文档？

MCP-Server-Playwright 的文档可在仓库中找到。您可以直接访问这里。

详情

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

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:

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"]
    }
  }
}

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:

Install Playwright browsers (if not already):
```
npx playwright install
```

Install MCP Server Playwright for Cursor using Smithery:

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

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:
```
{
 "serverPort": 3456
}
```
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

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

Server配置

{
  "mcpServers": {
    "mcp-server-playwright": {
      "command": "docker",
      "args": [
        "run",
        "-i",
        "--rm",
        "ghcr.io/metorial/mcp-container--automata-labs-team--mcp-server-playwright--mcp-server-playwright",
        "node dist/index.js"
      ],
      "env": {}
    }
  }
}