想讓AI Agent真正“看懂”網(wǎng)頁(yè)？Puppeteer+結(jié)構(gòu)化可訪問(wèn)性數(shù)據(jù)，打造首個(gè)視覺(jué)增強(qiáng)MCP Server

你有沒(méi)有遇到過(guò)這種場(chǎng)景：讓AI Agent去操作一個(gè)復(fù)雜的電商后臺(tái)、填寫(xiě)一個(gè)動(dòng)態(tài)表單，或者從一個(gè)設(shè)計(jì)感十足的落地頁(yè)里提取信息？結(jié)果它要么卡在登錄驗(yàn)證碼，要么在層層嵌套的DOM里迷了路，要么根本“看不見(jiàn)”那些用Canvas或SVG渲染的關(guān)鍵圖表。

傳統(tǒng)的文本解析（比如抓取HTML）在動(dòng)態(tài)、視覺(jué)驅(qū)動(dòng)的現(xiàn)代Web面前，越來(lái)越力不從心。AI Agent需要的不只是文本，而是視覺(jué)和結(jié)構(gòu)化理解的結(jié)合。

今天，我們來(lái)拆解一個(gè)前沿實(shí)戰(zhàn)案例：如何利用 Puppeteer 的瀏覽器自動(dòng)化能力，結(jié)合 結(jié)構(gòu)化可訪問(wèn)性數(shù)據(jù)（Accessibility Tree），構(gòu)建一個(gè)具備視覺(jué)增強(qiáng)功能的 MCP Server。這不僅僅是技術(shù)炫技，它證明了MCP協(xié)議能將AI Agent的能力從“文本工具調(diào)用”提升到“視覺(jué)場(chǎng)景交互”，為自動(dòng)化開(kāi)辟了全新維度。

為什么是“Puppeteer + 結(jié)構(gòu)化可訪問(wèn)性數(shù)據(jù)”？

• Puppeteer：Google開(kāi)源的Node.js庫(kù)，能控制Headless Chrome，執(zhí)行點(diǎn)擊、滾動(dòng)、截圖等一切瀏覽器操作。它是構(gòu)建自動(dòng)化腳本的利器。
• 結(jié)構(gòu)化可訪問(wèn)性數(shù)據(jù)：瀏覽器內(nèi)部為屏幕閱讀器等輔助技術(shù)生成的頁(yè)面結(jié)構(gòu)化表示（Accessibility Tree）。它比原始DOM更干凈、語(yǔ)義更清晰，包含了按鈕、標(biāo)題、文本框等元素的角色、名稱、狀態(tài)和關(guān)系。
• MCP (Model Context Protocol)：一個(gè)新興的開(kāi)放協(xié)議，旨在標(biāo)準(zhǔn)化AI模型（Agent）與外部工具、數(shù)據(jù)源的交互方式。它讓Agent能像調(diào)用函數(shù)一樣調(diào)用外部能力。

核心突破點(diǎn)在于：我們不再僅僅把網(wǎng)頁(yè)當(dāng)作一堆文本（HTML）扔給AI，而是通過(guò)Puppeteer獲取頁(yè)面的結(jié)構(gòu)化可訪問(wèn)性數(shù)據(jù)，并輔以視覺(jué)截圖，構(gòu)建一個(gè)能同時(shí)理解“頁(yè)面是什么結(jié)構(gòu)”和“頁(yè)面看起來(lái)長(zhǎng)什么樣”的MCP Server。這解決了純文本Agent在復(fù)雜Web交互中的核心痛點(diǎn)。

技術(shù)實(shí)現(xiàn)思路：三步構(gòu)建視覺(jué)增強(qiáng)MCP Server

我們的目標(biāo)是創(chuàng)建一個(gè)MCP Server，它能向AI Agent暴露一組工具，例如：navigate、click、type、get_accessibility_tree、take_screenshot。

第一步：搭建MCP Server骨架

使用TypeScript和MCP SDK，快速搭建一個(gè)Server。

import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";
import { StdioServerTransport } from "@modelcontextprotocol/sdk/server/stdio.js";
import puppeteer from "puppeteer";

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

// 全局瀏覽器實(shí)例
let browser: puppeteer.Browser;
let page: puppeteer.Page;

// 初始化瀏覽器
async function initBrowser() {
  browser = await puppeteer.launch({ headless: "new" });
  page = await browser.newPage();
  await page.setViewport({ width: 1280, height: 800 });
}

第二步：定義核心工具——結(jié)合可訪問(wèn)性數(shù)據(jù)與視覺(jué)

這是精髓所在。我們定義的工具，其返回值不是簡(jiǎn)單的文本，而是結(jié)構(gòu)化數(shù)據(jù)+視覺(jué)數(shù)據(jù)的混合體。

// 工具1：導(dǎo)航并獲取頁(yè)面初始狀態(tài)
server.tool(
  "navigate_and_inspect",
  "Navigate to a URL and return both the accessibility tree and a screenshot.",
  { url: { type: "string" } },
  async ({ url }) => {
    await page.goto(url, { waitUntil: "networkidle0" });
    
    // 獲取結(jié)構(gòu)化可訪問(wèn)性數(shù)據(jù)
    const accessibilityTree = await page.accessibility.snapshot();
    
    // 獲取視覺(jué)截圖 (Base64)
    const screenshot = await page.screenshot({ encoding: "base64" });
    
    return {
      content: [
        {
          type: "text",
          text: JSON.stringify(accessibilityTree, null, 2)
        },
        {
          type: "image",
          data: screenshot,
          mimeType: "image/png"
        }
      ]
    };
  }
);

