ui-test-playwright について
Playwright による UI 自動テストを設計するスキルです。既存ツールを使うプロジェクトや、実行可能なテスト計画を求める場面に向き、安定したロケーター、業務状態の検証、並列データの分離、失敗証拠の保持を重視します。
主な機能
- 01プロジェクトの Playwright 設定と実行入口を踏襲
- 02安定したセマンティックロケーターを優先
- 03自動再試行アサーションで業務状態を検証
- 04並列テスト間でアカウントとデータを分離
- 05失敗時のトレース、スクリーンショット、ログを保持
活用シーン
- 01Playwright プロジェクトの UI テスト設計
- 02注文や会計状態の検証計画
- 03並列テストのデータ分離の確認
インストール
コマンドをコピーしてターミナルで実行します。
npx skills add https:/ / github.com/ naodeng/ awesome-qa-skills --skill ui-test-playwrightインストール後、Claude Code で/ui-test-playwrightを入力して読み込まれたか確認します。
同梱ファイル
SKILL.md と一緒にインストールされる参考資料やスクリプト。
README.mdagents/openai.yamlevals/eval.yamlevals/cases/basic-script-artifact.yamlbasic-success.yamldomain-method-regression.yamledge-incomplete-input.yamledge-scope-boundary.yamlevals/fixtures/check_domain_decisions.pycheck-domain-decisions.shdomain-oracle.jsonevals/fixtures/checkout-app/checkout.spec.cjsindex.htmlplaywright.config.cjsREADME.mdreceipt.htmlserver.mjsevals/fixtures/scripts/check_playwright_output.shexamples/sample-context.mdoutput-templates/template-markdown.mdprompts/ui-test-playwright.mdreferences/domain-decision-example.mdframework-spec.mdsetup-and-ci.mdscripts/run-tests.sh詳細
Playwright UI 自動化テスト
英語版: 対応する英語版スキルを参照してください。
使用する場面
- Playwright UI 自動化テストのワークフローを対象としたテスト計画や自動化設計を出力する必要がある場合。
- プロジェクトですでに関連ツールを使用している、またはすぐに導入できるツール固有の計画が必要な場合。
出力形式のオプション
デフォルトでは Markdown を使用します。明示的に別の形式が求められていない限り、出力形式を追加しないでください。
使用方法
prompts/ui-test-playwright.mdを開き、メインプロンプトとして使用します。- 実際のプロジェクトのコンテキスト(範囲、環境、制約、リスク、依存関係、期待する成果物)を補足します。
- 入力が不完全な場合は、まず使用可能な初版を返し、不足情報と仮定を明記します。
参考ファイル
-
ドメイン上の結果、正しい対照、または証拠の不足を検証する際は、references/domain-decision-example.md の匿名化された入力、項目ごとの期待結果、再計算の根拠を参照してください。
-
prompts/ui-test-playwright.md:このスキルのメインプロンプト。 -
references/framework-spec.md:ツール固有の構成とカバレッジの説明。 -
references/setup-and-ci.md:インストール、実行、CI の説明。 -
examples/sample-context.md:リクエストコンテキストの例。 -
scripts/run-tests.sh:軽量なローカル実行用エントリーポイント。
ドメイン固有の実行上の要点
- プロジェクトの Playwright/Node/browser のバージョン、projects/fixtures、設定を固定します。実際のエントリーポイントを使用し、テスト ID、commit、worker/project、環境を記録します。互換性のない設定は、フレームワークを勝手に変更せず、まず診断します。
- role/name/testid など、安定したセマンティックロケーターを優先します。実行後は auto-retrying assertion で注文/会計/状態と対象を確認します。ページタイトル/URL は該当するナビゲーション要件を満たすだけであり、支払い成功の代わりにはなりません。
- 各 worker で、browser context、storage state/アカウント、ビジネスキーを個別に用意し、競合するデータの共有を禁止します。同一ブラウザー内の別 context であっても、サーバー側のアカウント分離を確認し、teardown では依存関係と逆の順序でクリーンアップします。
- 誤ったビジネス状態と並列の A/B 対照を使って、アサーションの感度を検証します。失敗時は trace/screenshot/ログと、0 以外の runner/CI 終了コードを保持し、最初の失敗は retry 後も確認できるようにします。生成されたアセット、実際の browser 実行、ビジネス上の受け入れ結果は、それぞれ個別に報告します。
よくある誤り
- 範囲が曖昧でコンテキストが不足しているのに、一般論だけの計画をすぐ提示しないでください。
- すべてのモジュールやシナリオを同じ重要度として扱わないでください。
- 仮定と不足情報の説明を省略しないでください。
ベストプラクティス
-
prompt ファイルから始め、結果に本当に影響するコンテキストだけを補足します。
-
リスクを重視し、すぐに実行またはレビューできる出力にします。
-
情報が不完全な場合は、まず使用可能なバージョンを提示し、そのうえで不足事項を明記します。
-
生成されたアセットのビジネスアサーション、失敗の伝播、または分離を検証する際は、evals/fixtures/checkout-app/README.md を参照し、ローカルの good/bug/timeout 対照を使用します。実行するのは、明示的に実行が指示された場合に限ります。