mcpField
U
ui-test-playwright

ui-test-playwright

github.com/naodengテスト・品質28553 回インストール1 日前に更新
リポジトリ

ui-test-playwright について

Playwright による UI 自動テストを設計するスキルです。既存ツールを使うプロジェクトや、実行可能なテスト計画を求める場面に向き、安定したロケーター、業務状態の検証、並列データの分離、失敗証拠の保持を重視します。

主な機能

  1. 01プロジェクトの Playwright 設定と実行入口を踏襲
  2. 02安定したセマンティックロケーターを優先
  3. 03自動再試行アサーションで業務状態を検証
  4. 04並列テスト間でアカウントとデータを分離
  5. 05失敗時のトレース、スクリーンショット、ログを保持

活用シーン

  1. 01Playwright プロジェクトの UI テスト設計
  2. 02注文や会計状態の検証計画
  3. 03並列テストのデータ分離の確認

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/naodeng/awesome-qa-skills --skill ui-test-playwright

インストール後、Claude Code で/ui-test-playwrightを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

README.md
agents/
openai.yaml
evals/
eval.yaml
evals/cases/
basic-script-artifact.yaml
basic-success.yaml
domain-method-regression.yaml
edge-incomplete-input.yaml
edge-scope-boundary.yaml
evals/fixtures/
check_domain_decisions.py
check-domain-decisions.sh
domain-oracle.json
evals/fixtures/checkout-app/
checkout.spec.cjs
index.html
playwright.config.cjs
README.md
receipt.html
server.mjs
evals/fixtures/scripts/
check_playwright_output.sh
examples/
sample-context.md
output-templates/
template-markdown.md
prompts/
ui-test-playwright.md
references/
domain-decision-example.md
framework-spec.md
setup-and-ci.md
scripts/
run-tests.sh

詳細

Playwright UI 自動化テスト

英語版: 対応する英語版スキルを参照してください。

使用する場面

  • Playwright UI 自動化テストのワークフローを対象としたテスト計画や自動化設計を出力する必要がある場合。
  • プロジェクトですでに関連ツールを使用している、またはすぐに導入できるツール固有の計画が必要な場合。

出力形式のオプション

デフォルトでは Markdown を使用します。明示的に別の形式が求められていない限り、出力形式を追加しないでください。

使用方法

  1. prompts/ui-test-playwright.md を開き、メインプロンプトとして使用します。
  2. 実際のプロジェクトのコンテキスト(範囲、環境、制約、リスク、依存関係、期待する成果物)を補足します。
  3. 入力が不完全な場合は、まず使用可能な初版を返し、不足情報と仮定を明記します。

参考ファイル

  • ドメイン上の結果、正しい対照、または証拠の不足を検証する際は、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:軽量なローカル実行用エントリーポイント。

ドメイン固有の実行上の要点

  1. プロジェクトの Playwright/Node/browser のバージョン、projects/fixtures、設定を固定します。実際のエントリーポイントを使用し、テスト ID、commit、worker/project、環境を記録します。互換性のない設定は、フレームワークを勝手に変更せず、まず診断します。
  2. role/name/testid など、安定したセマンティックロケーターを優先します。実行後は auto-retrying assertion で注文/会計/状態と対象を確認します。ページタイトル/URL は該当するナビゲーション要件を満たすだけであり、支払い成功の代わりにはなりません。
  3. 各 worker で、browser context、storage state/アカウント、ビジネスキーを個別に用意し、競合するデータの共有を禁止します。同一ブラウザー内の別 context であっても、サーバー側のアカウント分離を確認し、teardown では依存関係と逆の順序でクリーンアップします。
  4. 誤ったビジネス状態と並列の A/B 対照を使って、アサーションの感度を検証します。失敗時は trace/screenshot/ログと、0 以外の runner/CI 終了コードを保持し、最初の失敗は retry 後も確認できるようにします。生成されたアセット、実際の browser 実行、ビジネス上の受け入れ結果は、それぞれ個別に報告します。

よくある誤り

  • 範囲が曖昧でコンテキストが不足しているのに、一般論だけの計画をすぐ提示しないでください。
  • すべてのモジュールやシナリオを同じ重要度として扱わないでください。
  • 仮定と不足情報の説明を省略しないでください。

ベストプラクティス

  • prompt ファイルから始め、結果に本当に影響するコンテキストだけを補足します。

  • リスクを重視し、すぐに実行またはレビューできる出力にします。

  • 情報が不完全な場合は、まず使用可能なバージョンを提示し、そのうえで不足事項を明記します。

  • 生成されたアセットのビジネスアサーション、失敗の伝播、または分離を検証する際は、evals/fixtures/checkout-app/README.md を参照し、ローカルの good/bug/timeout 対照を使用します。実行するのは、明示的に実行が指示された場合に限ります。

コメント