1. 為什么 AI 需要 MCP-Playwright 才能操作真實(shí)網(wǎng)頁大語言模型能寫代碼、能分析文本但你把一個(gè)需要登錄、翻頁、勾選條件、再點(diǎn)提交的網(wǎng)頁任務(wù)丟給它它只能干瞪眼。原因很直接模型本身沒有瀏覽器它看不到 DOM點(diǎn)不了按鈕也拿不到渲染后的數(shù)據(jù)。過去我們靠 Selenium 手寫 XPath頁面一改選擇器就全廢后來靠模型生成腳本又卡在“生成完還得人工跑、報(bào)錯(cuò)還得人工改”的循環(huán)里。MCP-Playwright 解決的正是這個(gè)斷層。MCP 是模型上下文協(xié)議它把 Playwright 的瀏覽器控制能力包裝成模型可以調(diào)用的工具集。模型不再只是“輸出一段代碼讓你去跑”而是能在對(duì)話過程中直接發(fā)起動(dòng)作打開頁面、點(diǎn)擊元素、填寫輸入框、執(zhí)行一段 JS、截圖回傳。Playwright 本身是微軟開源的自動(dòng)化框架支持 Chromium、Firefox、WebKit 三套內(nèi)核穩(wěn)定性比早期方案好很多。兩者結(jié)合后AI 第一次真正具備了“看見網(wǎng)頁、操作網(wǎng)頁”的閉環(huán)能力。這套組合適合誰我梳理了三類典型場景。第一類是自動(dòng)化測試同學(xué)需要讓 AI 根據(jù)自然語言描述生成并執(zhí)行交互步驟比如“登錄后進(jìn)入訂單頁篩選近七天已發(fā)貨訂單導(dǎo)出列表”。第二類是數(shù)據(jù)采集與分析頁面是動(dòng)態(tài)渲染的接口有簽名直接抓包成本高用瀏覽器驅(qū)動(dòng)反而更省事。第三類是智能代理開發(fā)你要做一個(gè)能自主完成多步驟表單的 AgentMCP-Playwright 就是它的“手和眼”。熱詞里提到的 MCP-Playwright、Playwright、AI、JS、自動(dòng)化其實(shí)指向同一個(gè)核心讓 JS 代碼成為 AI 與瀏覽器之間的執(zhí)行層。你寫的不再是給人看的腳本而是給模型調(diào)用的工具描述加執(zhí)行邏輯。下面我會(huì)從環(huán)境準(zhǔn)備、配置片段、可復(fù)制腳本到排障完整走一遍。2. TaoToken 前置準(zhǔn)備拿到 Base URL、API Key 與模型 ID在配置 MCP 服務(wù)之前得先有一個(gè)能調(diào)用模型的入口。TaoToken 在這里扮演的是模型網(wǎng)關(guān)角色它提供兼容 OpenAI 風(fēng)格的接口你拿到 Base URL 和 API Key 后就能在 MCP 配置里把模型接進(jìn)來。注意MCP-Playwright 負(fù)責(zé)瀏覽器動(dòng)作模型負(fù)責(zé)決策“下一步點(diǎn)哪里”兩者缺一不可。第一步訪問官網(wǎng) https://taotoken.net/?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content 注冊(cè)并登錄。進(jìn)入控制臺(tái)后找到 API Keys 頁面新建一個(gè) Key。這個(gè) Key 只顯示一次復(fù)制后先存到本地密碼管理器或環(huán)境變量里別直接寫進(jìn)會(huì)提交到 Git 的配置文件。第二步確認(rèn) Base URL。TaoToken 的 API 地址是 https://taotoken.net/api注意這個(gè)地址不帶任何查詢參數(shù)配置時(shí)直接填這個(gè)即可。如果你用的是 OpenAI SDK 兼容模式通常還需要在末尾保留/v1具體以接入文檔為準(zhǔn)。文檔入口在 https://taotoken.net/doc 里面有各語言 SDK 的示例。第三步選模型 ID。這一步很關(guān)鍵因?yàn)?MCP-Playwright 的交互任務(wù)對(duì)模型的指令遵循能力要求較高。你可以在模型對(duì)話頁面 https://taotoken.net/model-chat 里先試幾個(gè)模型看哪個(gè)對(duì)“點(diǎn)擊第幾個(gè)按鈕”“填寫哪個(gè)字段”這類指令理解更準(zhǔn)。實(shí)測下來指令遵循強(qiáng)的模型在復(fù)雜分支任務(wù)里出錯(cuò)率明顯低。選好后記下 Model ID后面配置里要用。如果你打算長期跑編碼類或 Agent 類任務(wù)可以關(guān)注 Coding Plan 頁面 https://taotoken.net/coding-plan 它針對(duì)高頻調(diào)用場景做了額度優(yōu)化。不過對(duì)于本篇的 MCP-Playwright 驗(yàn)證先用按量計(jì)費(fèi)的 Key 就夠了。這里有個(gè)容易踩的坑很多人把 Key 直接寫進(jìn)claude_desktop_config.json或 MCP 的 settings 文件然后不小心同步到了云端。正確做法是用環(huán)境變量引用配置里寫${TAOTOKEN_API_KEY}這種形式具體語法取決于你用的 MCP 客戶端。下面第三節(jié)我會(huì)給出完整片段。3. 可復(fù)制配置MCP 服務(wù) JSON 與 Playwright 啟動(dòng)參數(shù)這一節(jié)是全文的核心操作部分。我會(huì)給出兩個(gè)配置片段一個(gè)是 MCP 客戶端里注冊(cè) Playwright 服務(wù)的 JSON另一個(gè)是模型接入的 settings 片段。路徑和字段名我會(huì)寫清楚你直接替換自己的值即可。先看 MCP 服務(wù)注冊(cè)。以 Claude Desktop 為例配置文件在 macOS 下通常是~/Library/Application Support/Claude/claude_desktop_config.jsonWindows 下在%APPDATA%\Claude\claude_desktop_config.json。如果你用的是 Cline 或其它支持 MCP 的編輯器路徑不同但結(jié)構(gòu)一致。{ mcpServers: { playwright: { command: npx, args: [ -y, executeautomation/playwright-mcp-server ], env: { PLAYWRIGHT_BROWSERS_PATH: 0, TAOTOKEN_BASE_URL: https://taotoken.net/api, TAOTOKEN_API_KEY: ${TAOTOKEN_API_KEY}, TAOTOKEN_MODEL_ID: your-model-id } } } }這里有幾個(gè)點(diǎn)要說明。command用npx是為了免去全局安裝-y表示自動(dòng)確認(rèn)。executeautomation/playwright-mcp-server是社區(qū)維護(hù)的 Playwright MCP 服務(wù)包如果你用的是其它實(shí)現(xiàn)包名要相應(yīng)替換。PLAYWRIGHT_BROWSERS_PATH設(shè)為0表示使用項(xiàng)目本地安裝的瀏覽器避免和系統(tǒng)全局版本沖突。env里的三個(gè)變量是我建議加的。TAOTOKEN_BASE_URL固定填https://taotoken.net/apiTAOTOKEN_API_KEY用環(huán)境變量引用不要寫明文。TAOTOKEN_MODEL_ID填你在模型對(duì)話頁面選好的那個(gè) ID。注意MCP 服務(wù)本身不一定直接讀這三個(gè)變量它們更多是給配套的模型調(diào)用層用的如果你的 MCP 客戶端把模型配置和 MCP 配置分開那就把這三個(gè)值填到模型配置那邊。再看模型接入的 settings 片段。如果你用的是支持 OpenAI 兼容接口的客戶端配置通常長這樣{ model: { provider: openai-compatible, baseUrl: https://taotoken.net/api, apiKey: ${TAOTOKEN_API_KEY}, modelId: your-model-id, temperature: 0.2 } }temperature我建議設(shè)低一點(diǎn)0.2 左右。因?yàn)榫W(wǎng)頁交互任務(wù)需要確定性模型每次決策要穩(wěn)定溫度太高會(huì)導(dǎo)致同一個(gè)頁面它這次點(diǎn)“提交”、下次點(diǎn)“取消”。這個(gè)參數(shù)在復(fù)雜表單場景里影響很大。如果你用的是 Codex 類的auth.json結(jié)構(gòu)字段名可能是base_url和api_key注意下劃線風(fēng)格。Cline 的 MCP 配置則是在設(shè)置界面里填 Base URL、Key、Model ID 三件套填完后它會(huì)自動(dòng)寫入配置文件。無論哪種核心三件套不變Base URL 是https://taotoken.net/apiKey 是你的 TaoToken KeyModel ID 是你選的模型。配置寫完后重啟 MCP 客戶端。重啟后在工具列表里應(yīng)該能看到playwright相關(guān)的工具比如playwright_navigate、playwright_click、playwright_evaluate。如果看不到先檢查 JSON 語法再檢查npx是否能正常拉包。4. 驗(yàn)證請(qǐng)求用 JS 腳本驅(qū)動(dòng)一次多步驟表單交互配置就緒后我們來跑一個(gè)真實(shí)任務(wù)。我設(shè)計(jì)了一個(gè)場景打開一個(gè)帶動(dòng)態(tài)渲染的注冊(cè)表單頁填寫用戶名和郵箱勾選服務(wù)條款點(diǎn)擊提交然后讀取提交后的提示文本。這個(gè)場景覆蓋了輸入、點(diǎn)擊、條件判斷和結(jié)果讀取能驗(yàn)證 MCP-Playwright 的完整鏈路。先給出一段可復(fù)制的 JS 交互腳本。這段腳本不是直接跑在 Node 里而是作為 MCP 工具調(diào)用的參數(shù)傳給 Playwright 服務(wù)。不同 MCP 客戶端的調(diào)用方式不同但核心是playwright_evaluate或playwright_run_code這類工具。async function fillAndSubmit(page) { await page.goto(https://example.com/signup, { waitUntil: networkidle }); await page.waitForSelector(#username, { state: visible }); await page.fill(#username, mcp_test_user); await page.waitForSelector(#email, { state: visible }); await page.fill(#email, mcp_testexample.com); const agreeBox await page.$(#agree-terms); if (agreeBox) { const checked await agreeBox.isChecked(); if (!checked) { await agreeBox.check(); } } await page.click(#submit-btn); await page.waitForSelector(.result-message, { timeout: 10000 }); const message await page.textContent(.result-message); return message; }這段腳本的關(guān)鍵點(diǎn)在于等待策略。waitUntil: networkidle表示等網(wǎng)絡(luò)空閑再繼續(xù)適合動(dòng)態(tài)渲染頁面。waitForSelector帶state: visible比單純等元素存在更穩(wěn)因?yàn)橛行┰卦?DOM 里但被隱藏。條件分支那段先判斷復(fù)選框是否存在再判斷是否已勾選避免重復(fù)勾選導(dǎo)致取消。最后用waitForSelector等結(jié)果元素出現(xiàn)再讀文本。在 MCP 客戶端里你可以用自然語言讓模型調(diào)用這段邏輯。比如輸入“用 playwright 打開注冊(cè)頁填寫用戶名 mcp_test_user 和郵箱 mcp_testexample.com勾選條款后提交告訴我結(jié)果提示是什么?！蹦Ｐ蜁?huì)把它拆成多個(gè)工具調(diào)用navigate、fill、check、click、evaluate。你可以在客戶端的工具調(diào)用日志里看到每一步。成功的結(jié)果長這樣模型返回“提交成功提示文本為注冊(cè)已受理請(qǐng)查收郵件。”同時(shí)你可以在 Playwright 的截圖工具里看到頁面截圖。如果模型返回的是“找不到 #submit-btn”那說明選擇器不對(duì)或頁面沒加載完進(jìn)入下一節(jié)排障。這里我試過一個(gè)坑有些頁面的提交按鈕是button但被一層div包裹c(diǎn)lick會(huì)點(diǎn)到外層。解決辦法是用page.click(#submit-btn, { force: true })強(qiáng)制點(diǎn)擊或者先scrollIntoViewIfNeeded。這個(gè)細(xì)節(jié)在復(fù)雜頁面里很常見。5. 常見報(bào)錯(cuò)排查401、local proxy failed、reading choices 與 OAuth這一節(jié)我按真實(shí)遇到的報(bào)錯(cuò)來寫每個(gè)都給出定位思路和修復(fù)動(dòng)作。401 Unauthorized。這個(gè)最常見說明 API Key 不對(duì)或沒傳。先檢查環(huán)境變量TAOTOKEN_API_KEY是否真的被 MCP 客戶端讀到了。有些客戶端不展開${}語法那就得用客戶端自己的密鑰管理功能。再檢查 Base URL 是否寫成了https://taotoken.net/api/帶尾斜杠某些 SDK 對(duì)尾斜杠敏感。最后確認(rèn) Key 沒有過期或被刪除。修復(fù)后重啟客戶端再跑一次最小請(qǐng)求只讓模型調(diào)用一次playwright_navigate打開空白頁看是否還報(bào) 401。local proxy failed。這個(gè)報(bào)錯(cuò)通常出現(xiàn)在 MCP 服務(wù)啟動(dòng)階段意思是本地代理或端口綁定失敗。Playwright MCP 服務(wù)默認(rèn)會(huì)起一個(gè)本地通信通道如果端口被占用就會(huì)失敗。解決辦法是換端口或者在配置里加--port參數(shù)指定一個(gè)空閑端口。另外如果你本機(jī)裝了會(huì)攔截流量的安全軟件也可能導(dǎo)致本地回環(huán)通信失敗臨時(shí)關(guān)閉后重試。注意這里說的是本地回環(huán)不是任何外部網(wǎng)絡(luò)配置。reading choices 報(bào)錯(cuò)。這個(gè)一般出現(xiàn)在模型返回結(jié)構(gòu)解析階段提示讀取choices字段失敗。原因是模型接口返回的 JSON 結(jié)構(gòu)和客戶端預(yù)期不一致。檢查你的 Base URL 是否指向了正確的兼容端點(diǎn)。TaoToken 的 API 地址是https://taotoken.net/api如果你用的是 OpenAI SDK可能需要在代碼里把base_url設(shè)為https://taotoken.net/api/v1。具體以接入文檔 https://taotoken.net/doc 為準(zhǔn)。修復(fù)后模型對(duì)話應(yīng)該能正常返回內(nèi)容。OAuth 相關(guān)報(bào)錯(cuò)。如果你在 MCP 客戶端里配置了需要 OAuth 的模型提供方但實(shí)際用的是 API Key 模式就會(huì)報(bào) OAuth 失敗。解決辦法是把認(rèn)證方式從 OAuth 切換為 API Key填 TaoToken 的 Key。有些客戶端在切換后需要清空緩存重新登錄記得做這一步。除了這四個(gè)還有一個(gè)高頻問題模型能調(diào)用工具但點(diǎn)不中元素。這通常不是報(bào)錯(cuò)而是任務(wù)失敗。排查方法是讓模型先執(zhí)行playwright_screenshot截圖你看截圖里元素的實(shí)際位置和選擇器是否匹配。如果頁面有 iframe選擇器要加上 frame 定位。如果是動(dòng)態(tài) ID改用文本選擇器或data-testid。排障時(shí)建議用最小復(fù)現(xiàn)法先只做 navigate再做單個(gè) fill逐步加步驟。這樣能快速定位是哪一步斷了。另外把 MCP 客戶端的日志級(jí)別調(diào)到 debug能看到每次工具調(diào)用的入?yún)⒑头祷胤浅Ｓ杏谩?. 從驗(yàn)證到落地把 MCP-Playwright 接入你的自動(dòng)化流程跑通單次任務(wù)后下一步是把它變成可復(fù)用的流程。我的做法是把常用的交互步驟封裝成幾個(gè) JS 函數(shù)每個(gè)函數(shù)對(duì)應(yīng)一個(gè)業(yè)務(wù)動(dòng)作比如login(page, user, pass)、searchOrder(page, orderId)、exportList(page)。然后在 MCP 客戶端里用自然語言組合調(diào)用。這樣模型不需要每次從零生成選擇器出錯(cuò)率會(huì)低很多。如果你要做的是長期運(yùn)行的 Agent建議關(guān)注 Coding Plan https://taotoken.net/coding-plan 它在高頻調(diào)用場景下額度更劃算。同時(shí)把 API Key 的管理做成輪換機(jī)制避免單 Key 泄露影響全部任務(wù)。模型對(duì)話頁面 https://taotoken.net/model-chat 可以隨時(shí)用來測試新模型對(duì)交互指令的理解程度換模型前先在那里跑一遍你的核心腳本。還有一個(gè)實(shí)用技巧給每個(gè)關(guān)鍵步驟加超時(shí)和重試。Playwright 的waitForSelector默認(rèn) 30 秒復(fù)雜頁面可以調(diào)到 60 秒。重試邏輯寫在 JS 里比如點(diǎn)擊后等結(jié)果如果 5 秒沒出現(xiàn)就再點(diǎn)一次。這些細(xì)節(jié)能讓你的自動(dòng)化流程在真實(shí)網(wǎng)絡(luò)環(huán)境下穩(wěn)定很多。最后別忘了截圖留痕。每次任務(wù)結(jié)束讓模型調(diào)一次playwright_screenshot把截圖存到本地按時(shí)間戳命名。出問題時(shí)回看截圖比翻日志快得多。這套組合我用下來處理多步驟表單和條件分支任務(wù)的效率比手寫腳本高不少尤其是頁面結(jié)構(gòu)頻繁變動(dòng)的場景改選擇器的工作量小了很多。