星战科技xingzhan.cloud
返回市场
MCP-服务器-Playwright

MCP-服务器-Playwright

作者：VikashLoomba266 星标更新：2025-06-06
安装使用来源：spider==github.com

项目介绍

<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>一个使用Playwright提供浏览器自动化能力的Model Context Protocol服务器</b></br> <sub>使LLMs能够与网页交互，抓取截图，并在真实的浏览器环境中执行JavaScript</sub> </p> <p align="center"> <a href="https://www.npmjs.com/package/@automatalabs/mcp-server-playwright"><img alt="NPM 版本" 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="每月下载量" 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="许可证" 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 安装" 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://gips1.baidu.com/it/u=1763473928,757175816&fm=3081&app=3081&f=PNG?w=760&h=400" alt="MCP-Server-Playwright MCP 服务器" /></a>

目录

特性

  • 🌐 完整的浏览器自动化能力
  • 📸 整个页面或特定元素的截图捕捉
  • 🖱️ 综合的网页交互（导航、点击、表单填写）
  • 📊 控制台日志监控
  • 🔧 在浏览器上下文中执行JavaScript

安装

通过Smithery安装

要通过Smithery自动安装MCP Server Playwright for Claude Desktop：

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

你可以使用npx或mcp-get来安装该包：

使用npx：

npx @automatalabs/mcp-server-playwright install

此命令将：

  1. 检查你的操作系统兼容性（Windows/macOS）
  2. 创建或更新Claude配置文件
  3. 配置Playwright服务器集成

配置文件将被自动创建/更新到以下位置：

  • Windows: %APPDATA%\Claude\claude_desktop_config.json
  • macOS: ~/Library/Application Support/Claude/claude_desktop_config.json

使用mcp-get：

npx @michaellatman/mcp-get@latest install @automatalabs/mcp-server-playwright

配置

安装过程会自动向你的Claude配置文件添加以下配置：

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

使用Cursor

你也可以使用MCP Server Playwright与Cursor，这是一个AI驱动的代码编辑器。要通过MCP在Cursor中启用浏览器自动化：

  1. 安装Playwright浏览器（如果尚未安装）：

    npx playwright install

  2. 使用Smithery为Cursor安装MCP Server Playwright：

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

  3. 配置文件设置：
    如果你不使用Claude，配置文件（claude_desktop_config.json）可能不会自动创建。

    • 在Windows上，在%APPDATA%（通常为C:\Users\<YourName>\AppData\Roaming\Claude）下创建一个名为Claude的文件夹。
    • 在该文件夹内，创建一个名为claude_desktop_config.json的文件，内容如下：
    {
  "serverPort": 3456
}

  4. 按照上面安装部分中的剩余步骤完成设置。

现在，你可以直接从Cursor的AI功能中使用MCP Server Playwright提供的所有浏览器自动化工具，如网页导航、截图捕捉和JavaScript执行。

注意：确保你已安装Node.js并且npx在你的系统PATH中可用。

组件

工具

browser_navigate

导航到浏览器中的任意URL

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

browser_screenshot

捕捉整个页面或特定元素的截图

{
  "name": "screenshot-name",     // 必需
  "selector": "#element-id",     // 可选
  "fullPage": true              // 可选，默认值：false
}

browser_click

使用CSS选择器点击页面上的元素

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

browser_click_text

根据文本内容点击页面上的元素

{
  "text": "Click me"
}

browser_hover

使用CSS选择器悬停在页面上的元素上

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

browser_hover_text

根据文本内容悬停在页面上的元素上

{
  "text": "Hover me"
}

browser_fill

填写输入字段

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

browser_select

使用CSS选择器选择SELECT元素中的选项

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

browser_select_text

根据文本内容选择SELECT元素中的选项

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

browser_evaluate

在浏览器控制台中执行JavaScript

{
  "script": "document.title"
}

资源

  1. 控制台日志 (console://logs)

    • 以文本形式访问浏览器控制台输出
    • 包括浏览器的所有控制台消息

  2. 截图 (screenshot://<n>)

    • 访问捕获的截图的PNG图像
    • 根据捕获时指定的名称引用

许可证

该项目采用MIT许可证——详情见LICENSE文件。