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