playwright-network-chaos-mcp

playwright-network-chaos-mcp 🐸💥

AI エージェントに、Playwright のブラウザーセッションの動的なネットワークカオス制御を提供する MCP サーバーです。

テストは完璧なネットワーク上で実行されます。しかし、ユーザーが使うネットワークはそうではありません。この MCP を使うと、AI エージェントは API の停止をシミュレートし、遅延を発生させ、通信中に接続を切断し、サードパーティのリソースをブロックできます。そのうえで、アプリが適切に対処できるかを検証できます。

---

🤔 問題

CI 環境の接続は完璧です。API は数ミリ秒で応答します。CDN がダウンすることもありません。そのためテストは成功しますが、本番環境では決済サービスが 503 を返したり、チェックアウト中にネットワークが切断されたり、Google Analytics が 8 秒間ハングしてページがフリーズしたりすると、問題が起きます。

Playwright テストを作成する AI エージェントには、ネットワークの不安定さを再現したり、それについて考察したりする手段がありません。次のような質問をすることができません。

• 🙈 決済 API が失敗したとき、チェックアウトページにエラー状態が表示されますか？
• 🙈 ダッシュボード API の応答が遅いとき、スケルトンローダーが表示されますか？
• 🙈 すべてのトラッキングスクリプトがブロックされても、アプリは動作しますか？
• 🙈 注文を送信した後、応答が届く前にネットワークが切断されたら、どうなりますか？

playwright-network-chaos-mcp は、この問題を解決します。

---

🛠️ ツール

simulate_api_failure

パターンに一致するリクエストをインターセプトし、エラーステータスコードを返すよう強制します。アプリにフォールバック UI が表示されるかを確認します。

{
  "url": "https://your-app.com/checkout",
  "intercept_pattern": "**/api/payment**",
  "status_code": 503,
  "fallback_selector": ".error-boundary",
  "wait_ms": 2000
}

{
  "intercepted_count": 2,
  "fallback_found": true,
  "fallback_selector": ".error-boundary",
  "page_state": {
    "page_errors": [],
    "console_errors": ["Failed to load resource: 503"]
  }
}

---

inject_latency

一致するリクエストに人工的な遅延を加えます。アプリの待機中にローディング状態が表示されるかを確認します。

{
  "url": "https://your-app.com/dashboard",
  "intercept_pattern": "**/api/**",
  "latency_ms": 3000,
  "jitter_ms": 500,
  "loading_selector": ".skeleton-loader"
}

{
  "intercepted_count": 4,
  "intercepted_requests": [
    { "url": "https://api.your-app.com/users", "method": "GET", "delay_ms": 3241 }
  ],
  "loading_state_found": true,
  "load_time_ms": 3890
}

---

block_resources

指定された URL パターンへのリクエストを中断します。サードパーティの停止（アナリティクス、CDN、トラッキングピクセル）のテストに使えます。

{
  "url": "https://your-app.com",
  "block_patterns": ["**/analytics**", "*.doubleclick.net/**", "**/hotjar**"],
  "core_content_selector": ".main-content",
  "wait_ms": 2000
}

{
  "blocked_count": 7,
  "blocked_urls": ["https://www.google-analytics.com/analytics.js", "..."],
  "core_content_found": true,
  "page_state": { "page_errors": [], "console_errors": [] }
}

---

simulate_network_drop

遅延後に通信中のリクエストを中断し、リクエストから応答までの間に接続が失われる状況をシミュレートします。

{
  "url": "https://your-app.com/checkout",
  "intercept_pattern": "**/api/order**",
  "drop_after_ms": 800,
  "fallback_selector": ".network-error-toast",
  "wait_ms": 3000
}

{
  "intercepted_count": 1,
  "fallback_found": true,
  "fallback_selector": ".network-error-toast",
  "page_state": { "page_errors": ["TypeError: Failed to fetch"] }
}

---

trigger_system_network_error

OS レベルのエラーコードでリクエストを中断し、DNS 障害、ファイアウォールによるブロック、接続のリセットをシミュレートします。

