Q14 of 48 · Cypress
How does cy.intercept differ from cy.route (which is removed)?
Short answer
Short answer: `cy.intercept` is the modern network-handling API: it intercepts `fetch` *and* `XMLHttpRequest`, supports stubbing, spying, and dynamic per-request modification. `cy.route` (deprecated) only handled XHR, required `cy.server()`, and is removed in Cypress 12+.
Detail
cy.route was the original network helper, paired with cy.server(). It only intercepted XMLHttpRequest, which became insufficient as web apps moved to fetch. cy.intercept (introduced in 6.0, default since 7) replaced it.
Capabilities of cy.intercept:
- Both
fetchandXHR— works regardless of how the app makes requests. - Spying —
cy.intercept('GET', '/api/cart').as('cart')lets you wait on the request without modifying it. - Stubbing —
cy.intercept('GET', '/api/cart', { fixture: 'cart.json' })returns a fixture instead of hitting the network. - Dynamic modification —
cy.intercept('POST', '/api/orders', (req) => { req.reply({ statusCode: 500 }) })lets you alter requests/responses programmatically. - Per-request matchers — match on URL pattern, method, headers, query string, body.
Aliasing with .as('name') lets you wait on the request: cy.wait('@cart'). The yielded interception object has .request and .response for assertions on either side.
Migration from cy.route is mostly mechanical: drop cy.server(), change cy.route to cy.intercept, and drop the response-method shorthand (cy.intercept has different argument shape).
// EXAMPLE
intercept.cy.ts
// Spy — observe but don't modify
cy.intercept('GET', '/api/cart').as('cartLoad');
cy.visit('/cart');
cy.wait('@cartLoad').its('response.statusCode').should('eq', 200);
// Stub with a fixture
cy.intercept('GET', '/api/cart', { fixture: 'cart-with-3-items.json' });
// Stub with inline body
cy.intercept('GET', '/api/cart', {
statusCode: 200,
body: { items: [], total: 0 },
});
// Dynamic — modify based on request
cy.intercept('POST', '/api/orders', (req) => {
if (req.body.userId === 'flaky-user') {
req.reply({ statusCode: 500, body: { error: 'simulated' } });
} else {
req.continue();
}
});
// Assert on the captured request
cy.wait('@cartLoad').then(({ request }) => {
expect(request.headers).to.have.property('authorization');
});