Hard Mode Network Mocking Playground
Hard Mode
Hard Mode · Network interception

Network Mocking Playground

Everything on this page arrives over fetch from /playwright/api/orders.json. Your job in tests: own that wire with page.route(). Fulfill fake data, force a 500, abort the request, and assert the loading, empty, error, and offline states the UI already knows how to show.

2Real endpoints
5UI states
3sPolling interval
1Request log

Order feed

GET ./api/orders.json on load and on every reload or poll tick (cache-busted with a t= query).

You are offline (simulated). Requests are refused until you reconnect.

Request log

Every request the page makes, newest first. Assert against this after mocking.

0 requests

Drills

  1. Fulfill. Route **/api/orders.json* and fulfill with 2 fake orders of your own. Assert your names render and the row count is 2.
  2. Force a 500. Fulfill the same route with status 500 and assert the red error banner text.
  3. Abort. route.abort('internetdisconnected') and assert the error banner again, then remove the route, reload, and assert recovery to 6 rows.
  4. Empty state. Without touching the UI buttons, mock the response to {"orders":[]} and assert the empty illustration text.
  5. Polling. Enable polling, mock the route to return different data on the second call (route.fulfill with a counter), and assert the table changes between ticks without a reload click.
  6. Log assertions. Route the missing endpoint to route.fulfill({ status: 500 }), click the missing-endpoint button, and assert the newest log row shows 500 (plus page.waitForResponse as backup evidence). Unmocked, the button logs a real 404 on a local server, while this hosted site's SPA fallback answers 200 with HTML, which the feed rejects as not JSON: run it both ways and see.