Network Stubbing & Intercepts — Cypress End-to-End Testing | Sabaoon Academy

cy.intercept() lets you observe, modify, or mock any network request the browser makes. This is one of Cypress's most powerful features — you can test loading states, error handling, and edge cases without needing a real backend.

Watching a Request

cy.intercept('GET', '/api/users').as('getUsers')

cy.visit('/users')
cy.wait('@getUsers')           // pauses test until request completes
cy.get('table tbody tr').should('have.length.greaterThan', 0)

cy.wait('@alias') gives you the actual request and response objects for assertions.

Stubbing a Response

cy.intercept('GET', '/api/products', {
  statusCode: 200,
  body: [
    { id: 1, name: 'Widget', price: 9.99 },
    { id: 2, name: 'Gadget', price: 24.99 },
  ],
}).as('getProducts')

cy.visit('/products')
cy.wait('@getProducts')
cy.get('[data-cy="product-name"]').should('have.length', 2)

The real API never gets called — Cypress returns your fixture immediately.

Testing Error States

cy.intercept('POST', '/api/login', {
  statusCode: 401,
  body: { error: 'Invalid credentials' },
}).as('failedLogin')

cy.get('#email').type('user@test.com')
cy.get('#password').type('wrongpass')
cy.get('[data-cy="submit"]').click()
cy.wait('@failedLogin')

cy.get('.error-msg').should('contain', 'Invalid credentials')

Without stubbing, reproducing error states requires a real failing API.

Network Intercept Visualiser

Request intercept simulation

Ctrl+Enter

HTML

CSS

* { box-sizing: border-box; }
body { font-family: sans-serif; padding: 1.25rem; background: #f9fafb; }
h2 { font-size: 1rem; margin-bottom: 1rem; }
.flow { display: flex; flex-direction: column; gap: 0.375rem; margin-bottom: 1rem; }
.step {
display: flex; align-items: center; gap: 0.75rem;
padding: 0.4rem 0.875rem; border: 1px solid #e5e7eb; background: white; font-size: 0.8rem;
}
.step .dot { width: 8px; height: 8px; border-radius: 50%; background: #d1d5db; flex-shrink: 0; }
.step.active .dot { background: #f59e0b; }
.step.done-real .dot { background: #2563eb; }
.step.done-stub .dot { background: #16a34a; }
button { margin-right: 0.5rem; padding: 0.4rem 1rem; background: #1e293b; color: white; border: none; cursor: pointer; font-size: 0.8rem; }
.response { margin-top: 0.75rem; padding: 0.5rem 0.875rem; font-size: 0.78rem; font-family: monospace; }
.response.real { background: #eff6ff; border: 1px solid #bfdbfe; color: #1e40af; }
.response.stub { background: #f0fdf4; border: 1px solid #bbf7d0; color: #166534; }

var realSteps = [
'cy.intercept("GET", "/api/products") — listener registered',
'cy.visit("/products") — page loads',
'Browser fires GET /api/products → real server',
'Server responds (200ms+ latency)',
'cy.wait("@getProducts") resolves',
];

var stubSteps = [
'cy.intercept("GET", "/api/products", fixture) — stub registered',
'cy.visit("/products") — page loads',
'Browser fires GET /api/products → Cypress intercepts',
'Cypress returns fixture immediately (0ms)',
'cy.wait("@getProducts") resolves',
];

var container = document.getElementById('flow');

function render(steps, doneClass) {
container.innerHTML = '';
steps.forEach(function(s, i) {
  var div = document.createElement('div');
  div.className = 'step';
  div.id = 'st' + i;
  div.innerHTML = '<div class="dot"></div><span>' + s + '</span>';
  container.appendChild(div);
});

var i = 0;
document.getElementById('realBtn').disabled = true;
document.getElementById('stubBtn').disabled = true;

function tick() {
  if (i >= steps.length) {
    document.getElementById('realBtn').disabled = false;
    document.getElementById('stubBtn').disabled = false;
    return;
  }
  document.getElementById('st' + i).classList.add(doneClass);
  console.log('→ ' + steps[i]);
  i++;
  setTimeout(tick, 500);
}
tick();
}

document.getElementById('realBtn').onclick = function() {
var resp = document.getElementById('response');
resp.style.display = 'block';
resp.className = 'response real';
resp.textContent = 'Real network call — depends on server availability, latency, data state';
render(realSteps, 'done-real');
};

document.getElementById('stubBtn').onclick = function() {
var resp = document.getElementById('response');
resp.style.display = 'block';
resp.className = 'response stub';
resp.textContent = 'Stubbed — instant, deterministic, no server required ✓';
render(stubSteps, 'done-stub');
};

Preview

Dynamic Route Matching

// Match any product ID
cy.intercept('GET', '/api/products/*', (req) => {
  req.reply({
    statusCode: 200,
    body: { id: req.url.split('/').pop(), name: 'Mocked Product' },
  })
})

// Modify real response
cy.intercept('GET', '/api/user', (req) => {
  req.continue((res) => {
    res.body.role = 'admin'   // inject a field into the real response
  })
})

Using Fixtures

// cypress/fixtures/products.json
[
  { "id": 1, "name": "Widget" },
  { "id": 2, "name": "Gadget" }
]

cy.intercept('GET', '/api/products', { fixture: 'products.json' }).as('getProducts')

Fixtures keep test data out of test files and make it easy to share across tests.