Playwright Wizard MCP

🚀 Playwright Wizard MCP Server

🧙‍♂️ Playwright Wizard MCP Serverは、業界のベストプラクティスを盛り込んだ、高度なPlaywrightテストスイートの作成をガイドする、インテリジェントなModel Context Protocol (MCP)サーバーです。

🚀 クイックスタート

Playwright Wizard MCPは、包括的なE2Eテストスイートを構築するための構造化されたステップバイステップのアプローチを提供します。このMCPサーバーは、アプリケーションに合わせたインテリジウ���エ�ウオ��ウィザードプロンプトを通じて、業界のベストプラクティスを案内します。

✨ 主な機能

• 🧙‍♂️ ステップバイステップのウィザードワークフロー：包括的なテストスイートを作成します。
• 📚 包括的なプロンプト：分析、計画、セットアップ、実装をカバーします。
• 🎯 ベストプラクティス：セレクター、フィクスチャ、並列実行のベストプラクティスを提供します。
• 🔧 オプションの拡張機能：アクセシビリティとAPIテストのための拡張機能を提供します。
• 📖 リファレンスドキュメント：高度なパターンのリファレンスドキュメントを提供します。
• 🌐 MCPレジストリ統合：簡単な発見とインストールのためのMCPレジストリと統合されています。

📦 インストール

クイックスタート（推奨）

インストールは必要ありません！ npxを使用してサーバーをオンデマンドで実行します：

{
  "mcpServers": {
    "playwright-wizard": {
      "command": "npx",
      "args": ["-y", "playwright-wizard-mcp"]
    }
  }
}

このアプローチでは、ローカルインストールを管理することなく、自動的に最新バージョンが使用されます。

グローバルインストール

より高速な起動とオフライン使用のために：

npm install -g playwright-wizard-mcp

次に、npxを使用せずに設定します：

{
  "mcpServers": {
    "playwright-wizard": {
      "command": "playwright-wizard-mcp"
    }
  }
}

MCPレジストリから

公式のMCPレジストリからも簡単に見つけることができます。

🔧 設定

GitHub Copilot (VS Code)

1. MCP設定ファイルを開きます：
   • macOS：~/Library/Application Support/Code/User/mcp.json
   • Windows：%APPDATA%\Code\User\mcp.json
2. サーバー設定を追加します：

{
  "servers": {
    "playwright-wizard": {
      "command": "npx",
      "args": ["-y", "playwright-wizard-mcp@latest"],
      "type": "stdio"
    }
  }
}

3. VS Codeを再起動するか、ウィンドウを再読み込みします（Cmd/Ctrl + Shift + P → "Developer: Reload Window"）
4. GitHub Copilot Chatを開き、ツールが利用可能かどうかを確認します。

Claude Desktop

1. 設定ファイルを開きます：
   • macOS：~/Library/Application Support/Claude/claude_desktop_config.json
   • Windows：%APPDATA%\Claude\claude_desktop_config.json
2. サーバー設定を追加します：

{
  "mcpServers": {
    "playwright-wizard": {
      "command": "npx",
      "args": ["-y", "playwright-wizard-mcp"]
    }
  }
}

3. Claude Desktopを再起動します
4. 新しいチャットを開いたときに🔨ツールアイコンが表示されることを確認して、インストールを検証します。

Cline (VS Code)

1. VS Codeを開きます
2. Cline設定に移動します（Cmd/Ctrl + Shift + P → "Cline: Open MCP Settings"）
3. サーバー設定を追加します：

{
  "mcpServers": {
    "playwright-wizard": {
      "command": "npx",
      "args": ["-y", "playwright-wizard-mcp"]
    }
  }
}

4. VS Codeを再起動します
5. Clineの利用可能なツールリストでPlaywright Wizardツールを探します。

💻 使用例

利用可能なツール

Playwright Wizardは、コアワークフロー、オプションの拡張機能、およびリファレンスドキュメントの3つのカテゴリに分類された15のツールを公開しています。

コアワークフロー（順番に完了）

これらの5つのツールは、完全な本番環境対応のテストスイートを作成するためのガイドとなります：

オプションの拡張機能

コアワークフローを完了した後、これらの機能を追加します：

リファレンスドキュメント

追加のコンテキストとパターンにいつでもアクセスできます：

ツールの使用方法

AIアシスタントに以下のように依頼するだけです：

"Use the analyze-app tool to help me understand my application"
"Run the generate-test-plan tool to create test scenarios"
"Use setup-infrastructure to configure Playwright"

AIは適切なツールを呼び出し、詳細な指示を受け取り、自動的に実行します。あなたは結果（作成されたファイル、完了した分析など）を見ることができますが、内部の指示は見ることはありません。

最初のテストスイートの作成

初回セットアップ（5分）

1. MCPサーバーをインストールして設定します（上記の設定を参照）
2. AIクライアントを再起動します（Claude DesktopまたはVS Code）
3. インストールを検証します：新しいチャットを開き、🔨ツールアイコンを探します。

最初のテストスイートの作成（30 - 60分）

典型的なワークフローは次のようになります：

ステップ1：アプリケーションの分析

あなた: "Help me analyze my React app for Playwright testing"

AI: *Calls analyze-app tool*
    - Detects React, TypeScript, Vite from package.json
    - Browses key pages (/, /login, /dashboard)
    - Evaluates DOM quality and accessibility
    - Creates .playwright-wizard-mcp/ folder with analysis files

AI: "✅ Analysis complete! Your app uses React + TypeScript with Vite.
     I found 5 key pages. HTML quality is good (score: 8/10).
     Created project-config.md, pages.md, and selector-strategy.md."