// 工具2：基于可訪問(wèn)性數(shù)據(jù)進(jìn)行交互
server.tool(
  "click_element_by_role",
  "Click an element identified by its accessibility role and name.",
  { role: { type: "string" }, name: { type: "string" } },
  async ({ role, name }) => {
    // 使用Puppeteer的aria選擇器，這直接利用了可訪問(wèn)性數(shù)據(jù)
    const selector = `aria/${name}[role="${role}"]`;
    await page.click(selector);
    
    // 交互后，再次獲取頁(yè)面狀態(tài)
    const newTree = await page.accessibility.snapshot();
    const newScreenshot = await page.screenshot({ encoding: "base64" });
    
    return {
      content: [
        { type: "text", text: `Clicked ${role} named "${name}". New state:` },
        { type: "text", text: JSON.stringify(newTree, null, 2) },
        { type: "image", data: newScreenshot, mimeType: "image/png" }
      ]
    };
  }
);

// 啟動(dòng)服務(wù)器
async function main() {
  await initBrowser();
  const transport = new StdioServerTransport();
  await server.connect(transport);
}

main();

第三步：部署與連接

1. 安裝依賴：npm install puppeteer @modelcontextprotocol/sdk
2. 編譯運(yùn)行：npx tsc && node build/index.js
3. 在AI Agent中配置：在支持MCP的客戶端（如Claude Desktop、或自研Agent）中，將上述Server作為工具源接入。

至此，一個(gè)具備視覺(jué)增強(qiáng)能力的MCP Server就搭建完成了。AI Agent現(xiàn)在可以通過(guò)MCP協(xié)議，像調(diào)用API一樣，獲得“導(dǎo)航-觀察-交互”的完整閉環(huán)能力。

實(shí)際應(yīng)用場(chǎng)景與商業(yè)價(jià)值

這個(gè)Server的價(jià)值不在于技術(shù)本身，而在于它解鎖的新自動(dòng)化場(chǎng)景：

1. 復(fù)雜Web應(yīng)用自動(dòng)化測(cè)試：傳統(tǒng)測(cè)試腳本脆弱，依賴CSS選擇器。基于可訪問(wèn)性數(shù)據(jù)的測(cè)試更穩(wěn)定、更貼近用戶真實(shí)操作（如“點(diǎn)擊‘提交訂單’按鈕”），且能自動(dòng)生成測(cè)試報(bào)告截圖。
2. 數(shù)據(jù)采集與監(jiān)控：對(duì)于需要登錄、翻頁(yè)、甚至包含圖表（通過(guò)截圖理解）的網(wǎng)站，Agent能更可靠地提取數(shù)據(jù)。例如，監(jiān)控競(jìng)品價(jià)格、抓取行業(yè)報(bào)告中的圖表數(shù)據(jù)。
3. RPA（機(jī)器人流程自動(dòng)化）增強(qiáng)：在財(cái)務(wù)、HR等業(yè)務(wù)流程中，操作復(fù)雜的內(nèi)部系統(tǒng)（如SAP、Oracle的Web界面）。視覺(jué)模式讓Agent能處理那些文本解析難以搞定的動(dòng)態(tài)彈窗和自定義控件。
4. 無(wú)障礙訪問(wèn)性審計(jì)：直接利用生成的可訪問(wèn)性樹(shù)，自動(dòng)檢查網(wǎng)站是否符合WCAG標(biāo)準(zhǔn)，生成審計(jì)報(bào)告，這是一個(gè)明確的商業(yè)服務(wù)。

商業(yè)價(jià)值：將上述能力封裝成SaaS服務(wù)，按調(diào)用次數(shù)或Agent數(shù)量收費(fèi)。例如，為跨境電商賣家提供“自動(dòng)商品上架Agent”，能自動(dòng)登錄后臺(tái)、填寫(xiě)復(fù)雜表單、上傳圖片，單次上架服務(wù)收費(fèi)0.5元，日處理1000單，月收入可達(dá)1.5萬(wàn)元。

下一步行動(dòng)：從Demo到產(chǎn)品

如果你被這個(gè)思路啟發(fā)，想動(dòng)手試試，這是你的路線圖：

1. 立即動(dòng)手：克隆或參考上述代碼，在本地跑通一個(gè)Demo。嘗試讓Agent去操作一個(gè)你熟悉的網(wǎng)站（如GitHub登錄頁(yè)）。
2. 深化理解：深入研究page.accessibility.snapshot()返回的數(shù)據(jù)結(jié)構(gòu)，理解每個(gè)節(jié)點(diǎn)的role、name、value、children。
3. 擴(kuò)展工具集：為你的MCP Server增加更多工具，如scroll、wait_for_element、extract_table。
4. 尋找場(chǎng)景：思考你身邊哪些重復(fù)的、基于Web瀏覽器的工作可以自動(dòng)化？從一個(gè)小痛點(diǎn)開(kāi)始，構(gòu)建一個(gè)最小可行產(chǎn)品（MVP）。
5. 加入生態(tài)：關(guān)注MCP協(xié)議和www.nhjb.com.cn（www.nhjb.com.cn）的Agent生態(tài)，了解最新的工具集成和商業(yè)化案例。

記住，AI Agent的下一個(gè)爆發(fā)點(diǎn)，一定在“感知”和“操作”真實(shí)世界的能力上。 而瀏覽器，是我們通往數(shù)字世界最豐富的窗口。掌握了視覺(jué)增強(qiáng)的MCP Server，你就拿到了一把新鑰匙。