Cypress MCP Test Generator

Cypress MCP テストジェネレーター

このプロジェクトは、自然言語のプロンプトから Cypress テストを生成する Model Context Protocol（MCP）サーバーを提供します。テストシナリオを平易な英語で記述するだけで、サーバーが完全に動作する Cypress テストを生成します。

目次

• セットアップ
• インストール
• 使い方
• プロンプトの例
• 設定
• トラブルシューティング

セットアップ

前提条件

• Node.js（v16 以上）
• npm（Node.js に付属）
• VS Code
• TypeScript

インストール

1. リポジトリをクローンします。

git clone <repository-url>
cd your-project-directory

2. 依存関係をインストールします。

npm install

3. プロジェクトをビルドします。

npm run build

4. VS Code の MCP 設定を作成します。

mkdir -p .vscode

5. 次の内容で .vscode/mcp.json を作成します（パスはお使いのシステムに合わせて更新してください）。

{
  "servers": {
    "cypress-mcp": {
      "type": "stdio",
      "command": "node",
      "args": ["path/to/your/project/build/index.js"]
    }
  }
}

使い方

1. VS Code でプロジェクトを開きます
2. MCP サーバーが自動的に起動します
3. VS Code のコマンドパレットを開き、テストの説明を入力します
4. サーバーが説明に基づいて Cypress テストを生成します

仕組み

1. 自然言語のプロンプトが MCP サーバーによって処理されます
2. サーバーが適切な Cypress コマンドとアサーションを生成します
3. cypress/e2e ディレクトリに新しいテストファイルが作成されます
4. Cypress で実行できる状態になります

プロンプトの例

使用できるプロンプトの例を以下に示します。

1. 基本的なナビゲーションと検索：

"Go to google.com and search for 'cypress testing'"

生成されるテストでは、次の処理を行います。

• Google に移動する
• Cookie の同意画面が表示されている場合は対処する
• 検索語を入力する
• 検索結果を検証する

2. ログインフロー：

"Visit login page, enter username '[email protected]', type password 'password123', click login button, and verify dashboard appears"

生成されるテストでは、次の処理を行います。

• ログインページに移動する
• 認証情報を入力する
• フォームを送信する
• ログインが成功したことを検証する

3. フォーム送信：

"Navigate to contact-form.com, fill in name 'John Doe', enter email '[email protected]', type message 'Hello World', click submit button, and verify success message appears"

設定

プロジェクト構成

project-root/
├── src/
│   ├── index.ts          # MCP server implementation
│   └── cypress/
│       └── commands.ts   # Custom Cypress commands
├── cypress/
│   ├── e2e/             # Generated test files
│   └── support/         # Support files
└── .vscode/
    └── mcp.json         # MCP server configuration

サーバーのカスタマイズ

以下を変更して、テスト生成をカスタマイズできます。

• src/index.ts のテストテンプレート
• src/cypress/commands.ts のカスタムコマンド
• エラー処理と再試行の仕組み

トラブルシューティング

よくある問題

1. サーバーが起動しない

   • mcp.json のパスが正しいことを確認します
   • build/index.js が存在することを確認します
   • Node.js のバージョンに互換性があることを確認します

2. テストの生成に失敗する

   • プロンプトの形式を確認します
   • サーバーログにエラーがないか確認します
   • すべての依存関係がインストールされていることを確認します

3. VS Code との連携に関する問題

   • VS Code のウィンドウを再読み込みします
   • VS Code の出力パネルでエラーを確認します
   • .vscode/mcp.json の設定を確認します

エラーメッセージ

1. 「応答する前にサーバーが終了しました」

   • mcp.json のファイルパスを確認します
   • プロジェクトを再ビルドします
   • VS Code を再起動します

2. 「モジュールが見つかりません」

   • npm install を実行します
   • build フォルダーが存在することを確認します
   • プロジェクトを再ビルドします

ログの場所

• サーバーログ：VS Code の出力パネル（Cypress MCP Server）
• 生成されたテストファイル：cypress/e2e ディレクトリ
• ビルド出力：build ディレクトリ

スクリプトコマンド

{
  "scripts": {
    "build": "tsc",
    "start": "node build/index.js",
    "dev": "tsc --watch",
    "cypress:open": "cypress open",
    "cypress:run": "cypress run"
  }
}

プロンプトのベストプラクティス

1. 具体的に記述する

   • 該当する場合は URL を含めます
   • 入力する正確なテキストを指定します
   • 期待する検証内容を記載します

2. 明確なアクションを使う

   • ナビゲーションには「visit」または「go to」
   • 入力には「type」または「enter」
   • ボタン操作には「click」
   • アサーションには「verify」または「check」

3. 検証手順を含める

   • 操作後に何が表示されるべきかを記載します
   • 期待するテキストや要素を含めます
   • 必要に応じてタイムアウトを指定します

サポート

問題や質問がある場合：

1. トラブルシューティングガイドを確認します
2. サーバーログを確認します
3. VS Code の出力パネルを確認します
4. ファイルパスと設定を確認します

注意事項

• サーバーは Cookie の同意ダイアログなど、一般的なシナリオを自動的に処理します
• 生成されるテストには、信頼性を高めるための再試行の仕組みが含まれます
• 複雑な操作にはカスタムコマンドを利用できます
• テストは TypeScript に対応した形で生成されます

コントリビューション

1. リポジトリをフォークします
2. 機能ブランチを作成します
3. 変更を加えます
4. プルリクエストを送信します

ライセンス

このプロジェクトは MIT License のもとでライセンスされています。詳細については LICENSE ファイルを参照してください