浏览器自动化服务

一个基于Puppeteer的浏览器自动化服务,提供页面控制、交互、表单填写、截图、诊断和代码执行等功能。

  • by greenfinity
  • ReScript
  • 本地部署
  • 更新于
在 GitHub 查看 greenfinity/puppeteer-mcp

使用说明

@greenfinity/木偶师mcp

使用Puppeteer实现浏览器自动化的MCP服务器-相当于Playwright MCP。

动机

Playwright是Puppeteer的浏览器测试替代品,但归根结底,除了WebKit支持和修补的浏览器可执行文件外,它并没有提供更多功能。

然而,Puppeteer可以使用未打补丁的Chrome和Firefox浏览器可执行文件,这些文件具有优势,例如在自动测试期间进行浏览器内调试。

Puppeteer是一个成熟的测试框架,多年来积累了丰富的经验和代码,因此它是一个更可靠的功能选择。

由于我使用Puppeteer进行测试,我还想将其与我的代理一起用于各种自动化和内省任务。

Puppeteer现有的MCP已被弃用,因此从头开始构建一个新的MCP是有意义的。

安装

npm install @greenfinity/puppeteer-mcp

用法

使用Claude桌面版

添加到您的Claude Desktop配置中:

{
  "mcpServers": {
    "puppeteer": {
      "command": "npx",
      "args": ["@greenfinity/puppeteer-mcp"]
    }
  }
}

CLI选项

npx @greenfinity/puppeteer-mcp [options]

Options:
  --headless          Run browser in headless mode (default: true)
  --no-headless       Run browser in headed mode
  --browser <type>    Browser to use: chrome, firefox (default: chrome)
  --viewport <size>   Viewport size as WIDTHxHEIGHT (default: 1280x720)
  --timeout <ms>      Default timeout in milliseconds (default: 30000)
  --user-data-dir     Path to user data directory for browser profile

支持的工具

导航和页面控制

  • browser_navigate -导航到URL
  • browser_navigate_back -返回浏览器历史记录
  • browser_close -关闭浏览器
  • browser_tabs -列出、创建、关闭或选择浏览器选项卡
  • browser_resize -调整浏览器视口大小
  • browser_wait_for -等待文本、元素或时间

交互

  • browser_click -点击一个元素
  • browser_type -在元素中键入文本
  • browser_hover -将鼠标悬停在元素上
  • browser_drag -在元素之间拖放
  • browser_press_key -按键盘键
  • browser_select_option -在下拉列表中选择一个选项
  • browser_file_upload -上传文件
  • browser_handle_dialog -处理浏览器对话框(警告、确认、提示)

表单

  • browser_fill_form -一次填写多个表单字段

快照和屏幕截图

  • browser_snapshot -捕获可访问性树快照(建议用于LLM交互)
  • browser_take_screenshot -捕获可视屏幕截图

诊断

  • browser_console_messages -获取控制台日志消息
  • browser_network_requests -获取网络请求历史记录

代码执行

  • browser_evaluate -在页面上执行JavaScript
  • browser_run_code -运行Puppeteer代码片段

设置

  • browser_launch -使用特定设置启动或重新启动浏览器(无头模式,userDataDir用于会话持久性)
  • browser_install -如果没有浏览器,请安装

会话保持

要在浏览器重新启动时保留登录会话和Cookie(例如,在无头模式和可见模式之间切换时),请使用 userDataDir 参数与 browser_launch:

browser_launch with userDataDir="/path/to/profile" and headless=false
# Login to your site in the visible browser
# Then switch to headless mode while keeping the session:
browser_launch with userDataDir="/path/to/profile" and headless=true

浏览器配置文件目录存储Cookie、localStorage和其他会话数据,允许您跨模式切换维护经过身份验证的会话。

辅助功能快照

这 browser_snapshot 该工具使用Puppeteer的 page.accessibility.snapshot() 以捕获页面的结构化表示。这是LLM理解页面内容的推荐方式,因为它提供了:

  • 语义信息(角色、名称、状态)
  • 层次结构
  • 交互元素参考
  • 快速轻便(无需视觉模型)

快照中的每个元素都有一个 ref 可以与交互工具一起使用的属性,如 browser_click 和 browser_type.

为什么要重写?

此包在中实现 诏书,一种编译为JavaScript的函数式语言。ReScript在各方面都优于TypeScript——它提供了一个健全的类型系统、出色的模式匹配,并产生干净、可读的JavaScript输出,没有运行时开销。

我在日常开发中使用ReScript。使用ReScript没有任何缺点,TypeScript也没有任何优势。

编译后的JavaScript包含在已发布的npm包中,因此您可以将其用作常规JavaScript模块,而无需任何额外的工具。

本地开发

对于此包的本地开发,package.json脚本中提供了ReScript工具:

# Build the ReScript sources to JavaScript
yarn build

# Watch mode for development (rebuilds on file changes)
yarn rescript:dev

注意:只有在本地修改包源代码时才需要这些脚本。最终用户可以简单地按原样安装和使用该软件包。

许可证

麻省理工学院