mcpField
W
webapp-testing

webapp-testing

github.com/mavcuiテスト・品質19360 回インストール33 週間前に更新
リポジトリ

webapp-testing について

webapp-testing は、Python Playwright でローカル Web アプリをテストする Agent スキルです。ページの調査手順や、開発サーバーを管理する補助スクリプトを提供します。

主な機能

  1. 01Python Playwright によるテスト
  2. 02複数サーバーの管理補助
  3. 03描画後の DOM 調査手順
  4. 04動的ページの待機方法

活用シーン

  1. 01ローカルの動的 Web アプリのテスト
  2. 02静的 HTML の操作自動化
  3. 03テスト用のフロントエンドとバックエンド起動
  4. 04自動化前のページ要素の確認

インストール

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

$npx skills add https://github.com/mavcui/agent-skills-hunter --skill webapp-testing

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

詳細

Web アプリケーションのテスト

ローカルの Web アプリケーションをテストするには、ネイティブの Python Playwright スクリプトを作成してください。

利用可能なヘルパースクリプト：

  • scripts/with_server.py - サーバーのライフサイクルを管理します（複数のサーバーに対応）

スクリプトは必ず最初に --help を付けて実行し、使い方を確認してください。スクリプトを実行してみて、カスタマイズした解決策がabslutely必要だと判明するまでは、ソースを読まないでください。これらのスクリプトは非常に大きい場合があり、コンテキストウィンドウを圧迫するおそれがあります。コンテキストウィンドウに取り込むのではなく、ブラックボックスのスクリプトとして直接呼び出すためのものです。

アプローチの選択：判断フロー

User task → Is it static HTML?
    ├─ Yes → Read HTML file directly to identify selectors
    │         ├─ Success → Write Playwright script using selectors
    │         └─ Fails/Incomplete → Treat as dynamic (below)
    │
    └─ No (dynamic webapp) → Is the server already running?
        ├─ No → Run: python scripts/with_server.py --help
        │        Then use the helper + write simplified Playwright script
        │
        └─ Yes → Reconnaissance-then-action:
            1. Navigate and wait for networkidle
            2. Take screenshot or inspect DOM
            3. Identify selectors from rendered state
            4. Execute actions with discovered selectors

例：with_server.py の使用

サーバーを起動するには、まず --help を実行してから、ヘルパーを使用します。

単一のサーバー：

python scripts/with_server.py --server "npm run dev" --port 5173 -- python your_automation.py

複数のサーバー（例：バックエンド＋フロントエンド）：

python scripts/with_server.py \
  --server "cd backend && python server.py" --port 3000 \
  --server "cd frontend && npm run dev" --port 5173 \
  -- python your_automation.py

自動化スクリプトを作成する場合は、Playwright のロジックのみを記述してください（サーバーは自動的に管理されます）。

from playwright.sync_api import sync_playwright

with sync_playwright() as p:
    browser = p.chromium.launch(headless=True) # Always launch chromium in headless mode
    page = browser.new_page()
    page.goto('http://localhost:5173') # Server already running and ready
    page.wait_for_load_state('networkidle') # CRITICAL: Wait for JS to execute
    # ... your automation logic
    browser.close()

調査してから操作するパターン

  1. レンダリング済み DOM を調査します：

    page.screenshot(path='/tmp/inspect.png', full_page=True)
content = page.content()
page.locator('button').all()

  2. 調査結果からセレクターを特定します

  3. 特定したセレクターを使って操作を実行します

よくある落とし穴

❌ 避けてください：動的なアプリで networkidle を待つ前に DOM を調査する ✅ 実行してください：調査の前に page.wait_for_load_state('networkidle') を待つ

ベストプラクティス

  • 同梱スクリプトをブラックボックスとして使用します - タスクを実行する際は、scripts/ 内で利用できるスクリプトが役立つかどうかを検討してください。これらのスクリプトは、コンテキストウィンドウを圧迫することなく、一般的で複雑なワークフローを確実に処理します。使い方を確認するには --help を使用し、その後、直接呼び出してください。
  • 同期スクリプトでは sync_playwright() を使用します
  • 作業が終わったら、必ずブラウザーを閉じます
  • 説明的なセレクターを使用します：text=、role=、CSS セレクター、または ID
  • 適切な待機処理を追加します：page.wait_for_selector() または page.wait_for_timeout()

参考ファイル

  • examples/ - よくあるパターンの例：
    • element_discovery.py - ページ上のボタン、リンク、入力欄を検出します
    • static_html_automation.py - ローカル HTML に file:// URL を使用します
    • console_logging.py - 自動化中のコンソールログを取得します

コメント

Markdown 対応