webapp-testing skill 怎麼用：Anthropic 官方的 Playwright 網頁測試 Skill（安裝與使用）

本文根據 anthropics/skills 倉庫裏該技能的 SKILL.md 與倉庫 README 整理，資料核對於 2026-10-11。skills.sh 榜單當日顯示該技能累計安裝約 17.4 萬次；所在倉庫 anthropics/skills 在 GitHub 約 18.0 萬 Star（同日數據）。技能內容會隨倉庫更新，以倉庫為準。

這個 Skill 做什麼

Claude 改完前端代碼後，常見的問題是它「以為」改好了，卻沒有真的打開頁面看過。webapp-testing 給它一套驗證辦法：用 Python 版 Playwright 驅動瀏覽器，對本地運行的網頁應用做操作和檢查。description 列的用途包括驗證前端功能、調試介面行為、截取瀏覽器截圖和查看瀏覽器日誌。

技能裏有一棵簡單的決策樹：靜態 HTML 直接讀文件找選擇器；動態應用要先確認開發伺服器是否已經在跑，沒有就用目錄裏的 scripts/with_server.py 代為啟動（支持同時起前端和後端多個服務），測試結束後自動關閉。它強調「先偵察、後動作」：等頁面加載穩定，截圖或讀取渲染後的 DOM，找到真實存在的選擇器，再去點擊和輸入，而不是憑源碼猜。還有一條不常見的要求——輔助腳本一律先用 --help 看用法、當黑盒調用，不要把腳本源碼讀進上下文。

怎麼安裝

webapp-testing 收在 anthropics/skills 倉庫的 example-skills 插件包裏。在 Claude Code 會話中依次輸入（命令來自倉庫 README）：

text
/plugin marketplace add anthropics/skills
/plugin install example-skills@anthropic-agent-skills

同一個包裏的其他示例技能會一起裝上。只想要這一個，可以把倉庫裏的 skills/webapp-testing 文件夾複製到 ~/.claude/skills/（個人）或項目的 .claude/skills/；claude.ai 網頁版則在 Customize → Skills 裏上載這個文件夾的 ZIP。

倉庫整體介紹和其他安裝方式，詳見本站《anthropics/skills 是什麼、怎麼安裝：Anthropic 官方 Skills 倉庫（docx / pptx / xlsx / pdf、skill-creator）》。

怎麼用

• 「啟動這個項目的開發伺服器，打開首頁，檢查登入表單提交後是否跳轉到儀表盤，並截圖」。
• 「頁面上點『導出』沒反應，幫我打開瀏覽器看控制台報了什麼錯」。
• 「給購物車的增刪改寫一個 Playwright 冒煙測試腳本」。

examples/ 下有三個示例腳本：抓取控制台日誌、發現頁面元素、自動化靜態 HTML。

適合誰 / 侷限

適合讓 Claude Code 做前端功能、希望它自己驗證結果的開發者，也適合給沒有端到端測試的小項目補幾條冒煙測試。它面向的是本地應用；要登入第三方服務的流程、驗證碼、複雜的多標籤頁交互並不在覆蓋範圍內，也不是完整的測試框架，用例組織和持續集成需要另外安排。

注意事項

• 許可：技能目錄內的 LICENSE.txt 為 Apache-2.0。
• 依賴：需要 Python、Playwright 以及對應的瀏覽器內核，首次使用要先安裝。
• 會啟動進程、打開瀏覽器：with_server.py 會執行你項目的啟動命令，建議在開發環境使用，不要指向線上地址。
• 只在 Claude Code 這類能執行命令的環境裏有意義，claude.ai 網頁版無法訪問你本機的服務。