e2e-check

name	e2e-check
description	Playwright CLIを使ってE2Eで動作確認を行うときに使用
allowed-tools	Read, Grep, Glob, Bash

E2E動作確認（Playwright CLI）

playwright-cli を使ってブラウザを操作し、アプリケーションの動作確認をE2Eで行う。

初期チェック

最初に必ず実行:

which playwright-cli

コマンドが見つからない場合は処理を中断し、ユーザーにインストールを案内する。

動作確認の流れ

1. プロジェクトの理解

• README.md を読み、プロジェクトの概要・セットアップ手順・起動方法・URLなどを把握する
• 認証方法、テスト用アカウント、環境変数の設定など動作確認に必要な前提情報を確認する

2. アプリケーションの起動確認

• READMEの情報をもとに、動作確認対象のURLをユーザーに確認する
• curl -s -o /dev/null -w "%{http_code}" <URL> で疎通確認する
• 未起動の場合はユーザーに起動を依頼する

3. ブラウザを開く

playwright-cli open <URL>

4. ページの状態を確認

playwright-cli snapshot

• snapshot でページ構造と各要素の ref を確認する
• 要素の ref を使って操作対象を特定する

5. ブラウザ操作

ユーザーの指示や状況に応じて、以下のコマンドを臨機応変に組み合わせて動作確認を行う:

コマンド	用途
playwright-cli open <URL>	ブラウザでURLを開く
playwright-cli goto <URL>	ページ遷移
playwright-cli snapshot	ページ構造の確認（ref取得）
playwright-cli screenshot	スクリーンショット取得
playwright-cli click --ref <ref>	要素のクリック
playwright-cli type --ref <ref> --text <text>	テキスト入力
playwright-cli select-option --ref <ref> --value <value>	セレクトボックス選択
playwright-cli hover --ref <ref>	ホバー
playwright-cli cookie-list	Cookie一覧の確認
playwright-cli close	ブラウザを閉じる

6. 確認結果のサマリー

• 確認したシナリオと結果を一覧で表示する
• 問題が見つかった場合は、原因と対処方法を提示する

注意事項

• 操作の前に必ず playwright-cli snapshot で要素の ref を確認してから操作する
• 認証が必要な場合は、環境変数や .env ファイルから認証情報を取得する
• 動作確認が完了したら playwright-cli close でブラウザを閉じる