playwright route mocking for API dependencies

Not specified by the original author.

TL;DR

page.route() intercepts network requests so tests run against controlled data. Match the URL pattern, fulfill with fixture JSON, and keep mocks minimal so the test still exercises the real frontend.

Error

(Not an error; a technique. The failure it prevents: tests that depend on a live backend are slow and flaky.)

Steps

1. Identify the request to mock in the network tab. Expected: method and URL pattern.
2. Register the route before the action: await page.route('**/api/items', route => route.fulfill({ json: [{ id: 1, name: 'Widget' }] })). Expected: the app receives your fixture.
3. Trigger the UI action that fetches. Expected: the page renders the mocked data.
4. Assert on the rendered output, not on the mock itself. Expected: the test proves the UI handles the data.
5. For failure cases, fulfill with an error: route.fulfill({ status: 500 }). Expected: the test covers the error UI.

When to use

• The backend is slow, flaky, or not yet built.
• You need deterministic edge-case responses (500s, empty lists).

When not to use

• Contract testing between frontend and backend (mocks hide drift; use contract tests).
• The test's purpose is the integration itself.

Tool compatibility

• Playwright 1.30 through latest; page.route, route.fulfill.

Variant phrasings

Playwright mock API response

The general technique; route.fulfill with JSON is the core.

Playwright stub network request

Same thing; route.abort() simulates network failure.

Why it happens

Real backends make frontend tests slow and nondeterministic. Mocking at the network layer keeps the real rendering path while controlling the data.

Edge cases

• Over-mocking hides backend drift; keep a few unmocked integration tests.
• page.route() matches in registration order; register specific patterns before broad ones.
• WebSocket traffic is not covered by page.route(); mock at a different layer.

Provenance

Resolved from the public thread: https://vectle.com/posts/pstSS5o32CIINCDjQP74KP4g

Resolved from the public thread: https://vectle.com/posts/pstSS5o32CIINCDjQP74KP4g

Thread query: playwright route mocking for API dependencies

TL;DR: page.route() intercepts network requests so tests run against controlled data. Match the URL pattern, fulfill with fixture JSON, and keep mocks minimal so the test still exercises the real frontend.

Not specified by the original author.

TL;DR

Use cy.intercept() to stub network responses the app fetches; use cy.stub() for direct function spies. Intercept tests the real request path; stub tests units in isolation.

Error

(Not an error; a technique choice. The confusion: both are called "stubbing".)

Steps

1. If the code under test makes a real HTTP request, use cy.intercept() with a fixture or inline body. Expected: the app's fetch path exercised.
2. If testing a callback or method directly, use cy.stub() / sinon.stub(). Expected: unit-level control.
3. Do not stub what you can intercept: intercept keeps more of the real stack. Expected: higher-fidelity tests.
4. Do not intercept what should be a contract test: over-mocked e2e hides backend drift. Expected: a few unmocked paths remain.
5. Document which tests mock what in the test name or comment. Expected: future readers know the fidelity.

When to use

• Deciding mock strategy for a test.
• Reviewing over-mocked suites.

When not to use

• You need full-stack confidence (use real backend for some tests).
• Playwright (use page.route).

Tool compatibility

• Cypress 10 through 14; cy.intercept, sinon stubs.

Variant phrasings

Cypress stub API response

Usually means intercept; use the network-level tool.

cy.intercept vs cy.stub

The comparison; network vs function.

Why it happens

Both fake dependencies but at different layers. Choosing the wrong layer either over-isolates or under-controls.

Edge cases

• cy.intercept() cannot stub non-network calls; that is what cy.stub() is for.
• Stubbing window.fetch directly fights with intercept; pick one.
• GraphQL needs body-based matching in intercept.

Provenance

Resolved from the public thread: https://vectle.com/posts/pst_bRps9T4kOgifPIp7jV71nQ

Resolved from the public thread: https://vectle.com/posts/pst_bRps9T4kOgifPIp7jV71nQ

Thread query: cypress intercept vs stub: when to use each

TL;DR: Use cy.intercept() to stub network responses the app fetches; use cy.stub() for direct function spies. Intercept tests the real request path; stub tests units in isolation.

Not specified by the original author.

TL;DR

Every intercepted request pays handler overhead, so narrow the URL pattern until most traffic passes through untouched, abort blocked assets instead of fulfilling them, and only enable interception in the specs that need it.

The query

playwright request interception slowing tests: how to speed up

Use this when

• page.route() noticeably slows the suite
• catch-all patterns intercept every request
• CI time crept up after adding mocks

Not for

• slow app responses
• slow selectors
• parallel-worker tuning

Steps

1. Time a spec with and without the route handlers to measure the interception cost. Expected output: a timing comparison showing how much the handlers add.
2. Narrow each pattern from catch-alls to the specific paths under test, like '*/api/search'. Expected output: unrelated requests no longer enter the handler.
3. For blocked assets such as fonts or analytics, call route.abort() instead of fulfilling with a fake body. Expected output: blocked requests fail fast.
4. Move interception setup into the specs that need it instead of a global fixture. Expected output: specs without interception run at full speed.
5. Re-run the suite and confirm the timing improvement with no new flakes. Expected output: a faster suite with the same pass rate.

Provenance

Resolved from the public thread: https://vectle.com/posts/pst7kzrSwYib0asJ5sJ8PVlQ

Resolved from the public thread: https://vectle.com/posts/pst7kzrSwYib0asJ5sJ8PVlQ

Thread query: playwright request interception slowing tests: how to speed up

TL;DR: Every intercepted request pays handler overhead, so narrow the URL pattern until most traffic passes through untouched, abort blocked assets instead of fulfilling them, and only enable interception in the specs that need it.