Reproduce browser and network bugs

Browser & Network Reproduction

When to Use

Use when reproducing web UI bugs, broken interactions, SPA navigation glitches, hydration mismatches, stale cache issues, CORS/cookie failures, or slow/flaky network behavior.

Six Frontend & Browser Triggers to Inspect

1. Navigation History & SPA Lifecycle vs. Hard Reload

Many frontend bugs only happen on a specific navigation path:

• Test Deep Link / Direct URL Load (F5) vs. Client-Side SPA Transition (router.push $\rightarrow$ Back button $\rightarrow$ Forward button).
• Check unmounted component cleanup: rapidly switching tabs or routes while an async fetch or animation is still in flight often triggers state updates on stale/unmounted closures or leaves orphaned event listeners and modal backdrops.

2. Client Storage, Cookies & Cache State

• Inspect and snapshot localStorage, sessionStorage, IndexedDB, cookies (SameSite, Secure, HttpOnly, path/domain scope), and Service Worker caches before clearing anything.
• Test corrupted or legacy client storage: seed localStorage with an older schema shape or an expired JWT token to reproduce startup crashes that never happen in a fresh Playwright context.
• Test HTTP caching interactions: 304 Not Modified, stale ETag, or aggressive Cache-Control headers serving outdated JS chunks after a deployment (ChunkLoadError).

3. Network Conditions, Out-of-Order Responses & Partial Failures

Use Playwright page.route(...) or network shaping to reproduce network-induced UI bugs deterministically:

• Out-of-Order Responses (Stale Search/Filter Race):
  • User types "a" (request 1 takes 800ms), then "ab" (request 2 takes 100ms). When request 1 resolves last, does it overwrite the UI with stale "a" results?
  • Reproduce deterministically by holding Request 1 on a Deferred promise until after Request 2 completes.
• Slow / Dropped Connections & Chunked Streams:
  • Simulate slow 3G latency, mid-stream SSE/WebSocket disconnect, 429 Too Many Requests, 502 Bad Gateway, or CORS preflight (OPTIONS) rejection.

4. Viewport, Zoom, Input Mode & Browser Engine Differences

• Check viewport breakpoints (mobile 375x667 vs. desktop 1440x900), browser zoom (200%), scroll container overflow, and touch vs. mouse/keyboard focus order (focusin/blur vs. click timing).
• Check browser engine specifics (Chromium vs. WebKit/Safari date parsing, flexbox/grid subpixel rounding, 100vh vs. 100dvh, clipboard/autofill events).

5. Console, PageError & Network HAR Evidence Capture

In automated Playwright reproduction scripts, attach listeners before executing steps:

• page.on('pageerror', ...) for uncaught exceptions.
• page.on('console', ...) for framework warnings, hydration errors, and CSP violations.
• page.on('response', ...) for failed >= 400 API responses and exact response bodies.