Playwright integration or runtime overrides solution

[kristojorg]

Hi all, I am wondering if anyone has a working example of using MSW with Playwright and enabling runtime handler overrides? I have previously had this working using playwright-msw, but that library appears to be unmaintained and has stopped working for me. I have also taken a look at various examples such at the remix example, but none of the example I could find actually use runtime overrides.

I have seen @kettanaito mention that runtime overrides can be enabled by exposing msw on the window object of the app, then using page.evaluate(() => { msw.worker.use(...) }) in a test. However, the service worker is not registered until the page runs, at which point my application is also already making network requests I would like to mock.

The playwright-msw package avoided this issue by transforming msw handlers into Playwright's Page.route() format. Playwright is then using the Chrome Devtools protocol to intercept requests rather than setting up a service worker, which means the handlers can be registered before the page is actually requested or loaded.

I'm wondering if anyone has found a working solution to this? If not, shall we open a discussion about how MSW could integrate directly with playwright?

[kettanaito]

Hi, @kristojorg.

However, the service worker is not registered until the page runs, at which point my application is also already making network requests I would like to mock.

This sounds like a culprit. I recommend integrating MSW in your app, not the test, so your app never renders until the service worker is up and running (see this). This integration is recommended for a reason, precisely to eliminate the race conditions like the one you're experiencing.

Once that's covered, you can expose window.msw and provide runtime handler overrides. We use this pattern extensively to test MSW itself. Take a look at the /test/browser directory for inspiration.

In the future, I would like to utilize #1617 to make it easier to affect network behaviors in a different process (since your PW test and the browser are two different processes).