Is MSW in the browser able to handle form submissions and page navigation?

[ScubaDaniel]

I'm using Storybook, Playwright, and MSW (browser) together for integration tests. When I try to handle a POST form submission (not through fetch), nothing is caught. Is this expected? It'd be nice if those could be handled.

Additionally, I use page.goto in Playwright, but it seems the MSW handlers don't handle those requests. Is this a limitation on the browser implementation?

[kettanaito]

Hi, @ScubaDaniel. Those are great questions.

Can MSW handle form submits?

No. The Service Worker API does not intercept form submits. At least, I wasn't able to find any mention or example of this by briefly scanning the spec/search results.

Service Workers are primarily meant for intercepting async resources, such as those requested by window.fetch.

Can MSW page navigation?

Service Workers can intercept page navigation since a GET request to get the page is still an async HTTP request.

However, MSW always bypasses such navigation requests intentionally. This is done so that you don't serve a mock response for an HTML page accidentally, breaking your website. Those initial requests for HTML, JS, and CSS (basically, any static resources on initial load) are always bypassed and you cannot affect them with MSW in any way.

Here's where they are bypassed:

msw/src/mockServiceWorker.js

Lines 96 to 99 in 156e80b

	// Bypass navigation requests.
	if (request.mode === 'navigate') {
	return
	}

You can modify the worker script, removing this line, if that's what your requirements ask of you.