playwrite MCP ，自動化測試的好工具，工作心得，經驗筆記

自從有了AI 輔助開發後，省下了大半的時間。

能用MCP 工具，就能事半功倍。

公司有提供Claude AI pro帳號， 雖然不是買api key，沒有token 可以用，但仍可把它變成我喜歡的樣子，發揮它最大的功效。

現在的工作方式是變成兩種，vscode 、Cursor AI 做開發工具；Claude.ai 做 QA測試。

那就先下載claude.desktop 有個UI 介面好操作。

登入公司的PRO 帳號，搖身一變 為是PRO 戰士，至少 戰力值會比免費版的好用。

那我把Claude.ai 規劃為QA測試大師，所以 就先安裝 playwrite 的工具，是有想過 Puppeteer。
評估了一下(圖1)，專案的複雜度、狗皮鳥毛的流程，最後還是決定使用資源及文章比較多的 playwrite，不論哪個工具能幫我省時E2E測試就是好工具。😂😂 

評估使用工具(圖1)

1. 新增一個 chat ，先將AI 的腳色分清楚，這樣在ReAct 時會比較偏向這類的思考與回應，之後再逐步地給予回饋，再收編回答與思考，至少回答的答案不太會偏離主軸。(圖2)

設定AI腳色(圖2)

2. 安裝MCP TOOL工具，讓claude.ai 拿上 軍師的武器，諸葛孔明的扇子，playwrite。

claude.ai 的mcp 工具，官方預設有提供幾個工具，可以到settings 找到相關設定 extension (圖3、圖4)

settings 找到相關設定 extension(圖3)

官網提供的工具(圖4)

如果是官方提供的工具，那下載完後就會在本地的資料夾看到extension 的外掛插件，其實還是安裝在本地端。(圖5、圖6)

extension 的外掛插件(圖5)

extension 的外掛插件(圖6)

3. 官方提供的其實只有幾個，那這次要用的playwrite 就要另外安裝，那就在claude的目錄底下找到claude_desktop_config.json。(圖7)

在目錄找到 claude_desktop_config.json(圖7)

打開後，把mcp tool工具呼叫方式寫上。(圖8) 查看官網設定

mcp tool工具呼叫方式寫上(圖8)

4. 關掉整著claude.ai desktop 要徹底關掉重啟，可以打開工作管理員 整個關掉claude desktop，因為claude desktop 會在背景執行。

重新啟動後，claude 會重新讀取config 設定。
在回到settings >developer 打開看，就會看到 config的設定了。(圖9)

config 上的工具(圖9)

5. playwrite 工具裝好後，就可以讓 AI agent，來幫忙寫QA測試了。(圖10)

給予 它要測試的網址，請它用playwrite 去寫模擬手動測試，也可以跟他說 要在哪個動作 要暫停 切換手動輸入。

QA測試(圖10)

最後就完成E2E 模擬手動測試啦~~💪💪

結論: 

以前在做測試很麻煩，要手動測試，或者寫E2E端點測試程式，模擬手動，真心覺得寫測試程式和爬蟲沒兩樣，要客製又要花很長的時間反覆進行或編寫。

但現在有了MCP自動化方式能幫我省時、省工，我要把公司的pro 變成我喜歡的樣子。

最近看個影片，提到的一句話，「 我們無法排斥它，只能接受它，那就要把它變成喜歡的樣子」。

後續就只要在規劃bash 寫壓力測試、重複測試、良率測試。
這樣寫下來，就省了好幾天的功夫了😊