playwright-network-chaos-mcp

Dynamic network chaos in Playwright: 503s, latency, mid-flight drops

An MCP server that gives AI agentsdynamic network chaos controlover Playwright browser sessions.

Your tests run on perfect networks. Your users don't. This MCP lets AI agents simulate API outages, inject latency, drop connections mid-flight, and block third-party resources — then assert whether the app handles it gracefully.

CI environments have flawless connectivity. APIs respond in milliseconds. CDNs never go down. So your tests pass — and then production breaks when the payment service returns a 503, the network drops mid-checkout, or Google Analytics hangs for 8 seconds and freezes the page.

AI agents writing Playwright tests have no way to introduce or reason about network instability. They can't ask:

- 🙈Does the checkout page show an error state when the payment API fails?
- 🙈Does the skeleton loader appear while the dashboard API is slow?
- 🙈Does the app still work if all tracking scripts are blocked?
- 🙈What happens if the network drops after the order is submitted but before the response arrives?

playwright-network-chaos-mcpfixes that.

Intercepts requests matching a pattern and forces them to return an error status code. Checks if the app shows a fallback 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"] } }

Adds artificial delay to matching requests. Checks if loading states appear while the app waits.

{ "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 }

Aborts requests to specified URL patterns — for testing third-party outages (analytics, CDNs, tracking pixels).

{ "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": [] } }

{ "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"] } }

{ "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"] } }

{ "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 }

{ "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"] } }

{ "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 }

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

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

"Check if the checkout page shows a proper error state when the payment API returns 503"

"Simulate a 3 second API delay on the dashboard and verify the skeleton loader appears"

"Block all analytics and tracking scripts and confirm the main content still loads"

"Drop the order submission request mid-flight and check if the user sees an error message"

"Simulate DNS failure for the API and check if the error boundary renders"

"Fail the first 3 requests then succeed — does the app retry and recover automatically?"

"Inject malformed JSON and assert the app doesn't crash — return a chaos verdict"*

- playwright-trace-decoder-mcp— root-cause analysis of CI failures from Playwright traces
- flakiness-knowledge-graph-mcp— knowledge graph of flaky test patterns
- ast-impact-mapper-mcp— find affected tests from code changes via TypeScript AST
- zod-contract-mock-forge-mcp— deterministic mock generation from Zod schemas
- playwright-spatial-layout-mcp— geometric spatial awareness of web layouts

Build and deploy full-stack Next.js apps with 98 tools for React, AWS, and MongoDB