こんにちは、とまだです。

在使用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將執行以下操作。

  1. 啟動瀏覽器
  2. 訪問指定的URL
  3. 截取螢幕截圖
  4. 回報「顯示的情況如下」

如果發生顯示崩潰或錯誤,AI也會告訴您相關內容。

2. 表單的動作確認

您可以確認功能是否正常運作。

「確認使用者註冊表單的動作。
填入電子郵件地址和密碼,
嘗試按下註冊按鈕」

此時,AI將自動執行以下操作。

  1. 認識表單中的各個欄位
  2. 填入適當的測試數據
  3. 按下送出按鈕
  4. 確認結果畫面並報告

如果顯示錯誤信息,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頻道訂閱!


原文出處:https://qiita.com/tomada/items/c386d6d173f4af32d0de


精選技術文章翻譯,幫助開發者持續吸收新知。

共有 0 則留言


精選技術文章翻譯,幫助開發者持續吸收新知。
🏆 本月排行榜
🥇
站長阿川
📝10   💬8   ❤️12
427
🥈
我愛JS
📝1   💬6   ❤️4
90
🥉
酷豪
📝1   ❤️1
52
#4
AppleLily
📝1   💬4   ❤️1
41
#5
💬3  
10
評分標準:發文×10 + 留言×3 + 獲讚×5 + 點讚×1 + 瀏覽數÷10
本數據每小時更新一次