こんにちは、とまだです。
在使用Claude Code進行開發時,您是否覺得每次手動確認瀏覽器的工作很麻煩?
表單的動作確認、按鈕點擊的測試、響應式設計的檢查。
即使AI幫您寫了程式碼,最終還是得親自檢查一遍對吧?
本次,我將介紹如何使用Microsoft官方的Playwright MCP,僅透過自然語言指示來完全自動化E2E測試的方法。
實際運行的情況會讓您更容易捕捉概念!
Playwright MCP是由Microsoft官方提供的Model Context Protocol(MCP)伺服器。
MCP是一種協議,用於支持像Claude Code這樣的大規模語言模型(LLM)與外部工具的合作。
因此,您只需用日文指示AI,即可操作瀏覽器。
此外,Playwright本身並不是專門針對MCP的,主要用於網站和應用的E2E測試的庫。
與傳統的E2E測試工具決定性的區別在於,完全不需要編寫測試代碼。
例如,對於Todo應用的測試,只需這樣指示:
請新增3個任務,
編輯第二個,
確認刪除第一個的動作
僅此這樣,AI會自動操作瀏覽器並報告結果。
Playwright MCP利用瀏覽器的可及性樹。
它不依賴於螢幕截圖或圖像識別,而是直接操作HTML的結構化數據,因此能實現快速且可靠的操作。
接著我們來說明一下優點。
在使用Claude Code進行開發時,程式碼生成變得極快。
但是,這些工作還是要手動進行嗎?
這些都成了瓶頸,讓本來依賴AI驅動的開發速度未能發揮出來。
所有的動作確認都可以透過自然語言指示來完成。
「確認一下剛剛製作的應用畫面」
AI將啟動瀏覽器,截取螢幕並報告,Playwright本身也會進行檢查。
同時,表單輸入等「操作」也能完成。
「在登入表單中填入適當的值並進行動作確認」
AI將自動填入並點擊送出按鈕,報告結果。
另外,還可以檢查響應式設計。
「以手機尺寸查看顯示」
AI會更改螢幕大小,確認佈局是否有崩潰。
由於它能從設計師的角度進行檢查,因此能察覺到您可能未曾注意到的UI崩潰。
當讓AI承擔開發時,可能會迅速完成多個功能。
這時,讓它檢查一遍所有功能。
「確認一下剛剛製作的應用畫面」
只需這樣指示,AI將執行以下操作。
如果發生顯示崩潰或錯誤,AI也會告訴您相關內容。
您可以確認功能是否正常運作。
「確認使用者註冊表單的動作。
填入電子郵件地址和密碼,
嘗試按下註冊按鈕」
此時,AI將自動執行以下操作。
如果顯示錯誤信息,AI也會包含該內容進行報告。
「請確認在PC、平板和手機三種尺寸下的顯示」
AI會切換畫面大小,並截取相應的螢幕截圖。
確認是否沒有佈局崩潰並報告。
對於Claude Code,只需將以下設置添加即可。
claude mcp add playwright npx @playwright/mcp@latest
這樣就準備好了,無需構建測試環境或編寫代碼。
此外,其他環境如Cursor或Codex的設置詳情可參見官方網站。
A: 不需要。僅需用自然語言指示,AI便會執行適當的操作。
A: 可以用「點擊送出按鈕」或「在電子郵件地址欄輸入」等方式用日文進行指定。
A: AI會分析錯誤內容並報告「找不到按鈕」或「超時了」等易於理解的信息。
我在個人開發和實際現場中都充分利用了Playwright MCP。
特別是在添加新功能時的動作確認變得格外輕鬆。
之前(手動確認)
之後(Playwright MCP)
而且,AI也會全面檢查那些手動時可能會忽略的細微錯誤。
此外,提前將「預期的動作」以簡單的文字整理起來,讓AI按此進行檢查也是個好主意。
Playwright MCP是一款顛覆E2E測試概念的創新工具。
無需撰寫測試代碼,只需用自然語言指示,就能進行包括瀏覽器操作的測試。
結合Claude Code,從代碼生成到測試,全都能透過與AI的對話來完成。
安裝也非常簡單,設置一次後便能在未來的所有項目中重複使用。
若您的手動測試耗時過多,請務必嘗試看看!
再次提及,實際的使用方式在YouTube影片中有詳細解說。
想要一邊看螢幕學習的朋友,歡迎觀看。
我們還發布了其他關於Claude Code、MCP應用及Codex等最新AI開發工具的影片!
如果本篇文章對您有所幫助,請點讚並隨意支持我們的YouTube頻道訂閱!