[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 mswjs/msw#1617 to be merged, but would be great if this was provided by Playwright. It also comes in handy with component testing: #19399 (comment)

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