webapp-testing
Playwright 自動化による Web アプリケーションテスト
Également disponible depuis: ZhanlinCui,AutumnsGrove,Azeem-2,DYAI2025,Cam10001110101,7Spade,7Spade,ComposioHQ,davila7,anthropics,ArtemisAI
ローカル Web アプリケーションのテストでは、サーバー管理とブラウザ操作の自動化が必要です。このスキルは、フロントエンドテストワークフローを効率化する Playwright スクリプトとサーバーヘルパーを提供します。
Télécharger le ZIP du skill
Importer dans Claude
Allez dans Paramètres → Capacités → Skills → Importer un skill
Activez et commencez à utiliser
Tester
Utilisation de "webapp-testing". ログインページのすべてのインタラクティブ要素を検出
Résultat attendu:
- 3 つの入力フィールドを検出：email (type=email)、password (type=password)、remember (type=checkbox)
- 2 つのボタンを検出：'Sign In' (submit)、'Forgot Password?' (link)
- フォームレイアウトを表示するスクリーンショットを /tmp/login_page.png に保存
Utilisation de "webapp-testing". サーバー実行中のフォーム送信テスト
Résultat attendu:
- ポート 3000 でサーバー起動
- http://localhost:3000/login に移動
- メールフィールドに 'test@example.com' を入力
- Sign In ボタンをクリック
- /dashboard への移動を確認
- サーバーを正常に停止
Audit de sécurité
SûrStatic analysis detected 42 patterns but all are false positives. LICENSE.txt URLs are standard Apache 2.0 license references. 'Weak cryptographic algorithm' findings incorrectly flagged license text and argparse code. subprocess usage in with_server.py is legitimate for server management. SKILL.md code blocks are documentation examples, not executable code. Skill is safe for publication.
Problèmes à risque faible (1)
Facteurs de risque
⚡ Contient des scripts
⚙️ Commandes externes (2)
📁 Accès au système de fichiers (1)
Score de qualité
Ce que vous pouvez construire
UI コンポーネントのフロントエンド開発者テスト
開発サーバーを起動し、Playwright スクリプトで UI 動作を検証することで、React または Vue コンポーネントのテストを自動化します。
フルスタック統合テスト
バックエンド API サーバーとフロントエンド開発サーバーを同時に実行し、統合アプリケーションに対してエンドツーエンドテストを実行します。
ビジュアルリグレッション検出
Web アプリケーションの状態のスクリーンショットを撮影し、開発中の意図しない UI 変更を検出するために視覚的に比較します。
Essayez ces prompts
webapp-testing スキルを使用してローカル HTML ファイルを検査し、すべての button 要素を検索します。ファイルに移動し、ページの読み込みを待ってから、テキストコンテンツを含むすべてのボタンを一覧表示します。
with_server.py を使用してポート 3000 で React 開発サーバーを起動し、アプリに移動してログインボタンをクリックし、ダッシュボードが表示されることを確認する Playwright スクリプトを作成します。
with_server.py を使用して、ポート 5000 で Python Flask バックエンドとポート 5173 で Vite フロントエンドを起動します。フロントエンドでフォームを送信し、データがバックエンドレスポンスに表示されることを確認するテストを作成します。
ローカル Web アプリに移動し、networkidle 状態を待機し、フルページスクリーンショットを /tmp/debug.png に保存し、ページコンテンツ HTML を抽出します。すべての入力フィールドと関連するラベルを特定します。
Bonnes pratiques
- 動的 Web アプリケーションを検査する前に、常に networkidle 状態を待機する
- with_server.py ヘルパーはブラックボックスとして使用し、まず --help を実行して使用方法を理解する
- ビジュアルデバッグのコンテキストのために、DOM 検査の前にスクリーンショットを撮影する
Éviter
- JavaScript 中心のアプリケーションで networkidle を待機せずに DOM を検査する
- --help で十分な使用情報が得られる場合に、スクリプトソースコードをコンテキストに読み込む
- 実行中のサーバーが必要な動的アプリケーションに file:// URL を使用する