WebApp Testing Skill

概要

WebApp Testing Skillは、AnthropicのオフィシャルClaude Skillsの1つで、Playwrightを使用してローカルWebアプリケーションと対話しテストするために設計されています。このスキルは、フロントエンド機能の検証、UI動作のデバッグ、ブラウザスクリーンショットのキャプチャ、ブラウザログの表示のための包括的なツールとパターンを提供します。

このスキルは、動的Webアプリケーション用の偵察後アクションアプローチを強調し、サーバーライフサイクルを自動的に管理するヘルパースクリプトと併せて、インフラストラクチャを心配することなく焦点を絞ったテストスクリプトを簡単に書けるようにします。

コア機能

1. Playwright自動化

Playwrightを使用した完全なブラウザ自動化:

• Webページをナビゲートし対話
• ボタンのクリック、フォームの入力、データの送信
• 要素とページ状態を待機
• スクリーンショットとページコンテンツをキャプチャ
• コンソールログとネットワークアクティビティを監視

2. サーバーライフサイクル管理

以下を処理するヘルパースクリプト(with_server.py):

• シングルサーバー: 1つの開発サーバーを起動
• マルチサーバー: バックエンド+フロントエンドを同時に起動
• ポート管理: 自動ポート可用性検出
• 自動クリーンアップ: テスト後のグレースフルなサーバーシャットダウン

3. アプローチ選択のための決定ツリー

正しいテストアプローチを選択するための明確なガイダンス:

• 静的HTML: ファイルを直接読み取り、Playwrightスクリプトを書く
• 動的Webapp: サーバーヘルパー+偵察パターンを使用
• 既に実行中: ナビゲート、networkidleを待機、対話

4. 偵察後アクションパターン

動的アプリケーション用:

1. ナビゲートしてnetworkidleを待機
2. スクリーンショットを取るかDOMを検査
3. レンダリングされた状態からセレクタを識別
4. 発見されたセレクタでアクションを実行

5. サンプルスクリプト

一般的なパターンの参照実装:

• element_discovery.py: ボタン、リンク、入力の検索
• static_html_automation.py: ローカルHTML用のfile:// URLの使用
• console_logging.py: 自動化中のコンソールログのキャプチャ

使用ケース

• フロントエンドテスト: UI機能とユーザーフローの検証
• リグレッションテスト: 変更が既存機能を壊さないことを確認
• クロスブラウザテスト: Chromium、Firefox、WebKitでテスト
• ビジュアルテスト: ビジュアルリグレッション用のスクリーンショットをキャプチャ
• 統合テスト: フロントエンドとバックエンドの統合をテスト
• デバッグ: UI問題と動作を調査
• デモ録画: 対話フローをキャプチャ

技術実装

サーバー管理

# シングルサーバー
python scripts/with_server.py --server "npm run dev" --port 5173 -- python test.py

# マルチサーバー(バックエンド + フロントエンド)
python scripts/with_server.py \
  --server "cd backend && python server.py" --port 3000 \
  --server "cd frontend && npm run dev" --port 5173 \
  -- python test.py

Playwrightスクリプト構造

from playwright.sync_api import sync_playwright

with sync_playwright() as p:
    browser = p.chromium.launch(headless=True)
    page = browser.new_page()
    page.goto('http://localhost:5173')
    page.wait_for_load_state('networkidle')  # 動的アプリに重要
    # ... 自動化ロジック
    browser.close()

セレクタ戦略

信頼性のために説明的なセレクタを使用:

• text=: テキストコンテンツでマッチ
• role=: ARIAロールでマッチ
• CSSセレクタ: 標準CSS選択
• ID: 最も具体的な選択

ベストプラクティス

常に最初に--helpを実行

ヘルパースクリプトを使用する前に:

python scripts/with_server.py --help

大きなソースファイルを読まずに使用方法と利用可能なオプションを表示します。

ブラックボックスアプローチを使用

ヘルパースクリプトは直接呼び出すように設計されています:

• 絶対に必要でない限りソースコードを読まない
• コンテキストウィンドウをクリーンに保つ
• スクリプトは複雑なワークフローを確実に処理

networkidleを待機

動的アプリケーションに重要:

page.wait_for_load_state('networkidle')

DOMを検査したり要素と対話する前に待機します。

sync_playwrightを使用

同期テストスクリプト用:

• 書きやすく、デバッグしやすい
• 明確な順次フロー
• シンプルなエラー処理

適切なブラウザクリーンアップ

完了時に常にブラウザを閉じる:

browser.close()

適切な待機を追加

必要に応じて要素またはタイムアウトを待機:

page.wait_for_selector('#element-id')
page.wait_for_timeout(1000)  # ミリ秒

決定ツリー

ユーザータスク → 静的HTMLですか?
    ├─ はい → HTMLファイルを直接読み取ってセレクタを識別
    │         ├─ 成功 → セレクタを使用してPlaywrightスクリプトを書く
    │         └─ 失敗/不完全 → 動的として扱う(以下)
    │
    └─ いいえ(動的webapp) → サーバーはすでに実行中ですか?
        ├─ いいえ → 実行: python scripts/with_server.py --help
        │        次にヘルパーを使用+簡略化されたPlaywrightスクリプトを書く
        │
        └─ はい → 偵察後アクション:
            1. ナビゲートしてnetworkidleを待機
            2. スクリーンショットを取るかDOMを検査
            3. レンダリングされた状態からセレクタを識別
            4. 発見されたセレクタでアクションを実行

よくある落とし穴

動的アプリでnetworkidleを待つ前にDOMを検査しない:

# ❌ 間違い
page.goto('http://localhost:3000')
page.content()  # 部分的/不完全なコンテンツを取得する可能性

# ✅ 正しい
page.goto('http://localhost:3000')
page.wait_for_load_state('networkidle')
page.content()  # 完全にレンダリングされたコンテンツを取得

参照ファイル

examples/ディレクトリにあります:

• element_discovery.py: ページ要素の発見
• statichtmlautomation.py: 静的HTMLファイルのテスト
• console_logging.py: コンソール出力のキャプチャ

まとめ

WebApp Testing Skillは、ClaudeがPlaywrightを使用してローカルWebアプリケーションを効果的にテストし対話できるようにします。サーバーライフサイクル管理、偵察後アクションパターン、包括的な例を通じて、このスキルはテスト、デバッグ、フロントエンド機能の検証のための信頼性の高い自動化スクリプトを簡単に書けるようにします。