Cypress MCP

🚀 MCP Cypress Page Object & Test Generator

このMCP（Model Context Protocol）サーバーは、任意のWebページに対して完全なCypress Page Objectクラスと包括的なテストスイートを自動生成します。

✨ 主な機能

• Webスクレイピング：Puppeteerを使用してWebページを取得し、レンダリングします。
• HTML解析：Cheerioを使用してHTMLを解析し、要素情報を抽出します。
• Page Object生成：以下の機能を持つ完全なTypeScript Page Objectクラスを作成します。
  • プライベート要素ロケーター
  • パブリックゲッターメソッド
  • インタラクションメソッド（クリック、入力、選択など）
  • 一般的なテストシナリオのワークフローメソッド
• テストスイート生成：以下の機能を持つ包括的なCypressテストファイルを作成します。
  • すべての要素の肯定的なテストケース
  • エラーハンドリングの否定的なテストケース
  • 一般的なシナリオのワークフローテスト
  • アクセシビリティ、パフォーマンス、エッジケースのテスト

📦 生成される出力

サーバーは2つのファイルを生成します。

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() }

  // Workflow methods
  login(username: string, password: string) {
    this.typeInputUsername(username)
    this.typeInputPassword(password)
    this.clickButtonLogin()
    return this
  }
}

2. テストスイート ({ClassName}.cy.ts)

import { ExampleComLoginPage } from './ExampleComLoginPage'

describe('ExampleComLoginPage Tests', () => {
  let page: ExampleComLoginPage
  
  beforeEach(() => {
    cy.visit('https://example.com/login')
    page = new ExampleComLoginPage()
  })
  
  describe('Element Interactions', () => {
    it('should click button_login', () => {
      page.clickButtonLogin()
    })
    
    it('should type in input_username', () => {
      page.typeInputUsername('test input')
      page.getInputUsername().should('have.value', 'test input')
    })
  })
  
  describe('Login Workflow', () => {
    it('should login with valid credentials', () => {
      page.login('validuser@example.com', 'validpassword')
      cy.url().should('not.include', '/login')
    })
    
    it('should show error with invalid credentials', () => {
      page.login('invalid@example.com', 'wrongpassword')
      cy.contains('Invalid credentials').should('be.visible')
    })
  })
  
  describe('Error Handling', () => {
    it('should handle network errors gracefully', () => {
      cy.intercept('GET', '**', { forceNetworkError: true })
      cy.visit('https://example.com/login')
    })
  })
})

📋 生成されるテストカテゴリ

✅ 肯定的なテストケース

• 要素インタラクション：検出されたすべての要素のクリック、入力、クリア、チェック/チェック解除
• ワークフローテスト：ログイン、検索、ナビゲーションのワークフロー
• フォーム検証：成功したフォーム送信
• 要素の可視性：すべての要素が可視でアクセス可能

❌ 否定的なテストケース

• エラーハンドリング：ネットワークエラー、サーバーエラー、低速接続
• 検証エラー：空のフィールド、無効な形式、必須フィールドの検証
• エッジケース：大きな入力、特殊文字、Unicodeテキスト
• アクセシビリティ：ARIAラベル、キーボードナビゲーション

🔧 追加のテストタイプ

• パフォーマンステスト：ロード時間、高速インタラクション
• レスポンシブテスト：さまざまなビューポートサイズ
• アクセシビリティテスト：ARIA準拠、キーボードナビゲーション
• セキュリティテスト：入力サニタイズ、XSS防止

🛠️ サポートされる要素タイプ

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

🔍 ワークフロー検出

サーバーは一般的なパターンを自動的に検出し、適切なテストを生成します。

• ログインフォーム：ユーザー名/パスワードの検証、エラーハンドリング
• 検索フォーム：クエリの検証、結果の検証
• ナビゲーション：ホームリンク、パンくずリスト、メニュー項目
• フォーム送信：成功状態、検証エラー

📦 インストール

npm install

💻 使用例

基本的な使用法

1. サーバーを起動する：

   npx tsx main.ts
   

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

   ツール呼び出しの例：

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

3. レスポンス形式： サーバーはPage Objectクラスとテストスイートの両方を返します。

   // ===== PAGE OBJECT CLASS =====
   // Save this as: ExampleComLoginPage.ts
   export class ExampleComLoginPage { ... }
   
   // ===== CYPRESS TESTS =====
   // Save this as: ExampleComLoginPage.cy.ts
   describe('ExampleComLoginPage Tests', () => { ... }
   

高度な使用法

// Use the generated Page Object
import { ExampleComLoginPage } from './ExampleComLoginPage'

describe('Login Page', () => {
  const page = new ExampleComLoginPage()
  
  it('should login successfully', () => {
    page.login('username', 'password')
    page.verifyPageLoaded()
  })
})

// Run the generated test suite
// npx cypress run --spec "cypress/e2e/ExampleComLoginPage.cy.ts"

📚 依存関係

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

🔧 エラーハンドリング

サーバーには、以下のエラーに対する包括的なエラーハンドリングが含まれています。

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

🌐 ブラウザ設定

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

• サーバー環境用のヘッドレスモード
• コンテナ化されたデプロイ用のノーサンドボックスモード
• 動的コンテンツ用のネットワークアイドル待機

🤝 貢献方法

新しい要素タイプ、インタラクションメソッド、またはテストパターンのサポートを追加するには、main.tsのgeneratePageObjectClassおよびgenerateCypressTests関数を変更してください。