e2e-testing

E2E テストのワークフロー

概要

ブラウザーの自動化、ビジュアルリグレッションテスト、クロスブラウザーテスト、CI/CD との統合など、Playwright を使用したエンドツーエンドテストに特化したワークフローです。

このワークフローを使用する場面

次の場合にこのワークフローを使用します：

• E2E テストをセットアップする
• ブラウザーテストを自動化する
• ビジュアルリグレッションを実装する
• 複数のブラウザーでテストする
• CI/CD にテストを統合する

範囲と証拠

一覧にあるすべてのスキルではなく、現在のタスクに必要なフェーズを選んでください。専用のテストアカウント、分離されたフィクスチャ、承認済みのサンドボックスエンドポイントを使用してください。クリック操作によって、メッセージの送信、購入、データの削除が発生する可能性があります。まず、ブラウザーのインストールやダウンロード、CI の権限を確認してください。トレース、スクリーンショット、動画、ストレージ状態ファイルには、認証情報や個人データが含まれることがあります。非公開に保ち、共有する前に成果物から機密情報を削除してください。Playwright の WebKit 実行は、実際の Safari／iOS でのテストを証明するものではなく、モバイルエミュレーションも実機テストではありません。差異を確認するまでビジュアルベースラインを固定し、テストに合格させるためだけに上書きしないでください。

ワークフローのフェーズ

フェーズ 1：テストのセットアップ

呼び出すスキル

• playwright-skill - Playwright のセットアップ
• e2e-testing-patterns - E2E のパターン

アクション

1. Playwright をインストールする
2. テストフレームワークを設定する
3. テストディレクトリをセットアップする
4. ブラウザーを設定する
5. 基本的なテストセットアップを作成する

コピーして貼り付けるプロンプト

Use @playwright-skill to set up Playwright testing

フェーズ 2：テストの設計

呼び出すスキル

• e2e-testing-patterns - テストパターン
• test-automator - テストの自動化

アクション

1. 重要なフローを特定する
2. テストシナリオを設計する
3. テストデータを計画する
4. ページオブジェクトを作成する
5. フィクスチャをセットアップする

コピーして貼り付けるプロンプト

Use @e2e-testing-patterns to design E2E test strategy

フェーズ 3：テストの実装

呼び出すスキル

• playwright-skill - Playwright のテスト
• webapp-testing - Web アプリのテスト

アクション

1. テストスクリプトを作成する
2. アサーションを追加する
3. 待機処理を実装する
4. 動的コンテンツを処理する
5. エラー処理を追加する

コピーして貼り付けるプロンプト

Use @playwright-skill to write E2E test scripts

フェーズ 4：ブラウザーの自動化

呼び出すスキル

• browser-automation - ブラウザーの自動化
• playwright-skill - Playwright の機能

アクション

1. ヘッドレスモードを設定する
2. スクリーンショットをセットアップする
3. 動画の録画を実装する
4. トレースの収集を追加する
5. モバイルエミュレーションを設定する

コピーして貼り付けるプロンプト

Use @browser-automation to automate browser interactions

フェーズ 5：ビジュアルリグレッション

呼び出すスキル

• playwright-skill - ビジュアルテスト
• ui-visual-validator - ビジュアル検証

アクション

1. ビジュアルテストをセットアップする
2. ベースライン画像を作成する
3. ビジュアルアサーションを追加する
4. しきい値を設定する
5. 差異を確認する

コピーして貼り付けるプロンプト

Use @playwright-skill to implement visual regression testing

フェーズ 6：クロスブラウザーテスト

呼び出すスキル

• playwright-skill - マルチブラウザー
• webapp-testing - ブラウザーテスト

アクション

1. Chromium を設定する
2. Firefox のテストを追加する
3. WebKit のテストを追加する
4. モバイルブラウザーをテストする
5. 結果を比較する

コピーして貼り付けるプロンプト

Use @playwright-skill to run cross-browser tests

フェーズ 7：CI/CD との統合

呼び出すスキル

• github-actions-templates - GitHub Actions
• cicd-automation-workflow-automate - CI/CD

アクション

1. CI ワークフローを作成する
2. 並列実行を設定する
3. 成果物をセットアップする
4. レポート機能を追加する
5. 通知を設定する

コピーして貼り付けるプロンプト

Use @github-actions-templates to integrate E2E tests with CI

品質ゲート

• テストが合格している
• カバレッジが十分である
• ビジュアルテストが安定している
• クロスブラウザーで検証済みである
• CI との統合が機能している

関連するワークフローバンドル

• testing-qa - テストのワークフロー
• development - 開発
• web-performance-optimization - パフォーマンス

制限事項

• タスクが上記の説明範囲に明確に該当する場合に限り、このスキルを使用してください。
• 出力を、環境固有の検証、テスト、専門家によるレビューの代わりとして扱わないでください。
• 必要な入力、権限、安全上の境界、成功基準が不足している場合は、作業を中止して確認を求めてください。