議驅(qū)動(dòng)：讓AI Agent高效操作Electron桌面應(yīng)用的自動(dòng)化方案)
1. 一條藏在Chromium里的現(xiàn)成通道CDP為什么偏偏適合Electron1.1 Electron與Chrome共享的調(diào)試內(nèi)核最近在折騰一件事讓Agent直接去操作一個(gè)基于Electron開(kāi)發(fā)的桌面客戶端而不是像以前那樣只能在Web頁(yè)面里打轉(zhuǎn)。折騰一圈下來(lái)發(fā)現(xiàn)CDP協(xié)議Chrome DevTools Protocol是最順手的路徑——Electron本身就是Chromium的殼DevTools協(xié)議天生就在里面你不需要去逆向、不需要hook底層窗口、不需要關(guān)心操作系統(tǒng)的窗口消息機(jī)制只要把調(diào)試端口打開(kāi)就能用一套統(tǒng)一的JSON-RPC接口去感知界面、執(zhí)行點(diǎn)擊、讀取結(jié)果。很多人一開(kāi)始會(huì)想Electron桌面應(yīng)用自動(dòng)化是不是得靠圖像識(shí)別、窗口坐標(biāo)、或者系統(tǒng)級(jí)的UI自動(dòng)化框架。實(shí)際不是。Electron應(yīng)用本質(zhì)上就是跑著渲染進(jìn)程的Chromium實(shí)例每個(gè)渲染頁(yè)面都自帶DevTools后端對(duì)外暴露的正是CDP協(xié)議。你在瀏覽器里按F12看到的那套調(diào)試能力Electron桌面應(yīng)用里全都有而且方法與參數(shù)完全一致。Electron的進(jìn)程模型里渲染進(jìn)程負(fù)責(zé)界面主進(jìn)程負(fù)責(zé)原生能力和業(yè)務(wù)邏輯。CDP可以同時(shí)觸達(dá)這兩層頁(yè)面對(duì)應(yīng)的target負(fù)責(zé)DOM、事件、截圖、輸入模擬而Electron額外暴露了一個(gè)node類型的target可以讓人通過(guò)Runtime.evaluate在主進(jìn)程上下文里執(zhí)行JavaScript進(jìn)而拿到操作系統(tǒng)的原生能力。這個(gè)特性是普通瀏覽器網(wǎng)頁(yè)自動(dòng)化拿不到的也是Agent做桌面任務(wù)時(shí)最值錢的部分之一。所以用CDP操作Electron不是曲線救國(guó)而是直接利用它自帶的能力。跨平臺(tái)問(wèn)題也天然被抹平——同一套代碼在PC桌面、筆記本、甚至嵌入式設(shè)備上都能跑因?yàn)橹灰狢hromium內(nèi)核在CDP就在。這對(duì)做Agent工具鏈的團(tuán)隊(duì)來(lái)說(shuō)意味著底層通道只需要維護(hù)一套而不是每個(gè)桌面系統(tǒng)各寫(xiě)一套驅(qū)動(dòng)。1.2 Agent場(chǎng)景下CDP的三個(gè)核心能力把CDP放到Agent操作桌面應(yīng)用這個(gè)語(yǔ)境下它實(shí)際上提供了三個(gè)正好夠用的能力塊也是我做技術(shù)選型時(shí)最看重的部分第一塊是感知。Page.captureScreenshot能拿到當(dāng)前可視區(qū)域的截圖作為多模態(tài)大模型的視覺(jué)輸入Accessibility.getFullAXTree能拿到完整的可訪問(wèn)性樹(shù)轉(zhuǎn)成結(jié)構(gòu)化文本之后相當(dāng)于給Agent裝了一雙結(jié)構(gòu)化眼睛。這兩條路互補(bǔ)后面我會(huì)詳細(xì)展開(kāi)。第二塊是執(zhí)行。Input.dispatchMouseEvent、Input.dispatchKeyEvent、Runtime.evaluate可以精確模擬用戶的點(diǎn)擊、輸入、滾動(dòng)、按鍵DOM.querySelector可以在渲染進(jìn)程里直接定位元素比人肉猜坐標(biāo)穩(wěn)定得多。更重要的是它還支持在真實(shí)DOM上調(diào)用方法、讀取屬性這讓Agent操作的不再是屏幕像素而是有語(yǔ)義的元素對(duì)象。第三塊是反饋。DOM.documentUpdated、Runtime.consoleAPICalled、Network.requestWillBeSent這些事件會(huì)讓Agent感知到頁(yè)面變化、控制臺(tái)報(bào)錯(cuò)、網(wǎng)絡(luò)請(qǐng)求形成一個(gè)完整閉環(huán)。相比傳統(tǒng)RPA腳本點(diǎn)下去就完事CDP方案最關(guān)鍵的優(yōu)勢(shì)是反饋不再停留在我猜點(diǎn)到了而是變成我知道頁(yè)面變成了什么狀態(tài)。這三個(gè)能力疊加起來(lái)Agent就具備了看屏幕、動(dòng)鼠標(biāo)、讀結(jié)果的最小閉環(huán)。經(jīng)過(guò)實(shí)際驗(yàn)證這套鏈路對(duì)AI Agent、桌面端RPA、自動(dòng)化測(cè)試三類場(chǎng)景都非常合適。2. 打通連接從啟動(dòng)參數(shù)到WebSocket的完整鏈路2.1 開(kāi)發(fā)環(huán)境與打包應(yīng)用的Debug模式啟動(dòng)方法用CDP控制Electron應(yīng)用的第一步是讓?xiě)?yīng)用暴露調(diào)試端口。開(kāi)發(fā)階段最簡(jiǎn)單的方式是帶參數(shù)啟動(dòng)electron . --remote-debugging-port9222如果是打包后的應(yīng)用同樣可以通過(guò)命令行參數(shù)傳入。在PC桌面環(huán)境下通常是定位到可執(zhí)行文件的完整路徑再在后面追加參數(shù)/path/to/your-app --remote-debugging-port9222這里有一個(gè)必須記住的坑--remote-debugging-port開(kāi)關(guān)必須在渲染進(jìn)程啟動(dòng)之前生效。如果你在應(yīng)用已經(jīng)跑起來(lái)之后才想啟用調(diào)試是沒(méi)法通過(guò)外部參數(shù)補(bǔ)的只能在主進(jìn)程代碼里提前埋好開(kāi)關(guān)。我在自己維護(hù)的項(xiàng)目里一般是這樣處理的// 主進(jìn)程入口必須在 app ready 之前調(diào)用 const { app } require(electron); if (process.env.AGENT_DEBUG 1) { app.commandLine.appendSwitch(remote-debugging-port, 9222); app.commandLine.appendSwitch(remote-allow-origins, *); }remote-allow-origins這個(gè)參數(shù)是用來(lái)放行WebSocket連接源限制的。雖然桌面端的Agent工具Node腳本、Python腳本一般不受瀏覽器CORS限制但如果你計(jì)劃從某個(gè)Web管理頁(yè)面去連接調(diào)試服務(wù)不加這個(gè)參數(shù)就會(huì)被Origin校驗(yàn)擋住。建議統(tǒng)一加上省得排查半天也找不到原因。2.2 目標(biāo)發(fā)現(xiàn)與WebSocket建連/json/list 的用法端口暴露之后訪問(wèn)http://127.0.0.1:9222/json/list就能看到當(dāng)前應(yīng)用暴露的所有調(diào)試target。典型返回長(zhǎng)這樣[ { id: page-guid, type: page, title: 客戶訂單管理, url: file:///path/to/renderer/index.html, webSocketDebuggerUrl: ws://127.0.0.1:9222/devtools/page/guid }, { id: node-guid, type: node, title: node, url: electron, webSocketDebuggerUrl: ws://127.0.0.1:9222/devtools/node/guid } ]拿到webSocketDebuggerUrl之后用WebSocket客戶端連上去剩下的交互就是發(fā)JSON-RPC消息。協(xié)議格式很規(guī)則每條消息帶自增id、method名和params參數(shù)異步返回的結(jié)果會(huì)帶上對(duì)應(yīng)的id事件消息沒(méi)有id只有method和params。我用Python做原型驗(yàn)證時(shí)通常直接用websockets庫(kù)import asyncio import json import requests import websockets targets requests.get(http://127.0.0.1:9222/json/list).json() page next(t for t in targets if t[type] page) async def main(): async with websockets.connect( page[webSocketDebuggerUrl], max_size50_000_000 ) as ws: await ws.send(json.dumps({ id: 1, method: Runtime.evaluate, params: { expression: document.title, returnByValue: True } })) while True: msg json.loads(await ws.recv()) if msg.get(id) 1: print(msg[result][result][value]) break asyncio.run(main())這里特別注意max_size一定要調(diào)大否則截圖接口返回的base64數(shù)據(jù)會(huì)把WebSocket的默認(rèn)消息上限撐爆表現(xiàn)就是連接被無(wú)理由地?cái)嚅_(kāi)。我踩過(guò)一次這個(gè)坑一開(kāi)始以為是協(xié)議理解錯(cuò)了查了半天才發(fā)現(xiàn)是消息體太大導(dǎo)致的。2.3 Node端連接的選型直接用ws還是puppeteer-core如果項(xiàng)目本身是Node.js生態(tài)我更推薦用puppeteer-core去連而不是手搓WebSocket。puppeteer-core支持直接connect到一個(gè)已經(jīng)在運(yùn)行的應(yīng)用const puppeteer require(puppeteer-core); const browser await puppeteer.connect({ browserURL: http://127.0.0.1:9222, defaultViewport: null, }); const pages await browser.pages(); const page pages.find(p p.url().includes(index.html)) || pages[0]; await page.bringToFront();connect之后拿到的是一個(gè)Page對(duì)象操作API比裸CDP協(xié)議高出一層$、click、type、waitForSelector、screenshot這些高頻操作都是封裝好的。純手寫(xiě)CDP的問(wèn)題在于坐標(biāo)點(diǎn)擊、等待、滾動(dòng)這類邏輯沒(méi)有標(biāo)準(zhǔn)化每個(gè)項(xiàng)目都要重新造一遍輪子puppeteer-core替你把這些工程細(xì)節(jié)都處理掉了。但有一個(gè)注意點(diǎn)puppeteer-core連Electron時(shí)不要調(diào)用launch只能connect。而且Electron的進(jìn)程模型與標(biāo)準(zhǔn)瀏覽器不完全一致偶爾會(huì)遇到browser.pages()拿到的page列表為空或者卡在加載中的情況。這時(shí)候可以繞過(guò)puppeteer的抽象層直接用CDP的Target.getTargets接口去查列表或者從/json/list獲取最新的target信息后再重新connect。3. 感知層設(shè)計(jì)AX樹(shù)為主、截圖為輔的雙通道讀屏方案3.1 截圖方案與坐標(biāo)換算Page.captureScreenshot devicePixelRatioAgent要能決策首先得知道界面長(zhǎng)什么樣。最直接的方式是截圖const shot await page.screenshot({ type: jpeg, quality: 70, encoding: base64 });到手是一個(gè)base64的JPEG多模態(tài)模型可以直接消費(fèi)。建議用JPEG而不是PNG截圖體積能下降一個(gè)數(shù)量級(jí)減少傳輸和模型推理的耗時(shí)。如果只關(guān)心某個(gè)區(qū)域可以用clip參數(shù)只截局部這在高分屏上尤其有效——整屏截圖傳到模型里的成本太高也不利于模型聚焦關(guān)鍵區(qū)域。區(qū)域截圖涉及一個(gè)高頻踩坑點(diǎn)坐標(biāo)換算。CDP的Input.dispatchMouseEvent用的是CSS像素坐標(biāo)而截圖輸出的是設(shè)備像素兩者之間隔著一個(gè)devicePixelRatio。在常見(jiàn)桌面系統(tǒng)的縮放場(chǎng)景下這個(gè)值可能是1.5甚至2我封裝了這樣一個(gè)換算函數(shù)function cssPointFromScreenshotPoint(p) { const dpr await page.evaluate(() window.devicePixelRatio); return { x: p.x / dpr, y: p.y / dpr }; }如果不做這步換算點(diǎn)擊坐標(biāo)會(huì)整體偏移縮放比例越大偏移越離譜。這個(gè)坑幾乎每個(gè)做截圖自動(dòng)化的人都會(huì)遇到屬于看著簡(jiǎn)單、實(shí)際必踩的典型。3.2 結(jié)構(gòu)化感知Accessibility.getFullAXTree 轉(zhuǎn)成LLM友好文本截圖在直覺(jué)上很直觀但純視覺(jué)方案有兩個(gè)痛點(diǎn)一是token消耗巨大二是模型經(jīng)?？村e(cuò)。比如按鈕文字被字體樣式影響、圖標(biāo)按鈕沒(méi)有文字、頁(yè)面出現(xiàn)彈層遮擋時(shí)截圖方案很容易產(chǎn)生幻覺(jué)式操作。我的做法是讓Agent優(yōu)先看可訪問(wèn)性樹(shù)截圖只作為視覺(jué)補(bǔ)充。CDP的Accessibility.getFullAXTree會(huì)返回一棵扁平化的AX樹(shù)每個(gè)節(jié)點(diǎn)包含role、name、properties、backendDOMNodeId等信息。把它壓縮成文本大概是這樣的[窗口] 客戶訂單管理 [文本框] 客戶名稱(必填) [文本框] 訂單金額 [組合框] 支付方式: 銀行卡 [按鈕] 提交訂單 [按鈕] 取消這段文本只有幾百個(gè)token卻完整描述了界面的語(yǔ)義結(jié)構(gòu)。模型在文本上做決策的準(zhǔn)確率比看圖高不少尤其對(duì)按鈕是否可點(diǎn)選項(xiàng)是否已選中這類狀態(tài)判斷AX樹(shù)是確定性的不會(huì)因?yàn)闃邮轿⒄{(diào)而失效。落地路徑總結(jié)一下先Accessibility.enable再Accessibility.getFullAXTree遍歷節(jié)點(diǎn)把role和name拼成縮進(jìn)文本記錄每個(gè)節(jié)點(diǎn)的backendDOMNodeId作為后續(xù)動(dòng)作尋址的憑據(jù)3.3 視覺(jué)與結(jié)構(gòu)的融合策略實(shí)際跑下來(lái)最穩(wěn)的方案是分層使用優(yōu)先用AX樹(shù)文本作為決策依據(jù)截圖作為界面布局的地圖。當(dāng)模型需要在文本里找不到的圖標(biāo)按鈕或者需要理解元素之間的空間關(guān)系時(shí)再結(jié)合截圖做判斷。你可以設(shè)計(jì)成文本優(yōu)先、截圖兜底的兩段式邏輯也可以讓Agent在每次決策時(shí)同時(shí)看到兩者。從工程效率角度看我傾向于在同一個(gè)模型上下文里發(fā)一份精簡(jiǎn)AX文本加上一張低分辨率截圖。低分辨率指的是把截圖壓縮到1280寬以內(nèi)質(zhì)量調(diào)到70以下單輪輸入的視覺(jué)token控制在千級(jí)以內(nèi)。如果界面結(jié)構(gòu)比較穩(wěn)定還可以進(jìn)一步降級(jí)只在關(guān)鍵步驟截屏中間反復(fù)執(zhí)行的動(dòng)作只依賴AX樹(shù)反饋。這樣既能省成本又能保持決策質(zhì)量。4. 執(zhí)行層落地用CDP原語(yǔ)拼裝出點(diǎn)擊、輸入、滾動(dòng)、等待4.1 定位與點(diǎn)擊DOM尋址 Input.dispatchMouseEventAgent拿到AX樹(shù)之后如何把結(jié)構(gòu)信息變成真的去點(diǎn)一下兩步走先把語(yǔ)義節(jié)點(diǎn)映射成實(shí)際DOM元素再算出可點(diǎn)擊坐標(biāo)用Input.dispatchMouseEvent去點(diǎn)。AX樹(shù)節(jié)點(diǎn)帶backendDOMNodeId可以用DOM.describeNode拿到對(duì)應(yīng)的objectId然后用Runtime.callFunctionOn在這個(gè)對(duì)象上執(zhí)行scrollIntoView、getBoundingClientRect等操作拿到精確的CSS坐標(biāo)const rect await page.evaluate((backendNodeId) { const node document.querySelector([data-node-id${backendNodeId}]); const r node.getBoundingClientRect(); return { x: r.x r.width / 2, y: r.y r.height / 2 }; }, backendNodeId);不過(guò)backendDOMNodeId映射DOM元素在不同版本協(xié)議細(xì)節(jié)上有差異工程上更省事的做法是反過(guò)來(lái)DOM.getDocument拿到根節(jié)點(diǎn)DOM.querySelector按選擇器找元素拿到的objectId再配合Runtime.callFunctionOn操作。如果走puppeteer-core這個(gè)流程會(huì)進(jìn)一步簡(jiǎn)化成page.$加elementHandle.click()它會(huì)自動(dòng)滾動(dòng)到可視區(qū)域并點(diǎn)擊元素中心。為什么用Input.dispatchMouseEvent而不是elementHandle.click()因?yàn)榍罢咦⑷氲氖遣僮飨到y(tǒng)級(jí)鼠標(biāo)事件和真人操作完全等價(jià)。有些場(chǎng)景下業(yè)務(wù)代碼監(jiān)聽(tīng)的是document上的mousedown和mouseup事件直接調(diào)用el.click()只觸發(fā)click不觸發(fā)前面兩個(gè)事件業(yè)務(wù)邏輯可能不認(rèn)。這也是很多腳本化方案漏掉的關(guān)鍵差異。4.2 文本輸入與鍵盤事件不搶焦點(diǎn)也能輸入輸入框的填充也有講究。常見(jiàn)錯(cuò)誤是直接對(duì)input.value賦值再dispatchEvent(new Event(input))這在現(xiàn)代前端框架下基本都會(huì)失靈因?yàn)榭蚣艿闹蹈欉壿嬛徽J(rèn)真實(shí)的輸入事件。正確做法是先用Input.dispatchMouseEvent點(diǎn)擊輸入框拿到焦點(diǎn)再用Input.insertText插入文本// 先確保焦點(diǎn) await page.click(#username); // 再插入文本 const session await page.target().createCDPSession(); await session.send(Input.insertText, { text: 張三 });Input.insertText繞開(kāi)了剪貼板也避免了在密碼框里走clipboard寫(xiě)入可能引發(fā)的安全軟件攔截問(wèn)題。如果要用鍵盤組合鍵比如CtrlA全選、Enter提交走Input.dispatchKeyEvent的時(shí)候要注意把type、key、code都填完整否則部分Electron應(yīng)用收不到組合鍵事件。4.3 動(dòng)態(tài)等待與重試Runtime.evaluate輪詢的工程化寫(xiě)法桌面應(yīng)用的大多數(shù)操作都有異步反饋點(diǎn)擊后馬上斷言結(jié)果必然是錯(cuò)的。工程上需要?jiǎng)討B(tài)等待循環(huán)執(zhí)行一段JavaScript直到某個(gè)條件成立或者超時(shí)。這是我常用的封裝async function waitFor(page, expression, timeout 10_000) { const start Date.now(); while (Date.now() - start timeout) { const result await page.evaluate(expression); if (result) return true; await new Promise(r setTimeout(r, 200)); } throw new Error(waitFor timeout: ${expression}); } await waitFor(page, () document.querySelector(.order-success) ! null);這種輪詢比固定sleep高效得多頁(yè)面在200毫秒內(nèi)反應(yīng)過(guò)來(lái)就立刻進(jìn)入下一步響應(yīng)慢時(shí)又能自動(dòng)等到超時(shí)。還有一個(gè)技巧等待條件里盡量用語(yǔ)義狀態(tài)比如成功提示出現(xiàn)按鈕變成不可用不要用坐標(biāo)或背景色因?yàn)檎Z(yǔ)義狀態(tài)才代表業(yè)務(wù)真正完成。5. Agent閉環(huán)語(yǔ)義化動(dòng)作約束與真實(shí)任務(wù)調(diào)優(yōu)5.1 一次完整回合的狀態(tài)表示截圖AX樹(shù)動(dòng)作歷史把感知和執(zhí)行串起來(lái)就是一個(gè)Agent閉環(huán)。我在實(shí)際項(xiàng)目里每一回合給模型的結(jié)構(gòu)化輸入是這樣的當(dāng)前任務(wù)目標(biāo)固定不變觀察AX樹(shù)壓縮文本加可選截圖最近3到5步動(dòng)作歷史動(dòng)作類型、元素、結(jié)果摘要可執(zhí)行動(dòng)作的JSON Schema模型只需要輸出一個(gè)動(dòng)作{ action: click, element: 登錄按鈕, note: 頁(yè)面顯示未登錄先完成登錄 }然后由代碼側(cè)把邏輯動(dòng)作解析成具體的CDP調(diào)用。這樣設(shè)計(jì)的目的是讓模型永遠(yuǎn)不要輸出像素坐標(biāo)這種脆弱信息而是輸出我想點(diǎn)擊哪個(gè)語(yǔ)義元素再由執(zhí)行器負(fù)責(zé)坐標(biāo)尋址。坐標(biāo)這種落地細(xì)節(jié)一旦經(jīng)過(guò)模型之手出錯(cuò)率會(huì)明顯上升。把語(yǔ)義和實(shí)現(xiàn)分離是降低模型幻覺(jué)率的關(guān)鍵一步。5.2 動(dòng)作范式約束為什么讓Agent輸出函數(shù)調(diào)用而不是點(diǎn)坐標(biāo)很多初版Agent總讓模型直接輸出屏幕坐標(biāo)比如{x: 816, y: 432}結(jié)果模型時(shí)不時(shí)給出一個(gè)懸空坐標(biāo)。問(wèn)題在于模型是在生成一個(gè)看起來(lái)合理的數(shù)字而不是在做精確定位。限定動(dòng)作集之后模型的任務(wù)從猜數(shù)字變成了從列表里選元素兩種任務(wù)的成功率差距是數(shù)量級(jí)的。我用的動(dòng)作集合很小固定五類click(element)點(diǎn)擊某個(gè)語(yǔ)義元素input(element, text)向輸入框填寫(xiě)內(nèi)容scroll(direction)按指定方向滾動(dòng)wait(condition)等待某個(gè)狀態(tài)出現(xiàn)finish(result)任務(wù)完成提交結(jié)論這套約束還有個(gè)好處審計(jì)友好。每個(gè)動(dòng)作都有可回放的結(jié)構(gòu)化日志出問(wèn)題時(shí)可以逐幀回溯對(duì)做Agent的穩(wěn)定性測(cè)試非常有幫助。而且因?yàn)閯?dòng)作集合固定后續(xù)想接入失敗重試、人工審核、動(dòng)作回放這類基礎(chǔ)設(shè)施都非常好擴(kuò)展。5.3 真實(shí)項(xiàng)目里的穩(wěn)定性和性能調(diào)優(yōu)在實(shí)際的某Electron桌面管理系統(tǒng)中我用這套閉環(huán)跑通了一個(gè)每日批量創(chuàng)建訂單的流程登錄、進(jìn)入訂單模塊、搜索客戶、填商品和金額、提交并校驗(yàn)列表出現(xiàn)新記錄。最初版本每單耗時(shí)約12秒其中模型推理占掉8秒操作和反饋只有2秒左右剩余消耗在截圖傳輸上。優(yōu)化方向有三個(gè)一是把AX樹(shù)文本裁剪到關(guān)鍵可交互元素過(guò)濾掉大量靜態(tài)文本節(jié)點(diǎn)token直接少一半。這個(gè)裁剪規(guī)則可以在遍歷AX樹(shù)時(shí)做只要role是button、textbox、combobox、link、checkbox這類可交互類型就保留純展示文本只在上下文里需要時(shí)才納入。二是加入步驟緩存重復(fù)的頁(yè)面狀態(tài)不重復(fù)請(qǐng)求模型只有頁(yè)面發(fā)生變化了才重新決策。比如登錄頁(yè)的判斷結(jié)果可以緩存不必每次都讓模型重新讀屏。三是把截圖從每步必發(fā)改成只在觸發(fā)視覺(jué)兜底條件時(shí)才發(fā)。比如AX樹(shù)里找不到目標(biāo)元素或者模型明確請(qǐng)求查看布局才補(bǔ)充截圖。一輪優(yōu)化之后平均每單耗時(shí)降到了6秒左右。WebSocket鏈路的穩(wěn)定性同樣值得關(guān)注。長(zhǎng)時(shí)間運(yùn)行后偶發(fā)連接斷開(kāi)或頁(yè)面target重建Agent腳本如果沒(méi)做重連整個(gè)任務(wù)就掛在半路。我的做法是給整個(gè)控制循環(huán)加一個(gè)外層守護(hù)監(jiān)聽(tīng)連接關(guān)閉事件發(fā)現(xiàn)斷開(kāi)后重新請(qǐng)求/json/list拿最新target并恢復(fù)會(huì)話再?gòu)闹袛鄷r(shí)的動(dòng)作狀態(tài)繼續(xù)執(zhí)行。6. 端口暴露的安全紅線、斷線自愈與同類方案選型對(duì)比6.1 遠(yuǎn)程調(diào)試端口的半張危險(xiǎn)面孔與防護(hù)措施CDP帶來(lái)的能力是雙向的它能操作應(yīng)用也等于向外開(kāi)放了應(yīng)用的完全控制權(quán)。只要拿到調(diào)試端口的WebSocket地址任何進(jìn)程都能通過(guò)Runtime.evaluate在渲染進(jìn)程甚至主進(jìn)程里執(zhí)行任意代碼。主進(jìn)程target尤其危險(xiǎn)因?yàn)槟沁吥苤苯釉L問(wèn)Node.js API等于拿到了整個(gè)操作系統(tǒng)的鑰匙。因此在Agent方案落地時(shí)有幾條紅線必須守住調(diào)試端口永遠(yuǎn)只綁定127.0.0.1不開(kāi)放到局域網(wǎng)或公網(wǎng)生產(chǎn)環(huán)境除非明確開(kāi)啟否則不攜帶任何調(diào)試參數(shù)需要Agent化運(yùn)行的機(jī)器單獨(dú)維護(hù)一個(gè)專用的啟動(dòng)配置定期校驗(yàn)連接來(lái)源或者更嚴(yán)格一點(diǎn)在啟動(dòng)時(shí)驗(yàn)證預(yù)先約定好的連接Token對(duì)通過(guò)CDP執(zhí)行的Runtime.evaluate內(nèi)容做白名單約束避免把任意外部腳本拼進(jìn)表達(dá)式。這條線既是技術(shù)線也是合規(guī)線。團(tuán)隊(duì)內(nèi)部做AI測(cè)試平臺(tái)時(shí)調(diào)試端口往往部署在多臺(tái)機(jī)器上權(quán)限邊界定義清楚能省去很多后續(xù)的麻煩。6.2 會(huì)話斷了怎么辦心跳重連與無(wú)頭恢復(fù)長(zhǎng)時(shí)間運(yùn)營(yíng)的Agent任務(wù)除了頁(yè)面狀態(tài)變化還會(huì)遇到target重建。Electron應(yīng)用里窗口關(guān)閉再打開(kāi)、頁(yè)面崩潰自動(dòng)恢復(fù)都會(huì)讓舊的WebSocket失效。重連邏輯不要做在報(bào)錯(cuò)的時(shí)候而要做在連接剛開(kāi)始不穩(wěn)定的時(shí)候。我的經(jīng)驗(yàn)是周期性ping一下。CDP沒(méi)有專門的ping命令可以用Runtime.evaluate跑一個(gè)空表達(dá)式如11連續(xù)兩次失敗就觸發(fā)重連。重連后不要從頭開(kāi)始任務(wù)而是先把當(dāng)前AX樹(shù)和URL拉回來(lái)和斷點(diǎn)前的記錄對(duì)比確認(rèn)狀態(tài)沒(méi)丟再繼續(xù)。這樣即使應(yīng)用中途重啟Agent也能自動(dòng)續(xù)跑而不是白白浪費(fèi)之前所有已完成的動(dòng)作。6.3 和WinAppDriver、圖像識(shí)別、OCR方案的對(duì)比選型最后聊一下方案選型。不是所有桌面自動(dòng)化都必須用CDP很多時(shí)候取決于你手里有哪些牌。我自己做過(guò)的對(duì)比總結(jié)如下方案原理優(yōu)勢(shì)劣勢(shì)適用場(chǎng)景CDPChromium調(diào)試協(xié)議加JS橋接原生支持、語(yǔ)義級(jí)定位、跨平臺(tái)、天然適合LLM感知僅限Electron/Chromium內(nèi)核應(yīng)用AI Agent、跨平臺(tái)桌面自動(dòng)化系統(tǒng)級(jí)UI自動(dòng)化框架桌面平臺(tái)輔助功能接口系統(tǒng)級(jí)控件識(shí)別對(duì)Electron內(nèi)部DOM無(wú)感知定位粒度粗傳統(tǒng)桌面應(yīng)用圖像模板匹配截圖加特征匹配不依賴DOM結(jié)構(gòu)對(duì)樣式變化極敏感、坐標(biāo)易漂移老舊遺留系統(tǒng)應(yīng)急O(jiān)CR方案截圖加文字識(shí)別可讀任意界面文本速度和精度不穩(wěn)定、難以穩(wěn)定定位沒(méi)有其他入口時(shí)的兜底CDP說(shuō)到底是為Chromium生態(tài)量身定做的自動(dòng)化通道。Agent要高效操作Electron桌面應(yīng)用它就是默認(rèn)選項(xiàng)。其它方案都繞不開(kāi)先識(shí)別再定位的脆弱鏈路而CDP讓Agent拿到的是和DevTools一樣完整的視圖狀態(tài)與事件流感知的確定性完全不同。最后分享一點(diǎn)個(gè)人體會(huì)。整個(gè)鏈路搭完之后我有兩個(gè)很深的感受第一Electron應(yīng)用的Agent化改造真正難的不是讓模型能點(diǎn)擊而是把感知層做扎實(shí)——AX樹(shù)結(jié)構(gòu)化、坐標(biāo)換算、事件反饋這些看似瑣碎的基礎(chǔ)設(shè)施決定了Agent能力的上限第二Agent和傳統(tǒng)腳本的本質(zhì)區(qū)別在于反饋驅(qū)動(dòng)如果你能讓每一次動(dòng)作都帶回明確的頁(yè)面狀態(tài)變化模型的每一步都會(huì)越來(lái)越穩(wěn)。這套鏈路目前已經(jīng)跑在我的日常工具鏈里后續(xù)我打算把動(dòng)作日志和頁(yè)面截圖配合起來(lái)做一個(gè)自動(dòng)回放與回歸對(duì)比的小工具讓Agent的任務(wù)執(zhí)行有據(jù)可查。 CDP協(xié)議驅(qū)動(dòng)：讓AI Agent高效操作Electron桌面應(yīng)用的自動(dòng)化方案
1. 一條藏在Chromium里的現(xiàn)成通道CDP為什么偏偏適合Electron1.1 Electron與Chrome共享的調(diào)試內(nèi)核最近在折騰一件事讓Agent直接去操作一個(gè)基于Electron開(kāi)發(fā)的桌面客戶端而不是像以前那樣只能在Web頁(yè)面里打轉(zhuǎn)。折騰一圈下來(lái)發(fā)現(xiàn)CDP協(xié)議Chrome DevTools Protocol是最順手的路徑——Electron本身就是Chromium的殼DevTools協(xié)議天生就在里面你不需要去逆向、不需要hook底層窗口、不需要關(guān)心操作系統(tǒng)的窗口消息機(jī)制只要把調(diào)試端口打開(kāi)就能用一套統(tǒng)一的JSON-RPC接口去感知界面、執(zhí)行點(diǎn)擊、讀取結(jié)果。很多人一開(kāi)始會(huì)想Electron桌面應(yīng)用自動(dòng)化是不是得靠圖像識(shí)別、窗口坐標(biāo)、或者系統(tǒng)級(jí)的UI自動(dòng)化框架。實(shí)際不是。Electron應(yīng)用本質(zhì)上就是跑著渲染進(jìn)程的Chromium實(shí)例每個(gè)渲染頁(yè)面都自帶DevTools后端對(duì)外暴露的正是CDP協(xié)議。你在瀏覽器里按F12看到的那套調(diào)試能力Electron桌面應(yīng)用里全都有而且方法與參數(shù)完全一致。Electron的進(jìn)程模型里渲染進(jìn)程負(fù)責(zé)界面主進(jìn)程負(fù)責(zé)原生能力和業(yè)務(wù)邏輯。CDP可以同時(shí)觸達(dá)這兩層頁(yè)面對(duì)應(yīng)的target負(fù)責(zé)DOM、事件、截圖、輸入模擬而Electron額外暴露了一個(gè)node類型的target可以讓人通過(guò)Runtime.evaluate在主進(jìn)程上下文里執(zhí)行JavaScript進(jìn)而拿到操作系統(tǒng)的原生能力。這個(gè)特性是普通瀏覽器網(wǎng)頁(yè)自動(dòng)化拿不到的也是Agent做桌面任務(wù)時(shí)最值錢的部分之一。所以用CDP操作Electron不是曲線救國(guó)而是直接利用它自帶的能力。跨平臺(tái)問(wèn)題也天然被抹平——同一套代碼在PC桌面、筆記本、甚至嵌入式設(shè)備上都能跑因?yàn)橹灰狢hromium內(nèi)核在CDP就在。這對(duì)做Agent工具鏈的團(tuán)隊(duì)來(lái)說(shuō)意味著底層通道只需要維護(hù)一套而不是每個(gè)桌面系統(tǒng)各寫(xiě)一套驅(qū)動(dòng)。1.2 Agent場(chǎng)景下CDP的三個(gè)核心能力把CDP放到Agent操作桌面應(yīng)用這個(gè)語(yǔ)境下它實(shí)際上提供了三個(gè)正好夠用的能力塊也是我做技術(shù)選型時(shí)最看重的部分第一塊是感知。Page.captureScreenshot能拿到當(dāng)前可視區(qū)域的截圖作為多模態(tài)大模型的視覺(jué)輸入Accessibility.getFullAXTree能拿到完整的可訪問(wèn)性樹(shù)轉(zhuǎn)成結(jié)構(gòu)化文本之后相當(dāng)于給Agent裝了一雙結(jié)構(gòu)化眼睛。這兩條路互補(bǔ)后面我會(huì)詳細(xì)展開(kāi)。第二塊是執(zhí)行。Input.dispatchMouseEvent、Input.dispatchKeyEvent、Runtime.evaluate可以精確模擬用戶的點(diǎn)擊、輸入、滾動(dòng)、按鍵DOM.querySelector可以在渲染進(jìn)程里直接定位元素比人肉猜坐標(biāo)穩(wěn)定得多。更重要的是它還支持在真實(shí)DOM上調(diào)用方法、讀取屬性這讓Agent操作的不再是屏幕像素而是有語(yǔ)義的元素對(duì)象。第三塊是反饋。DOM.documentUpdated、Runtime.consoleAPICalled、Network.requestWillBeSent這些事件會(huì)讓Agent感知到頁(yè)面變化、控制臺(tái)報(bào)錯(cuò)、網(wǎng)絡(luò)請(qǐng)求形成一個(gè)完整閉環(huán)。相比傳統(tǒng)RPA腳本點(diǎn)下去就完事CDP方案最關(guān)鍵的優(yōu)勢(shì)是反饋不再停留在我猜點(diǎn)到了而是變成我知道頁(yè)面變成了什么狀態(tài)。這三個(gè)能力疊加起來(lái)Agent就具備了看屏幕、動(dòng)鼠標(biāo)、讀結(jié)果的最小閉環(huán)。經(jīng)過(guò)實(shí)際驗(yàn)證這套鏈路對(duì)AI Agent、桌面端RPA、自動(dòng)化測(cè)試三類場(chǎng)景都非常合適。2. 打通連接從啟動(dòng)參數(shù)到WebSocket的完整鏈路2.1 開(kāi)發(fā)環(huán)境與打包應(yīng)用的Debug模式啟動(dòng)方法用CDP控制Electron應(yīng)用的第一步是讓?xiě)?yīng)用暴露調(diào)試端口。開(kāi)發(fā)階段最簡(jiǎn)單的方式是帶參數(shù)啟動(dòng)electron . --remote-debugging-port9222如果是打包后的應(yīng)用同樣可以通過(guò)命令行參數(shù)傳入。在PC桌面環(huán)境下通常是定位到可執(zhí)行文件的完整路徑再在后面追加參數(shù)/path/to/your-app --remote-debugging-port9222這里有一個(gè)必須記住的坑--remote-debugging-port開(kāi)關(guān)必須在渲染進(jìn)程啟動(dòng)之前生效。如果你在應(yīng)用已經(jīng)跑起來(lái)之后才想啟用調(diào)試是沒(méi)法通過(guò)外部參數(shù)補(bǔ)的只能在主進(jìn)程代碼里提前埋好開(kāi)關(guān)。我在自己維護(hù)的項(xiàng)目里一般是這樣處理的// 主進(jìn)程入口必須在 app ready 之前調(diào)用 const { app } require(electron); if (process.env.AGENT_DEBUG 1) { app.commandLine.appendSwitch(remote-debugging-port, 9222); app.commandLine.appendSwitch(remote-allow-origins, *); }remote-allow-origins這個(gè)參數(shù)是用來(lái)放行WebSocket連接源限制的。雖然桌面端的Agent工具Node腳本、Python腳本一般不受瀏覽器CORS限制但如果你計(jì)劃從某個(gè)Web管理頁(yè)面去連接調(diào)試服務(wù)不加這個(gè)參數(shù)就會(huì)被Origin校驗(yàn)擋住。建議統(tǒng)一加上省得排查半天也找不到原因。2.2 目標(biāo)發(fā)現(xiàn)與WebSocket建連/json/list 的用法端口暴露之后訪問(wèn)http://127.0.0.1:9222/json/list就能看到當(dāng)前應(yīng)用暴露的所有調(diào)試target。典型返回長(zhǎng)這樣[ { id: page-guid, type: page, title: 客戶訂單管理, url: file:///path/to/renderer/index.html, webSocketDebuggerUrl: ws://127.0.0.1:9222/devtools/page/guid }, { id: node-guid, type: node, title: node, url: electron, webSocketDebuggerUrl: ws://127.0.0.1:9222/devtools/node/guid } ]拿到webSocketDebuggerUrl之后用WebSocket客戶端連上去剩下的交互就是發(fā)JSON-RPC消息。協(xié)議格式很規(guī)則每條消息帶自增id、method名和params參數(shù)異步返回的結(jié)果會(huì)帶上對(duì)應(yīng)的id事件消息沒(méi)有id只有method和params。我用Python做原型驗(yàn)證時(shí)通常直接用websockets庫(kù)import asyncio import json import requests import websockets targets requests.get(http://127.0.0.1:9222/json/list).json() page next(t for t in targets if t[type] page) async def main(): async with websockets.connect( page[webSocketDebuggerUrl], max_size50_000_000 ) as ws: await ws.send(json.dumps({ id: 1, method: Runtime.evaluate, params: { expression: document.title, returnByValue: True } })) while True: msg json.loads(await ws.recv()) if msg.get(id) 1: print(msg[result][result][value]) break asyncio.run(main())這里特別注意max_size一定要調(diào)大否則截圖接口返回的base64數(shù)據(jù)會(huì)把WebSocket的默認(rèn)消息上限撐爆表現(xiàn)就是連接被無(wú)理由地?cái)嚅_(kāi)。我踩過(guò)一次這個(gè)坑一開(kāi)始以為是協(xié)議理解錯(cuò)了查了半天才發(fā)現(xiàn)是消息體太大導(dǎo)致的。2.3 Node端連接的選型直接用ws還是puppeteer-core如果項(xiàng)目本身是Node.js生態(tài)我更推薦用puppeteer-core去連而不是手搓WebSocket。puppeteer-core支持直接connect到一個(gè)已經(jīng)在運(yùn)行的應(yīng)用const puppeteer require(puppeteer-core); const browser await puppeteer.connect({ browserURL: http://127.0.0.1:9222, defaultViewport: null, }); const pages await browser.pages(); const page pages.find(p p.url().includes(index.html)) || pages[0]; await page.bringToFront();connect之后拿到的是一個(gè)Page對(duì)象操作API比裸CDP協(xié)議高出一層$、click、type、waitForSelector、screenshot這些高頻操作都是封裝好的。純手寫(xiě)CDP的問(wèn)題在于坐標(biāo)點(diǎn)擊、等待、滾動(dòng)這類邏輯沒(méi)有標(biāo)準(zhǔn)化每個(gè)項(xiàng)目都要重新造一遍輪子puppeteer-core替你把這些工程細(xì)節(jié)都處理掉了。但有一個(gè)注意點(diǎn)puppeteer-core連Electron時(shí)不要調(diào)用launch只能connect。而且Electron的進(jìn)程模型與標(biāo)準(zhǔn)瀏覽器不完全一致偶爾會(huì)遇到browser.pages()拿到的page列表為空或者卡在加載中的情況。這時(shí)候可以繞過(guò)puppeteer的抽象層直接用CDP的Target.getTargets接口去查列表或者從/json/list獲取最新的target信息后再重新connect。3. 感知層設(shè)計(jì)AX樹(shù)為主、截圖為輔的雙通道讀屏方案3.1 截圖方案與坐標(biāo)換算Page.captureScreenshot devicePixelRatioAgent要能決策首先得知道界面長(zhǎng)什么樣。最直接的方式是截圖const shot await page.screenshot({ type: jpeg, quality: 70, encoding: base64 });到手是一個(gè)base64的JPEG多模態(tài)模型可以直接消費(fèi)。建議用JPEG而不是PNG截圖體積能下降一個(gè)數(shù)量級(jí)減少傳輸和模型推理的耗時(shí)。如果只關(guān)心某個(gè)區(qū)域可以用clip參數(shù)只截局部這在高分屏上尤其有效——整屏截圖傳到模型里的成本太高也不利于模型聚焦關(guān)鍵區(qū)域。區(qū)域截圖涉及一個(gè)高頻踩坑點(diǎn)坐標(biāo)換算。CDP的Input.dispatchMouseEvent用的是CSS像素坐標(biāo)而截圖輸出的是設(shè)備像素兩者之間隔著一個(gè)devicePixelRatio。在常見(jiàn)桌面系統(tǒng)的縮放場(chǎng)景下這個(gè)值可能是1.5甚至2我封裝了這樣一個(gè)換算函數(shù)function cssPointFromScreenshotPoint(p) { const dpr await page.evaluate(() window.devicePixelRatio); return { x: p.x / dpr, y: p.y / dpr }; }如果不做這步換算點(diǎn)擊坐標(biāo)會(huì)整體偏移縮放比例越大偏移越離譜。這個(gè)坑幾乎每個(gè)做截圖自動(dòng)化的人都會(huì)遇到屬于看著簡(jiǎn)單、實(shí)際必踩的典型。3.2 結(jié)構(gòu)化感知Accessibility.getFullAXTree 轉(zhuǎn)成LLM友好文本截圖在直覺(jué)上很直觀但純視覺(jué)方案有兩個(gè)痛點(diǎn)一是token消耗巨大二是模型經(jīng)?？村e(cuò)。比如按鈕文字被字體樣式影響、圖標(biāo)按鈕沒(méi)有文字、頁(yè)面出現(xiàn)彈層遮擋時(shí)截圖方案很容易產(chǎn)生幻覺(jué)式操作。我的做法是讓Agent優(yōu)先看可訪問(wèn)性樹(shù)截圖只作為視覺(jué)補(bǔ)充。CDP的Accessibility.getFullAXTree會(huì)返回一棵扁平化的AX樹(shù)每個(gè)節(jié)點(diǎn)包含role、name、properties、backendDOMNodeId等信息。把它壓縮成文本大概是這樣的[窗口] 客戶訂單管理 [文本框] 客戶名稱(必填) [文本框] 訂單金額 [組合框] 支付方式: 銀行卡 [按鈕] 提交訂單 [按鈕] 取消這段文本只有幾百個(gè)token卻完整描述了界面的語(yǔ)義結(jié)構(gòu)。模型在文本上做決策的準(zhǔn)確率比看圖高不少尤其對(duì)按鈕是否可點(diǎn)選項(xiàng)是否已選中這類狀態(tài)判斷AX樹(shù)是確定性的不會(huì)因?yàn)闃邮轿⒄{(diào)而失效。落地路徑總結(jié)一下先Accessibility.enable再Accessibility.getFullAXTree遍歷節(jié)點(diǎn)把role和name拼成縮進(jìn)文本記錄每個(gè)節(jié)點(diǎn)的backendDOMNodeId作為后續(xù)動(dòng)作尋址的憑據(jù)3.3 視覺(jué)與結(jié)構(gòu)的融合策略實(shí)際跑下來(lái)最穩(wěn)的方案是分層使用優(yōu)先用AX樹(shù)文本作為決策依據(jù)截圖作為界面布局的地圖。當(dāng)模型需要在文本里找不到的圖標(biāo)按鈕或者需要理解元素之間的空間關(guān)系時(shí)再結(jié)合截圖做判斷。你可以設(shè)計(jì)成文本優(yōu)先、截圖兜底的兩段式邏輯也可以讓Agent在每次決策時(shí)同時(shí)看到兩者。從工程效率角度看我傾向于在同一個(gè)模型上下文里發(fā)一份精簡(jiǎn)AX文本加上一張低分辨率截圖。低分辨率指的是把截圖壓縮到1280寬以內(nèi)質(zhì)量調(diào)到70以下單輪輸入的視覺(jué)token控制在千級(jí)以內(nèi)。如果界面結(jié)構(gòu)比較穩(wěn)定還可以進(jìn)一步降級(jí)只在關(guān)鍵步驟截屏中間反復(fù)執(zhí)行的動(dòng)作只依賴AX樹(shù)反饋。這樣既能省成本又能保持決策質(zhì)量。4. 執(zhí)行層落地用CDP原語(yǔ)拼裝出點(diǎn)擊、輸入、滾動(dòng)、等待4.1 定位與點(diǎn)擊DOM尋址 Input.dispatchMouseEventAgent拿到AX樹(shù)之后如何把結(jié)構(gòu)信息變成真的去點(diǎn)一下兩步走先把語(yǔ)義節(jié)點(diǎn)映射成實(shí)際DOM元素再算出可點(diǎn)擊坐標(biāo)用Input.dispatchMouseEvent去點(diǎn)。AX樹(shù)節(jié)點(diǎn)帶backendDOMNodeId可以用DOM.describeNode拿到對(duì)應(yīng)的objectId然后用Runtime.callFunctionOn在這個(gè)對(duì)象上執(zhí)行scrollIntoView、getBoundingClientRect等操作拿到精確的CSS坐標(biāo)const rect await page.evaluate((backendNodeId) { const node document.querySelector([data-node-id${backendNodeId}]); const r node.getBoundingClientRect(); return { x: r.x r.width / 2, y: r.y r.height / 2 }; }, backendNodeId);不過(guò)backendDOMNodeId映射DOM元素在不同版本協(xié)議細(xì)節(jié)上有差異工程上更省事的做法是反過(guò)來(lái)DOM.getDocument拿到根節(jié)點(diǎn)DOM.querySelector按選擇器找元素拿到的objectId再配合Runtime.callFunctionOn操作。如果走puppeteer-core這個(gè)流程會(huì)進(jìn)一步簡(jiǎn)化成page.$加elementHandle.click()它會(huì)自動(dòng)滾動(dòng)到可視區(qū)域并點(diǎn)擊元素中心。為什么用Input.dispatchMouseEvent而不是elementHandle.click()因?yàn)榍罢咦⑷氲氖遣僮飨到y(tǒng)級(jí)鼠標(biāo)事件和真人操作完全等價(jià)。有些場(chǎng)景下業(yè)務(wù)代碼監(jiān)聽(tīng)的是document上的mousedown和mouseup事件直接調(diào)用el.click()只觸發(fā)click不觸發(fā)前面兩個(gè)事件業(yè)務(wù)邏輯可能不認(rèn)。這也是很多腳本化方案漏掉的關(guān)鍵差異。4.2 文本輸入與鍵盤事件不搶焦點(diǎn)也能輸入輸入框的填充也有講究。常見(jiàn)錯(cuò)誤是直接對(duì)input.value賦值再dispatchEvent(new Event(input))這在現(xiàn)代前端框架下基本都會(huì)失靈因?yàn)榭蚣艿闹蹈欉壿嬛徽J(rèn)真實(shí)的輸入事件。正確做法是先用Input.dispatchMouseEvent點(diǎn)擊輸入框拿到焦點(diǎn)再用Input.insertText插入文本// 先確保焦點(diǎn) await page.click(#username); // 再插入文本 const session await page.target().createCDPSession(); await session.send(Input.insertText, { text: 張三 });Input.insertText繞開(kāi)了剪貼板也避免了在密碼框里走clipboard寫(xiě)入可能引發(fā)的安全軟件攔截問(wèn)題。如果要用鍵盤組合鍵比如CtrlA全選、Enter提交走Input.dispatchKeyEvent的時(shí)候要注意把type、key、code都填完整否則部分Electron應(yīng)用收不到組合鍵事件。4.3 動(dòng)態(tài)等待與重試Runtime.evaluate輪詢的工程化寫(xiě)法桌面應(yīng)用的大多數(shù)操作都有異步反饋點(diǎn)擊后馬上斷言結(jié)果必然是錯(cuò)的。工程上需要?jiǎng)討B(tài)等待循環(huán)執(zhí)行一段JavaScript直到某個(gè)條件成立或者超時(shí)。這是我常用的封裝async function waitFor(page, expression, timeout 10_000) { const start Date.now(); while (Date.now() - start timeout) { const result await page.evaluate(expression); if (result) return true; await new Promise(r setTimeout(r, 200)); } throw new Error(waitFor timeout: ${expression}); } await waitFor(page, () document.querySelector(.order-success) ! null);這種輪詢比固定sleep高效得多頁(yè)面在200毫秒內(nèi)反應(yīng)過(guò)來(lái)就立刻進(jìn)入下一步響應(yīng)慢時(shí)又能自動(dòng)等到超時(shí)。還有一個(gè)技巧等待條件里盡量用語(yǔ)義狀態(tài)比如成功提示出現(xiàn)按鈕變成不可用不要用坐標(biāo)或背景色因?yàn)檎Z(yǔ)義狀態(tài)才代表業(yè)務(wù)真正完成。5. Agent閉環(huán)語(yǔ)義化動(dòng)作約束與真實(shí)任務(wù)調(diào)優(yōu)5.1 一次完整回合的狀態(tài)表示截圖AX樹(shù)動(dòng)作歷史把感知和執(zhí)行串起來(lái)就是一個(gè)Agent閉環(huán)。我在實(shí)際項(xiàng)目里每一回合給模型的結(jié)構(gòu)化輸入是這樣的當(dāng)前任務(wù)目標(biāo)固定不變觀察AX樹(shù)壓縮文本加可選截圖最近3到5步動(dòng)作歷史動(dòng)作類型、元素、結(jié)果摘要可執(zhí)行動(dòng)作的JSON Schema模型只需要輸出一個(gè)動(dòng)作{ action: click, element: 登錄按鈕, note: 頁(yè)面顯示未登錄先完成登錄 }然后由代碼側(cè)把邏輯動(dòng)作解析成具體的CDP調(diào)用。這樣設(shè)計(jì)的目的是讓模型永遠(yuǎn)不要輸出像素坐標(biāo)這種脆弱信息而是輸出我想點(diǎn)擊哪個(gè)語(yǔ)義元素再由執(zhí)行器負(fù)責(zé)坐標(biāo)尋址。坐標(biāo)這種落地細(xì)節(jié)一旦經(jīng)過(guò)模型之手出錯(cuò)率會(huì)明顯上升。把語(yǔ)義和實(shí)現(xiàn)分離是降低模型幻覺(jué)率的關(guān)鍵一步。5.2 動(dòng)作范式約束為什么讓Agent輸出函數(shù)調(diào)用而不是點(diǎn)坐標(biāo)很多初版Agent總讓模型直接輸出屏幕坐標(biāo)比如{x: 816, y: 432}結(jié)果模型時(shí)不時(shí)給出一個(gè)懸空坐標(biāo)。問(wèn)題在于模型是在生成一個(gè)看起來(lái)合理的數(shù)字而不是在做精確定位。限定動(dòng)作集之后模型的任務(wù)從猜數(shù)字變成了從列表里選元素兩種任務(wù)的成功率差距是數(shù)量級(jí)的。我用的動(dòng)作集合很小固定五類click(element)點(diǎn)擊某個(gè)語(yǔ)義元素input(element, text)向輸入框填寫(xiě)內(nèi)容scroll(direction)按指定方向滾動(dòng)wait(condition)等待某個(gè)狀態(tài)出現(xiàn)finish(result)任務(wù)完成提交結(jié)論這套約束還有個(gè)好處審計(jì)友好。每個(gè)動(dòng)作都有可回放的結(jié)構(gòu)化日志出問(wèn)題時(shí)可以逐幀回溯對(duì)做Agent的穩(wěn)定性測(cè)試非常有幫助。而且因?yàn)閯?dòng)作集合固定后續(xù)想接入失敗重試、人工審核、動(dòng)作回放這類基礎(chǔ)設(shè)施都非常好擴(kuò)展。5.3 真實(shí)項(xiàng)目里的穩(wěn)定性和性能調(diào)優(yōu)在實(shí)際的某Electron桌面管理系統(tǒng)中我用這套閉環(huán)跑通了一個(gè)每日批量創(chuàng)建訂單的流程登錄、進(jìn)入訂單模塊、搜索客戶、填商品和金額、提交并校驗(yàn)列表出現(xiàn)新記錄。最初版本每單耗時(shí)約12秒其中模型推理占掉8秒操作和反饋只有2秒左右剩余消耗在截圖傳輸上。優(yōu)化方向有三個(gè)一是把AX樹(shù)文本裁剪到關(guān)鍵可交互元素過(guò)濾掉大量靜態(tài)文本節(jié)點(diǎn)token直接少一半。這個(gè)裁剪規(guī)則可以在遍歷AX樹(shù)時(shí)做只要role是button、textbox、combobox、link、checkbox這類可交互類型就保留純展示文本只在上下文里需要時(shí)才納入。二是加入步驟緩存重復(fù)的頁(yè)面狀態(tài)不重復(fù)請(qǐng)求模型只有頁(yè)面發(fā)生變化了才重新決策。比如登錄頁(yè)的判斷結(jié)果可以緩存不必每次都讓模型重新讀屏。三是把截圖從每步必發(fā)改成只在觸發(fā)視覺(jué)兜底條件時(shí)才發(fā)。比如AX樹(shù)里找不到目標(biāo)元素或者模型明確請(qǐng)求查看布局才補(bǔ)充截圖。一輪優(yōu)化之后平均每單耗時(shí)降到了6秒左右。WebSocket鏈路的穩(wěn)定性同樣值得關(guān)注。長(zhǎng)時(shí)間運(yùn)行后偶發(fā)連接斷開(kāi)或頁(yè)面target重建Agent腳本如果沒(méi)做重連整個(gè)任務(wù)就掛在半路。我的做法是給整個(gè)控制循環(huán)加一個(gè)外層守護(hù)監(jiān)聽(tīng)連接關(guān)閉事件發(fā)現(xiàn)斷開(kāi)后重新請(qǐng)求/json/list拿最新target并恢復(fù)會(huì)話再?gòu)闹袛鄷r(shí)的動(dòng)作狀態(tài)繼續(xù)執(zhí)行。6. 端口暴露的安全紅線、斷線自愈與同類方案選型對(duì)比6.1 遠(yuǎn)程調(diào)試端口的半張危險(xiǎn)面孔與防護(hù)措施CDP帶來(lái)的能力是雙向的它能操作應(yīng)用也等于向外開(kāi)放了應(yīng)用的完全控制權(quán)。只要拿到調(diào)試端口的WebSocket地址任何進(jìn)程都能通過(guò)Runtime.evaluate在渲染進(jìn)程甚至主進(jìn)程里執(zhí)行任意代碼。主進(jìn)程target尤其危險(xiǎn)因?yàn)槟沁吥苤苯釉L問(wèn)Node.js API等于拿到了整個(gè)操作系統(tǒng)的鑰匙。因此在Agent方案落地時(shí)有幾條紅線必須守住調(diào)試端口永遠(yuǎn)只綁定127.0.0.1不開(kāi)放到局域網(wǎng)或公網(wǎng)生產(chǎn)環(huán)境除非明確開(kāi)啟否則不攜帶任何調(diào)試參數(shù)需要Agent化運(yùn)行的機(jī)器單獨(dú)維護(hù)一個(gè)專用的啟動(dòng)配置定期校驗(yàn)連接來(lái)源或者更嚴(yán)格一點(diǎn)在啟動(dòng)時(shí)驗(yàn)證預(yù)先約定好的連接Token對(duì)通過(guò)CDP執(zhí)行的Runtime.evaluate內(nèi)容做白名單約束避免把任意外部腳本拼進(jìn)表達(dá)式。這條線既是技術(shù)線也是合規(guī)線。團(tuán)隊(duì)內(nèi)部做AI測(cè)試平臺(tái)時(shí)調(diào)試端口往往部署在多臺(tái)機(jī)器上權(quán)限邊界定義清楚能省去很多后續(xù)的麻煩。6.2 會(huì)話斷了怎么辦心跳重連與無(wú)頭恢復(fù)長(zhǎng)時(shí)間運(yùn)營(yíng)的Agent任務(wù)除了頁(yè)面狀態(tài)變化還會(huì)遇到target重建。Electron應(yīng)用里窗口關(guān)閉再打開(kāi)、頁(yè)面崩潰自動(dòng)恢復(fù)都會(huì)讓舊的WebSocket失效。重連邏輯不要做在報(bào)錯(cuò)的時(shí)候而要做在連接剛開(kāi)始不穩(wěn)定的時(shí)候。我的經(jīng)驗(yàn)是周期性ping一下。CDP沒(méi)有專門的ping命令可以用Runtime.evaluate跑一個(gè)空表達(dá)式如11連續(xù)兩次失敗就觸發(fā)重連。重連后不要從頭開(kāi)始任務(wù)而是先把當(dāng)前AX樹(shù)和URL拉回來(lái)和斷點(diǎn)前的記錄對(duì)比確認(rèn)狀態(tài)沒(méi)丟再繼續(xù)。這樣即使應(yīng)用中途重啟Agent也能自動(dòng)續(xù)跑而不是白白浪費(fèi)之前所有已完成的動(dòng)作。6.3 和WinAppDriver、圖像識(shí)別、OCR方案的對(duì)比選型最后聊一下方案選型。不是所有桌面自動(dòng)化都必須用CDP很多時(shí)候取決于你手里有哪些牌。我自己做過(guò)的對(duì)比總結(jié)如下方案原理優(yōu)勢(shì)劣勢(shì)適用場(chǎng)景CDPChromium調(diào)試協(xié)議加JS橋接原生支持、語(yǔ)義級(jí)定位、跨平臺(tái)、天然適合LLM感知僅限Electron/Chromium內(nèi)核應(yīng)用AI Agent、跨平臺(tái)桌面自動(dòng)化系統(tǒng)級(jí)UI自動(dòng)化框架桌面平臺(tái)輔助功能接口系統(tǒng)級(jí)控件識(shí)別對(duì)Electron內(nèi)部DOM無(wú)感知定位粒度粗傳統(tǒng)桌面應(yīng)用圖像模板匹配截圖加特征匹配不依賴DOM結(jié)構(gòu)對(duì)樣式變化極敏感、坐標(biāo)易漂移老舊遺留系統(tǒng)應(yīng)急O(jiān)CR方案截圖加文字識(shí)別可讀任意界面文本速度和精度不穩(wěn)定、難以穩(wěn)定定位沒(méi)有其他入口時(shí)的兜底CDP說(shuō)到底是為Chromium生態(tài)量身定做的自動(dòng)化通道。Agent要高效操作Electron桌面應(yīng)用它就是默認(rèn)選項(xiàng)。其它方案都繞不開(kāi)先識(shí)別再定位的脆弱鏈路而CDP讓Agent拿到的是和DevTools一樣完整的視圖狀態(tài)與事件流感知的確定性完全不同。最后分享一點(diǎn)個(gè)人體會(huì)。整個(gè)鏈路搭完之后我有兩個(gè)很深的感受第一Electron應(yīng)用的Agent化改造真正難的不是讓模型能點(diǎn)擊而是把感知層做扎實(shí)——AX樹(shù)結(jié)構(gòu)化、坐標(biāo)換算、事件反饋這些看似瑣碎的基礎(chǔ)設(shè)施決定了Agent能力的上限第二Agent和傳統(tǒng)腳本的本質(zhì)區(qū)別在于反饋驅(qū)動(dòng)如果你能讓每一次動(dòng)作都帶回明確的頁(yè)面狀態(tài)變化模型的每一步都會(huì)越來(lái)越穩(wěn)。這套鏈路目前已經(jīng)跑在我的日常工具鏈里后續(xù)我打算把動(dòng)作日志和頁(yè)面截圖配合起來(lái)做一個(gè)自動(dòng)回放與回歸對(duì)比的小工具讓Agent的任務(wù)執(zhí)行有據(jù)可查。