Menú
playwright-cli を使った E2E テストの実行スキル。ブラウザを headless モードで起動し、テスト結果をスクリーンショットとして screenshots/ 配下の日付付きフォルダーに保存する。E2E テストを実行する際には、必ずこのスキルに従ってください。
Instalar con Codex o Claude Copia este prompt, pégalo en Codex, Claude u otro asistente, y deja que revise la página de la skill y la instale por ti.
Basado en la clasificación ocupacional SOC
| name | e2e-test |
| description | playwright-cli を使った E2E テストの実行スキル。ブラウザを headless モードで起動し、テスト結果をスクリーンショットとして screenshots/ 配下の日付付きフォルダーに保存する。E2E テストを実行する際には、必ずこのスキルに従ってください。 |
本スキルは、playwright-cli を使って本プロジェクトのアプリケーションの E2E テストを実行し、テスト結果をスクリーンショットとして記録するための手順を定義する。
すべてのスクリーンショットは screenshots/ 配下の日付付きフォルダーに保存される。
cd src && dotnet run --project AppHost）playwright-cli が利用可能であることテスト実行ごとに一意のフォルダーを screenshots/ 配下に作成する。
フォルダー命名規則:
screenshots/{YYYYMMDD}-{HHmmss}-{テスト名}/
YYYYMMDD-HHmmss — テスト開始時刻（ローカルタイム）テスト名 — テストの目的を英語で簡潔に表す（kebab-case）例:
screenshots/20260327-143052-form-submission/
screenshots/20260327-150000-item-list-search/
screenshots/20260327-160000-user-settings/
screenshots/20260327-170000-full-regression/
作成コマンド（PowerShell）:
$testName = "form-submission" # テストに応じて変更
$timestamp = Get-Date -Format "yyyyMMdd-HHmmss"
$folder = "screenshots/${timestamp}-${testName}"
New-Item -ItemType Directory -Path $folder -Force
playwright-cli open --browser=chromium
注意:
playwright-cliは現時点で headless フラグを直接サポートしていない場合がある。 その場合はrun-codeで headless コンテキストを作成する:playwright-cli open
一貫したスクリーンショットのため、画面サイズを固定する。
playwright-cli resize 1920 1080
Web アプリケーションの URL に遷移する。Aspire 経由で起動している場合、URL はダッシュボードから確認する。
playwright-cli goto https://localhost:{ポート番号}
各操作ステップでスクリーンショットを撮影する。ファイル名は連番 + 操作内容とする。
命名規則:
{連番2桁}-{操作内容}.png
例:
playwright-cli screenshot --filename=screenshots/20260327-143052-form-submission/01-initial-page.png
playwright-cli screenshot --filename=screenshots/20260327-143052-form-submission/02-form-filled.png
playwright-cli screenshot --filename=screenshots/20260327-143052-form-submission/03-validation-error.png
playwright-cli screenshot --filename=screenshots/20260327-143052-form-submission/04-submitted.png
playwright-cli screenshot --filename=screenshots/20260327-143052-form-submission/05-confirmation.png
playwright-cli close
以下は典型的なテストシナリオの実行例。テスト対象に応じてカスタマイズして使用する。
# 1. 準備
$testName = "form-basic"
$timestamp = Get-Date -Format "yyyyMMdd-HHmmss"
$folder = "screenshots/${timestamp}-${testName}"
New-Item -ItemType Directory -Path $folder -Force
# 2. ブラウザ起動・遷移
playwright-cli open
playwright-cli resize 1920 1080
playwright-cli goto {WebアプリURL}/<route>
# 3. テスト実行とスクリーンショット
playwright-cli screenshot --filename=${folder}/01-initial.png
# 入力フォームに値を入力
playwright-cli fill {入力欄のref} "テスト入力値"
playwright-cli screenshot --filename=${folder}/02-filled.png
# 送信
playwright-cli click {送信ボタンのref}
# 結果確認（snapshot で状態確認しながら待つ）
playwright-cli snapshot
playwright-cli screenshot --filename=${folder}/03-result.png
# 4. 終了
playwright-cli close
$testName = "item-list-search"
$timestamp = Get-Date -Format "yyyyMMdd-HHmmss"
$folder = "screenshots/${timestamp}-${testName}"
New-Item -ItemType Directory -Path $folder -Force
playwright-cli open
playwright-cli resize 1920 1080
playwright-cli goto {WebアプリURL}/<list-route>
playwright-cli screenshot --filename=${folder}/01-list-initial.png
# 検索テスト
playwright-cli fill {検索欄のref} "テスト"
playwright-cli screenshot --filename=${folder}/02-search-result.png
playwright-cli close
$testName = "settings-crud"
$timestamp = Get-Date -Format "yyyyMMdd-HHmmss"
$folder = "screenshots/${timestamp}-${testName}"
New-Item -ItemType Directory -Path $folder -Force
playwright-cli open
playwright-cli resize 1920 1080
playwright-cli goto {WebアプリURL}/<settings-route>
playwright-cli screenshot --filename=${folder}/01-settings-list.png
# 新規追加ダイアログ
playwright-cli click {追加ボタンのref}
playwright-cli screenshot --filename=${folder}/02-add-dialog.png
playwright-cli close
YYYYMMDD-HHmmss-テスト名 形式 にする連番2桁-操作内容.png にする1920x1080 に設定するplaywright-cli close でブラウザを終了するsnapshot コマンドで DOM の状態を確認してから操作する（ref の特定に必要）snapshot を繰り返して状態遷移を確認するscreenshots/ ルート直下へのスクリーンショット保存| 問題 | 対処法 |
|---|---|
| ブラウザが起動しない | playwright-cli kill-all で残存プロセスを終了してから再試行 |
| ページが表示されない | Aspire ダッシュボードで Web アプリの起動状態を確認 |
| ref が見つからない | playwright-cli snapshot で最新の DOM 構造を確認 |
| スクリーンショットが保存されない | フォルダーが存在するか確認。--filename のパスが正しいか確認 |
| SSL 証明書エラー | 開発環境では https://localhost の自己署名証明書を許可する |
Prompt for creating the high-level technical architecture for an Epic, based on a Product Requirements Document.
Modular Monolith + Clean Architecture の設計ガイド。新しいモジュールの作成、画面の実装、機能追加を行う際には、必ずこのスキルを参照して従ってください。
Create a new specification as a GitHub Issue, optimized for Generative AI consumption.
ドキュメント作成時の共通ルール。Markdown ドキュメントを新規作成・更新する際には、必ずこのスキルを参照して従ってください。
Ensure .NET/C# code meets best practices for the solution/project.
大きな機能を実装する際に使用するワークフロースキル。6 つのカスタムエージェント（Orchestrator / Product Manager / Architect / Developer / Reviewer / Tester）が協調し、仕様策定から実装・テスト・マージまでの全ライフサイクルを自律的に駆動する。新機能の追加や大規模な変更を行う場合は、必ずこのスキルに従ってください。