@msw/playwright 0.4.3 → 0.4.4

package/build/index.d.ts

@@ -1,9 +1,10 @@
-import { LifeCycleEventsMap, RequestHandler, SetupApi, WebSocketHandler } from "msw";
+import { LifeCycleEventsMap, RequestHandler, SetupApi, UnhandledRequestStrategy, WebSocketHandler } from "msw";
 import { Page, PlaywrightTestArgs, PlaywrightWorkerArgs, TestFixture } from "@playwright/test";
 
-//#region src/index.d.ts
+//#region src/fixture.d.ts
 interface CreateNetworkFixtureArgs {
   initialHandlers: Array<RequestHandler | WebSocketHandler>;
+  onUnhandledRequest?: UnhandledRequestStrategy;
 }
 /**
  * Creates a fixture that controls the network in your tests.
@@ -27,11 +28,23 @@ interface CreateNetworkFixtureArgs {
 declare function createNetworkFixture(args?: CreateNetworkFixtureArgs): [TestFixture<NetworkFixture, PlaywrightTestArgs & PlaywrightWorkerArgs>, {
   auto: boolean;
 }];
+/**
+ * @note Use a match-all RegExp with an optional group as the predicate
+ * for the `page.route()`/`page.unroute()` calls. Playwright treats given RegExp
+ * as the handler ID, which allows us to remove only those handlers introduces by us
+ * without carrying the reference to the handler function around.
+ */
+
 declare class NetworkFixture extends SetupApi<LifeCycleEventsMap> {
-  #private;
+  protected args: {
+    page: Page;
+    initialHandlers: Array<RequestHandler | WebSocketHandler>;
+    onUnhandledRequest?: UnhandledRequestStrategy;
+  };
   constructor(args: {
     page: Page;
     initialHandlers: Array<RequestHandler | WebSocketHandler>;
+    onUnhandledRequest?: UnhandledRequestStrategy;
   });
   start(): Promise<void>;
   stop(): Promise<void>;

package/build/index.js

@@ -1,8 +1,8 @@
 import { invariant } from "outvariant";
-import { RequestHandler, SetupApi, WebSocketHandler, getResponse } from "msw";
+import { RequestHandler, SetupApi, WebSocketHandler, handleRequest } from "msw";
 import { CancelableCloseEvent, CancelableMessageEvent } from "@mswjs/interceptors/WebSocket";
 
-//#region src/index.ts
+//#region src/fixture.ts
 /**
 * Creates a fixture that controls the network in your tests.
 *
@@ -26,29 +26,40 @@ function createNetworkFixture(args) {
 	return [async ({ page }, use) => {
 		const worker = new NetworkFixture({
 			page,
-			initialHandlers: args?.initialHandlers || []
+			initialHandlers: args?.initialHandlers || [],
+			onUnhandledRequest: args?.onUnhandledRequest
 		});
 		await worker.start();
 		await use(worker);
 		await worker.stop();
 	}, { auto: true }];
 }
+/**
+* @note Use a match-all RegExp with an optional group as the predicate
+* for the `page.route()`/`page.unroute()` calls. Playwright treats given RegExp
+* as the handler ID, which allows us to remove only those handlers introduces by us
+* without carrying the reference to the handler function around.
+*/
+const INTERNAL_MATCH_ALL_REG_EXP = /.+(__MSW_PLAYWRIGHT_PREDICATE__)?/;
 var NetworkFixture = class extends SetupApi {
-	#page;
 	constructor(args) {
 		super(...args.initialHandlers);
-		this.#page = args.page;
+		this.args = args;
 	}
 	async start() {
-		const httpRequestListener = async (route, request) => {
+		await this.args.page.route(INTERNAL_MATCH_ALL_REG_EXP, async (route, request) => {
 			const fetchRequest = new Request(request.url(), {
 				method: request.method(),
 				headers: new Headers(await request.allHeaders()),
 				body: request.postDataBuffer()
 			});
-			const response = await getResponse(this.handlersController.currentHandlers().filter((handler) => {
+			const handlers = this.handlersController.currentHandlers().filter((handler) => {
 				return handler instanceof RequestHandler;
-			}), fetchRequest, { baseUrl: this.getPageUrl() });
+			});
+			const response = await handleRequest(fetchRequest, crypto.randomUUID(), handlers, { onUnhandledRequest: this.args.onUnhandledRequest || "warn" }, this.emitter, { resolutionContext: {
+				quiet: true,
+				baseUrl: this.getPageUrl()
+			} });
 			if (response) {
 				if (response.status === 0) {
 					route.abort();
@@ -62,9 +73,8 @@ var NetworkFixture = class extends SetupApi {
 				return;
 			}
 			route.continue();
-		};
-		await this.#page.route(/.+/, httpRequestListener);
-		await this.#page.routeWebSocket(/.+/, async (ws) => {
+		});
+		await this.args.page.routeWebSocket(INTERNAL_MATCH_ALL_REG_EXP, async (ws) => {
 			const allWebSocketHandlers = this.handlersController.currentHandlers().filter((handler) => {
 				return handler instanceof WebSocketHandler;
 			});
@@ -83,7 +93,8 @@ var NetworkFixture = class extends SetupApi {
 	}
 	async stop() {
 		super.dispose();
-		await this.#page.unroute(/.+/);
+		await this.#page.unroute(INTERNAL_MATCH_ALL_REG_EXP);
+		await unrouteWebSocket(this.#page, INTERNAL_MATCH_ALL_REG_EXP);
 	}
 	getPageUrl() {
 		const url = this.#page.url();
@@ -229,6 +240,17 @@ var PlaywrightWebSocketServerConnection = class {
 		console.warn("@msw/playwright: WebSocketRoute does not support removing event listeners");
 	}
 };
+/**
+* Custom implementation of the missing `page.unrouteWebSocket()` to remove
+* WebSocket route handlers from the page. Loosely inspired by `page.unroute()`.
+*/
+async function unrouteWebSocket(page, url, handler) {
+	if (!("_webSocketRoutes" in page && Array.isArray(page._webSocketRoutes))) return;
+	for (let i = page._webSocketRoutes.length - 1; i >= 0; i--) {
+		const route = page._webSocketRoutes[i];
+		if (route.url === url && (handler != null ? route.handler === handler : true)) page._webSocketRoutes.splice(i, 1);
+	}
+}
 
 //#endregion
-export { NetworkFixture, createNetworkFixture };
+export { createNetworkFixture };

package/package.json

@@ -1,7 +1,7 @@
 {
   "type": "module",
   "name": "@msw/playwright",
-  "version": "0.4.3",
+  "version": "0.4.4",
   "description": "Mock Service Worker binding for Playwright",
   "main": "./build/index.js",
   "types": "./build/index.d.ts",
@@ -40,13 +40,15 @@
     "@ossjs/release": "^0.10.1",
     "@playwright/test": "^1.57.0",
     "@types/node": "^22.15.29",
-    "msw": "^2.10.3",
+    "@types/sinon": "^21.0.0",
+    "msw": "^2.12.7",
+    "sinon": "^21.0.1",
     "tsdown": "^0.12.7",
-    "typescript": "^5.8.3",
+    "typescript": "^5.9.3",
     "vite": "^7.3.1"
   },
   "dependencies": {
-    "@mswjs/interceptors": "^0.39.2",
+    "@mswjs/interceptors": "^0.40.0",
     "outvariant": "^1.4.3"
   },
   "scripts": {

package/src/fixture.ts

@@ -10,10 +10,11 @@ import type {
 } from '@playwright/test'
 import {
   type LifeCycleEventsMap,
+  type UnhandledRequestStrategy,
   SetupApi,
   RequestHandler,
   WebSocketHandler,
-  getResponse,
+  handleRequest,
 } from 'msw'
 import {
   type WebSocketClientEventMap,
@@ -26,7 +27,8 @@ import {
 } from '@mswjs/interceptors/WebSocket'
 
 export interface CreateNetworkFixtureArgs {
-  initialHandlers: Array<RequestHandler | WebSocketHandler>
+  initialHandlers?: Array<RequestHandler | WebSocketHandler>
+  onUnhandledRequest?: UnhandledRequestStrategy
 }
 
 /**
@@ -50,7 +52,6 @@ export interface CreateNetworkFixtureArgs {
  */
 export function createNetworkFixture(
   args?: CreateNetworkFixtureArgs,
-  /** @todo `onUnhandledRequest`? */
 ): [
   TestFixture<NetworkFixture, PlaywrightTestArgs & PlaywrightWorkerArgs>,
   { auto: boolean },
@@ -60,6 +61,7 @@ export function createNetworkFixture(
       const worker = new NetworkFixture({
         page,
         initialHandlers: args?.initialHandlers || [],
+        onUnhandledRequest: args?.onUnhandledRequest,
       })
 
       await worker.start()
@@ -79,19 +81,19 @@ export function createNetworkFixture(
 export const INTERNAL_MATCH_ALL_REG_EXP = /.+(__MSW_PLAYWRIGHT_PREDICATE__)?/
 
 export class NetworkFixture extends SetupApi<LifeCycleEventsMap> {
-  #page: Page
-
-  constructor(args: {
-    page: Page
-    initialHandlers: Array<RequestHandler | WebSocketHandler>
-  }) {
+  constructor(
+    protected args: {
+      page: Page
+      initialHandlers: Array<RequestHandler | WebSocketHandler>
+      onUnhandledRequest?: UnhandledRequestStrategy
+    },
+  ) {
     super(...args.initialHandlers)
-    this.#page = args.page
   }
 
   public async start(): Promise<void> {
     // Handle HTTP requests.
-    await this.#page.route(
+    await this.args.page.route(
       INTERNAL_MATCH_ALL_REG_EXP,
       async (route: Route, request: Request) => {
         const fetchRequest = new Request(request.url(), {
@@ -100,13 +102,29 @@ export class NetworkFixture extends SetupApi<LifeCycleEventsMap> {
           body: request.postDataBuffer(),
         })
 
-        const response = await getResponse(
-          this.handlersController.currentHandlers().filter((handler) => {
+        const handlers = this.handlersController
+          .currentHandlers()
+          .filter((handler) => {
             return handler instanceof RequestHandler
-          }),
+          })
+
+        /**
+         * @note Use `handleRequest` instead of `getResponse` so we can pass
+         * the `onUnhandledRequest` option as-is and benefit from MSW's default behaviors.
+         */
+        const response = await handleRequest(
           fetchRequest,
+          crypto.randomUUID(),
+          handlers,
           {
-            baseUrl: this.getPageUrl(),
+            onUnhandledRequest: this.args.onUnhandledRequest || 'bypass',
+          },
+          this.emitter,
+          {
+            resolutionContext: {
+              quiet: true,
+              baseUrl: this.getPageUrl(),
+            },
           },
         )
 
@@ -131,44 +149,47 @@ export class NetworkFixture extends SetupApi<LifeCycleEventsMap> {
     )
 
     // Handle WebSocket connections.
-    await this.#page.routeWebSocket(INTERNAL_MATCH_ALL_REG_EXP, async (ws) => {
-      const allWebSocketHandlers = this.handlersController
-        .currentHandlers()
-        .filter((handler) => {
-          return handler instanceof WebSocketHandler
-        })
-
-      if (allWebSocketHandlers.length === 0) {
-        ws.connectToServer()
-        return
-      }
+    await this.args.page.routeWebSocket(
+      INTERNAL_MATCH_ALL_REG_EXP,
+      async (ws) => {
+        const allWebSocketHandlers = this.handlersController
+          .currentHandlers()
+          .filter((handler) => {
+            return handler instanceof WebSocketHandler
+          })
 
-      const client = new PlaywrightWebSocketClientConnection(ws)
-      const server = new PlaywrightWebSocketServerConnection(ws)
+        if (allWebSocketHandlers.length === 0) {
+          ws.connectToServer()
+          return
+        }
 
-      for (const handler of allWebSocketHandlers) {
-        await handler.run(
-          {
-            client,
-            server,
-            info: { protocols: [] },
-          },
-          {
-            baseUrl: this.getPageUrl(),
-          },
-        )
-      }
-    })
+        const client = new PlaywrightWebSocketClientConnection(ws)
+        const server = new PlaywrightWebSocketServerConnection(ws)
+
+        for (const handler of allWebSocketHandlers) {
+          await handler.run(
+            {
+              client,
+              server,
+              info: { protocols: [] },
+            },
+            {
+              baseUrl: this.getPageUrl(),
+            },
+          )
+        }
+      },
+    )
   }
 
   public async stop(): Promise<void> {
     super.dispose()
-    await this.#page.unroute(INTERNAL_MATCH_ALL_REG_EXP)
-    await unrouteWebSocket(this.#page, INTERNAL_MATCH_ALL_REG_EXP)
+    await this.args.page.unroute(INTERNAL_MATCH_ALL_REG_EXP)
+    await unrouteWebSocket(this.args.page, INTERNAL_MATCH_ALL_REG_EXP)
   }
 
   private getPageUrl(): string | undefined {
-    const url = this.#page.url()
+    const url = this.args.page.url()
     return url !== 'about:blank' ? url : undefined
   }
 }