mcpField
U
ui-test-puppeteer

ui-test-puppeteer

github.com/naodengテスト・品質28540 回インストール今日更新
リポジトリ

ui-test-puppeteer について

Puppeteer を使う、または Puppeteer 向けの成果物を必要とするプロジェクト向けに、UI テストの計画と作成を支援するスキルです。プロジェクト設定、ブラウザーの挙動、業務結果や失敗の検証を重視します。

主な機能

  1. 01Puppeteer 向けテスト計画
  2. 02プロジェクト情報の反映
  3. 03ブラウザーと起動設定の確認
  4. 04業務状態の検証
  5. 05失敗と後処理への対応

活用シーン

  1. 01既存の Puppeteer プロジェクトでの UI テスト計画
  2. 02ポップアップと画面遷移への対応
  3. 03業務状態と失敗動作の検証

インストール

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

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

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

同梱ファイル

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

README.md
agents/
openai.yaml
evals/
eval.yaml
evals/cases/
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.mjs
index.html
README.md
receipt.html
server.mjs
examples/
sample-context.md
output-templates/
template-markdown.md
prompts/
ui-test-puppeteer.md
references/
domain-decision-example.md
framework-spec.md
setup-and-ci.md
scripts/
run-tests.sh

詳細

Puppeteer UI テスト(EN)

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

使用する場面

  • Puppeteer の UI テストワークフローで使う出力が必要な場合。
  • プロジェクトですでに Puppeteer を使用している場合、または Puppeteer 向けの計画を希望する場合。

出力形式の選択肢

リクエストで別の形式が明示されていない限り、デフォルトは Markdown です。

使用方法

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

参考ファイル

  • ドメインの判定結果、有効な制御項目、証拠の不足を評価する際は、サニタイズ済みの入力、項目ごとの判定基準、再現可能な計算が記載された references/domain-decision-example.md を参照してください。

  • prompts/ui-test-puppeteer.md:このスキルのメインプロンプト。

  • references/framework-spec.md:ツール固有の構成とカバレッジに関する注意事項。

  • references/setup-and-ci.md:セットアップ、実行、CI に関する注意事項。

  • examples/sample-context.md:リクエストのコンテキスト例。

  • scripts/run-tests.sh:ローカル実行用の簡易エントリーポイント。

ドメイン実行の基本事項

  1. 実際の Puppeteer/Node/ブラウザーと、起動設定およびサポート範囲を確認します。互換性がない場合は CONFIG_ERROR です。正常に起動できても、すべての機能に互換性があるとは限りません。
  2. ターゲットの作成と opener の関連付けを使って新しいウィンドウを特定し、利用可能なページになるまで待機して、URI/authority を確認します。ナビゲーションの準備完了とビジネス上の準備完了は別です。固定時間の待機ではなく、実際の状態を判定基準とします。
  3. try/finally で所有するページ/ブラウザーを閉じ、タイムアウト/読み込みエラーを保持します。主な失敗とクリーンアップの失敗を別々に報告します。例外を握りつぶして成功を返してはいけません。
  4. 最低限のフィクスチャには、正常な支払い、状態不一致、ポップアップ、読み込み失敗、タイムアウトを含めます。ビジネス上の状態/プリンシパルに加えて、スクリーンショット/URL/ログ/バージョンの証拠を確認します。ファイルが生成されたことや読み込みが成功したことは、ビジネス上の合格を意味しません。

よくある落とし穴

  • 対象範囲が曖昧で、コンテキストがない状態では使用しないでください。
  • すべての領域を同じ重要度として扱わないでください。
  • 仮定や不足情報を省略しないでください。

ベストプラクティス

  • プロンプトファイルを起点にし、重要なコンテキストだけを追加します。

  • リスクに基づいた、実行可能な出力にします。

  • リクエストが不完全な場合は、実用的な初版を返し、ギャップを明記します。

  • 生成されたビジネス上のアサーション、失敗の伝播、分離を検証するには、evals/fixtures/checkout-app/README.md とそのローカルの正常/バグ/タイムアウト制御を参照してください。実行するのは、実行を依頼された場合に限ります。

コメント