/ 目錄 / 演練場 / playwright-skill
● 社群 lackeyjb ⚡ 即開即用

playwright-skill

作者 lackeyjb · lackeyjb/playwright-skill

Claude 按需撰寫並執行自訂 Playwright 腳本——有頭瀏覽器、真實輸出——不需要死記任何預建的測試函式庫。

這個技能不提供固定的輔助函式,而是讓 Claude 針對每個任務撰寫專屬的 Playwright 程式碼,並透過 run.js 執行。瀏覽器預設以有頭模式運行,讓你可以看到執行過程。Playwright API 文件按需載入,讓 Claude 在不撐爆上下文視窗的情況下取得所需資訊。

為什麼要用

核心特性

即時演示

實際使用效果

playwright-skill.replay ▶ 就緒
0/0

安裝

選擇你的客戶端

~/Library/Application Support/Claude/claude_desktop_config.json  · Windows: %APPDATA%\Claude\claude_desktop_config.json
{
  "mcpServers": {
    "playwright-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/lackeyjb/playwright-skill",
        "~/.claude/skills/playwright-skill"
      ],
      "_inferred": true
    }
  }
}

開啟 Claude Desktop → Settings → Developer → Edit Config。儲存後重啟應用。

~/.cursor/mcp.json · .cursor/mcp.json
{
  "mcpServers": {
    "playwright-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/lackeyjb/playwright-skill",
        "~/.claude/skills/playwright-skill"
      ],
      "_inferred": true
    }
  }
}

Cursor 使用與 Claude Desktop 相同的 mcpServers 格式。專案級設定優先於全域。

VS Code → Cline → MCP Servers → Edit
{
  "mcpServers": {
    "playwright-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/lackeyjb/playwright-skill",
        "~/.claude/skills/playwright-skill"
      ],
      "_inferred": true
    }
  }
}

點擊 Cline 側欄中的 MCP Servers 圖示,然後選 "Edit Configuration"。

~/.codeium/windsurf/mcp_config.json
{
  "mcpServers": {
    "playwright-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/lackeyjb/playwright-skill",
        "~/.claude/skills/playwright-skill"
      ],
      "_inferred": true
    }
  }
}

格式與 Claude Desktop 相同。重啟 Windsurf 生效。

~/.continue/config.json
{
  "mcpServers": [
    {
      "name": "playwright-skill",
      "command": "git",
      "args": [
        "clone",
        "https://github.com/lackeyjb/playwright-skill",
        "~/.claude/skills/playwright-skill"
      ]
    }
  ]
}

Continue 使用伺服器物件陣列,而非映射。

~/.config/zed/settings.json
{
  "context_servers": {
    "playwright-skill": {
      "command": {
        "path": "git",
        "args": [
          "clone",
          "https://github.com/lackeyjb/playwright-skill",
          "~/.claude/skills/playwright-skill"
        ]
      }
    }
  }
}

加入 context_servers。Zed 儲存後熱重載。

claude mcp add playwright-skill -- git clone https://github.com/lackeyjb/playwright-skill ~/.claude/skills/playwright-skill

一行命令搞定。用 claude mcp list 驗證,claude mcp remove 移除。

使用場景

實戰用法: playwright-skill

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

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

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

前置條件
  • 可安裝 Node + Playwright — 若瀏覽器缺失,技能會透過 npx playwright install 自動安裝
步驟
  1. 描述流程
    Use the playwright skill. Open localhost:3000, sign up with [email protected] / Pass123!, verify we land on /dashboard.✓ 已複製
    → Claude 撰寫 Playwright 腳本、以有頭模式執行,並回報通過或失敗
  2. 互動式偵錯
    It failed at the email input — add a screenshot right before the error.✓ 已複製
    → 下一次執行會在該位置擷取並回傳截圖

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

注意事項
  • 選取器選擇過於脆弱(例如使用 nth-child) — 請 Claude 優先使用角色或標籤選取器
搭配使用: filesystem

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

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

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

步驟
  1. 請求截圖
    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 任何瀏覽器自動化需求 0
run.js executor script path 腳本產生後執行 0
Headed/headless toggle flag CI 環境與本機偵錯情境切換 0

成本與限制

運行它的成本

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

安全

權限、密鑰、影響範圍

憑證儲存: 技能本身不儲存任何憑證。若你的測試需要存取需要登入的頁面,請將憑證保存在環境變數中——絕對不要寫入產生的腳本裡。
資料出站: Only to sites your test visits

故障排查

常見錯誤與修復

'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() 進行包裝。

替代方案

playwright-skill 對比其他方案

替代方案何時用它替代權衡
playwright MCP你想使用結構化的 MCP 工具(click、fill、snapshot)而非程式碼產生方式MCP 將程式碼細節抽象化;本技能則會產生可重複使用的真實腳本
Puppeteer skills / chrome-devtools MCP僅限 Chrome 的工作流程,或需要使用 DevTools 協定功能跨瀏覽器支援度較低

更多

資源

📖 閱讀 GitHub 上的官方 README

🐙 查看未解決的 issue

🔍 瀏覽全部 400+ MCP 伺服器和 Skills