Puppeteer MCP：AI自动化模拟真实用户操作，实现复杂浏览器交互_AI热点日报

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

类型：热点整理2026-07-09

PuppeteerMCP是基于MCP的浏览器自动化工具，通过控制无头或可见Chrome，实现页面导航、点击、表单填写、截图及JavaScript执行等复杂交互，支持与大语言模型集成，配置灵活高效，提供丰富API，适用于测试、爬虫等场景，支持多浏览器实例，高效可靠。

浏览器自动化领域的革命性工具，Puppeteer MCP 让您轻松驾驭复杂的网页交互操作！本文将从零基础开始，带您全面了解 Puppeteer MCP 的核心功能、详细配置方法以及实际应用技巧，帮助您将浏览器自动化变得简单而高效。

一、Puppeteer 能做什么？

几乎每位开发者在处理网页测试、数据采集等任务时，都难免遇到复杂的浏览器交互模拟难题。浏览器自动化能够大幅节省时间和精力，而 Puppeteer 正是这样一款高效、易用的工具。

简单来说，我们在浏览器中手动执行的绝大多数操作，都可以借助 Puppeteer 来自动完成。例如：

生成页面 PDF
抓取 SPA（单页应用）并生成预渲染内容（即“SSR”服务器端渲染）
自动提交表单，开展 UI 测试
模拟键盘输入
创建实时更新的自动化测试环境，直接在最新版 Chrome 中执行 JavaScript
捕获网站的 timeline trace，深入分析性能问题
测试浏览器扩展等

二、什么是 Puppeteer MCP？

Puppeteer MCP 是一个基于 Model Context Protocol 的服务器，通过提供强大的浏览器自动化能力，让开发者能够轻松与网页进行交互。其核心特点包括：

截取屏幕截图
在真实的浏览器环境中执行 JavaScript
将浏览器的操作能力封装为简洁接口，开发者只需调用这些接口即可实现复杂的自动化任务

Puppeteer MCP 的核心基于 Puppeteer（Google 开发的 Node.js 库），用于控制无头 Chrome 或 Chromium 浏览器。通过 MCP 协议，Puppeteer MCP 进一步拓展了 Puppeteer 的功能，使其能够更灵活地与 大语言模型（LLM） 集成，实现更加智能的自动化操作。

三、Puppeteer MCP 的核心功能

Puppeteer MCP 提供了丰富的工具与资源，主要功能模块如下：

1. 浏览器导航与交互

通过 puppeteer_navigate 工具可轻松导航至任意 URL。示例：

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

借助 puppeteer_click 和 puppeteer_hover 工具模拟点击与悬停操作，使用 CSS 选择器精准定位元素：

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

2. 表单填写与选择

puppeteer_fill 和 puppeteer_select 工具用于填写输入字段以及选择下拉菜单选项：

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

3. 屏幕截图与监控

puppeteer_screenshot 工具可捕获整个页面或特定元素的截图：

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

此外，通过 console://logs 资源可实时获取浏览器控制台输出信息，便于调试与监控。

4. JavaScript 执行

puppeteer_evaluate 工具可在浏览器控制台中执行任意 JavaScript 代码：

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

四、快速开始：如何配置并使用 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"]
    }
  }
}

启动选项：自定义浏览器行为

有两种方式：

环境变量：在 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_navigate
- 在浏览器中导航到任意 URL
- 输入：
  - 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。
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
- 选择带有 SELECT 标签的元素
- 输入：
  - selector (string): 要选择的元素的 CSS 选择器
  - value (string): 要选择的值
puppeteer_evaluate
- 在浏览器控制台中执行 JavaScript
- 输入：script (string): 要执行的 JavaScript 代码

五、常见问题与实用小提示

常见问题

问：Puppeteer MCP 可以控制非无头浏览器吗？
答：可以。通过将 headless 选项设置为 false，即可打开可见的浏览器窗口，方便调试与观察。
问：使用 NPX 方式启动时，浏览器窗口一闪而过怎么办？
答：请确保配置中 launchOptions 的 headless 为 false，并且系统已安装 Chrome 或 Chromium。同时，检查 MCP 客户端（如 Claude Desktop）是否正确加载了配置。
问：如何使用 Puppeteer MCP 抓取动态渲染的页面？
答：先使用 puppeteer_navigate 导航到目标页面，然后等待动态内容加载（可通过 puppeteer_evaluate 执行 setTimeout 或监听特定元素），最后用 puppeteer_screenshot 或 puppeteer_evaluate 获取所需内容。
问：为什么执行 puppeteer_click 时元素定位失败？
答：请确保 CSS 选择器准确无误。可使用浏览器开发者工具检查元素的实际选择器，注意特殊字符的转义。另外，若元素位于 iframe 中，需要先切换到正确的 frame 再操作。

实用小提示

提示：建议在开发环境中使用 headless: false 以便观察操作过程，生产环境则设置为 headless: true 以提升性能。
提示：通过 ALLOW_DANGEROUS: "true" 环境变量可以开启一些高级启动参数（如 --no-sandbox），但请务必注意安全风险。
提示：使用 puppeteer_screenshot 时，若不指定 selector，默认截取整个视口；若指定，则只截取匹配元素所在的区域。
提示：当需要频繁导航到不同页面时，建议在每次导航前调用 puppeteer_navigate 并传入新的 launchOptions（如果需要重启浏览器），否则浏览器会保持上一次的状态。

写在最后

Puppeteer MCP 是一款功能强大且易于上手的浏览器自动化工具。它提供了丰富的自动化能力，并具备高度的灵活性与可扩展性。无论是网页测试、数据采集，还是复杂的自动化任务，Puppeteer MCP 都能轻松胜任。如果您正在寻找一套高效的浏览器自动化解决方案，不妨立即开始体验 Puppeteer MCP！

来源：https://www.53ai.com/news/zhinengyingjian/2025051132106.html

ai 人工智能

延伸阅读

补充最近整理过的热点入口。