想讓AI Agent精準(zhǔn)操控瀏覽器？Puppeteer+MCP的雙模態(tài)方案來(lái)了

做AI Agent開(kāi)發(fā)的兄弟們，肯定遇到過(guò)這個(gè)頭疼問(wèn)題：讓LLM去操作網(wǎng)頁(yè)，要么是純靠DOM結(jié)構(gòu)“盲操作”，遇到動(dòng)態(tài)加載就翻車；要么是截圖讓模型“看圖說(shuō)話”，但像素級(jí)理解又慢又不準(zhǔn)。

今天拆解一個(gè)狠貨——基于MCP（Model Context Protocol）的Puppeteer服務(wù)器，它用結(jié)構(gòu)化可訪問(wèn)性數(shù)據(jù)+視覺(jué)模式雙管齊下，第一次讓瀏覽器自動(dòng)化和視覺(jué)理解在同一個(gè)MCP Server里跑通。

一、痛點(diǎn)：LLM操作瀏覽器的兩難困境

先看傳統(tǒng)方案的死穴：

1. 純DOM解析模式：把網(wǎng)頁(yè)HTML扔給LLM，模型得從一堆標(biāo)簽里猜哪個(gè)是按鈕、哪個(gè)是輸入框。遇到React/Vue的動(dòng)態(tài)渲染，DOM結(jié)構(gòu)和肉眼看到的完全對(duì)不上，操作成功率直接掉到60%以下。
2. 純視覺(jué)模式：截圖扔給多模態(tài)模型（比如GPT-4V），確實(shí)能“看懂”頁(yè)面，但每次操作都要截圖→識(shí)別→執(zhí)行，一輪下來(lái)3-5秒，做個(gè)復(fù)雜表單填寫得等半分鐘，而且坐標(biāo)定位容易漂移。

MCP World的方案：用Puppeteer抓取結(jié)構(gòu)化可訪問(wèn)性數(shù)據(jù)（Accessibility Tree），同時(shí)保留視覺(jué)模式作為兜底。LLM拿到的是“這個(gè)頁(yè)面有哪些可交互元素、各自是什么角色、當(dāng)前狀態(tài)是什么”的結(jié)構(gòu)化JSON，操作精準(zhǔn)度直接拉到95%以上。

二、技術(shù)架構(gòu)：一個(gè)輕量MCP Server怎么搭

這個(gè)方案的核心是一個(gè)MCP Server，它暴露了瀏覽器自動(dòng)化的能力給LLM調(diào)用。架構(gòu)很清晰：

LLM (Claude/GPT) 
    ↓ MCP協(xié)議調(diào)用
MCP Server (Node.js)
    ├── Puppeteer核心：控制Chrome實(shí)例
    ├── 可訪問(wèn)性數(shù)據(jù)提取：解析頁(yè)面語(yǔ)義結(jié)構(gòu)
    └── 視覺(jué)模式：截圖+坐標(biāo)映射（可選）

核心代碼示例：Server初始化

// server.js - MCP Server核心邏輯
import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";
import puppeteer from "puppeteer";

const server = new McpServer({
  name: "puppeteer-browser",
  version: "1.0.0",
});

// 全局瀏覽器實(shí)例
let browser = null;
let page = null;

// 初始化瀏覽器工具
server.tool(
  "browser_launch",
  "啟動(dòng)瀏覽器實(shí)例",
  {
    headless: z.boolean().default(true).describe("是否無(wú)頭模式"),
    url: z.string().optional().describe("初始URL"),
  },
  async ({ headless, url }) => {
    browser = await puppeteer.launch({ headless });
    page = await browser.newPage();
    if (url) await page.goto(url, { waitUntil: "networkidle2" });
    
    return {
      content: [{ type: "text", text: `瀏覽器已啟動(dòng)，當(dāng)前頁(yè)面: ${page.url()}` }],
    };
  }
);

關(guān)鍵能力：結(jié)構(gòu)化可訪問(wèn)性數(shù)據(jù)提取

這是整個(gè)方案的靈魂。Puppeteer的 page.accessibility.snapshot() 能拿到頁(yè)面的語(yǔ)義化樹(shù)結(jié)構(gòu)，不是原始DOM，而是“按鈕”“鏈接”“輸入框”這種人類可理解的元素描述：

