几乎每个做开发的小伙伴在用到浏览器时都会遇到网页测试、数据抓取等等这一系列复杂的交互模拟场景。
这就涉及到浏览器自动化，它能帮助我们开发人员节省大量时间和精力，所以以浏览器自动化已经成为一种不可或缺的工具。
Puppeteer就是这样一个高效、好用的浏览器自动化工具，下面我们就来好好聊聊这款神奇的家伙事儿！
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绝对值得一试！
