| name | playwright-e2e-test |
| description | WebアプリケーションのPlaywright E2Eテストコードをテストシナリオ定義書から自動生成。テストシナリオ定義書（Markdown形式）を読み込み、ページ遷移、要素操作、検証を含む高品質なテストコードを生成。TypeScript対応、Page Object Model推奨、ダイアログ処理・非同期処理・エラーハンドリング完備。 |
Playwright E2Eテスト生成 Agent Skill
使い方
Playwrightテストコード生成
@agent_skills/playwright-e2e-test/instructions/generate_playwright_tests.md
テストシナリオ定義書からPlaywrightテストコードを生成してください
パラメータ
* project_root: <プロジェクトルートパス>
* instructions_file: <テストシナリオ定義書のファイルパス>
* test_output_dir: <テストコード出力ディレクトリ（省略可、デフォルト: {project_root}/tests）>
* page_objects_dir: <Page Objectsディレクトリ（省略可、デフォルト: {project_root}/tests/pages）>
* use_page_objects: true # Page Object Modelを使用するか（デフォルト: true）
AIが自動で以下を実行
- テストシナリオ定義書（Markdown）を読み込み
- 各シナリオを解析してテストケースを生成
- Reactコンポーネントを解析してセレクタを自動推論
- Page Object Model（POM）クラスを生成（use_page_objects=trueの場合）
- テストコード（TypeScript）を生成
- 設定ファイル（playwright.config.ts）を生成（存在しない場合）
- README（テスト実行方法）を生成
特徴: 人が書くシナリオ定義書には日本語で要素名を記述するだけで、AIが適切なセレクタを自動推論します。
実践例
例1: テストシナリオ定義書からテストコード生成
@agent_skills/playwright-e2e-test/instructions/generate_playwright_tests.md
テストシナリオ定義書からPlaywrightテストコードを生成してください
パラメータ
* project_root: projects/master/bookstore/berry-books-spa
* instructions_file: projects/master/bookstore/berry-books-spa/playwright_berry-books.md
AIが自動で実行:
- テストシナリオ定義書を読み込む
- 各シナリオを解析
- アプリケーションコードを解析してセレクタを自動推論
- Page Objectsを生成
- テストファイルを生成
- 設定ファイルを生成
生成されるファイル:
{project_root}/
├── tests/
│ ├── pages/ # Page Objects
│ │ ├── LoginPage.ts
│ │ ├── BookListPage.ts
│ │ └── ...
│ ├── scenario1.spec.ts # シナリオ1のテスト
│ ├── scenario2.spec.ts # シナリオ2のテスト
│ └── ...
├── playwright.config.ts # Playwright設定
└── README_PLAYWRIGHT.md # テスト実行方法
対応する主要機能
- テストシナリオ定義書（Markdown形式）の解析
- アプリケーションコード解析による自動セレクタ推論
- Page Object Model（POM）パターンの自動生成
- TypeScriptによるテストコード生成
- ページ遷移・要素操作・検証の実装
- ダイアログ処理（confirm/alert）- シンプルなaccept/dismissのみ推奨
- 非同期処理・待機処理（APIから読み込まれる選択肢への対応含む）
- エラーハンドリング
- スクリーンショット機能
- 並列実行対応
重要な注意事項
セレクトボックスの選択肢が動的に読み込まれる場合
選択肢がAPIから非同期に読み込まれる場合、テストシナリオ定義書に「待機」ステップを含める必要があります：
| 12 | 待機 | カテゴリ選択肢 | 読み込み完了を待つ | APIから取得 |
| 13 | 選択 | カテゴリ | すべて | |
検索結果の非同期表示
検索処理が非同期の場合、検索ボタンクリック後に検索処理の完了を待つ必要があります。Page ObjectにwaitForSearchResults()メソッドを追加し、ボタンのdisabled属性が解除されるまで待機してください。
また、検索条件は確実に結果が表示されるもの（カテゴリ「すべて」、一般的なキーワード）を選択してください。
ダイアログ処理はシンプルに
複雑なダイアログフロー（キャンセル→再試行など）は避け、シンプルなaccept/dismissのみを使用してください。
バックグラウンド実行を避ける
生成されるplaywright.config.tsではreuseExistingServer: trueを使用し、既存のサーバーを再利用します。
ディレクトリ構造
agent_skills/playwright-e2e-test/
├── SKILL.md # このファイル
├── README.md # クイックスタートガイド
├── principles/ # 原則（全プロジェクト共通）
│ └── playwright_best_practices.md # Playwrightベストプラクティス
├── templates/ # テンプレート
│ └── playwright_instructions.md # テストシナリオ定義書テンプレート
└── instructions/
└── generate_playwright_tests.md # テストコード生成指示
参考資料
