Cypress vs Playwright Advent Calendar Day 10

Make a network call before each test to rest the backend data

The best measure of E2E automation in my opinion is how well it can control the backend data before the test even starts. In my example TodoMVC application the data comes from the backend via REST API interface implemented using json-server. During “test” or “dev” mode I include the special plugin json-server-reset that adds one more endpoint: POST /reset where anyone can post an object that overwrites the current backend data. We can call this endpoint from our end-to-end tests to ensure each test starts with a clean slate.

Playwright makes a network call

Here is how Pw can make a network call using the injected APIRequestContext object

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

test.describe(’TodoMVC’, () => {
  // start each test with zero todos
  test.beforeEach(async ({ request }) => {
    await request.post(’/reset’, { data: { todos: [] } })
  })

  test(’starts with zero items’, async ({ page }) => {
    await page.goto(’/’)
    await page.locator(’body.loaded’).waitFor()
    // confirm there are zero todo items
    // using CSS selector for todo items
    await expect(page.locator(’.todo’)).toHaveCount(0)
  })
})

The test runs and we see zero “todo” items.

If you click on the “beforeEach” hook to see its commands, you can inspect the request and response in the request.post command

The test shows how to write suites of tests and hooks in Playwright: they are all methods of the imported “test” object

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

test.describe(’TodoMVC’, () => {
  test.beforeEach(async ({ request }) => {
    ...
  })

  test(’starts with zero items’, async ({ page }) => {
    ...
  })
})

Cypress makes a network call

Making a network request in Cypress is similarly simple, just use the cy.request command

describe(’TodoMVC’, () => {
  beforeEach(() => {
    // call a special testing endpoint our app uses
    // and reset all todos to an empty list
    cy.request(’POST’, ‘/reset’, { todos: [] })
  })

  it(’starts with zero items’, () => {
    cy.visit(’/’)
    cy.get(’body.loaded’)
    cy.get(’.todo’).should(’have.length’, 0)
  })
})

The test is green

You can click on the REQUEST command to see its details shown in the DevTools console

The Cypress test suites and the hook functions are global Mocha functions

describe(’TodoMVC’, () => {
  beforeEach(() => {
    ...
  })

  it(’starts with zero items’, () => {
    ...
  })
})

Loading Vs Zero Data

Important: not waiting for the application to load before checking the zero items is extremely common testing mistake. It confuses the application “loading” state with the “zero data” state. Read my blog post “Negative Assertions And Missing States” for more details.

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“.