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

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

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

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

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

什么是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 代码

写在最后

Puppeteer MCP 是一款功能强大、使用简单的浏览器自动化工具，它不仅给我们提供了丰富的自动化功能，还具有高度的灵活性和可扩展性。

不管是网页测试、数据抓取，还是自动化任务，Puppeteer MCP 都能轻松胜任，如果你正在寻找一款高效的浏览器自动化工具，Puppeteer MCP绝对值得一试！