Cypress vs Playwright Advent Calendar Day 17

Stub the GET /todos network call

Our TodoMVC application loads the list of “todo” items by making the GET /todos network call on page load. Let’s control the data the page shows by stubbing this network call rather than erasing the entire backend data using the POST /reset request.

Playwright stubbing the network call

const { test, expect } = require(’@playwright/test’)

import todos from ‘../fixtures/3-todos.json’

test(’stub GET /todos call’, async ({ page }) => {
  await page.route(’/todos’, (route) =>
    route.fulfill({
      headers: { ‘Content-Type’: ‘application/json’ },
      body: JSON.stringify(todos),
    }),
  )

  const getTodosPromise = page.waitForResponse(’**/todos’)
  await page.goto(’/’)
  // confirm the application made the GET /todos request
  await getTodosPromise
  // confirm the application is showing the stubbed todos
  await expect(page.locator(’.todo-list li’)).toHaveText(
    todos.map((t) => t.title),
  )
})

In Playwright the waiting for network calls (page.waitForResponse) and stubbing (page.route) them are two different operations. Here is the Pw UI showing the passing test, the app shows the loaded stub data.

Playwright stubs the GET /todos network call

Cypress stubbing the network call

Cypress uses the same command to spy on / stub network calls: cy.intercept. If you provide the mock data, the intercept is a stub. If you do not provide the mock data, the intercept is a spy.

import todos from ‘../../fixtures/3-todos.json’
import ‘cypress-map’

it(’stub GET /todos call’, () => {
  cy.intercept(’GET’, ‘/todos’, { body: todos }).as(’getTodos’)
  cy.visit(’/’)
  cy.wait(’@getTodos’)
  cy.get(’.todo-list li label’)
    .should(’read’, Cypress._.map(todos, ‘title’))
})

Note: to get all “todo” titles, we could have used “plain” JavaScript, but I wanted to show that Cypress bundles Lodash library which you can use to express common data transformations more conveniently.

Cypress data load stub test

The network calls are shown with other Cypress commands, the empty circle next to the GET /todos intercept means the call was stubbed.

This advent calendar is based on my online course “Cypress vs Playwright“ and open-source workshop bahmutov/cypress-workshop-cy-vs-pw. You can find links to the previous advent calendar days in my blog post “Cypress vs Playwright Advent Calendar 2025“.