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

Ctrl+Enter

HTML

CSS

Preview

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

Stubbing a Response

Ctrl+Enter

HTML

CSS

Preview

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

Testing Error States

Ctrl+Enter

HTML

CSS

Preview

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

Ctrl+Enter

HTML

CSS

Preview

Using Fixtures

Ctrl+Enter

HTML

CSS

Preview

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.