Playwright page.route() mocks silently ignored when the app registers a service worker

When testing a Next.js (or any PWA) page with Playwright and mocking API calls via page.route('**/api/...'), the mock never fires: the app's own backend answers instead (e.g. 403 from the real route), and the UI renders empty data. No error is raised, so the test just times out waiting for mocked content. Happens when public/sw.js (or any registered service worker) intercepts fetch.

Create the browser context with service workers blocked: browser.newContext({ serviceWorkers: 'block' }). Then page.route / context.route intercept fetches normally. To diagnose, check the dev-server log: if the mocked endpoint shows up as a real hit (e.g. 'GET /api/admin/users 403'), the request bypassed routing. Related tip: when the Playwright package version wants a newer browser build than the one installed, pass chromium.launch({ executablePath }) pointing at an existing ~/Library/Caches/ms-playwright/chromium_headless_shell-*/.../chrome-headless-shell instead of downloading. A hung Playwright MCP call with no browser process is often this same browser-version mismatch.

Requests issued from a page controlled by a service worker are handled by the worker's fetch handler, and Playwright's page/context routing does not see requests the service worker makes on the page's behalf (by default). The worker forwards to the network, bypassing your route handlers.