e2e-panther-playwright について
SymfonyのブラウザーE2Eテスト向けスキルで、Pantherを使い、WebKitやトレースなどにはPlaywrightを別途利用します。セットアップ、明示的な待機、アサーション、CIでのデバッグを扱います。
主な機能
- 01Pantherによる実ブラウザーテスト
- 02クロスブラウザー用途のPlaywright
- 03明示的な待機と状態アサーション
- 04ドライバーとCIの設定案内
活用シーン
- 01JavaScript主体のフローをテスト
- 02ログインや決済フローを検証
- 03CIのブラウザーテストをデバッグ
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/インストール後、Claude Code で/e2e-panther-playwrightを入力して読み込まれたか確認します。
同梱ファイルreference.md
詳細
E2e Panther Playwright（Symfony）
使用する場面
- JavaScript や、ログイン、購入手続き、サインアップなどの複数ページにわたるフローで、実際のブラウザーが必要な場合。
- クライアント側のレンダリングに依存するため、
WebTestCaseでは動作を確認できない場合。 - WebDriver では対応できないクロスブラウザーの要件（WebKit、トレース、動画）がある場合。Playwright を別途実行してください。
- CI でのみ失敗するブラウザーテストをデバッグする場合。
デフォルトのワークフロー
- クライアントを選択します。実際のブラウザーを使う場合は
static::createPantherClient()、JavaScript が不要な場合はstatic::createClient()を使用します。 symfony/pantherとdbrekelmans/bdiをインストールし、vendor/bin/bdi detect driversを実行して、phpunit.dist.xmlにServerExtensionを登録します。PantherTestCaseを継承し、明示的な待機を使ってフローを実行します。waitFor()、waitForVisibility()、waitForElementToContain()を使用します。- 将来の状態は
assertSelectorWillExist()またはassertSelectorWillContain()、現在の状態はassertSelectorIsVisible()でアサートします。 - テストスイートは
tests/E2Eに配置し、テスト間でデータベースをリセットします（DAMADoctrineTestBundle または Foundry）。 PANTHER_NO_HEADLESS=1と--debugでデバッグします。CI ではPANTHER_NO_SANDBOX=1を設定します。
注意事項
- 暗黙のタイミングに依存しないでください。すべての非同期ステップに
waitFor*またはassertSelectorWill*を使用します。 - スタイル用のクラスではなく、
data-testid属性を対象にします。 takeScreenshot()またはPANTHER_ERROR_SCREENSHOT_DIRによって書き込まれた PNG ファイルは削除し、コミットしないでください。- E2E は時間がかかります。重要な経路のみを対象とし、ユニットテストとは分けてください。
段階的な情報開示
- 実行時の方針とリスク管理には、このファイルを使用します。
- 実装の詳細が必要な場合は、リファレンスを開きます。
出力要件
- クライアントの種類と使用した待機方法を記載した E2E テストファイル。
- ドライバーのセットアップ、
ServerExtensionの登録、およびローカル環境と CI で必要なPANTHER_*変数。 - スクリーンショットを削除したことの確認。
リファレンス
reference.md
コメント
Markdown 対応