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

Webアプリケーションテスト は何をしますか？

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

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

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

スクリプトは必ず最初に --help を実行して 使用方法を確認してください。カスタマイズソリューションが絶対に必要な場合を除き、ソースコードは読まないでください。これらのスクリプトは非常に大きく、コンテキストウィンドウを汚染する可能性があります。コンテキストウィンドウに取り込むのではなく、ブラックボックススクリプトとして直接呼び出すために存在します。

アプローチの選択：決定木

ユーザータスク → 静的なHTMLか？
    ├─ はい → HTMLファイルを直接読み取り、セレクターを特定する
    │         ├─ 成功 → セレクターを使用してPlaywrightスクリプトを作成
    │         └─ 失敗/不完全 → 動的として扱う（下記）
    │
    └- いいえ（動的Webアプリ）→ サーバーは既に実行中か？
        ├- いいえ → 実行: python scripts/with_server.py --help
        │        次にヘルパーを使用し、簡略化したPlaywrightスクリプトを作成
        │
        └- はい → リコネッサンス・アンド・アクション:
            1. 移動し、networkidleを待つ
            2. スクリーンショットを撮るかDOMを検査
            3. レンダリング状態からセレクターを特定
            4. 発見したセレクターでアクションを実行

例: 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) # 必ずヘッドレスモードでChromiumを起動
    page = browser.new_page()
    page.goto('http://localhost:5173') # サーバーは既に実行中で準備完了
    page.wait_for_load_state('networkidle') # 重要: JSの実行を待つ
    # ... 自動化ロジック
    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 - 自動化中のコンソールログを取得する