playwright-skill

為什麼要用

核心特性

由模型驅動——Claude 根據你的需求撰寫客製化的 Playwright 程式碼
預設使用有頭瀏覽器，讓你親眼看到自動化執行過程
內建 run.js 處理模組解析，腳本開箱即用
按需載入 Playwright API 參考文件，保持上下文精簡
支援測試、表單填寫、點擊流程、失效連結檢查、響應式版面檢查

即時演示

實際使用效果

playwright-skill.replay ▶ 就緒

0/0

安裝

作者儲存庫 · Claude Skills 官方文件

使用場景

實戰用法： playwright-skill

按需為註冊流程撰寫冒煙測試

👤 不想手動撰寫 Playwright 的開發者 ⏱ ~10 min beginner

何時使用： 你推送了新的註冊流程，想確認端對端流程仍然正常運作。

前置條件

可安裝 Node + Playwright — 若瀏覽器缺失，技能會透過 npx playwright install 自動安裝

步驟

描述流程

Use the playwright skill. Open localhost:3000, sign up with [email protected] / Pass123!, verify we land on /dashboard.✓ 已複製

→ Claude 撰寫 Playwright 腳本、以有頭模式執行，並回報通過或失敗
互動式偵錯

It failed at the email input — add a screenshot right before the error.✓ 已複製

→ 下一次執行會在該位置擷取並回傳截圖

結果： 一個可按需使用的冒煙測試，你也可以選擇將其儲存為持久化的測試規格檔。

注意事項

選取器選擇過於脆弱（例如使用 nth-child） — 請 Claude 優先使用角色或標籤選取器

搭配使用： filesystem

找出文件網站中所有失效連結

👤 文件維護者 ⏱ ~15 min intermediate

何時使用： 你懷疑在結構調整後出現了連結失效的問題。

步驟

描述爬取範圍

Use playwright to crawl https://docs.example.com up to depth 2, log every link, and return the 404s.✓ 已複製

→ Claude 撰寫 BFS 爬蟲、執行後輸出清單

結果： 一份已分類的失效連結清單，供後續修復使用。

注意事項

爬蟲對網站造成過大請求壓力 — 將並發數限制在 2–3，並加入適當的延遲

在三種視區尺寸下抽查響應式版面呈現

👤 驗證版面變更的前端開發者 ⏱ ~5 min beginner

何時使用： 你修改了頁首，想確認在桌機、平板和手機上的呈現效果。

步驟

請求截圖

Use playwright to screenshot localhost:3000 at 1440, 768, and 390 width. Save them.✓ 已複製

→ 儲存 3 張 PNG 並回傳檔案路徑

結果： 三張截圖，供快速視覺審閱使用。

注意事項

截圖未等待字型或圖片載入完成 — 在擷取截圖前加入 networkidle 等待

搭配使用： filesystem

組合

與其他 MCP 搭配，撬動十倍槓桿

playwright-skill + filesystem

將測試規格檔和截圖儲存在與被測程式碼相鄰的目錄下

Write the smoke test and save it under tests/e2e/signup.spec.js.✓ 已複製

playwright-skill + github

執行測試、讓工作流程失敗，並將結果發布到 PR 上

Run the playwright spec against the deploy preview, then post results as a comment on PR #42.✓ 已複製

playwright-skill + ios-simulator-skill

Playwright 負責 Web 端，ios-simulator-skill 負責原生端——在跨平台測試工作階段中同時使用兩者

Run the playwright web flow and the ios-simulator native flow in sequence, report both.✓ 已複製

工具

此 MCP 暴露的能力

工具	輸入參數	何時呼叫
Custom Playwright script generation	task description	任何瀏覽器自動化需求
run.js executor	script path	腳本產生後執行
Headed/headless toggle	flag	CI 環境與本機偵錯情境切換

成本與限制

運行它的成本

API 配額: None
每次呼叫 Token 數: 每次測試執行消耗 1–5k tokens，視 Claude 載入的 Playwright 參考文件量而定
費用: 免費——你只需要在本機安裝 Node 與 Playwright 瀏覽器
提示: 保持提示詞聚焦；不要一次要求「測試所有東西」。

安全

權限、密鑰、影響範圍

憑證儲存： 技能本身不儲存任何憑證。若你的測試需要存取需要登入的頁面，請將憑證保存在環境變數中——絕對不要寫入產生的腳本裡。

資料出站： Only to sites your test visits

產生的腳本以完整的本機程序權限執行——在對正式環境 URL 執行前，請務必先審閱腳本內容。

故障排查

常見錯誤與修復

'browserType.launch: Executable doesn't exist'

執行 npx playwright install chromium

驗證： npx playwright --version

Selector fails intermittently

改用角色或標籤選取器；加入 await expect(...).toBeVisible() 等待。

Script hangs

Claude 可能忘記關閉瀏覽器。請告知它務必使用 try/finally 搭配 await browser.close() 進行包裝。

替代方案