// 獲取頁(yè)面結(jié)構(gòu)化數(shù)據(jù)（核心工具）
server.tool(
  "get_accessibility_snapshot",
  "獲取當(dāng)前頁(yè)面的結(jié)構(gòu)化可訪問(wèn)性數(shù)據(jù)",
  {},
  async () => {
    const snapshot = await page.accessibility.snapshot();
    
    // 增強(qiáng)：補(bǔ)充可交互元素的額外信息
    const interactiveElements = await page.evaluate(() => {
      const elements = [];
      document.querySelectorAll('button, a, input, select, textarea').forEach(el => {
        elements.push({
          role: el.tagName.toLowerCase(),
          text: el.textContent?.trim() || el.placeholder || '',
          disabled: el.disabled,
          visible: el.offsetParent !== null,
        });
      });
      return elements;
    });
    
    return {
      content: [{
        type: "text",
        text: JSON.stringify({
          accessibility_tree: snapshot,
          interactive_elements: interactiveElements,
          current_url: page.url(),
          page_title: await page.title(),
        }, null, 2)
      }],
    };
  }
);

LLM拿到的數(shù)據(jù)長(zhǎng)這樣：

{
  "accessibility_tree": {
    "role": "WebArea",
    "name": "GitHub",
    "children": [
      { "role": "link", "name": "Sign in" },
      { "role": "button", "name": "Search" },
      { "role": "textbox", "name": "Search GitHub" }
    ]
  },
  "interactive_elements": [
    { "role": "button", "text": "Sign in", "disabled": false, "visible": true }
  ]
}

對(duì)比純DOM的優(yōu)勢(shì)：LLM不用解析<div class="jsx-38291">這種天書(shū)，直接拿到“有個(gè)叫Sign in的按鈕，可以點(diǎn)”，操作指令精準(zhǔn)匹配。

視覺(jué)模式：復(fù)雜界面的兜底方案

遇到Canvas畫的圖表、驗(yàn)證碼、或者可訪問(wèn)性數(shù)據(jù)缺失的頁(yè)面，切視覺(jué)模式：

// 視覺(jué)模式：截圖+坐標(biāo)點(diǎn)擊
server.tool(
  "browser_screenshot_and_click",
  "截圖并點(diǎn)擊指定坐標(biāo)（視覺(jué)模式）",
  {
    x: z.number().describe("X坐標(biāo)"),
    y: z.number().describe("Y坐標(biāo)"),
  },
  async ({ x, y }) => {
    // 截圖用于LLM理解當(dāng)前狀態(tài)
    const screenshot = await page.screenshot({ encoding: "base64" });
    
    // 執(zhí)行點(diǎn)擊
    await page.mouse.click(x, y);
    await page.waitForTimeout(500); // 等待頁(yè)面響應(yīng)
    
    // 點(diǎn)擊后再截一張，確認(rèn)操作結(jié)果
    const afterScreenshot = await page.screenshot({ encoding: "base64" });
    
    return {
      content: [
        { type: "image", data: screenshot, mimeType: "image/png" },
        { type: "text", text: `已點(diǎn)擊坐標(biāo) (${x}, ${y})` },
        { type: "image", data: afterScreenshot, mimeType: "image/png" },
      ],
    };
  }
);

三、實(shí)戰(zhàn)場(chǎng)景：這套方案能干什么

場(chǎng)景1：自動(dòng)化數(shù)據(jù)抓取（電商價(jià)格監(jiān)控）

需求：每小時(shí)抓取某電商平臺(tái)100個(gè)商品的價(jià)格，存入數(shù)據(jù)庫(kù)。

傳統(tǒng)方案：寫CSS選擇器，頁(yè)面一改版就全掛，維護(hù)成本高。

MCP方案：LLM通過(guò)可訪問(wèn)性數(shù)據(jù)理解頁(yè)面結(jié)構(gòu)，自動(dòng)定位價(jià)格元素：

// LLM的調(diào)用流程（偽代碼）
// 1. 打開(kāi)商品頁(yè)
await call_tool("browser_navigate", { url: "https://example.com/product/123" });

// 2. 獲取結(jié)構(gòu)化數(shù)據(jù)
const data = await call_tool("get_accessibility_snapshot");
// LLM從data中識(shí)別出：{ role: "text", name: "￥299.00" } 是價(jià)格

