Puppeteer MCP Server：一句话实现浏览器自动化

前言

最近热衷于找一些好玩的MCP，集成在cursor中，给大模型外挂许多有趣的功能，在开发的代码的同时，在IDE中可以获得更多的乐趣。例如：

1. 什么是MCP？本地如何开发MCP Server
2. MCP实战 | 如何一句话操作 gitHub 代码库
3. 如何调用 MCP server 实现天气查询
4. 自定义 MCP Server，大模型连接本地 MySQL 实现了统计分析
5. Pages MCP Server，一句话完成旅游出行规划
6. MCP实战 | IDE中如何掌握股市动态
7. Playwright MCP Server 使用指南：让大模型拥有浏览器自动化能力
8. Firecrawl MCP 实战 | 在 大模型中实现网页爬取、结构分析与信息提取
9. 高德地图MCP实战 | 在 大模型 中优雅地查询 POI 和天气

今天要实践的 MCP Server：Puppeteer浏览器自动化，该 MCP Server 是一个利用 Puppeteer 提供浏览器自动化功能的服务器，可让大模型与网页交互，进行截图，并在真实的浏览器环境中执行 JavaScript 代码。

配置

我们在 codebuddy 中找到 mcp server 配置入口。

接着，点击配置 mcp server 然后进入到 Craft_mcp_settings.json 编辑页面。

将下面 mcp server 的json信息配置进去：

{
  "mcpServers": {
    "puppeteer": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-puppeteer"]
    }
  }
}

在实际安装的过程中，可能会出现安装错误，我们可以手动安装 puppeteer-core 和 这个 mcp server。

npm install puppeteer-core
npx -y @modelcontextprotocol/server-puppeteer

在MCP页面就可以看到配置的 mcp server 信息。

puppeteer 提供了很多tools。包括：

1. puppeteer_navigate：在浏览器中导航到任何 URL。
2. puppeteer_screenshot：捕获整个页面或特定元素的屏幕截图。
3. puppeteer_click：点击页面上的元素。
4. puppeteer_hover：将鼠标悬停在页面上的元素上。
5. puppeteer_fill：填写输入字段。
6. puppeteer_select：选择带有 SELECT 标签的元素。
7. puppeteer_evaluate：在浏览器控制台中执行 JavaScript。

应用

配置完成后，您可以在 Cursor 中通过 Agent 模式调用上述工具，实现对网页的自动化操作。例如：

1. 使用 puppeteer_navigate 工具导航到指定的网页。

我要求打开腾讯云开发者社区，Puppeteer mcp server 搜索到了网址，并在浏览器中打开了这个页面。

2. 使用 puppeteer_screenshot 工具截取网页的屏幕截图。

3. 使用 puppeteer_click 工具点击网页上的按钮或链接

如果我们想要点击页面上的某个按钮或者链接，我们直接告诉 Puppeteer mcp server，运行 click 工具，然后他会根据截图来识别浏览器中的内容，然后进行点击跳转。

4. 使用 puppeteer_fill 工具填写表单中的输入字段。
5. 使用 puppeteer_evaluate 工具在浏览器中执行自定义的 JavaScript 代码。

通过这些操作，可以方便地在 Cursor 中实现网页的自动化测试、数据采集等功能，提升开发效率。

结语

Puppeteer MCP Server 是一个强大的工具，能够让大模型通过标准化接口与网页进行交互，实现浏览器自动化操作。通过在 Cursor 中集成该 MCP Server，可以实现对网页的便捷控制和操作，提升工作效率。