Playwright MSW Vscode extension record test usage

[JoepKockelkorn]

Hi all,

We're using the createNetworkFixture method from @msw/playwright to run MSW together with Playwright. This works great. However, this setup calls worker.stop() under the hood which means that MSW stops intercepting requests once the test has run. This means we can't use the Playwright VSCode extension feature "Record at cursor" to extend an existing test, since MSW won't intercept any requests made when clicking in the UI during the Recording session.

Is this something that can be solved via a setting, or is this currently impossible without changes to @msw/playwright?

[kettanaito]

Hi, @JoepKockelkorn. That's interesting!

I was under the impression that PW doesn't run the cleanup hooks in the recording mode as the cleanup can generally render your app unusable. In the API mocking context, I agree with you that the mocks should continue to affect your app so you can interact with it and record those interactions in tests.

I wonder if PW provides any guidelines as to how to handle fixture cleanups in the context of "record at cursor". I recommend asking the Playwright team about that on GitHub/their Discord. I would be happy to follow their guidelines to make sure @msw/playwright operates as expected in the recording mode.

[JoepKockelkorn]

I'll forward the request to them, thanks.

To clarify, with regard to recording a test there are two options in VSCode:

• Record new
• Record at cursor

"Record new" generates a completely new test file with imports for test and expect from @playwright/test. This means no network fixture is used. So "Record new" is completely unusable in @msw/playwright context.

To use "Record at cursor" you can setup a test which mocks requests, then run it, then click "Record at cursor" so you can record one or more interactions up until the point that it triggers a request (which is no longer mocked since the cleanup already ran) and will thus "fail". Rerunning the test will then allow to use "Record at cursor" again because after a rerun, the request is properly mocked. So it's usable but requires some additional effort.

[JoepKockelkorn]

I've searched their Discord help-playwright channel and Playwright Github issues and some people kind of have the same issue, but no mentions specifically of @msw/playwright. For "Record new" to work there should be a setting to import test and expect from other paths than @playwright/test but there isn't. For "Record at cursor" to work without restarting every now and then there should be way to keep the test running but allow record, which turns out there is using await page.pause() mentioned here in the docs. So no, the default buttons of the VSCode extension won't do the trick, but a snippet for new tests using page.pause() will suffice.

[JoepKockelkorn]

Hmm, page.pause() doesn't actually pause the test when run from the VSCode extension.

[JoepKockelkorn]

Created a new issue for this: microsoft/playwright#37276