mcpField
M
MCP Server Playwright

MCP Server Playwright

本地服务
github.com/aptcats浏览器自动化083 周前更新
代码仓库

关于 MCP Server Playwright

MCP Server Playwright 将 Claude Desktop 连接到浏览器自动化功能，支持页面导航、交互、截图和执行 JavaScript。适合需要通过 MCP 客户端执行浏览器任务并获取页面输出的用户。

主要功能

  1. 01导航至指定 URL
  2. 02截取整页或元素截图
  3. 03点击和悬停页面元素
  4. 04填写表单并选择选项
  5. 05在浏览器中运行 JavaScript
  6. 06读取浏览器控制台日志

适用场景

  1. 01在浏览器中打开指定页面
  2. 02截取整页或指定元素
  3. 03填写表单并操作页面控件
  4. 04查看控制台输出或执行 JavaScript

MCP 相关

提供浏览器自动化工具，并将控制台日志和已捕获的截图作为 MCP 资源公开。README 说明了与 Claude Desktop 的集成方式。

配置

本地服务的配置在各客户端中通用，复制后粘贴到客户端的 MCP 配置文件即可。

mcp.json · 通用配置
{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": [
        "-y",
        "@smithery/cli"
      ]
    }
  }
}
启动命令npx -y @smithery/cli

本地服务需要在你的电脑上安装运行环境（如 Node.js 18+）。各客户端的配置文件位置不同，请参考客户端文档。

安装包
npm@smithery/cli

工具

还没有获取到工具列表

本地服务需要在你的电脑上运行后才能读取工具，维护者暂未提供工具列表。

详细介绍

MCP Server Playwright

目录

功能

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

安装

通过 Smithery 安装

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

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

你可以使用 npx 或 mcp-get 安装此软件包：

使用 npx：
npx @automatalabs/mcp-server-playwright install

此命令将：

  • 检查操作系统兼容性（Windows/macOS）
  • 创建或更新 Claude 配置文件
  • 配置 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"]
    }
  }
}

组件

工具

browser_navigate

在浏览器中导航至任意 URL

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

捕获整个页面或特定元素的屏幕截图

{
  "name": "screenshot-name",     // required
  "selector": "#element-id",     // optional
  "fullPage": true              // optional, default: 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"
}

资源

控制台日志（console://logs）
  • 以文本格式访问浏览器控制台输出
  • 包含浏览器中的所有控制台消息
屏幕截图（screenshot://）
  • 访问捕获的 PNG 图像
  • 通过捕获时指定的名称引用

许可证

MIT 许可证

评论

支持 Markdown

第一次接触 MCP？

从协议是什么，到在客户端里装上第一个服务，这几条回答覆盖了大多数入门问题。

一个开放协议，规定了 AI 应用如何以统一方式连接外部工具与数据源。客户端负责与模型对话，MCP 服务负责提供工具、资源和提示模板，两者通过标准消息通信，同一个服务可以被不同客户端复用。