在AI編程領(lǐng)域，我們常常陷入反復(fù)修改代碼的繁瑣流程。本文將介紹如何借助Playwright MCP，讓AI自主檢測(cè)并修復(fù)其生成的代碼問題，實(shí)現(xiàn)開發(fā)流程的高效閉環(huán)，大幅提升編程效率。

在用AI編程開發(fā)產(chǎn)品的時(shí)候，尤其是網(wǎng)站類的產(chǎn)品，小到一個(gè)HTML頁面，大到一個(gè)功能網(wǎng)站，我們的常規(guī)操作是：

1.?在AI編程軟件（例如Cursor、Claude）中，給AI發(fā)請(qǐng)求

2.?等待AI完成代碼，然后打開網(wǎng)站，檢查哪里有不對(duì)的地方

3.?把不對(duì)的地方截圖、或者把控制臺(tái)輸出復(fù)制，回到編程軟件，發(fā)給AI，讓AI給新的代碼

如此循環(huán)??，最終完成網(wǎng)站的開發(fā)。

發(fā)現(xiàn)沒有，整個(gè)開發(fā)過程，我們都是在給AI打工，不斷從編程軟件和網(wǎng)站之間切換，頻繁給主子反饋您寫的代碼哪里有問題。

這個(gè)姿態(tài)不對(duì)！太費(fèi)時(shí)間了??！

最直接的解決方案就是讓AI自己打開網(wǎng)站，讓它看自己寫的屎山代碼跑出來是什么樣子的，讓它自己看控制臺(tái)的輸出有什么問題，然后自行去解決??！

這個(gè)場(chǎng)景，放在以前，可以說是荒誕，但現(xiàn)在成了現(xiàn)實(shí)！

我們可以利用MCP的能力，讓AI調(diào)用瀏覽器，然后截圖、看輸出，這樣就閉環(huán)了。

今天餅干哥哥就教大家怎么實(shí)現(xiàn)這個(gè)能力，讓AI徹底變成我們的牛馬??！

今天我們的主角是「Playwright」，一個(gè)強(qiáng)大的自動(dòng)化測(cè)試工具，由微軟開發(fā)，用于測(cè)試網(wǎng)頁應(yīng)用。它能模擬用戶操作，如點(diǎn)擊、輸入、滾動(dòng)等。常見于爬蟲場(chǎng)景。

以前我們用js或者python里寫代碼，讓Playwright根據(jù)我們的代碼邏輯去打開網(wǎng)站、登陸賬號(hào)、獲取信息等。

現(xiàn)在，我們是要讓AI自行去判斷怎么使用Playwright完成上述的操作。

這里就需要用到MCP Server—— @executeautomation/playwright-mcp-server

上圖中，都是playwright mcp server提供的能力，可供AI調(diào)用：

1. playwright_screenshot

• 用途：截取網(wǎng)頁或元素的屏幕截圖。
• 場(chǎng)景：測(cè)試時(shí)驗(yàn)證頁面渲染效果，或記錄自動(dòng)化操作后的頁面狀態(tài)。

2. playwright_fill

• 用途：自動(dòng)填寫表單輸入框內(nèi)容（如登錄框、搜索框）。
• 場(chǎng)景：模擬用戶輸入，測(cè)試表單提交功能或批量填表。

3. playwright_select

• 用途：操作下拉菜單選擇特定選項(xiàng)。
• 場(chǎng)景：測(cè)試下拉選項(xiàng)的交互邏輯（如篩選條件選擇）。

4. playwright_hover

• 用途：模擬鼠標(biāo)懸停在元素上的行為。
• 場(chǎng)景：測(cè)試懸停觸發(fā)的動(dòng)態(tài)效果（如菜單彈出、Tooltip）。

5. playwright_expect_response

• 用途：驗(yàn)證特定網(wǎng)絡(luò)請(qǐng)求的響應(yīng)（如接口返回狀態(tài)碼、數(shù)據(jù)）。
• 場(chǎng)景：確保前端操作觸發(fā)的后端接口符合預(yù)期（如提交訂單后的API響應(yīng)）。

6. playwright_get_visible_text

• 用途：獲取頁面上可見的文本內(nèi)容。
• 場(chǎng)景：斷言頁面內(nèi)容是否正確顯示（如成功提示、錯(cuò)誤信息）。

7. playwright_drag

• 用途：模擬拖拽元素操作（如文件上傳、排序）。
• 場(chǎng)景：測(cè)試拖拽交互功能是否正常。

8. playwright_save_as_pdf

• 用途：將當(dāng)前頁面保存為 PDF 文件。
• 場(chǎng)景：生成頁面快照?qǐng)?bào)告或存檔關(guān)鍵頁面狀態(tài)。

ok，接下來看怎么用上這個(gè)工具。 以 Cursor 為例。

首先，要安裝。

先安裝好 node.js

然后在 cursor 命令行下輸入以下命令安裝～

npm install -g @executeautomation/playwright-mcp-server

接著需要在 Cursor 配置這個(gè) MCP 服務(wù)

如圖：右上角設(shè)置-MCP- add new global MCP server

在自動(dòng)新開的窗口下，輸入以下的內(nèi)容：

{
“mcpServers”:{
“playwright-mcp-server”:{
“command”:”npx”,
“args”:[
“-y”,
“@executeautomation/playwright-mcp-server”
]
}}}

接著，重啟 Cursor， 回到 MCP 的設(shè)置頁面就能看到下圖這樣的，必須是綠燈，證明已經(jīng)開啟了。

接下來就直接在 Agent 模式向 AI 正常發(fā)請(qǐng)求，最好用 claude3.7 能比較好調(diào)用 MCP

如果你怕 AI 不調(diào) MCP 可以顯性地讓他執(zhí)行

例如我一個(gè)網(wǎng)站，在登錄的時(shí)候出問題了，如下圖，我就發(fā)需求：

我的網(wǎng)站 http://localhost:5173
在登陸的時(shí)候報(bào)錯(cuò)了，賬號(hào)是 admin，密碼是 admin，請(qǐng)你Playwright MCP 訪問嘗試登錄后看問題是什么，然后解決。

從圖中，我們可以看到 AI 調(diào)用了 MCP 里的多個(gè)工具：打開網(wǎng)站-輸入賬號(hào)密碼-點(diǎn)擊登錄-查看控制臺(tái)輸出-然后讀取問題后-就先修復(fù)代碼-最后重新執(zhí)行一遍檢查。

如下圖，喜聞樂見地，幫我下修復(fù)好了這個(gè)問題??！