Anthropic把瀏覽器自動(dòng)化做成"語(yǔ)音控制"

一個(gè)法國(guó)開發(fā)者用自然語(yǔ)言發(fā)LinkedIn帖子，代碼量從300行縮到50行。不是用了什么新框架，而是換了一種思路：讓AI直接"看懂"網(wǎng)頁(yè)，而不是讓人類去教它點(diǎn)哪里。

Andy G在Medium上曬了他的工作流：命令行輸入"發(fā)一篇關(guān)于AI安全的法語(yǔ)帖子"，30秒后LinkedIn上出現(xiàn)新內(nèi)容。后臺(tái)沒有脆弱的CSS選擇器，沒有等待元素加載的sleep函數(shù)，只有一個(gè)叫Playwright MCP的中間層在翻譯人類意圖。

MCP是什么？為什么不用Selenium了

MCP（Model Context Protocol，模型上下文協(xié)議）是Anthropic今年推的一套標(biāo)準(zhǔn)，讓AI模型能通過(guò)統(tǒng)一接口調(diào)用外部工具。 Playwright MCP則是把瀏覽器能力打包成這套接口的服務(wù)器。

傳統(tǒng)自動(dòng)化像教機(jī)器人走迷宮：你畫地圖（DOM結(jié)構(gòu)），它按圖走。網(wǎng)站改版，地圖作廢。Andy的原話：「如果你寫過(guò)那種CSS類一變就崩的Selenium腳本，這就是你不知道存在的替代方案。」

MCP的玩法完全不同。它暴露給AI的是一組高層工具：browser_navigate（跳轉(zhuǎn)）、browser_snapshot（頁(yè)面快照）、browser_click（點(diǎn)擊）、browser_fill_form（填表）。AI拿到頁(yè)面結(jié)構(gòu)后，自己決定點(diǎn)哪個(gè)按鈕。

關(guān)鍵區(qū)別在于輸入方式。以前寫page.querySelector('.post-button').click()，現(xiàn)在寫"點(diǎn)擊發(fā)布按鈕"。Playwright MCP用網(wǎng)頁(yè)的無(wú)障礙樹（accessibility tree）定位元素，這是瀏覽器給屏幕閱讀器準(zhǔn)備的語(yǔ)義層，比CSS類穩(wěn)定得多。

安裝只要一行：npx @anthropic-ai/mcp-playwright@latest。Claude Code用戶可以直接寫進(jìn)配置，加一行"PLAYWRIGHT_HEADLESS": "false"就能看著瀏覽器實(shí)時(shí)操作，調(diào)試用。

實(shí)戰(zhàn)：LinkedIn發(fā)帖的完整拆解

Andy的 francophone 獲客流程分三步。第一步處理登錄：用持久化瀏覽器配置保存會(huì)話，避免每次掃碼。

配置里加"PLAYWRIGHT_USER_DATA_DIR": "/Users/andy/.playwright-profiles/linkedin"，相當(dāng)于給AI一個(gè)帶記憶的瀏覽器身份。

第二步打開編輯器。指令是browser_click → "Start a post"——注意這里用的是按鈕的無(wú)障礙標(biāo)簽，不是class或id。LinkedIn改版十次，這個(gè)標(biāo)簽名變一次的概率極低。

第三步填內(nèi)容發(fā)出去。Andy的 trick 是先用法語(yǔ)寫好帖子，讓AI執(zhí)行發(fā)布動(dòng)作。全程沒有操作DOM，沒有處理動(dòng)態(tài)加載的彈窗，沒有等那個(gè)煩人的"正在發(fā)布"旋轉(zhuǎn)圖標(biāo)。

他同步自動(dòng)化的還有Medium文章發(fā)布和Sora視頻生成。三個(gè)平臺(tái)，一套交互邏輯：描述目標(biāo)，等AI翻譯成交互序列。

技術(shù)細(xì)節(jié)：什么情況下會(huì)翻車

Playwright MCP不是萬(wàn)能藥。Andy列了幾個(gè)邊界：

認(rèn)證必須自己解決。MCP服務(wù)器開的Chromium是干凈實(shí)例，默認(rèn)不帶你的cookies。要么每次走登錄流，要么像Andy那樣用持久化目錄存會(huì)話。

復(fù)雜交互仍需人工拆解。如果某個(gè)操作需要精確拖拽、多步確認(rèn)、或者處理驗(yàn)證碼，AI可能卡住。這時(shí)候要回退到browser_evaluate——在頁(yè)面里直接跑JavaScript，接管控制權(quán)。

成本是隱性的。每次AI調(diào)用都要消耗tokens，頁(yè)面快照越大越貴。Andy建議生產(chǎn)環(huán)境開headless模式，減少不必要的渲染開銷。

最有趣的細(xì)節(jié)是調(diào)試體驗(yàn)。開非headless模式時(shí)，你能看著AI像新手用戶一樣摸索界面：先掃一遍頁(yè)面結(jié)構(gòu)，找到候選元素，嘗試點(diǎn)擊，失敗了就換下一個(gè)。這種"可見的推理過(guò)程"比黑盒的Selenium腳本直觀得多。

為什么這值得關(guān)注

瀏覽器自動(dòng)化是個(gè)老問(wèn)題，但解法一直在變。Selenium時(shí)代拼的是定位器技巧，Puppeteer時(shí)代拼的是Chrome DevTools協(xié)議熟悉度，現(xiàn)在拼的是提示詞工程。

Andy的GitHub沒有開源完整代碼，但配置片段已經(jīng)夠說(shuō)明問(wèn)題：50行JSON配置加自然語(yǔ)言指令，替代了原來(lái)300行的Python腳本。維護(hù)成本從"每次改版重寫選擇器"降到"偶爾調(diào)一下提示詞"。

更深層的變化是責(zé)任轉(zhuǎn)移。以前開發(fā)者要對(duì)DOM結(jié)構(gòu)負(fù)責(zé)，現(xiàn)在只需要對(duì)意圖描述負(fù)責(zé)。網(wǎng)頁(yè)變成AI的API，人類退到需求層。

這套模式能走多遠(yuǎn)？取決于無(wú)障礙樹的覆蓋度。現(xiàn)代網(wǎng)頁(yè)越來(lái)越復(fù)雜，canvas渲染、Shadow DOM、動(dòng)態(tài)注入的內(nèi)容都可能讓AI"看不見"關(guān)鍵元素。但反過(guò)來(lái)想，這也給前端開發(fā)提了醒：無(wú)障礙做得好的網(wǎng)站，自動(dòng)化兼容性天然更好。

Andy最后提到他正在實(shí)驗(yàn)把這套流程接進(jìn)CI/CD，讓內(nèi)容發(fā)布完全無(wú)人值守。如果LinkedIn的anti-bot機(jī)制沒攔截，下一步可能是自動(dòng)化評(píng)論互動(dòng)——那時(shí)候，"社交"這個(gè)詞的定義可能要更新了。

你現(xiàn)在的瀏覽器自動(dòng)化腳本，有多少行是在處理"找元素"和"等加載"？如果能把這部分交給AI，省下來(lái)的時(shí)間夠重構(gòu)幾個(gè)模塊？