Cypress Po And Tests Generator

MCP Cypress Page Object Generator

この MCP サーバーは、指定された任意のウェブページ用に Cypress Page Object クラスを自動生成します。

NPM パッケージ：

特長

• ウェブスクレイピング：Puppeteer を使用してウェブページを取得し、レンダリングします
• HTML 解析：Cheerio を使用して HTML を解析し、要素情報を抽出します
• Page Object の生成：以下を備えた完全な TypeScript Page Object クラスを作成します：
  • プライベートな要素ロケーター
  • パブリックなゲッターメソッド
  • 操作メソッド（クリック、入力、選択など）

プロンプトの例：

Create a page object file using the following url: https://www.saucedemo.com/ 

生成される出力

サーバーは以下を生成します：

1. Page Object クラス（{ClassName}.ts）

export class ExampleComLoginPage {
  // Private elements
  #elements = {
    button_login: () => cy.get('#login-button'),
    input_username: () => cy.get('input[name="username"]'),
    link_home: () => cy.contains('a', 'Home')
  }

  // Public getters
  get ButtonLogin() { return this.#elements.button_login() }
  get InputUsername() { return this.#elements.input_username() }
  get LinkHome() { return this.#elements.link_home() }

  // Interaction methods
  clickButtonLogin() { return this.#elements.button_login().click() }
  typeInputUsername(text: string) { return this.#elements.input_username().type(text) }
  clickLinkHome() { return this.#elements.link_home().click() }

}

対応する要素の種類

• ボタン：検証付きのクリック操作
• 入力フィールド：入力、クリア、チェック／チェック解除（チェックボックス／ラジオボタンの場合）
• リンク：ナビゲーション検証付きのクリック操作
• セレクトドロップダウン：検証付きのオプション選択
• テキストエリア：内容検証付きの入力とクリア
• フォーム：成功／エラー処理付きの送信操作

インストール

お好みのクライアントに MCP をインストールする際は、標準的な手順に従ってください

使い方

1. サーバーを起動します：

   node index.js
   

2. MCP クライアントで使用します： サーバーは URL パラメーターを受け取る generatePageObjectFile ツールを公開します。

   ツール呼び出しの例：

   {
     "method": "tools/call",
     "params": {
       "name": "generatePageObjectFile",
       "arguments": {
         "url": "https://example.com/login"
       }
     }
   }
   

3. レスポンス形式： サーバーは Page Object クラスとともに、以下を返します：

   // ===== PAGE OBJECT CLASS =====
   // Save this as: ExampleComLoginPage.ts
   export class ExampleComLoginPage { ... } 
   
   

依存関係

• @modelcontextprotocol/sdk：MCP サーバーの実装
• puppeteer：ウェブスクレイピングとページのレンダリング
• cheerio：HTML の解析と要素の選択
• zod：スキーマ検証
• typescript：型安全性

エラー処理

サーバーには、以下に対する包括的なエラー処理が含まれています：

• 無効な URL
• ネットワーク接続の問題
• ページの読み込み失敗
• HTML の解析エラー

ブラウザーの設定

サーバーは、以下の設定で Puppeteer を使用します：

• サーバー環境向けのヘッドレスモード
• コンテナー環境におけるデプロイ向けのサンドボックス無効モード
• 動的コンテンツ向けのネットワークアイドル待機

貢献

新しい要素の種類、操作メソッド、またはテストパターンへの対応を追加するには、index.js の generatePageObjectClass 関数を変更してください。

トラブルシューティング：最新の MCP バージョンへの更新

この MCP サーバーパッケージを最新バージョンに更新しようとしているのに、npm が新しいバージョンを取得しない場合は、次をお試しください：

1. NPM キャッシュをクリアして、パッケージを再インストールします：

   npm cache clean --force
   npm install @jprealini/cypress-mcp@latest --save-dev
   

2. ロックファイル（package-lock.json または yarn.lock）を使用している場合は、削除してから次を実行します：

   npm install
   

3. グローバルインストールの場合は、グローバルに更新します：

   npm install -g @jprealini/cypress-mcp@latest
   

4. インストールされたバージョンを確認します：

   npm list @jprealini/cypress-mcp
   

これらの手順により、利用者は常に公開済みの最新 MCP バージョンを取得でき、古いバージョンがキャッシュまたはロックされていることによる問題を回避できます。

例：生成される Page Object の形式（saucedemo.com）

以下は、saucedemo.com 向けに MCP が生成する Page Object の形式の例です：

export class Swag_labsPage {
  // Private elements
  #elements = {
    inputUsername: () => cy.get('[data-test="username"]'),
    inputPassword: () => cy.get('[data-test="password"]'),
    inputLoginButton: () => cy.get('[data-test="login-button"]')
  }

  // Element meta (currently not used for bulk actions)

  // Public getters
  get inputUsername() { return this.#elements.inputUsername() }
  get inputPassword() { return this.#elements.inputPassword() }
  get inputLoginButton() { return this.#elements.inputLoginButton() }

  // Value/State getters
  getValueInputUsername() { return this.#elements.inputUsername().invoke('val') }
  getValueInputPassword() { return this.#elements.inputPassword().invoke('val') }
  getTextInputLoginButton() { return this.#elements.inputLoginButton().invoke('text') }

  // Interaction methods (per-element actions)
  typeInputUsername(text) { return this.#elements.inputUsername().type(text) }
  clearInputUsername() { return this.#elements.inputUsername().clear() }
  typeInputPassword(text) { return this.#elements.inputPassword().type(text) }
  clearInputPassword() { return this.#elements.inputPassword().clear() }
  clickInputLoginButton() { return this.#elements.inputLoginButton().click() }
}

この形式は、よく使われる Page Object 標準の一つに従っており、セレクターにデータ属性を使用し、要素をプライベートにカプセル化し、パブリックゲッター、値／状態ゲッター、および各要素の操作メソッドを備えています。

別のパターンが必要な場合や、別のパターンを想定している場合は、この MCP で基本構造を生成してから、次のようなプロンプトを使って独自の指示に従い、ニーズに合わせて編集できます：

Create a page object file using the following url: https://www.saucedemo.com/ and after creating it, edit it to meet the requirements described in my instructions.md file