feat: isolate parent and child frames when handling requests (#2324)

src/browser/setupWorker/glossary.ts

@@ -53,7 +53,12 @@ export type ServiceWorkerIncomingResponse = Pick<
  * Map of the events that can be received from the Service Worker.
  */
 export interface ServiceWorkerIncomingEventsMap {
-  MOCKING_ENABLED: boolean
+  MOCKING_ENABLED: {
+    client: {
+      id: string
+      frameType: string
+    }
+  }
   INTEGRITY_CHECK_RESPONSE: {
     packageVersion: string
     checksum: string

src/browser/setupWorker/start/utils/enableMocking.ts

@@ -10,7 +10,7 @@ export async function enableMocking(
   options: StartOptions,
 ) {
   context.workerChannel.send('MOCK_ACTIVATE')
-  await context.events.once('MOCKING_ENABLED')
+  const { payload } = await context.events.once('MOCKING_ENABLED')
 
   // Warn the developer on multiple "worker.start()" calls.
   // While this will not affect the worker in any way,
@@ -28,5 +28,6 @@ export async function enableMocking(
     quiet: options.quiet,
     workerScope: context.registration?.scope,
     workerUrl: context.worker?.scriptURL,
+    client: payload.client,
   })
 }

src/browser/setupWorker/start/utils/printStartMessage.ts

@@ -1,10 +1,12 @@
+import type { ServiceWorkerIncomingEventsMap } from 'browser/setupWorker/glossary'
 import { devUtils } from '~/core/utils/internal/devUtils'
 
 export interface PrintStartMessageArgs {
   quiet?: boolean
   message?: string
   workerUrl?: string
   workerScope?: string
+  client?: ServiceWorkerIncomingEventsMap['MOCKING_ENABLED']['client']
 }
 
 /**
@@ -41,6 +43,11 @@ export function printStartMessage(args: PrintStartMessageArgs = {}) {
     console.log('Worker scope:', args.workerScope)
   }
 
+  if (args.client) {
+    // eslint-disable-next-line no-console
+    console.log('Client ID: %s (%s)', args.client.id, args.client.frameType)
+  }
+
   // eslint-disable-next-line no-console
   console.groupEnd()
 }

src/mockServiceWorker.js

@@ -62,7 +62,12 @@ self.addEventListener('message', async function (event) {
 
       sendToClient(client, {
         type: 'MOCKING_ENABLED',
-        payload: true,
+        payload: {
+          client: {
+            id: client.id,
+            frameType: client.frameType,
+          },
+        },
       })
       break
     }
@@ -155,6 +160,10 @@ async function handleRequest(event, requestId) {
 async function resolveMainClient(event) {
   const client = await self.clients.get(event.clientId)
 
+  if (activeClientIds.has(event.clientId)) {
+    return client
+  }
+
   if (client?.frameType === 'top-level') {
     return client
   }

test/browser/msw-api/setup-worker/scenarios/iframe-isolated-response/iframe-isolated-response.mocks.ts

@@ -4,8 +4,8 @@ import { setupWorker } from 'msw/browser'
 const worker = setupWorker()
 worker.start()
 
-// @ts-ignore
 window.msw = {
+  // @ts-ignore
   worker,
   http,
 }

test/browser/msw-api/setup-worker/scenarios/iframe-isolated-response/iframe-isolated-response.test.ts

@@ -7,7 +7,7 @@ const staticMiddleware = (router: express.Router) => {
   router.use(express.static(__dirname))
 }
 
-function getFrameById(id: string, page: Page): Frame {
+export function getFrameById(id: string, page: Page): Frame {
   const frame = page
     .mainFrame()
     .childFrames()

test/browser/msw-api/setup-worker/scenarios/iframe/multiple-workers/child.mocks.ts

@@ -0,0 +1,10 @@
+import { http } from 'msw'
+import { setupWorker } from 'msw/browser'
+
+const worker = setupWorker(
+  http.get('/resource', () => {
+    return new Response('hello world')
+  }),
+)
+
+worker.start()

test/browser/msw-api/setup-worker/scenarios/iframe/multiple-workers/iframe-multiple-workers.test.ts

@@ -0,0 +1,33 @@
+import { test, expect } from '../../../../../playwright.extend'
+
+test('intercepts a request issued by child frame when both child and parent have MSW', async ({
+  webpackServer,
+  page,
+}) => {
+  const parentCompilation = await webpackServer.compile([
+    require.resolve('./parent.mocks.ts'),
+  ])
+  const childCompilation = await webpackServer.compile([
+    require.resolve('./child.mocks.ts'),
+  ])
+
+  await page.goto(parentCompilation.previewUrl, { waitUntil: 'networkidle' })
+
+  await page.evaluate((childFrameUrl) => {
+    const iframe = document.createElement('iframe')
+    iframe.setAttribute('id', 'child-frame')
+    iframe.setAttribute('src', childFrameUrl)
+    document.body.appendChild(iframe)
+  }, childCompilation.previewUrl)
+
+  const childFrameElement = await page.locator('#child-frame').elementHandle()
+  const childFrame = await childFrameElement!.contentFrame()
+  await childFrame!.waitForLoadState('networkidle')
+
+  const responseText = await childFrame!.evaluate(async () => {
+    const response = await fetch('/resource')
+    return response.text()
+  })
+
+  expect(responseText).toBe('hello world')
+})

test/browser/msw-api/setup-worker/scenarios/iframe/multiple-workers/parent.mocks.ts

@@ -0,0 +1,7 @@
+import { setupWorker } from 'msw/browser'
+
+// The parent frame has a worker without any handlers.
+const worker = setupWorker()
+
+// This registration is awaited by the `loadExample` command in the test.
+worker.start()