E2E Testing Skill

ブラウザ自動化MCPサーバーを使用したE2Eテストの実施を支援する。

概要

このスキルはブラウザ自動化MCPサーバーを使い、実際のブラウザを操作してE2Eテストを実施する。

前提条件

• 開発サーバーが起動していること（pnpm dev）
• ブラウザ自動化MCP（Claude in Chrome等）が有効であること
• Chromeブラウザが利用可能であること

テスト実施ワークフロー

1. 開発サーバー起動確認

# サーバーが起動しているか確認、なければ起動
pnpm dev

2. テスト実施フロー

1. ページを開く/遷移する
2. ページ構造を取得して要素を確認
3. 要素を操作（クリック、入力など）
4. 結果を検証（テキスト確認、スクリーンショット）
5. 次のステップへ

テストパターン

パターン1: ページ表示確認

1. 対象URLに遷移
2. ページ内容を確認
3. 期待する要素・テキストが存在するか検証
4. 必要に応じてスクリーンショット撮影

パターン2: フォーム入力・送信

1. 対象ページに遷移
2. フォーム要素を特定
3. 各フィールドに値を入力
4. 送信ボタンをクリック
5. 結果を検証

パターン3: 認証フロー

1. ログインページに遷移
2. メール/パスワードを入力
3. ログインボタンをクリック
4. ダッシュボード表示を確認
5. URL・表示内容を検証

パターン4: レスポンシブ確認

1. 画面サイズを変更
   • モバイル: 375x667
   • タブレット: 768x1024
   • デスクトップ: 1280x800
2. スクリーンショットで表示確認
3. レイアウト崩れがないか検証

検証方法

テキスト検証

• ページ内容を取得
• 期待するテキストが含まれているか確認

視覚的検証

• スクリーンショットを取得
• 表示を目視確認

JavaScript実行による検証

// ページ内でJavaScriptを実行して検証
{
  title: document.title,
  url: window.location.href,
  elementExists: !!document.querySelector('[data-testid="target"]')
}

よくある問題と対処

テスト実施チェックリスト

• 開発サーバーが起動しているか
• 操作前にページ構造を確認したか
• 非同期処理後は待機したか
• エラーケースもテストしたか
• スクリーンショットで結果を記録したか