Courier Dispatch Board · Request Interception
A board whose rows arrive over a real fetch() — the honest target for request mocking. Intercept /couriers.json and drive the UI with your own payload.
The board loads its rows over a real fetch. Intercept it and make the depot say anything.
Request Interception is a medium Network & Auth challenge on Fun UI Playground. A board whose rows arrive over a real fetch() — the honest target for request mocking. Intercept /couriers.json and drive the UI with your own payload. It runs entirely in the browser, with no backend. Every interactive element carries a stable id and data-testid prefixed with “network-intercept-”, and the techniques it exercises are request interception, route/network mocking, stub JSON responses, assert rendered data.
At a glance
- Category
- Network & Auth
- Difficulty
- medium
- Teaches
- request interception · route/network mocking · stub JSON responses · assert rendered data
- Backend
- None — runs entirely in the browser
- Locators
- Stable
idanddata-testid, prefixednetwork-intercept-
Selectors on this page
| Locator | What it is |
|---|---|
#network-intercept-refresh | On mount and on #network-intercept-refresh, the page does GET /couriers.json (a static file, so it works with no backend) |
#network-intercept-list [data-testid="network-intercept-row"] #network-intercept-row-1 #network-intercept-status | Rows render into #network-intercept-list as [data-testid="network-intercept-row"] (#network-intercept-row-1 …); load status is in #network-intercept-status |
#network-intercept-result | The resolved board state is summarized in #network-intercept-result |
Frequently asked questions
How do I mock a network response in a UI test?
Intercept GET /couriers.json — Playwright page.route, Cypress cy.intercept — and answer with your own payload. The page fetches it on mount and on #network-intercept-refresh, then renders [data-testid="network-intercept-row"] items into #network-intercept-list.
What should I assert after stubbing a response?
Assert what the UI did with it: the rows rendered, the load status in #network-intercept-status, and the summary in #network-intercept-result. Forcing an empty board or a 500 exercises the error path, which is the reason to mock in the first place.
More Network & Auth
- The Vault · Basic Auth
- The Dead Drop · Digest Auth
- Protocol Lab · Status Codes
- The Midnight Pass · Session Timeout
- The Concierge Desk · Cookies & Storage
- All Network & Auth challenges
Updated
Fun UI Playground — all challenges, bug hunts, getting started, glossary, about.