mcpField
P
playwright-network-chaos-mcp

playwright-network-chaos-mcp

Local
github.com/vola-treblaDeveloper Tools1Updated 23w ago

About playwright-network-chaos-mcp

playwright-network-chaos-mcp is an MCP server for Playwright browser sessions, letting AI agents simulate network failures and inspect application behavior in tests. It covers latency, disconnects, blocked resources, corrupted responses, and recovery after failures.

Key features

  1. 01Simulate API status-code failures
  2. 02Inject latency and check loading states
  3. 03Block selected network resources
  4. 04Simulate disconnects and system errors
  5. 05Test retries and corrupted responses
  6. 06Assert failure-handling outcomes

Use cases

  1. 01Verify checkout behavior when the payment API fails
  2. 02Check skeleton loaders under slow API responses
  3. 03Confirm core content works with analytics blocked
  4. 04Test retries and recovery after request failures

MCP support

The MCP server gives AI agents tools to control network behavior in Playwright sessions, including injecting failures, intercepting requests, and asserting whether the application handles failures.

Configuration

Local server config is the same for every client. Copy it into your client’s MCP config file.

mcp.json · Universal config
{
"mcpServers": {
"vola-trebla-playwright-network-chaos": {
"command": "npx",
"args": [
"-y",
"playwright-network-chaos-mcp"
]
}
}
}
Run commandnpx -y playwright-network-chaos-mcp

Local servers need a runtime on your machine (e.g. Node.js 18+). Config file locations differ by client; see your client’s docs.

Packages
npmplaywright-network-chaos-mcp0.2.1

Tools

8

Saved tool list · updated 2w ago

ParameterTypeRequiredDescription
urlstringYesURL of the page to test
wait_msintegerNoMilliseconds to wait after navigation before checking the fallback (default: 2000)
viewportobjectNoViewport size (default: 1280×720)
viewport.widthintegerYesViewport width in px
viewport.heightintegerYesViewport height in px
status_codeintegerNoHTTP error status code to return (default: 503)
response_bodystringNoResponse body to return for intercepted requests
fallback_selectorstringNoCSS selector for the fallback UI that should appear (e.g., '.error-boundary')
intercept_patternstringYesGlob pattern for requests to intercept (e.g., '**/api/payment**')

Details

From the project README

playwright-network-chaos-mcp 🐸💥

npm version npm downloads CI License: MIT

An MCP server that gives AI agents dynamic network chaos control over 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.


🤔 The Problem

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-mcp fixes that.


🛠️ Tools

simulate_api_failure

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

inject_latency

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
}

block_resources

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

simulate_network_drop

Aborts requests mid-flight after a delay — simulating connection loss between request and response.

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

Aborts requests with an OS-level error code — simulating DNS failures, firewall blocks, and connection resets.

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

Fails the first N requests then lets subsequent ones succeed — testing retry logic and recovery flows.

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

Serves malformed responses at the protocol level — unterminated JSON, content-length lies, or truncated payloads.

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

Injects a chaos HTTP status and returns a structured pass/fail verdict — chaos_survived is true only when the fallback UI appears and there are no unhandled JS exceptions.

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

🚀 Installation

npx playwright-network-chaos-mcp

Or install globally:

npm install -g playwright-network-chaos-mcp
npx playwright install chromium
Claude Desktop config
{
  "mcpServers": {
    "playwright-network-chaos-mcp": {
      "command": "npx",
      "args": ["-y", "playwright-network-chaos-mcp"]
    }
  }
}

💡 Example Agent Prompts

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


🔗 Related Projects


📄 License

MIT © vola-trebla

Comments

Markdown supported

New to MCP?

From what the protocol is to installing your first server, these answers cover most first questions.

An open protocol that defines how AI applications connect to external tools and data in a uniform way. Clients talk to the model; MCP servers provide tools, resources and prompt templates. They exchange standard messages, so one server can be reused by many clients.