[Feature]: Add Server Side mocking

[Romarionijim]

🚀 Feature Request

What I would like to see and experience is for playwright to allow pure server side mocking in addition to the existing client side api mocking via routes - similar to Nock and Jest. With one command we can intercept the request of the backend api and then re-use the intercepted request in our tests to assert the mocked response data. We mock the endpoint once and re use across different tests in the same file.

Example

import {serverSideMock as mock} from '@playwright/test'

const scope = mock('https://pokeapi.co/api/v2')
 .get('/pokemon')
 .reply(200,{
    count:3000,
    next:"https://pokeapi.co/api/v2/pokemon?offset=20&limit=20",
    previous:"Random",
    results: [
        { name: 'fake1', url: 'https://pokeapi.co/api/v2/pokemon/1/' },
        { name: 'fake2', url: 'https://pokeapi.co/api/v2/pokemon/2/' },
        ],
    })

test('mock pokemon API response and assert count is 3000',{tag:['@POKE']}, async({request}) => {
  const response = await request.get(url);
  const resObj = await response.json();
  expect(resObj.count).toBe(3000)
})

test('mock should fail due to count mismatch',{tag:['@POKE']}, async({request}) => {
  const response = await request.get(url);
  const resObj = await response.json();
  expect(resObj.count).toBe(1500)
})

Motivation

Motivation is to complement Playwright and make it a real full stack test automation and not just UI - it already supports api testing and mocking, but mocking for the client side is not enough if we are working on a Rest API automation project using playwright - by adding the server side mocking, we Don't need to use other frameworks or libraries. we'll have one automation framework that provides a full stack solution for both the frontend UI and the backend.

[mxschmitt]

Great feature request! Some initial questions which help us to prioritise: Are you using a Meta-Framework like Next/Nuxt/SvelteKit/Remix etc? Are you using MSW? Are you using fetch() in the backend?

[sand4rt]

Great feature request! Some initial questions which help us to prioritise: Are you using a Meta-Framework like Next/Nuxt/SvelteKit/Remix etc? Are you using MSW? Are you using fetch() in the backend?

I'm using those meta frameworks on and off and i was looking for this feature too. Currently waiting for https://github.com/mswjs/msw/pull/1617 to be merged, but would be great if this was provided by Playwright. It also comes in handy with component testing: https://github.com/microsoft/playwright/issues/19399#issuecomment-1642171000

[Romarionijim]

@mxschmitt the frameworks that are used at the company I work at is Nest js for the backend and Angular on the frontend. I saw nock was being used for mocking.

[kennethvdberghe]

I would love to get this working for my Remix apps!

[david-mambou]

I second this too.

[alestuber]

I can't stress enough how much this is needed! I'm loosing hours here trying to see how I can mock API request in my nextjs app.

I just upgraded the app from version 13 to 14 and now I'm installing another libraries and configurations to make this possible.

It should be as simple as route.fulfill() but for the backend... currently it's too much trouble for something almost any application that connects in a back-end API would need.

[mmersiades]

Great feature request! Some initial questions which help us to prioritise: Are you using a Meta-Framework like Next/Nuxt/SvelteKit/Remix etc? Are you using MSW? Are you using fetch() in the backend?

In my case, I'm using fetch() from Next.js server components / SSR pages

[esaari]

Upvote for this as well, it would be great to be able to use Playwright as a one-stop framework for all things testing. In my case, the application was using got.

[hammond756]

Very much wanted for me too! Without server side mocking I can't meaningfully scaffold my tests without coupling them to the data in my local/staging database.

I'm using NextJS and their extension of thefetch() api to call my backend services in server side components.