Puppeteer MCP：让AI自动化模拟真实用户操作，实现浏览器复杂交互！

最新推荐文章于 2025-04-26 16:52:57 发布

程序员辣条

最新推荐文章于 2025-04-26 16:52:57 发布

阅读量1.7k

点赞数 23

文章标签：人工智能 AI 大模型 AI大模型程序员 MCP Agent

本文链接：https://blog.csdn.net/m0_65555479/article/details/147154351

版权

几乎每个做开发的小伙伴在用到浏览器时都会遇到网页测试、数据抓取等等这一系列复杂的交互模拟场景。

这就涉及到浏览器自动化，它能帮助我们开发人员节省大量时间和精力，所以以浏览器自动化已经成为一种不可或缺的工具。

Puppeteer就是这样一个高效、好用的浏览器自动化工具，下面我们就来好好聊聊这款神奇的家伙事儿！

Puppeteer能做什么?

这么说吧，我们在浏览器中手动执行的绝大多数操作都可以使用 Puppeteer来完成，就说厉不厉害吧!

比如，生成页面 PDF，抓取 SPA（单页应用）并生成预渲染内容，就是“SSR”-服务器端渲染。

再比如，自动提交表单，进行 UI 测试，键盘输入，以及创建一个时时更新的自动化测试环境，使用最新的 JavaScript 和浏览器功能直接在最新版本的Chrome中执行测试。

包括，捕获网站的 timeline trace，用来帮助分析性能问题，或其它测试浏览器扩展等等功能。

什么是Puppeteer MCP？

Puppeteer MCP 是一个基于 Model Context Protocol 的服务器，它通过提供浏览器自动化功能，让我们开发人员能够轻松与网页交互。

实现截取屏幕截图，并在真实的浏览器环境中执行 JavaScript，换句话说，Puppeteer MCP 是一个强大的工具。

它将浏览器的操作能力封装成了一组简单的接口，而我们开发人员只需通过调用这些接口，就能实现复杂的浏览器自动化任务。

Puppeteer MCP 的核心是基于Puppeteer，是一个由 Google 开发的Node.js 库，用来控制无头Chrome或Chromium浏览器。

通过MCP协议，Puppeteer MCP将Puppeteer的功能进一步扩展，使它能够更灵活地与大语言模型（LLM）集成，以此来实现更智能的自动化操作。

Puppeteer MCP的核心功能都有哪些呢？

Puppeteer MCP毫无疑问给我们开发人员提供了一系列强大的工具和资源，下面就是它的主要功能模块：

1. 浏览器导航与交互：Puppeteer MCP 提供了 `puppeteer_navigate` 工具，可以轻松导航到任何 URL。我们开发人员只需提供目标 URL，就可以让浏览器自动加载页面。

此外，我们还可以通过 `launchOptions`参数自定义浏览器的启动选项，比如是否以无头模式运行、设置浏览器窗口大小等。

{  "url": "https://example.com",  "launchOptions": {    "headless": false,    "defaultViewport": {"width": 1280, "height": 720}  }}

通过 puppeteer_click 和 puppeteer_hover 工具，开发人员还可以模拟用户在页面上的点击和悬停操作，这些工具通过 CSS 选择器定位元素，确保操作的精准性。

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

2. 表单填写与选择：Puppeteer MCP 提供了`puppeteer_fill` 和 `puppeteer_select` 工具，用于填写输入字段和选择下拉菜单中的选项，这些工具同样通过 CSS 选择器定位元素，并将指定的值填入或选择。

{  "selector": "#username",  "value": "test_user"}

3. 屏幕截图与监控：Puppeteer MCP 的 `puppeteer_screenshot` 工具可以捕获整个页面或特定元素的屏幕截图。我们只需提供截图的名称和可选的 CSS 选择器，即可保存截图。

{  "name": "screenshot1",  "selector": "#content",  "width": 800,  "height": 600}

