1. 項(xiàng)目緣起與整體設(shè)計(jì)思路1.1 為什么想讓 AI 自己去發(fā)稿事情的起因很簡(jiǎn)單。我手上有一個(gè)持續(xù)在維護(hù)的技術(shù)內(nèi)容賬號(hào)日常需要在騰訊云開發(fā)者社區(qū)保持更新頻率。寫過技術(shù)博客的人都知道從選題、寫稿、排版、配圖到最終發(fā)布一篇文章的完整鏈路走下來純手工操作少說也要一兩個(gè)小時(shí)。如果遇到需要反復(fù)調(diào)整格式、上傳圖片、填寫標(biāo)簽的情況時(shí)間成本還會(huì)進(jìn)一步拉高。我當(dāng)時(shí)的想法是既然 AI 已經(jīng)能幫我寫稿了那為什么不讓它把“發(fā)布”這一步也一起干掉換句話說我希望構(gòu)建一個(gè)端到端的自動(dòng)化流程讓 AI 從拿到一篇成稿開始自己打開瀏覽器、登錄社區(qū)、進(jìn)入編輯器、粘貼正文、上傳封面圖、填寫分類標(biāo)簽最后點(diǎn)擊發(fā)布。整個(gè)過程不需要我盯著屏幕我只需要在最后確認(rèn)一下結(jié)果就行。這個(gè)想法聽起來不算復(fù)雜但真正動(dòng)手之后才發(fā)現(xiàn)里面涉及的坑遠(yuǎn)比想象中多。最終這次實(shí)戰(zhàn)跑下來AI 一共執(zhí)行了227 次操作耗時(shí)4.3 小時(shí)踩了9 個(gè)比較典型的坑。我把整個(gè)過程完整復(fù)盤一遍希望能給同樣在做瀏覽器自動(dòng)化、AI Agent 操作網(wǎng)頁的朋友一些參考。1.2 核心關(guān)鍵詞與涉及的技術(shù)點(diǎn)這次實(shí)戰(zhàn)涉及的核心技術(shù)點(diǎn)主要有這么幾個(gè)browser-skill這是我用來驅(qū)動(dòng)瀏覽器操作的核心能力模塊負(fù)責(zé)把“點(diǎn)擊”“輸入”“滾動(dòng)”“截圖”這些動(dòng)作封裝成 AI 可以調(diào)用的技能。bsk這是 browser-skill 的簡(jiǎn)稱在日志和調(diào)試過程中我大量使用這個(gè)縮寫來標(biāo)記操作來源。tencent-cloud-community-publish這是本次任務(wù)的場(chǎng)景標(biāo)識(shí)代表“在騰訊云開發(fā)者社區(qū)發(fā)布文章”這一具體流程。execCommand這是富文本編輯器里插入內(nèi)容時(shí)繞不開的一個(gè)老 API也是本次踩坑的重災(zāi)區(qū)。upload文件上傳環(huán)節(jié)涉及封面圖、正文配圖的處理同樣是自動(dòng)化里最容易出問題的地方。這幾個(gè)關(guān)鍵詞基本覆蓋了整條鏈路的核心難點(diǎn)。下面我會(huì)按照“整體設(shè)計(jì)—核心細(xì)節(jié)—實(shí)操過程—問題排查”的順序把每個(gè)環(huán)節(jié)拆開講清楚。1.3 整體方案選型與背后的考量在方案設(shè)計(jì)階段我其實(shí)面臨幾個(gè)選擇。第一個(gè)選擇是用純 API 方式發(fā)布還是用瀏覽器自動(dòng)化方式發(fā)布理論上如果社區(qū)提供開放的發(fā)布接口直接調(diào) API 是最穩(wěn)的。但實(shí)際情況是很多內(nèi)容平臺(tái)的發(fā)布接口并不對(duì)外開放或者需要復(fù)雜的鑒權(quán)流程。所以我最終選擇了瀏覽器自動(dòng)化這條路——讓 AI 像真人一樣操作頁面。這樣做的好處是通用性強(qiáng)不依賴平臺(tái)是否開放接口壞處是穩(wěn)定性受頁面結(jié)構(gòu)影響大任何一個(gè) DOM 變化都可能導(dǎo)致流程失敗。第二個(gè)選擇是用現(xiàn)成的自動(dòng)化框架還是自己封裝 browser-skill我最終選擇了自己封裝。原因是我需要讓 AI 能夠“理解”當(dāng)前頁面狀態(tài)而不是機(jī)械地執(zhí)行固定腳本。比如當(dāng)頁面加載慢的時(shí)候AI 應(yīng)該知道等待當(dāng)某個(gè)按鈕找不到的時(shí)候AI 應(yīng)該嘗試滾動(dòng)或者換一種定位方式。這種“帶判斷的操作”是普通腳本很難做到的必須把操作封裝成 skill讓 AI 在每一步都能做決策。第三個(gè)選擇是一次性跑完還是分階段執(zhí)行我最終選擇了分階段。因?yàn)檎麄€(gè)流程太長如果一次性跑一旦中間出錯(cuò)前面的操作就白費(fèi)了。分階段執(zhí)行的好處是每個(gè)階段可以單獨(dú)驗(yàn)證、單獨(dú)重試大大降低了整體失敗率。提示做瀏覽器自動(dòng)化時(shí)不要一上來就追求“全自動(dòng)一把過”。先把流程拆成若干可獨(dú)立驗(yàn)證的階段每個(gè)階段跑通之后再串聯(lián)這是最省時(shí)間的做法。2. 核心細(xì)節(jié)解析與實(shí)操要點(diǎn)2.1 browser-skill 的能力邊界與設(shè)計(jì)原則browser-skill 本質(zhì)上是一層封裝它把瀏覽器里常見的操作抽象成 AI 可以調(diào)用的函數(shù)。我設(shè)計(jì)的 skill 主要包括這幾類導(dǎo)航類打開指定 URL、前進(jìn)、后退、刷新。定位類根據(jù)文本、CSS 選擇器、XPath 找到頁面元素。交互類點(diǎn)擊、輸入文本、清空輸入框、選擇下拉項(xiàng)。文件類上傳文件到指定 input 元素。狀態(tài)類獲取頁面文本、獲取元素屬性、截圖、等待某個(gè)條件成立。設(shè)計(jì)這些 skill 的時(shí)候我遵循了一個(gè)原則每個(gè) skill 只做一件事并且返回足夠的信息讓 AI 判斷下一步。比如“點(diǎn)擊”這個(gè) skill不僅要執(zhí)行點(diǎn)擊還要返回點(diǎn)擊后頁面是否發(fā)生了變化、有沒有彈窗出現(xiàn)、當(dāng)前 URL 是否改變。這樣 AI 才能根據(jù)返回結(jié)果決定是繼續(xù)還是重試。這里有個(gè)很容易被忽略的點(diǎn)skill 的返回值設(shè)計(jì)比 skill 本身更重要。如果返回值信息不足AI 就會(huì)“盲操作”出錯(cuò)率會(huì)飆升。我在早期版本里就是因?yàn)辄c(diǎn)擊 skill 只返回了“成功/失敗”導(dǎo)致 AI 在頁面沒加載完的時(shí)候誤判為成功后面一連串操作全部錯(cuò)位。2.2 富文本編輯器的 execCommand 陷阱騰訊云開發(fā)者社區(qū)的編輯器是富文本編輯器這類編輯器最大的特點(diǎn)是不是一個(gè)簡(jiǎn)單的 textarea而是一個(gè) contenteditable 的 div。往里面插入內(nèi)容最直接的方式就是用document.execCommand(insertText, false, text)。但 execCommand 有幾個(gè)非?？拥牡胤降谝凰呀?jīng)被標(biāo)記為廢棄。雖然目前主流瀏覽器還支持但行為在不同瀏覽器、不同版本之間可能有差異。我在測(cè)試的時(shí)候就發(fā)現(xiàn)同樣的代碼在某個(gè)版本里能正常插入換一個(gè)版本就插不進(jìn)去。第二它對(duì)換行和特殊字符的處理很不穩(wěn)定。普通文本還好一旦遇到代碼塊、表格、有序列表這些結(jié)構(gòu)execCommand 經(jīng)常會(huì)把格式搞亂。我最初嘗試直接把整篇 Markdown 轉(zhuǎn)成 HTML 再插入結(jié)果編輯器把很多標(biāo)簽都過濾掉了代碼塊直接變成了一坨純文本。第三它和編輯器的內(nèi)部狀態(tài)可能不同步。有些富文本編輯器會(huì)在內(nèi)部維護(hù)一份數(shù)據(jù)模型execCommand 直接操作 DOM 之后編輯器的數(shù)據(jù)模型并沒有更新導(dǎo)致你看著內(nèi)容進(jìn)去了但一提交就發(fā)現(xiàn)內(nèi)容是空的。我最終的解決方案是分段插入 模擬真實(shí)輸入。具體來說就是把文章按段落拆開逐段調(diào)用 execCommand 插入每插入一段就觸發(fā)一次 input 事件讓編輯器同步狀態(tài)。對(duì)于代碼塊這種特殊結(jié)構(gòu)我改用模擬鍵盤輸入的方式一個(gè)字符一個(gè)字符地敲進(jìn)去雖然慢但穩(wěn)定性高很多。注意execCommand 的廢棄狀態(tài)意味著它不是長久之計(jì)。如果平臺(tái)后續(xù)升級(jí)編輯器這套方案可能需要重寫。做自動(dòng)化時(shí)要對(duì)這類“依賴廢棄 API”的環(huán)節(jié)保持警惕留好備選方案。2.3 文件上傳環(huán)節(jié)的 upload 處理文件上傳是另一個(gè)重災(zāi)區(qū)。瀏覽器的文件上傳通常依賴input typefile元素但自動(dòng)化工具沒法直接操作系統(tǒng)的文件選擇對(duì)話框。解決辦法是繞過對(duì)話框直接把文件路徑設(shè)置到 input 元素的 files 屬性上。具體做法是先找到頁面上隱藏的 file input然后用自動(dòng)化工具提供的“設(shè)置文件”能力把本地文件路徑傳進(jìn)去。這一步的關(guān)鍵是找到正確的 input 元素。很多網(wǎng)站會(huì)把 file input 隱藏起來用一個(gè)漂亮的按鈕代替你點(diǎn)擊按鈕的時(shí)候?qū)嶋H上是觸發(fā)了那個(gè)隱藏 input 的 click。我在實(shí)操中遇到的坑是頁面上有多個(gè) file input分別對(duì)應(yīng)封面圖、正文配圖、附件等不同用途。如果定位錯(cuò)了就會(huì)出現(xiàn)“封面圖傳到了正文里”這種尷尬情況。解決辦法是通過 input 的 accept 屬性、name 屬性或者它所在的父容器來精確定位。另外上傳之后一定要等待上傳完成的信號(hào)。有些網(wǎng)站上傳是異步的你設(shè)置完文件之后圖片還在后臺(tái)上傳這時(shí)候如果直接點(diǎn)發(fā)布圖片就會(huì)丟失。我的做法是監(jiān)聽網(wǎng)絡(luò)請(qǐng)求或者輪詢檢查圖片的 src 是否已經(jīng)變成了真實(shí)的 CDN 地址。3. 實(shí)操過程與核心環(huán)節(jié)實(shí)現(xiàn)3.1 階段一登錄態(tài)與頁面準(zhǔn)備整個(gè)流程的第一步是確保登錄態(tài)。我沒有讓 AI 去模擬輸入賬號(hào)密碼因?yàn)槟菢由婕膀?yàn)證碼、二次驗(yàn)證等問題太不穩(wěn)定。我的做法是復(fù)用已有的瀏覽器用戶數(shù)據(jù)目錄也就是讓自動(dòng)化瀏覽器加載一個(gè)已經(jīng)登錄過的 profile。這樣打開社區(qū)頁面時(shí)直接就是登錄狀態(tài)。這一步的實(shí)操要點(diǎn)是啟動(dòng)瀏覽器時(shí)要指定userDataDir參數(shù)指向一個(gè)已經(jīng)手動(dòng)登錄過的目錄。第一次使用前我會(huì)手動(dòng)打開這個(gè)瀏覽器登錄一次之后自動(dòng)化流程就能直接復(fù)用。頁面準(zhǔn)備階段AI 需要做的是打開社區(qū)創(chuàng)作頁面等待編輯器加載完成。這里的判斷條件是“編輯器區(qū)域出現(xiàn)且可編輯”。我用的檢測(cè)方法是輪詢檢查 contenteditable 元素的 presence同時(shí)檢查頁面是否有 loading 遮罩。3.2 階段二正文內(nèi)容的插入正文插入是整個(gè)流程里最耗時(shí)、最容易出錯(cuò)的部分。我最終采用的策略是“分塊處理”把文章按 Markdown 結(jié)構(gòu)拆分成塊標(biāo)題塊、段落塊、代碼塊、圖片塊、列表塊。對(duì)每種塊類型采用不同的插入策略。每插入一塊就驗(yàn)證一次內(nèi)容是否正確進(jìn)入編輯器。普通段落用 execCommand 插入代碼塊用模擬輸入圖片塊先上傳再插入引用。這個(gè)過程中我記錄了一個(gè)關(guān)鍵數(shù)據(jù)平均每插入一個(gè)塊需要 3 到 5 次操作包括定位、插入、驗(yàn)證。一篇文章大概有 40 到 50 個(gè)塊所以光正文插入就消耗了 150 次左右的操作。這里有個(gè)實(shí)操心得插入順序要從后往前或者從前往后但不要跳著插。因?yàn)楦晃谋揪庉嬈鞯墓鈽?biāo)位置很容易亂如果你跳著插光標(biāo)可能跑到意想不到的地方導(dǎo)致內(nèi)容錯(cuò)位。我一開始就是隨機(jī)插入結(jié)果文章結(jié)構(gòu)全亂了后來改成嚴(yán)格順序插入才穩(wěn)定下來。3.3 階段三封面圖與標(biāo)簽填寫正文搞定之后接下來是封面圖和標(biāo)簽。封面圖的上傳相對(duì)獨(dú)立找到對(duì)應(yīng)的 file input設(shè)置文件等待上傳完成即可。標(biāo)簽填寫則是在輸入框里輸入標(biāo)簽文字然后從下拉建議里選中。標(biāo)簽這一塊有個(gè)小坑有些標(biāo)簽需要精確匹配才能選中。如果你輸入的標(biāo)簽文字和平臺(tái)已有的標(biāo)簽不完全一致可能創(chuàng)建出一個(gè)新標(biāo)簽或者干脆選不上。我的做法是先把目標(biāo)標(biāo)簽文字輸入然后等待下拉列表出現(xiàn)再從列表里選擇完全匹配的項(xiàng)。3.4 階段四發(fā)布前的最終校驗(yàn)在點(diǎn)擊發(fā)布之前我做了一次完整的校驗(yàn)包括標(biāo)題是否正確填入正文塊數(shù)量是否和預(yù)期一致代碼塊格式是否保留封面圖是否上傳成功標(biāo)簽是否選中分類是否選擇這個(gè)校驗(yàn)環(huán)節(jié)幫我避免了好幾次“帶病發(fā)布”。有一次就是封面圖實(shí)際上傳失敗了但頁面上顯示了一個(gè)占位圖如果不仔細(xì)檢查就會(huì)誤以為成功。校驗(yàn)通過之后點(diǎn)擊發(fā)布按鈕等待跳轉(zhuǎn)到文章詳情頁確認(rèn)文章 ID 和標(biāo)題正確整個(gè)流程才算結(jié)束。4. 常見問題與排查技巧實(shí)錄4.1 九個(gè)坑的完整記錄這次實(shí)戰(zhàn)踩的 9 個(gè)坑我整理成了一張表方便大家對(duì)照排查序號(hào)問題現(xiàn)象根本原因解決方案1編輯器內(nèi)容插入后消失execCommand 未觸發(fā) input 事件編輯器狀態(tài)未同步每次插入后手動(dòng)觸發(fā) input 事件2代碼塊格式丟失直接插入 HTML 被編輯器過濾改用模擬鍵盤逐字符輸入3封面圖傳到了正文file input 定位錯(cuò)誤通過 accept 屬性和父容器精確定位4圖片上傳后立即發(fā)布導(dǎo)致丟失未等待異步上傳完成輪詢檢查圖片 src 是否為 CDN 地址5標(biāo)簽選不上輸入文字與平臺(tái)標(biāo)簽不完全匹配從下拉建議中精確選擇6頁面加載慢導(dǎo)致點(diǎn)擊無效未等待元素可交互增加顯式等待和可交互檢測(cè)7光標(biāo)位置錯(cuò)亂跳序插入內(nèi)容嚴(yán)格按順序插入8登錄態(tài)失效profile 過期定期手動(dòng)刷新登錄態(tài)9發(fā)布按鈕點(diǎn)擊無反應(yīng)存在未填必填項(xiàng)發(fā)布前做完整校驗(yàn)4.2 排查思路的通用方法遇到問題的時(shí)候我總結(jié)了一套通用的排查思路第一步截圖。不管什么問題先截圖看當(dāng)前頁面狀態(tài)。很多時(shí)候問題一眼就能看出來比如彈了個(gè)錯(cuò)誤提示、頁面還在 loading、某個(gè)必填項(xiàng)是空的。第二步看日志。browser-skill 的每次操作我都會(huì)記錄日志包括操作類型、目標(biāo)元素、執(zhí)行結(jié)果。通過日志能快速定位到是哪一步開始出錯(cuò)的。第三步縮小范圍。如果整個(gè)流程失敗不要從頭重跑而是從失敗的那一步單獨(dú)重試。這樣可以快速驗(yàn)證是偶發(fā)問題還是必現(xiàn)問題。第四步手動(dòng)復(fù)現(xiàn)。如果自動(dòng)化怎么都跑不通就手動(dòng)操作一遍看看真人操作時(shí)頁面是什么反應(yīng)。很多時(shí)候自動(dòng)化失敗是因?yàn)樗M的操作和真人操作有細(xì)微差別。提示做瀏覽器自動(dòng)化日志和截圖是你的兩條命。沒有這兩樣排查問題基本靠猜。4.3 提升穩(wěn)定性的幾個(gè)實(shí)操技巧除了排查問題我還總結(jié)了一些提升穩(wěn)定性的技巧給每個(gè)操作加超時(shí)和重試。不要假設(shè)一次就能成功失敗后自動(dòng)重試 2 到 3 次成功率會(huì)大幅提升。用文本定位代替 CSS 選擇器。CSS 選擇器容易因?yàn)轫撁娓陌媸Ф粹o上的文字相對(duì)穩(wěn)定。關(guān)鍵操作后加短暫等待。不要操作完立刻進(jìn)行下一步給頁面一點(diǎn)反應(yīng)時(shí)間。把長流程拆成短流程。每個(gè)短流程獨(dú)立驗(yàn)證降低整體失敗率。這次 227 次操作、4.3 小時(shí)的實(shí)戰(zhàn)雖然踩了不少坑但最終跑通了整條鏈路。對(duì)我來說最大的收獲不是“AI 能發(fā)稿”這個(gè)結(jié)果而是摸清了瀏覽器自動(dòng)化在真實(shí)內(nèi)容平臺(tái)上的能力邊界和穩(wěn)定性瓶頸。后續(xù)如果要做類似的事情這套經(jīng)驗(yàn)可以直接復(fù)用少走很多彎路。