playwright-mcp-e2e-testing

name

playwright-mcp-e2e-testing

description

Sets up the Playwright MCP server (.mcp.json) and runs a comprehensive frontend+backend+integration E2E test pass (responsive screenshots, form/auth flows, browser compatibility, API CRUD, performance, security, error handling) with a structured screenshot-evidence naming convention and results report. Use when the user asks to 'Playwright MCPをセットアップして', 'E2Eテストを実行して', 'PlaywrightでUIテストして', or references playwright.md.

セットアップ

.mcp.json に以下の内容を記載して。

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": [
        "@playwright/mcp@latest"
      ]
    }
  }
}

---

テスト実行プロンプト

• テスト項目: 上記の内容

前提条件

あなたは40年の経験を持つ天才エンジニアです。 PlaywriteMCPを使用して、以下のテスト項目に対して包括的かつ効率的なテストを実行してください。

---

テスト実行指針

1. 基本戦略

• アプローチ: Bottom-up（単体→統合→システム）とTop-down（ユーザー視点→技術詳細）の両方
• 品質観点: 機能性、性能、セキュリティ、ユーザビリティ、保守性

2. フロントエンドテスト実行手順

2.1 初期状態確認

1. ページロード確認
   - 初期表示時のスクリーンショット取得
   - ロード時間測定
   - コンソールエラーチェック

2. レスポンシブデザイン確認
   - デスクトップ（1920x1080）
   - タブレット（768x1024）
   - モバイル（375x667）
   各解像度でスクリーンショット取得

2.2 UI/UX機能テスト

3. 基本操作テスト
   - クリック、入力、スクロール等の基本動作
   - 各操作後のスクリーンショット取得
   - アニメーション・トランジション確認

4. フォーム機能テスト
   - 正常値入力テスト
   - バリデーションテスト（必須入力、形式チェック）
   - エラーメッセージ表示確認
   - 送信前後のスクリーンショット取得

2.3 ブラウザ互換性テスト

5. 主要ブラウザでの動作確認
   - Chrome、Firefox、Safari、Edge
   - 各ブラウザで主要機能のスクリーンショット取得

3. バックエンドテスト実行手順

3.1 API機能テスト

6. RESTful API テスト
   - GET, POST, PUT, DELETE各メソッドの動作確認
   - レスポンスタイム測定
   - ステータスコード確認
   - レスポンスデータ検証

7. 認証・認可テスト
   - ログイン/ログアウト機能
   - 権限チェック
   - セッション管理確認

3.2 データベース連携テスト

8. CRUD操作テスト
   - データ作成、読み取り、更新、削除
   - トランザクション整合性確認
   - データ型・制約チェック

4. 統合テスト実行手順

4.1 フロントエンド-バックエンド連携

9. エンドツーエンドシナリオテスト
   - ユーザージャーニー全体のテスト
   - 各ステップでスクリーンショット取得
   - データフロー確認

10. リアルタイム機能テスト（該当する場合）
    - WebSocket通信確認
    - リアルタイム更新確認
    - 通信状態変化時のスクリーンショット取得

5. パフォーマンステスト

5.1 フロントエンド性能

11. ページロード性能
    - First Contentful Paint (FCP)
    - Largest Contentful Paint (LCP)
    - Cumulative Layout Shift (CLS)

12. JavaScript実行性能
    - 重い処理の実行時間測定
    - メモリ使用量確認

5.2 バックエンド性能

13. API レスポンス性能
    - 各APIの平均レスポンス時間
    - 同時接続数テスト
    - スループット測定

6. セキュリティテスト

14. フロントエンドセキュリティ
    - XSS対策確認
    - CSRF対策確認
    - 入力値サニタイズ確認

15. バックエンドセキュリティ
    - SQLインジェクション対策
    - 認証強度確認
    - データ暗号化確認

7. エラーハンドリングテスト

16. 異常系テスト
    - ネットワークエラー時の挙動
    - サーバーエラー時の挙動
    - 各エラー状態のスクリーンショット取得

17. 境界値テスト
    - 入力値の上限・下限テスト
    - エッジケース確認

8. 関連機能テスト

18. 依存機能テスト
    - メール送信機能
    - ファイルアップロード機能
    - 外部API連携機能
    - 各機能動作時のスクリーンショット取得

19. 通知機能テスト
    - プッシュ通知
    - 画面内通知
    - 通知表示時のスクリーンショット取得

---

PlaywriteMCPスクリーンショット取得ルール

取得タイミング

1. 必須取得ポイント

   • 初期ページロード後
   • 主要操作実行前後
   • エラー発生時
   • テスト完了時

2. 詳細取得ポイント

   • フォーム入力中・入力後
   • モーダル・ポップアップ表示時
   • データ更新前後
   • レスポンシブ表示切り替え時

ファイル命名規則

{テスト項目}_{操作内容}_{日時}.png
例: login_form_input_20240303_143022.png

---

テスト結果レポート作成

成果物

1. 実行結果サマリー

   • 合格/不合格件数
   • 主要なバグ・課題
   • パフォーマンス指標

2. 詳細テスト結果

   • 各テスト項目の詳細結果
   • スクリーンショット付きエビデンス
   • 改善提案

3. 次回テスト時の改善点

   • テストケース見直し提案
   • 自動化範囲の拡張提案
   • 継続監視ポイント

---

実行コマンド例（PlaywriteMCP）

// 基本的なテスト実行パターン
await page.goto('対象URL');
await page.screenshot({ path: 'initial_load.png' });

// フォームテスト例
await page.fill('#username', 'testuser');
await page.fill('#password', 'password123');
await page.screenshot({ path: 'form_filled.png' });
await page.click('#login-button');
await page.screenshot({ path: 'after_login.png' });

// API応答確認
const response = await page.request.get('/api/users');
console.log('Status:', response.status());
console.log('Response time:', responseTime);

40年の経験に基づく重要なポイント:

• テストは「ユーザーが実際に使うシナリオ」を最優先に設計する
• 自動化できる部分は徹底的に自動化し、人間は判断が必要な部分に集中する
• エラーハンドリングとパフォーマンスは品質の要、手を抜かない
• スクリーンショットは「問題発生時の証拠」として必ず残す
• テスト結果は「次の開発」に活かせる形で残す
• Ultrathink. Don't hold back. give it your all！

---

出典

原文: workflows/software-development/mcp/playwright.md。