E2Eテストスキル は何をしますか？
トリガー
- キーワード:
teste,e2e,playwright,browser test,visual test,smoke test - 呼び出し方:
/e2e-test [suite] [--flags]
説明
プレビュー環境と本番環境向けに、人間らしい動作を模倣した自動E2Eテストを実行します。 ブラウザ自動化にはChrome MCPまたはPlaywright MCPを使用します。
テストスイート
| スイート | 所要時間 | 説明 |
|---|---|---|
smoke | 30秒 | ログイン、アップロード、基本UI（teste実行時のデフォルト） |
full | 5分 | すべてのP0+P1シナリオ |
visual | 2分 | スクリーンショット比較のみ |
upload | 1分 | すべてのファイル形式 |
download | 2分 | エクスポート機能 |
login | 30秒 | 認証フロー |
api | 1分 | APIエンドポイントテスト |
フラグ
| フラグ | 説明 |
|---|---|
--preview | ローカルホストのみテスト |
--production | 本番URLのみテスト |
--quick | P0シナリオのみ（最速テスト） |
--human | 実際のブラウザを使用したChrome MCP |
--headless | ヘッドレスモードのPlaywright MCP（CI/CD） |
--update-baselines | スクリーンショットのベースラインを更新 |
--mobile | モバイルビューポートでテスト（375px、768px） |
ワークフロー
1. 環境チェック
- localhostが動作しているか確認（curl/fetch）
- 本番URLにアクセス可能か確認
- フラグに基づいてテスト環境を選択
2. ブラウザセットアップ
- --humanの場合: Chrome MCPを使用（mcp__claude-in-chrome__）
- それ以外: Playwright MCPを使用（mcp__playwright__）
- ビューポート: 1280x720（デスクトップ）または375x667（モバイル）
3. 人間らしい動作を有効化
- ランダム遅延: アクション間200〜800ms
- タイピング速度: 1キーあたり50〜150ms
- クリック前にホバー（200〜500msの一時停止）
- 即時スクロールではなくスムーズスクロール
4. テストスイートの実行
- 各テストの前後でスクリーンショットを撮影
- エラー時: スクリーンショットとコンソールログを保存
- ダウンロード検証: ファイルサイズを確認
5. レポート生成
- Markdownレポートを.playwright-mcp/reports/に保存
- ビジュアル差異がある場合は差分画像を保存
- Pass/Fail/Flakyステータスのサマリー
テストシナリオ（P0 - ビジネスクリティカル）
1. ランディングページの読み込み
- URLに移動
- メイン要素が表示されるのを待つ
- ロゴ/ブランディングが表示されていることを確認
- スクリーンショット: landing-page.png
2. ログイン/認証フロー
- ログインボタンをクリック
- モーダル/ページアニメーションを待つ
- 認証オプション（OAuth、メールなど）が表示されていることを確認
- スクリーンショット: login-modal.png
3. 言語切り替え（i18n対応時）
- 言語切り替えボタンを見つける
- 人間らしい遅延でクリック
- テキスト変更を待つ
- UIテキストが変更されたことを確認
- スクリーンショット: language-toggle.png
4. ファイルアップロード（機能がある場合）
- アップロードエリアをクリック
- テストファイルを選択
- 確認を待つ
- ファイル名が表示されていることを確認
- スクリーンショット: file-uploaded.png
5. メインアクションの実行
- アプリの主要機能を実行
- ローディング状態を待つ
- 結果を待つ（最大60秒）
- 結果の内容が存在することを確認
- スクリーンショット: result.png
6. エクスポート/ダウンロード（機能がある場合）
- ダウンロードボタンをクリック
- ダウンロードイベントを待つ
- ファイル形式が正しいことを確認
- ファイルサイズが最小値以上であることを確認
- スクリーンショット: download-complete.png
テストシナリオ（P1 - 重要）
7. ナビゲーション/履歴
- ナビゲーション要素をクリック
- アニメーションを待つ
- 正しいコンテンツが読み込まれたことを確認
8. テーマ切り替え（機能がある場合）
- テーマ切り替えボタンを見つける
- 現在の色を記録
- 切り替えボタンをクリック
- 色が変更されたことを確認
- スクリーンショット: theme-toggle.png
9. レスポンシブデザイン
- ビューポートを375x667に設定
- モバイルナビゲーションが表示されていることを確認
- 主要機能にアクセス可能であることを確認
- スクリーンショット: mobile-view.png
10. エラーハンドリング
- エラーを引き起こす（無効な入力など）
- エラーメッセージを待つ
- エラーがユーザーフレンドリーであることを確認
- スクリーンショット: error-state.png
人間らしい動作関数
// ランダム遅延（200〜800ms）
async function humanDelay() {
const delay = 200 + Math.random() * 600;
await page.waitForTimeout(delay);
}
// 人間らしいタイピング（1キーあたり50〜150ms）
async function humanType(selector: string, text: string) {
await page.click(selector);
await humanDelay();
for (const char of text) {
await page.keyboard.type(char);
await page.waitForTimeout(50 + Math.random() * 100);
}
}
// ホバー → 一時停止 → クリックパターン
async function humanClick(selector: string) {
await page.hover(selector);
await page.waitForTimeout(200 + Math.random() * 300);
await page.click(selector);
await humanDelay();
}
// スムーズスクロール
async function humanScroll(pixels: number) {
await page.evaluate((px) => {
window.scrollTo({ top: px, behavior: "smooth" });
}, pixels);
await page.waitForTimeout(500);
}
レポート形式
## E2Eテストレポート - [日付] [時刻]
### 環境
- **URL**: [テスト対象URL]
- **ブラウザ**: Chromium [バージョン]
- **ビューポート**: 1280x720
- **スイート**: smoke
### 結果
| # | テスト | ステータス | 所要時間 | スクリーンショット |
|---|----------------|----------|--------|------------------------|
| 1 | ランディングページ読み込み | PASS | 0.8秒 | [表示](landing-page.png)|
| 2 | ログインモーダル | PASS | 1.2秒 | [表示](login-modal.png) |
| 3 | ファイルアップロード | PASS | 2.1秒 | [表示](file-uploaded.png)|
| 4 | メインアクション | SLOW | 45.2秒 | [表示](result.png) |
| 5 | ダウンロード | FAIL | 3.4秒 | [表示](error.png) |
### サマリー
- **合計**: N件
- **成功**: X件 (Y%)
- **失敗**: A件 (B%)
- **遅延/不安定**: C件 (D%)
- **所要時間**: Z秒
ビジュアルベースライン
.playwright-mcp/
├── baselines/ # ゴールデンリファレンス（git管理）
│ ├── landing-page-desktop.png
│ ├── landing-page-mobile.png
│ ├── login-modal.png
│ ├── result.png
│ └── error-state.png
├── current/ # 現在のスクリーンショット（git管理外）
├── diffs/ # ピクセル差分（git管理外）
└── reports/ # テストレポート（git管理外）
実行方法
最も簡単な呼び出し
ユーザー: "teste"
→ 利用可能な環境でsmokeスイートを実行
特定のテスト
ユーザー: "teste upload"
→ アップロードスイートのみを実行
ユーザー: "teste production visual"
→ 本番環境でビジュアルスイートを実行
ユーザー: "teste --quick --human"
→ 実際のChromeブラウザでクイックテストを実行
CI/CD連携
ユーザー: "teste --headless --full"
→ パイプライン用にすべてのテストをヘッドレスで実行
エラー処理
-
localhostにアクセスできない場合:
- 警告を表示
- Devサーバーを起動するかどうかユーザーに質問
-
本番環境にアクセスできない場合:
- 警告を表示
- デプロイ状況を確認
-
テストタイムアウト（60秒超）:
- 現在の状態のスクリーンショットを撮影
- コンソールログを保存
- FAILとしてマーク
-
ビジュアル差分が検出された場合:
- 差分画像を生成
- FLAKYとしてマーク（自動的にはFAILにしない）
- ユーザーがベースラインの更新が必要かどうかを判断
設定
プロジェクトルートにオプションで.e2e-config.jsonを配置:
{
"previewUrl": "http://localhost:5173",
"productionUrl": "https://your-app.com",
"defaultSuite": "smoke",
"timeouts": {
"navigation": 10000,
"action": 60000,
"download": 30000
},
"viewports": {
"desktop": { "width": 1280, "height": 720 },
"tablet": { "width": 768, "height": 1024 },
"mobile": { "width": 375, "height": 667 }
},
"humanBehavior": {
"enabled": true,
"minDelay": 200,
"maxDelay": 800,
"typingSpeed": { "min": 50, "max": 150 }
},
"screenshots": {
"onEveryStep": false,
"onFailure": true,
"fullPage": false
}
}
前提条件
- Chrome MCPまたはPlaywright MCPがインストールされていること
package.jsonを持つNode.jsプロジェクト- オプション: プロジェクト設定用の
.e2e-config.json
作者
Dresden AI Insights - https://dresdenaiinsights.com