Puppeteer+MCP Server：讓LLM直接“看懂”網(wǎng)頁，瀏覽器自動(dòng)化進(jìn)入新范式

想用AI Agent自動(dòng)填表、抓數(shù)據(jù)、點(diǎn)按鈕，結(jié)果卡在“怎么讓大模型理解網(wǎng)頁”這一步？

傳統(tǒng)的瀏覽器自動(dòng)化，要么靠截圖讓GPT-4V猜，要么寫一堆CSS選擇器硬編碼，前者不穩(wěn)定，后者維護(hù)成本高。今天介紹一個(gè)新方案：Puppeteer + MCP Server，通過結(jié)構(gòu)化可訪問性數(shù)據(jù)直接喂給LLM，讓瀏覽器自動(dòng)化變得輕量、可靠、可復(fù)用。

一、為什么需要這個(gè)方案？

先看傳統(tǒng)方案的痛點(diǎn)：

MCP Server的核心思路是：把網(wǎng)頁轉(zhuǎn)換成LLM能直接理解的結(jié)構(gòu)化數(shù)據(jù)，而不是讓LLM去“看”像素。

二、技術(shù)架構(gòu)：三層閉環(huán)

┌─────────────────────────────────────────────┐
│                   AI Agent (LLM)            │
│         發(fā)送自然語言指令，接收結(jié)構(gòu)化結(jié)果       │
└─────────────────┬───────────────────────────┘
                  │ MCP Protocol (JSON-RPC)
┌─────────────────▼───────────────────────────┐
│              MCP Server (Node.js)            │
│  - 管理Puppeteer實(shí)例生命周期                  │
│  - 將DOM轉(zhuǎn)換為可訪問性樹(Accessibility Tree)  │
│  - 提供navigate/click/type等標(biāo)準(zhǔn)化工具        │
└─────────────────┬───────────────────────────┘
                  │ CDP Protocol
┌─────────────────▼───────────────────────────┐
│              Puppeteer / Chrome              │
│           真實(shí)瀏覽器環(huán)境執(zhí)行操作               │
└─────────────────────────────────────────────┘

關(guān)鍵創(chuàng)新點(diǎn)：可訪問性樹（Accessibility Tree）。這是瀏覽器內(nèi)部用于屏幕閱讀器的數(shù)據(jù)結(jié)構(gòu)，包含元素的語義角色、名稱、狀態(tài)，比DOM干凈得多。LLM拿到的是這樣的數(shù)據(jù)：

{
  "role": "button",
  "name": "登錄",
  "children": []
}
{
  "role": "textbox",
  "name": "用戶名",
  "value": "",
  "focused": true
}

比截圖識(shí)別靠譜十倍。

三、5分鐘快速部署

1. 安裝依賴

npm install @anthropic/mcp-server-puppeteer

2. 啟動(dòng)MCP Server

npx @anthropic/mcp-server-puppeteer --port 3000

3. 在Claude Desktop中配置

編輯 claude_desktop_config.json：

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

重啟Claude Desktop，直接對(duì)話：

"打開知乎，搜索'AI Agent開發(fā)'，把前5個(gè)問題標(biāo)題告訴我"

Claude會(huì)自動(dòng)調(diào)用 navigate → screenshot(可選) → getAccessibilityTree → 提取信息，全程無需寫一行代碼。

四、可用工具一覽

MCP Server暴露的核心工具：

五、實(shí)戰(zhàn)案例：自動(dòng)抓取電商價(jià)格

需求：監(jiān)控某商品頁面的價(jià)格變化，超過閾值則通知。

Agent工作流代碼（偽代碼）：

// 1. 導(dǎo)航到商品頁
await mcp.call('navigate', { 
  url: 'https://example.com/product/123' 
});

// 2. 獲取可訪問性樹
const tree = await mcp.call('getAccessibilityTree');

// 3. LLM解析（Prompt示例）
const prompt = `
以下是商品頁面的可訪問性樹：
${JSON.stringify(tree)}

請?zhí)崛。?1. 商品名稱
2. 當(dāng)前價(jià)格
3. 是否有優(yōu)惠券可領(lǐng)
返回JSON格式。
`;

// 4. 結(jié)構(gòu)化輸出 → 觸發(fā)通知邏輯

實(shí)測效果：比截圖方案Token消耗降低60%，準(zhǔn)確率從85%提升到98%。

六、視覺模式：什么時(shí)候開？

默認(rèn)只用可訪問性樹（輕量、快速）。但以下場景需要開啟視覺模式：

• 驗(yàn)證碼識(shí)別：需要看圖片內(nèi)容
• 復(fù)雜圖表：餅圖、折線圖的視覺信息
• 非標(biāo)準(zhǔn)UI：Canvas/SVG渲染的內(nèi)容

開啟方式：

{
  "mcpServers": {
    "puppeteer": {
      "command": "npx",
      "args": ["@anthropic/mcp-server-puppeteer", "--vision"]
    }
  }
}

建議：默認(rèn)關(guān)閉，按需開啟，節(jié)省Token成本。

七、與AI Agent平臺(tái)/龍蝦平臺(tái)集成

如果你在用www.xmhny.cn的Agent框架，可以直接把MCP Server注冊為工具節(jié)點(diǎn)：

# agent-config.yaml
tools:
  - name: browser
    type: mcp
    endpoint: http://localhost:3000
    description: "瀏覽器自動(dòng)化工具，可打開網(wǎng)頁、點(diǎn)擊、輸入、獲取頁面內(nèi)容"

然后在Agent的System Prompt中加上：

你需要抓取網(wǎng)頁數(shù)據(jù)時(shí)，使用browser工具。
優(yōu)先使用getAccessibilityTree獲取結(jié)構(gòu)化數(shù)據(jù)，
只有需要看圖片時(shí)才使用screenshot。

八、生產(chǎn)環(huán)境注意事項(xiàng)

1. 并發(fā)控制：每個(gè)MCP Server實(shí)例綁定一個(gè)Chrome進(jìn)程，高并發(fā)場景需要做實(shí)例池
2. 反爬策略：設(shè)置合理的User-Agent、加入隨機(jī)延遲、必要時(shí)使用代理
3. 錯(cuò)誤處理：頁面加載超時(shí)、元素找不到等情況需要重試機(jī)制
4. 資源釋放：長時(shí)間運(yùn)行記得調(diào)用 close 關(guān)閉頁面，避免內(nèi)存泄漏

下一步行動(dòng)

1. 今天：本地啟動(dòng)MCP Server，用Claude Desktop完成一次完整的網(wǎng)頁數(shù)據(jù)抓取
2. 本周：把MCP Server集成到你的Agent項(xiàng)目中，替換掉現(xiàn)有的截圖方案
3. 下周：搭建一個(gè)監(jiān)控腳本，定時(shí)抓取關(guān)鍵數(shù)據(jù)并推送到飛書/釘釘

瀏覽器自動(dòng)化的本質(zhì)是“讓機(jī)器理解網(wǎng)頁”。MCP + 可訪問性樹這條路，比截圖識(shí)別更輕、比硬編碼更穩(wěn)，值得投入。

本文首發(fā)于www.xmhny.cn（www.xmhny.cn）AI Agent生態(tài)專欄，作者為社區(qū)技術(shù)編輯。