Playwrightmcp Demo

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

このフレームワークは、Playwright と TypeScript を用いて構築された強力でデータ駆動型のテスト自動化フレームワークです。@executeautomation/playwright - mcp - server を組み合わせることで、テストの録画と再生機能を強化しています。また、ページオブジェクトモデル（Page Object Model）の設計パターンを採用し、拡張性と保守性に優れた自動化テストを実現しています。

L(7,14)M(0,7)L(14,7)'/%3E%3C/g%3E%3C/svg%3E)

✨ 主な機能

• 強力かつ柔軟：Playwright の多ブラウザサポートと強力な自動化機能を活用します。
• データ駆動：テストデータを通じて効率的なテストケースの実行が可能です。
• 保守容易：ページオブジェクトモデル（Page Object Model）の設計パターンを採用することで、コードの再利用性と保守性を向上させます。
• 拡張性高い：新しいテストシナリオや機能を簡単に追加できます。

📚 機能詳細

ページオブジェクト

• 基礎的なメソッドとツールを含む BasePage
• ログインページの操作を担当する LoginPage
• 登録ページのインタラクションを管理する RegistrationPage

データ管理

• テストシナリオを TestData.ts ファイルに格納します。
• TestDataHelper クラスがデータのアクセスと管理方法を提供します。

インターフェース定義

TypeScript のインターフェースを使用してテストデータ構造を定義し、コードの一貫性と規範性を確保します。

🔧 フレームワーク構造

playwright-test-frame/
├── playwright.config.ts
├── tests/
│   ├── specs/
│   │   └── registration.spec.ts
│   └── data/
│       └── testData.ts
└── package.json

🔍 特性

ページオブジェクト

• BasePage：共通のメソッドとツールを含みます。
• LoginPage：ログイン機能を処理します。
• RegistrationPage：登録フォームのインタラクションを管理します。

データ管理

• TestData.ts：テストシナリオを格納します。
• TestDataHelper：データのアクセスと管理方法を提供します。
• インターフェース定義：TypeScript のインターフェースを使用してデータ構造を定義し、コードの一貫性を確保します。

💻 テストデータ構造

interface LoginData {
  email: string;
  password?: string;
}

interface RegistrationData {
  firstName: string;
  lastName: string;
  address: string;
  email: string;
  phone: string;
  gender: 'Male' | 'Female';
  country: string;
}

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

📦 インストール

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

   npm install playwright @executeautomation/playwright-mcp-server typescript --save-dev
   

2. Playwright の設定ファイル（playwright.config.ts）を作成します。

3. テストを起動します。

   npx playwright test
   

💻 使用例

すべてのテストを実行する

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: 'your.email@test.com'
  },
  registration: {
    firstName: 'First',
    lastName: 'Last',
    address: 'Address',
    email: 'email@test.com',
    phone: '1234567890',
    gender: 'Male' | 'Female',
    country: 'Country Name'
  }
}

2. 新しく追加したテストシナリオは自動的に実行されます。

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

ページオブジェクト

• BasePage：共通のメソッドとツールを含みます。
• LoginPage：ログイン機能を処理します。
• RegistrationPage：登録フォームのインタラクションを管理します。

データ管理

• TestData.ts：テストシナリオのデータを格納します。
• TestDataHelper：データのアクセスと管理方法を提供します。
• インターフェース定義：TypeScript のインターフェースを使用してデータ構造を定義し、コードの一貫性を確保します。

💡 使用アドバイス

1. ページオブジェクトは特定の機能に集中するようにしましょう。
2. テストデータはテストロジックとは独立して保存しましょう。
3. 意味のあるシナリオ名を使用しましょう。
4. TypeScript の命名規則に従いましょう。
5. 各テストケースは独立して原子的なものにしましょう。

🤝 貢献ガイド

1. 新しい機能のために新しいブランチを作成します。
2. テストとページオブジェクトを更新または追加します。
3. コードをコミットし、プルリクエストを送信します。

📄 依存関係

• Playwright：テストフレームワークです。
• Execute Automation MCP Server：追加の拡張機能を提供します（オプション）。
• TypeScript：インターフェースと型を定義するために使用し、コードの規範性を確保します。

以上の設定と実践により、効率的で柔軟かつ保守しやすいテスト自動化フレームワークを簡単に構築できます。