/ ディレクトリ / プレイグラウンド / playwright-skill
● コミュニティ lackeyjb ⚡ 即起動

playwright-skill

作者 lackeyjb · lackeyjb/playwright-skill

Claudeがカスタムの Playwright スクリプトをオンデマンドで作成・実行します。ヘッド付きブラウザで実際の出力が確認でき、事前に用意されたテストライブラリを覚える必要はありません。

固定のヘルパー関数を提供するのではなく、このスキルはタスクごとにClaudeがカスタムの Playwright コードを作成し、run.js 経由で実行する方法を提供します。ブラウザはデフォルトで表示モードで動作するため、自動化の実行を目視で確認できます。Playwright の APIドキュメントはオンデマンドで読み込まれるため、コンテキストウィンドウを圧迫せずに必要な情報を参照できます。

なぜ使うのか

主な機能

ライブデモ

実際の動作

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

3つのビューポートでレスポンシブ表示をスポットチェックする

👤 レイアウト変更を検証したいフロントエンド開発者 ⏱ ~5 min beginner

使うタイミング: ヘッダーを変更した後、デスクトップ・タブレット・モバイルでの表示を確認したいとき。

フロー
  1. スクリーンショットをリクエストする
    Use playwright to screenshot localhost:3000 at 1440, 768, and 390 width. Save them.✓ コピーしました
    → 3枚のPNGが保存され、パスが返される

結果: 素早いビジュアルレビュー用の3枚のスクリーンショット。

注意点
  • フォントや画像の読み込み完了前にスクリーンショットが撮られる — スクリーンショット取得前に networkidle の待機を追加する
組み合わせ: filesystem

組み合わせ

他のMCPと組み合わせて10倍の力を

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

Webには Playwright、ネイティブには 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クォータ
なし
呼び出しあたりのトークン
テスト実行ごとに1〜5kトークン(Claudeが参照する Playwright リファレンスの量に依存)
金額
無料 — Node + Playwright のブラウザがディスク上にあれば利用可能
ヒント
プロンプトは焦点を絞ること。一度に「すべてテストして」と依頼しないでください。

セキュリティ

権限、シークレット、影響範囲

認証情報の保管: スキル内に認証情報は保存されません。テストが認証済みページにアクセスする場合、認証情報は環境変数に保管し、生成されたスクリプトには絶対に含めないでください。
データ送信先: テストがアクセスするサイトへの通信のみ

トラブルシューティング

よくあるエラーと対処法

'browserType.launch: Executable doesn't exist'

npx playwright install chromium を実行してください

確認: npx playwright --version
セレクタが断続的に失敗する

ロール/ラベルセレクタに切り替え、await expect(...).toBeVisible() による待機を追加してください。

スクリプトがハングする

Claudeがブラウザのクローズを忘れている可能性があります。常に try/finally で await browser.close() をラップするよう指示してください。

代替案

playwright-skill 他との比較

代替案代わりに使う場面トレードオフ
playwright MCPコード生成ではなく、構造化されたMCPツール(click、fill、snapshot)を使いたい場合MCPはコードを抽象化する。このスキルは再利用可能な実際のスクリプトを生成する
Puppeteer skills / chrome-devtools MCPChrome限定のワークフローやDevToolsプロトコル機能が必要な場合クロスブラウザ対応が限定的

その他

リソース

📖 GitHub の公式 README を読む

🐙 オープンな issue を見る

🔍 400以上のMCPサーバーとSkillsを見る