[Feature] Record network requests and save them as ready-to-use mocks

I’m using playwright for integration tests. And I can’t have a full environment for testing. So I mock api requests and test against them.

When I saw https://github.com/microsoft/playwright-cli/pull/194 this flow for authentication (which is super helpful, thank you), I thought it would be a great idea to generate code for network requests in a file and use them in specific tests (test by test basis in it("...") or beforeEach depending on the scenario.

In this case, I see it like so:

• Adding an option to the cli to save network requests to a given file (file name) like this npx playwright-cli --save-network-requests=flow_1_requests.json codegen
• Adding an API method in playwright to use a mock file or multiple files. This would allow to overwrite previous mocks if they are defined in two files. playwright.useMockFiles(context, ['path/to/flow_1_requests.json', 'path/to/flow_2_requests.json']). It takes the context and paths to mock files.

Same as https://github.com/microsoft/playwright-cli/issues/196

[kousenlsn]

Well, I ended up creating a lib if anyone ends up needing this while we don’t have an inside solution at Playwright itself.

https://github.com/kousenlsn/playwright-request-mocker

It records any network request (using recordHar), clears up the HAR file to only keep XHR requests (persisting into a new mock.json file), then automatically mocks everything following the mock file for any future runs.

Feel free to contribute or report any issues, it is quite green still.

[pavelfeldman]

This will ship as a part of 1.23. See https://playwright.dev/docs/next/network#record-and-replay-requests