{
  "url": "https://your-app.com/dashboard",
  "intercept_pattern": "**/api/**",
  "error_code": "addressunreachable",
  "fallback_selector": ".network-error"
}

{
  "error_code": "addressunreachable",
  "intercepted_count": 3,
  "fallback_found": true,
  "page_state": { "page_errors": [], "console_errors": ["net::ERR_ADDRESS_UNREACHABLE"] }
}

---

simulate_stateful_failure

最初の N 件のリクエストを失敗させ、その後のリクエストは成功させます。再試行ロジックと復旧フローをテストできます。

{
  "url": "https://your-app.com/dashboard",
  "intercept_pattern": "**/api/data**",
  "http_status": 503,
  "failure_count": 2,
  "success_payload": "{\"data\":[]}",
  "fallback_selector": ".retry-button"
}

{
  "failure_count": 2,
  "actual_failed": 2,
  "actual_succeeded": 1,
  "intercepted_requests": [
    { "url": "...", "method": "GET", "status": 503, "attempt": 1, "outcome": "failed" },
    { "url": "...", "method": "GET", "status": 200, "attempt": 3, "outcome": "passed" }
  ],
  "fallback_found": true
}

---

inject_response_corruption

プロトコルレベルで不正なレスポンスを返します。JSON の終端がない、content-length が実際と異なる、ペイロードが途中で切れているなどの状態を再現します。

{
  "url": "https://your-app.com/checkout",
  "intercept_pattern": "**/api/order**",
  "corruption_type": "malformed_json",
  "fallback_selector": ".parse-error"
}

{
  "corruption_type": "malformed_json",
  "intercepted_count": 1,
  "fallback_found": false,
  "page_state": { "page_errors": ["SyntaxError: Unexpected token u in JSON"] }
}

---

assert_chaos_handled

カオスを引き起こす HTTP ステータスを注入し、構造化された合否判定を返します。chaos_survived が true になるのは、フォールバック UI が表示され、未処理の JS 例外がない場合のみです。

{
  "url": "https://your-app.com/checkout",
  "intercept_pattern": "**/api/**",
  "http_status": 500,
  "expected_fallback_selector": ".error-boundary"
}

{
  "http_status": 500,
  "unhandled_exceptions": [],
  "console_errors": ["Failed to load resource: 500"],
  "fallback_ui_detected": true,
  "chaos_survived": true
}

---

🚀 インストール

npx playwright-network-chaos-mcp

または、グローバルにインストールします。

npm install -g playwright-network-chaos-mcp
npx playwright install chromium

Claude Desktop の設定

{
  "mcpServers": {
    "playwright-network-chaos-mcp": {
      "command": "npx",
      "args": ["-y", "playwright-network-chaos-mcp"]
    }
  }
}

---

💡 エージェントへのプロンプト例

「決済 API が 503 を返したとき、チェックアウトページに適切なエラー状態が表示されるか確認してください」

「ダッシュボードの API に 3 秒の遅延を発生させて、スケルトンローダーが表示されることを確認してください」

「すべてのアナリティクスとトラッキングスクリプトをブロックしても、メインコンテンツが読み込まれることを確認してください」

「注文送信リクエストを通信中に切断し、ユーザーにエラーメッセージが表示されるか確認してください」

「API の DNS 障害をシミュレートして、エラーバウンダリーが表示されるか確認してください」

「最初の 3 件のリクエストを失敗させ、その後成功させてください。アプリは自動的に再試行して復旧しますか？」

「不正な JSON を注入し、アプリがクラッシュしないことを確認して、カオス判定を返してください」

---

🔗 関連プロジェクト

• playwright-trace-decoder-mcp — Playwright のトレースから CI の失敗の根本原因を分析
• flakiness-knowledge-graph-mcp — 不安定なテストパターンのナレッジグラフ
• ast-impact-mapper-mcp — TypeScript AST を使ってコード変更の影響を受けるテストを特定
• zod-contract-mock-forge-mcp — Zod スキーマから決定論的にモックを生成
• playwright-spatial-layout-mcp — Web レイアウトの幾何学的な空間認識

---

📄 ライセンス

MIT © vola-trebla