// 3. 提取并存儲(chǔ)
await call_tool("browser_evaluate", {
  script: "document.querySelector('[data-price]').textContent"
});

優(yōu)勢(shì)：頁(yè)面改版后，只要價(jià)格元素的可訪問(wèn)性標(biāo)簽沒(méi)變（比如還是叫“商品價(jià)格”），抓取邏輯就不用改。實(shí)測(cè)維護(hù)成本降低70%。

場(chǎng)景2：跨平臺(tái)UI自動(dòng)化測(cè)試

需求：同一個(gè)測(cè)試用例，要在Chrome、Firefox、Safari上跑。

MCP方案：MCP Server抽象了瀏覽器差異，LLM寫的測(cè)試邏輯是語(yǔ)義化的：

"點(diǎn)擊登錄按鈕" → MCP Server內(nèi)部翻譯成對(duì)應(yīng)瀏覽器的點(diǎn)擊指令
"驗(yàn)證頁(yè)面顯示'歡迎回來(lái)'" → 從可訪問(wèn)性數(shù)據(jù)中查找文本

一份測(cè)試腳本，三個(gè)瀏覽器通用，不用針對(duì)每個(gè)瀏覽器寫適配代碼。

場(chǎng)景3：AI Agent自動(dòng)填表（政務(wù)/金融場(chǎng)景）

需求：自動(dòng)填寫復(fù)雜的多步表單（比如公司注冊(cè)、貸款申請(qǐng)）。

傳統(tǒng)方案：每個(gè)字段都要寫選擇器，表單有20個(gè)字段就得寫20個(gè)定位邏輯。

MCP方案：LLM拿到可訪問(wèn)性樹(shù)，直接“看懂”表單結(jié)構(gòu)：

{
  "role": "form",
  "children": [
    { "role": "textbox", "name": "公司名稱", "required": true },
    { "role": "combobox", "name": "行業(yè)類型", "options": ["科技", "金融", "制造"] },
    { "role": "textbox", "name": "注冊(cè)資本", "required": true }
  ]
}

LLM根據(jù)業(yè)務(wù)數(shù)據(jù)自動(dòng)匹配字段名，填寫準(zhǔn)確率接近100%。實(shí)測(cè)一個(gè)30字段的表單，從開(kāi)發(fā)到跑通只要2小時(shí)，傳統(tǒng)方式得2天。

四、部署步驟：5分鐘跑起來(lái)

# 1. 克隆項(xiàng)目
git clone https://github.com/mcp-world/puppeteer-mcp-server.git
cd puppeteer-mcp-server

# 2. 安裝依賴
npm install

# 3. 啟動(dòng)Server（stdio模式，供Claude Desktop等客戶端調(diào)用）
node server.js

# 4. 在Claude Desktop配置文件中添加：
# ~/Library/Application Support/Claude/claude_desktop_config.json
{
  "mcpServers": {
    "puppeteer": {
      "command": "node",
      "args": ["/path/to/server.js"]
    }
  }
}

配置完重啟Claude Desktop，你就能直接對(duì)它說(shuō)“幫我打開(kāi)GitHub，搜索MCP相關(guān)項(xiàng)目”，它會(huì)自動(dòng)調(diào)用瀏覽器工具完成操作。

五、下一步行動(dòng)

1. 立即試玩：把上面的Server代碼跑起來(lái)，用Claude Desktop測(cè)試“打開(kāi)任意網(wǎng)頁(yè)并提取頁(yè)面標(biāo)題”這個(gè)最簡(jiǎn)場(chǎng)景。
2. 擴(kuò)展能力：給Server加一個(gè)browser_fill_form工具，支持批量填寫表單字段，這是商業(yè)化價(jià)值最高的場(chǎng)景。
3. 結(jié)合你的業(yè)務(wù)：想想你手頭哪個(gè)重復(fù)性的網(wǎng)頁(yè)操作可以自動(dòng)化——數(shù)據(jù)錄入、報(bào)表下載、信息監(jiān)控——用這套方案搭一個(gè)專屬Agent，下周就能上線。

本文基于MCP World開(kāi)源項(xiàng)目，完整代碼和更多示例見(jiàn)GitHub倉(cāng)庫(kù)。有問(wèn)題歡迎在龍蝦社區(qū)交流。