ステップ2：テストプランの生成

あなた: "Create a test plan based on the analysis"

AI: *Calls generate-test-plan tool*
    - Creates comprehensive test scenarios
    - Defines user flows and edge cases
    - Specifies acceptance criteria
    - Adds test data requirements

AI: "✅ Test plan created! I've defined 4 test suites:
     - Authentication (5 scenarios)
     - Dashboard (7 scenarios)
     - User Profile (4 scenarios)
     - Settings (3 scenarios)
     See test-plan.md for details."

ステップ3：インフラストラクチャのセットアップ

あなた: "Set up the Playwright infrastructure"

AI: *Calls setup-infrastructure tool*
    - Creates playwright.config.ts with optimal settings
    - Sets up fixtures for parallel execution
    - Creates folder structure (tests/, pages/, fixtures/)
    - Adds test helpers and utilities

AI: "✅ Infrastructure ready!
     - Created playwright.config.ts (3 browsers, parallel mode)
     - Set up custom fixtures for test isolation
     - Organized folder structure
     Ready for page objects!"

ステップ4：ページオブジェクトの生成

あなた: "Generate page object models"

AI: *Calls generate-page-objects tool*
    - Creates type-safe page objects
    - Uses optimal selectors (getByRole, getByLabel)
    - Adds TypeScript types
    - Implements reusable methods

AI: "✅ Page objects created!
     - tests/pages/LoginPage.ts
     - tests/pages/DashboardPage.ts
     - tests/pages/ProfilePage.ts
     All use accessible selectors and TypeScript."

ステップ5：テストの実装

あなた: "Implement the test suite"

AI: *Calls implement-test-suite tool*
    - Writes complete test files
    - Adds proper assertions and error handling
    - Verifies parallel execution
    - Optimizes performance

AI: "✅ Test suite complete!
     - Created 19 tests across 4 suites
     - All tests pass ✓
     - Average execution: 12s (parallel)
     - 100% of tests use page objects
     Run: npx playwright test"

作成されるもの

ウィザードは、プロジェクトに完全なテストインフラストラクチャを作成します：

your-app/
├── .playwright-wizard-mcp/     # ワークフロードキュメント
│   ├── project-config.md       # テクノロジースタック分析
│   ├── pages.md                # ページインベントリ
│   ├── selector-strategy.md    # セレクターアプローチ
│   └── test-plan.md            # テストシナリオ
├── tests/
│   ├── pages/                  # ページオブジェクトモデル
│   │   ├── LoginPage.ts
│   │   ├── DashboardPage.ts
│   │   └── ProfilePage.ts
│   ├── fixtures/               # カスタムフィクスチャ
│   │   └── authFixture.ts
│   ├── helpers/                # テストユーティリティ
│   │   └── testHelpers.ts
│   ├── auth.spec.ts           # テストファイル
│   ├── dashboard.spec.ts
│   └── profile.spec.ts
└── playwright.config.ts        # Playwright設定

次のステップ

コアワークフローを完了した後、以下のことを検討してください：

• CI/CDの追加："Set up GitHub Actions for automated testing"
• アクセシビリティテストの追加："Add axe-core accessibility testing"
• APIテストの追加："Help me test my REST API alongside UI tests"
• パフォーマンスの最適化："Show me advanced optimization patterns"

📚 ドキュメント

仕組み

CopilotにPlaywrightテストの支援を依頼すると：

1. あなた："Help me analyze my app for testing"
2. Copilot：analyze-app ツールを呼び出します
3. ツール：詳細な指示をCopilotに返します
4. Copilot：指示を実行します（スタックを検出、ページを閲覧、ファイルを作成など）
5. あなたは："✅ Analysis complete! Created project-config.md, pages.md..." を見ます

あなたは結果を見るだけで、プロンプトは見ません。 ツールはCopilotに専門レベルの指示を提供し、それを自動的に実行します。

サンプルワークフロー

# アプリケーションプロジェクトで、Copilotに以下のように依頼します：
"Help me set up Playwright testing for this app"

# Copilotは以下のことを行います：
# 1. Call analyze-app → detect stack, browse pages
# 2. Call generate-test-plan → create test scenarios
# 3. Call setup-infrastructure → create config and fixtures
# 4. Call generate-page-objects → create page models
# 5. Call implement-test-suite → write actual tests

すべてのワークフロードキュメントファイルは、プロジェクトルートの .playwright-wizard-mcp/ フォルダに作成されます：

• project-config.md - 検出されたテクノロジースタック
• pages.md - DOM品質スコア付きのページ分析
• selector-strategy.md - ページごとのセレクターアプローチ
• test-plan.md - 進行状況トラッキング付きのテストスイート

注意: .playwright-wizard-mcp/ フォルダはワークフロートラッキングのみを目的としています。.gitignore に追加することを検討してください。

ツール

• get-architecture - プロンプトアーキテクチャのドキュメントを取得します

🔧 技術詳細

要件

• Node.js >= 18
• MCP互換クライアント（GitHub Copilot、Claude Desktop、Clineなど）

開発

# リポジトリをクローンします
git clone https://github.com/oguzc/playwright-wizard-mcp.git
cd playwright-wizard-mcp

# 依存関係をインストールします
npm install

# ビルドします
npm run build

# 開発モードで実行します
npm run dev

コントリビューション

コントリビューションを歓迎します！ 問題を報告するか、プルリクエストを送信してください。

📄 ライセンス

MITライセンスの下で公開されています。