链载Ai

标题: Puppeteer MCP：让AI自动化模拟真实用户操作，实现浏览器复杂交互！ [打印本页]

---

作者: 链载Ai    时间: 昨天 13:19
标题: Puppeteer MCP：让AI自动化模拟真实用户操作，实现浏览器复杂交互！

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

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

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":{"UPPETEER_LAUNCH_OPTIONS":"{\"headless\":false,\"executablePath\":\"C:/ProgramFiles/Google/Chrome/Application/chrome.exe\",\"args\":[]}","ALLOW_DANGEROUS":"true"}}}}

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

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

构建：Docker 构建：

dockerbuild-tmcp/puppeteer-fsrc/puppeteer/Dockerfile.

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

ingFang SC", "Microsoft YaHei", sans-serif;font-size: 0.95rem;line-height: 1.5;color: rgb(51, 51, 51);font-style: normal;font-variant-ligatures: normal;font-variant-caps: normal;font-weight: 400;letter-spacing: normal;orphans: 2;text-align: start;text-indent: 0px;text-transform: none;widows: 2;word-spacing: 0px;-webkit-text-stroke-width: 0px;white-space: normal;background-color: rgb(255, 255, 255);text-decoration-thickness: initial;text-decoration-style: initial;text-decoration-color: initial;" class="list-paddingleft-1">
• ingFang SC", "Microsoft YaHei", sans-serif;font-size: 0.95rem;line-height: 1.5;">

  ingFang SC", "Microsoft YaHei", sans-serif;font-size: 0.95rem;line-height: 1.5;">ingFang SC", "Microsoft YaHei", sans-serif;font-weight: 600;">puppeteer_navigate

ingFang SC", "Microsoft YaHei", sans-serif;font-size: 0.95rem;line-height: 1.5;" class="list-paddingleft-1">
• ingFang SC", "Microsoft YaHei", sans-serif;font-size: 0.95rem;line-height: 1.5;">url
  (string, required): 要导航到的 URL
• ingFang SC", "Microsoft YaHei", sans-serif;font-size: 0.95rem;line-height: 1.5;">launchOptions
  (object, optional): PuppeteerJS 启动选项。默认为 null。如果更改且不为 null，浏览器将重启。示例：{ headless: true, args: ['--user-data-dir="C:/Data"'] }
• ingFang SC", "Microsoft YaHei", sans-serif;font-size: 0.95rem;line-height: 1.5;">allowDangerous
  (boolean, optional): 允许降低安全性的危险启动选项。当为 false 时，像--no-sandbox、--disable-web-security这样的危险参数将抛出错误。默认为 false。
ingFang SC", "Microsoft YaHei", sans-serif;font-size: 0.95rem;line-height: 1.5;" class="list-paddingleft-1">
• 在浏览器中导航到任何 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绝对值得一试！

---

欢迎光临 链载Ai (https://www.lianzai.com/)

Powered by Discuz! X3.5