webapp-testing
Playwright 自動化による Web アプリケーションのテスト
こちらからも入手できます: 7Spade,DYAI2025,davila7,ArtemisAI,7Spade,Azeem-2,anthropics,ComposioHQ,Cam10001110101,AutumnsGrove
ローカル Web アプリケーションのテストには、手動セットアップなしで信頼性の高いブラウザ自動化が必要です。このツールキットは、フロントエンドテストワークフローを効率化する Playwright スクリプトとサーバー管理ユーティリティを提供します。
スキルZIPをダウンロード
Claudeでアップロード
設定 → 機能 → スキル → スキルをアップロードへ移動
オンにして利用開始
テストする
「webapp-testing」を使用しています。 localhost:5173 上のすべてのインタラクティブ要素を発見
期待される結果:
- Found 12 buttons: [0] Submit, [1] Cancel, [2] Login...
- Found 8 links: - Dashboard -> /dashboard, - Profile -> /profile...
- Found 5 input fields: - email (email), - password (password)...
- Screenshot saved to /tmp/page_discovery.png
「webapp-testing」を使用しています。 ユーザーフロー中のコンソールログをキャプチャ
期待される結果:
- Console: [log] App initialized
- Console: [warning] Deprecated API usage
- Console: [error] Failed to load resource: net::ERR_CONNECTION_REFUSED
- Captured 15 console messages. Logs saved to outputs/console.log
セキュリティ監査
低リスクStatic analysis flagged 38 patterns, but manual review confirms all HIGH-severity findings are false positives. The 'weak cryptographic algorithm' detections are scanner errors on argparse code. Shell backtick findings are Markdown documentation formatting. Subprocess usage in with_server.py is intentional server management functionality requiring explicit CLI invocation. Hardcoded localhost URLs and temp file writes are expected for local testing toolkit.
低リスクの問題 (1)
リスク要因
⚙️ 外部コマンド (2)
📁 ファイルシステムへのアクセス (2)
品質スコア
作れるもの
フロントエンド回帰テスト
デプロイ前に破壊的変更を検知するため、コード変更後の UI コンポーネントの検証を自動化します。
開発サーバーの検証
バックエンドとフロントエンドサーバーを自動的に起動し、統合テストを実行してからリソースをクリーンアップします。
コンソールログデバッグ
ブラウザコンソール出力をキャプチャして分析し、ユーザーフロー中の JavaScript エラーと警告を特定します。
これらのプロンプトを試す
localhost:3000 のローカル React アプリに移動し、ページが完全に読み込まれるのを待ってから、ホームページのスクリーンショットを撮影してください。
Web アプリケーションにアクセスし、現在のページにあるすべてのボタン、リンク、フォーム入力フィールドを、そのテキスト内容と属性とともに一覧表示してください。
すべてのブラウザコンソールメッセージをキャプチャしながら自動化スクリプトを実行してください。ログをファイルに保存し、見つかったエラーや警告を報告してください。
バックエンドサーバーをポート 8000 で、フロントエンドをポート 5173 で起動し、ログインしてダッシュボードに移動し、主要な要素が存在することを検証する Playwright テストスクリプトを実行してください。テスト完了後、サーバーをクリーンアップしてください。
ベストプラクティス
- JavaScript が完全に実行されることを確認するため、動的ページの操作前に必ず networkidle 状態を待機してください
- サーバーの手動起動・停止ではなく、with_server.py ヘルパースクリプトを使用してサーバーのライフサイクルを管理してください
- 自動化ロジックをカスタマイズする前に、まず --help フラグを実行して利用可能なオプションを理解してください
回避
- 動的アプリケーションで networkidle を待機する前に DOM 検査やスクリーンショット撮影を行わないでください
- スクリプトのソースコードをコンテキストウィンドウに読み込まないでください。--help ドキュメントを使用し、ブラックボックストールとして呼び出してください
- wait_for_selector で特定のセレクタを待機できる場合に、wait_for_timeout のような固定タイムアウトを使用しないでください