此外，Puppeteer MCP还提供了控制台日志监控功能，通过 console://logs 资源，我们可以实时获取浏览器控制台的输出信息，从而更好地调试和监控自动化任务。

4. JavaScript 执行：通过 `puppeteer_evaluate` 工具，开发者可以在浏览器控制台中执行任意的 JavaScript 代码。这使得 Puppeteer MCP 能够处理复杂的网页交互和动态内容。

{  "script": "document.querySelector('#username').value = 'test_user';"}

Puppeteer MCP也提供了高度的灵活性，支持通过环境变量或工具调用参数自定义浏览器的行为。

比如，可以通过设置 PUPPETEER_LAUNCH_OPTIONS 环境变量来调整浏览器的启动选项。

Puppeteer MCP如何使用？

Puppeteer MCP的我、配置也并不复杂，下面是使用Puppeteer服务器的 Claude Desktop 配置：

Docker

注意 Docker 实现将使用无头 Chromium，而 NPX 版本将打开一个浏览器窗口。

{  "mcpServers": {    "puppeteer": {      "command": "docker",      "args": ["run", "-i", "--rm", "--init", "-e", "DOCKER_CONTAINER=true", "mcp/puppeteer"]    }  }}

NPX

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

启动选项

我们可以通过两种方式自定义 Puppeteer 的浏览器行为：

环境变量：在 MCP 配置的 env 参数中设置 PUPPETEER_LAUNCH_OPTIONS，值为 JSON 编码的字符串：

{  "mcpServers": {    "mcp-puppeteer": {      "command": "npx",      "args": ["-y", "@modelcontextprotocol/server-puppeteer"],      "env": {        "PUPPETEER_LAUNCH_OPTIONS": "{ \"headless\": false, \"executablePath\": \"C:/Program Files/Google/Chrome/Application/chrome.exe\", \"args\": [] }",        "ALLOW_DANGEROUS": "true"      }    }  }}

工具调用参数：将 launchOptions 和 allowDangerous 参数传递

{  "url": "https://example.com",  "launchOptions": {    "headless": false,    "defaultViewport": {"width": 1280, "height": 720}  }}

构建：Docker 构建：

docker build -t mcp/puppeteer -f src/puppeteer/Dockerfile .

以上我们就完成了Puppeteer MCP的配置，下面是列举一些Puppeteer MCP常用工具：

puppeteer_navigate
- url
  (string, required): 要导航到的 URL
- launchOptions
  (object, optional): PuppeteerJS 启动选项。默认为 null。如果更改且不为 null，浏览器将重启。示例：{ headless: true, args: ['--user-data-dir="C:/Data"'] }
- allowDangerous
  (boolean, optional): 允许降低安全性的危险启动选项。当为 false 时，像 --no-sandbox、--disable-web-security 这样的危险参数将抛出错误。默认为 false。
- 在浏览器中导航到任何 URL
- 输入：
puppeteer_screenshot
- name
  (string, required): 屏幕截图的名称
- selector
  (string, optional): 要截取的元素的 CSS 选择器
- width
  (number, optional, default: 800): 屏幕截图宽度
- height
  (number, optional, default: 600): 屏幕截图高度
- 捕获整个页面或特定元素的屏幕截图
- 输入：
puppeteer_click
- 点击页面上的元素
- 输入：selector (string): 要点击的元素的 CSS 选择器
puppeteer_hover
- 悬停在页面上的元素
- 输入：selector (string): 要悬停的元素的 CSS 选择器
puppeteer_fill
- selector
  (string): 输入字段的 CSS 选择器
- value
  (string): 要填写的值
- 填写输入字段
- 输入：
puppeteer_select
- selector
  (string): 要选择的元素的 CSS 选择器
- value
  (string): 要选择的值
- 选择带有 SELECT 标签的元素
- 输入：
puppeteer_evaluate
- 在浏览器控制台中执行 JavaScript
- 输入：script (string): 要执行的 JavaScript 代码