🎭 Playwright Test Automation Framework

🎭 Playwright テスト自動化フレームワーク

🚀 Playwright と TypeScript で構築された、強力なデータ駆動型テスト自動化フレームワークです。@executeautomation/playwright-mcp-server を活用し、テストの記録と再生機能を強化しています。拡張性と保守性に優れた自動テストを実現するため、ページオブジェクトモデルの設計パターンを採用しています。

✨ ハイライト

• 🏗️ ページオブジェクトモデル - 明快で保守しやすいテストアーキテクチャ
• 📊 データ駆動型テスト - 外部テストデータを使ってテストを簡単に拡張
• 🔧 TypeScript サポート - 堅牢な型チェックと優れた IDE 連携
• ♻️ 再利用可能なコンポーネント - コードを最大限再利用できるモジュール設計
• 🎯 簡単な保守 - ロケーターとデータを一元管理
• 📈 拡張性の高い設計 - 新しいテストシナリオを簡単に追加
• 🎥 MCP サーバー連携 - 強化されたテスト記録・再生機能

🌟 主な機能

• 構造化され、整理されたテストアーキテクチャ
• テストデータとテストロジックの分離
• 一般的な操作に使える強力なヘルパーメソッド
• 分かりやすいページオブジェクトパターンの実装
• 包括的なテストデータ管理
• すぐに使える登録フローのサンプル
• MCP サーバーを使ったテストの記録と再生
• テストスクリプトの自動生成

フレームワークの構成

tests/
├── data/                    # Test Data Layer
│   ├── interfaces/         
│   │   └── TestData.ts     # Data type definitions
│   ├── TestDataHelper.ts   # Helper class for data management
│   └── testData.ts         # Test scenarios data
├── pages/                   # Page Objects
│   ├── BasePage.ts         # Base page with common functionality
│   ├── LoginPage.ts        # Login page object
│   └── RegistrationPage.ts # Registration page object
└── specs/                   # Test Specifications
    └── registration.spec.ts # Test cases

機能

• ページオブジェクトモデル：テストロジックとページ操作を分離します
• データ駆動型テスト：テストデータをテストロジックから分離します
• TypeScript：強い型付けと優れた IDE サポートを提供します
• 再利用可能なコンポーネント：共通機能を基底クラスにまとめます
• 簡単な保守：ロケーターとデータを一元管理します
• 拡張性：新しいテストシナリオやページオブジェクトを簡単に追加できます

テストデータの構成

このフレームワークでは、構造化された方法でテストデータを管理します。

interface TestScenario {
    name: string;
    login: LoginData;
    registration: RegistrationData;
}

現在のテストシナリオ：

1. 有効な登録フロー（男性ユーザー）
2. 女性ユーザーの登録

セットアップ

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

git clone <repository-url>
cd playwrightMCP_Demo

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

npm install

3. Playwright ブラウザーをインストールします。

npx playwright install

テストの実行

すべてのテストを実行します。

npx playwright test

特定のテストファイルを実行します。

npx playwright test tests/specs/registration.spec.ts

ヘッド付きモードでテストを実行します。

npx playwright test --headed

新しいテストシナリオの追加

1. tests/data/testData.ts に新しいテストデータを追加します。

{
    name: 'Your Scenario Name',
    login: {
        email: '[email protected]'
    },
    registration: {
        firstName: 'First',
        lastName: 'Last',
        address: 'Address',
        email: '[email protected]',
        phone: '1234567890',
        gender: 'Male' | 'Female',
        country: 'Country Name'
    }
}

2. 新しいシナリオを追加すると、テストは自動的に実行されます。

フレームワークのコンポーネント

ページオブジェクト

• BasePage：共通のメソッドとユーティリティを含みます
• LoginPage：ログイン機能を処理します
• RegistrationPage：登録フォームの操作を管理します

データ管理

• TestData.ts：テストシナリオを含みます
• TestDataHelper：テストデータへのアクセスと管理のためのメソッドを提供します
• インターフェース：テストデータの構造を定義します

ベストプラクティス

1. ページオブジェクトは、そのページ固有の機能に集中させます
2. テストデータはテストロジックと分けて管理します
3. 意味の分かるシナリオ名を使用します
4. TypeScript の命名規則に従います
5. テストは互いに独立させ、アトミックに保ちます

コントリビューション

1. 機能開発用の新しいブランチを作成します
2. テストとページオブジェクトを追加・更新します
3. 必要に応じてテストデータを更新します
4. プルリクエストを送信します

依存関係

• Playwright
• TypeScript
• Node.js
• @executeautomation/playwright-mcp-server - テストの記録と再生を強化するため
• @playwright/test - コアテストフレームワーク

サポート

ご質問や問題がある場合は、リポジトリで新しい Issue を作成してください。