@msw/playwright 0.4.5 → 0.5.0

package/README.md

@@ -66,6 +66,10 @@ test('displays the user dashboard', async ({ network, page }) => {
 })
 ```
 
+## Limitations
+
+- Since `context.routeWebSocket()` provides no means of knowing which page triggered a WebSocket connection, relative WebSocket URLs in `ws.link(url)` will be resolved against the _latest_ created page in the browser context.
+
 ## Comparison
 
 ### `playwright-msw`

package/build/index.d.ts

@@ -1,10 +1,18 @@
 import { LifeCycleEventsMap, RequestHandler, SetupApi, UnhandledRequestStrategy, WebSocketHandler } from "msw";
-import { Page, PlaywrightTestArgs, PlaywrightWorkerArgs, TestFixture } from "@playwright/test";
+import { BrowserContext, PlaywrightTestArgs, PlaywrightWorkerArgs, TestFixture } from "@playwright/test";
 
 //#region src/fixture.d.ts
 interface CreateNetworkFixtureArgs {
   initialHandlers?: Array<RequestHandler | WebSocketHandler>;
   onUnhandledRequest?: UnhandledRequestStrategy;
+  /**
+   * Skip common asset requests (e.g. `*.html`, `*.css`, `*.js`, etc).
+   * This improves performance for certian projects.
+   * @default true
+   *
+   * @see https://mswjs.io/docs/api/is-common-asset-request
+   */
+  skipAssetRequests?: boolean;
 }
 /**
  * Creates a fixture that controls the network in your tests.
@@ -37,12 +45,14 @@ declare function createNetworkFixture(args?: CreateNetworkFixtureArgs): [TestFix
 
 declare class NetworkFixture extends SetupApi<LifeCycleEventsMap> {
   protected args: {
-    page: Page;
+    context: BrowserContext;
+    skipAssetRequests: boolean;
     initialHandlers: Array<RequestHandler | WebSocketHandler>;
     onUnhandledRequest?: UnhandledRequestStrategy;
   };
   constructor(args: {
-    page: Page;
+    context: BrowserContext;
+    skipAssetRequests: boolean;
     initialHandlers: Array<RequestHandler | WebSocketHandler>;
     onUnhandledRequest?: UnhandledRequestStrategy;
   });

package/build/index.js

@@ -1,5 +1,5 @@
 import { invariant } from "outvariant";
-import { RequestHandler, SetupApi, WebSocketHandler, handleRequest } from "msw";
+import { RequestHandler, SetupApi, WebSocketHandler, handleRequest, isCommonAssetRequest } from "msw";
 import { CancelableCloseEvent, CancelableMessageEvent } from "@mswjs/interceptors/WebSocket";
 
 //#region src/fixture.ts
@@ -23,9 +23,10 @@ import { CancelableCloseEvent, CancelableMessageEvent } from "@mswjs/interceptor
 * ```
 */
 function createNetworkFixture(args) {
-	return [async ({ page }, use) => {
+	return [async ({ context }, use) => {
 		const worker = new NetworkFixture({
-			page,
+			context,
+			skipAssetRequests: args?.skipAssetRequests ?? true,
 			initialHandlers: args?.initialHandlers || [],
 			onUnhandledRequest: args?.onUnhandledRequest
 		});
@@ -47,62 +48,70 @@ var NetworkFixture = class extends SetupApi {
 		this.args = args;
 	}
 	async start() {
-		await this.args.page.route(INTERNAL_MATCH_ALL_REG_EXP, async (route, request) => {
+		await this.args.context.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()
 			});
+			/**
+			* @note Skip common asset requests (default).
+			* Playwright seems to experience performance degradation when routing all
+			* requests through the matching logic below.
+			* @see https://github.com/mswjs/playwright/issues/13
+			*/
+			if (this.args.skipAssetRequests && isCommonAssetRequest(fetchRequest)) return route.continue();
 			const handlers = this.handlersController.currentHandlers().filter((handler) => {
 				return handler instanceof RequestHandler;
 			});
+			const baseUrl = request.headers().referer ? new URL(request.headers().referer).origin : void 0;
 			/**
 			* @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, { onUnhandledRequest: this.args.onUnhandledRequest || "bypass" }, this.emitter, { resolutionContext: {
 				quiet: true,
-				baseUrl: this.getPageUrl()
+				baseUrl
 			} });
 			if (response) {
-				if (response.status === 0) {
-					route.abort();
-					return;
-				}
-				route.fulfill({
+				if (response.status === 0) return route.abort();
+				return route.fulfill({
 					status: response.status,
 					headers: Object.fromEntries(response.headers),
 					body: response.body ? Buffer.from(await response.arrayBuffer()) : void 0
 				});
-				return;
 			}
-			route.continue();
+			return route.continue();
 		});
-		await this.args.page.routeWebSocket(INTERNAL_MATCH_ALL_REG_EXP, async (ws) => {
+		await this.args.context.routeWebSocket(INTERNAL_MATCH_ALL_REG_EXP, async (route) => {
 			const allWebSocketHandlers = this.handlersController.currentHandlers().filter((handler) => {
 				return handler instanceof WebSocketHandler;
 			});
 			if (allWebSocketHandlers.length === 0) {
-				ws.connectToServer();
+				route.connectToServer();
 				return;
 			}
-			const client = new PlaywrightWebSocketClientConnection(ws);
-			const server = new PlaywrightWebSocketServerConnection(ws);
+			const client = new PlaywrightWebSocketClientConnection(route);
+			const server = new PlaywrightWebSocketServerConnection(route);
+			const pages = this.args.context.pages();
+			const lastPage = pages[pages.length - 1];
+			const baseUrl = lastPage ? this.getPageUrl(lastPage) : void 0;
 			for (const handler of allWebSocketHandlers) await handler.run({
 				client,
 				server,
 				info: { protocols: [] }
-			}, { baseUrl: this.getPageUrl() });
+			}, { baseUrl });
 		});
 	}
 	async stop() {
 		super.dispose();
-		await this.args.page.unroute(INTERNAL_MATCH_ALL_REG_EXP);
-		await unrouteWebSocket(this.args.page, INTERNAL_MATCH_ALL_REG_EXP);
+		await this.args.context.unroute(INTERNAL_MATCH_ALL_REG_EXP);
+		await unrouteWebSocket(this.args.context, INTERNAL_MATCH_ALL_REG_EXP);
 	}
-	getPageUrl() {
-		const url = this.args.page.url();
-		return url !== "about:blank" ? url : void 0;
+	getPageUrl(page) {
+		const url = page.url();
+		if (url === "about:blank") return;
+		return decodeURI(new URL(encodeURI(url)).origin);
 	}
 };
 var PlaywrightWebSocketClientConnection = class {
@@ -248,11 +257,11 @@ var PlaywrightWebSocketServerConnection = class {
 * 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);
+async function unrouteWebSocket(target, url, handler) {
+	if (!("_webSocketRoutes" in target && Array.isArray(target._webSocketRoutes))) return;
+	for (let i = target._webSocketRoutes.length - 1; i >= 0; i--) {
+		const route = target._webSocketRoutes[i];
+		if (route.url === url && (handler != null ? route.handler === handler : true)) target._webSocketRoutes.splice(i, 1);
 	}
 }
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "type": "module",
   "name": "@msw/playwright",
-  "version": "0.4.5",
+  "version": "0.5.0",
   "description": "Mock Service Worker binding for Playwright",
   "main": "./build/index.js",
   "types": "./build/index.d.ts",
@@ -33,22 +33,22 @@
     "node": ">=20.0.0"
   },
   "peerDependencies": {
-    "msw": "^2.10.3"
+    "msw": "^2.12.9"
   },
   "devDependencies": {
     "@epic-web/test-server": "^0.1.6",
     "@ossjs/release": "^0.10.1",
-    "@playwright/test": "^1.57.0",
+    "@playwright/test": "^1.58.1",
     "@types/node": "^22.15.29",
     "@types/sinon": "^21.0.0",
-    "msw": "^2.12.7",
+    "msw": "^2.12.9",
     "sinon": "^21.0.1",
     "tsdown": "^0.12.7",
     "typescript": "^5.9.3",
     "vite": "^7.3.1"
   },
   "dependencies": {
-    "@mswjs/interceptors": "^0.40.0",
+    "@mswjs/interceptors": "^0.41.2",
     "outvariant": "^1.4.3"
   },
   "scripts": {

package/src/fixture.ts

@@ -1,9 +1,10 @@
 import { invariant } from 'outvariant'
 import type {
+  BrowserContext,
   Page,
   PlaywrightTestArgs,
   PlaywrightWorkerArgs,
-  Request,
+  Request as PlaywrightRequest,
   Route,
   TestFixture,
   WebSocketRoute,
@@ -15,6 +16,7 @@ import {
   RequestHandler,
   WebSocketHandler,
   handleRequest,
+  isCommonAssetRequest,
 } from 'msw'
 import {
   type WebSocketClientEventMap,
@@ -29,6 +31,14 @@ import {
 export interface CreateNetworkFixtureArgs {
   initialHandlers?: Array<RequestHandler | WebSocketHandler>
   onUnhandledRequest?: UnhandledRequestStrategy
+  /**
+   * Skip common asset requests (e.g. `*.html`, `*.css`, `*.js`, etc).
+   * This improves performance for certian projects.
+   * @default true
+   *
+   * @see https://mswjs.io/docs/api/is-common-asset-request
+   */
+  skipAssetRequests?: boolean
 }
 
 /**
@@ -57,9 +67,10 @@ export function createNetworkFixture(
   { auto: boolean },
 ] {
   return [
-    async ({ page }, use) => {
+    async ({ context }, use) => {
       const worker = new NetworkFixture({
-        page,
+        context,
+        skipAssetRequests: args?.skipAssetRequests ?? true,
         initialHandlers: args?.initialHandlers || [],
         onUnhandledRequest: args?.onUnhandledRequest,
       })
@@ -83,7 +94,8 @@ export const INTERNAL_MATCH_ALL_REG_EXP = /.+(__MSW_PLAYWRIGHT_PREDICATE__)?/
 export class NetworkFixture extends SetupApi<LifeCycleEventsMap> {
   constructor(
     protected args: {
-      page: Page
+      context: BrowserContext
+      skipAssetRequests: boolean
       initialHandlers: Array<RequestHandler | WebSocketHandler>
       onUnhandledRequest?: UnhandledRequestStrategy
     },
@@ -93,21 +105,35 @@ export class NetworkFixture extends SetupApi<LifeCycleEventsMap> {
 
   public async start(): Promise<void> {
     // Handle HTTP requests.
-    await this.args.page.route(
+    await this.args.context.route(
       INTERNAL_MATCH_ALL_REG_EXP,
-      async (route: Route, request: Request) => {
+      async (route: Route, request: PlaywrightRequest) => {
         const fetchRequest = new Request(request.url(), {
           method: request.method(),
           headers: new Headers(await request.allHeaders()),
-          body: request.postDataBuffer(),
+          body: request.postDataBuffer() as ArrayBuffer | null,
         })
 
+        /**
+         * @note Skip common asset requests (default).
+         * Playwright seems to experience performance degradation when routing all
+         * requests through the matching logic below.
+         * @see https://github.com/mswjs/playwright/issues/13
+         */
+        if (this.args.skipAssetRequests && isCommonAssetRequest(fetchRequest)) {
+          return route.continue()
+        }
+
         const handlers = this.handlersController
           .currentHandlers()
           .filter((handler) => {
             return handler instanceof RequestHandler
           })
 
+        const baseUrl = request.headers().referer
+          ? new URL(request.headers().referer).origin
+          : undefined
+
         /**
          * @note Use `handleRequest` instead of `getResponse` so we can pass
          * the `onUnhandledRequest` option as-is and benefit from MSW's default behaviors.
@@ -123,35 +149,33 @@ export class NetworkFixture extends SetupApi<LifeCycleEventsMap> {
           {
             resolutionContext: {
               quiet: true,
-              baseUrl: this.getPageUrl(),
+              baseUrl,
             },
           },
         )
 
         if (response) {
           if (response.status === 0) {
-            route.abort()
-            return
+            return route.abort()
           }
 
-          route.fulfill({
+          return route.fulfill({
             status: response.status,
             headers: Object.fromEntries(response.headers),
             body: response.body
               ? Buffer.from(await response.arrayBuffer())
               : undefined,
           })
-          return
         }
 
-        route.continue()
+        return route.continue()
       },
     )
 
     // Handle WebSocket connections.
-    await this.args.page.routeWebSocket(
+    await this.args.context.routeWebSocket(
       INTERNAL_MATCH_ALL_REG_EXP,
-      async (ws) => {
+      async (route) => {
         const allWebSocketHandlers = this.handlersController
           .currentHandlers()
           .filter((handler) => {
@@ -159,12 +183,16 @@ export class NetworkFixture extends SetupApi<LifeCycleEventsMap> {
           })
 
         if (allWebSocketHandlers.length === 0) {
-          ws.connectToServer()
+          route.connectToServer()
           return
         }
 
-        const client = new PlaywrightWebSocketClientConnection(ws)
-        const server = new PlaywrightWebSocketServerConnection(ws)
+        const client = new PlaywrightWebSocketClientConnection(route)
+        const server = new PlaywrightWebSocketServerConnection(route)
+
+        const pages = this.args.context.pages()
+        const lastPage = pages[pages.length - 1]
+        const baseUrl = lastPage ? this.getPageUrl(lastPage) : undefined
 
         for (const handler of allWebSocketHandlers) {
           await handler.run(
@@ -174,7 +202,7 @@ export class NetworkFixture extends SetupApi<LifeCycleEventsMap> {
               info: { protocols: [] },
             },
             {
-              baseUrl: this.getPageUrl(),
+              baseUrl,
             },
           )
         }
@@ -184,19 +212,23 @@ export class NetworkFixture extends SetupApi<LifeCycleEventsMap> {
 
   public async stop(): Promise<void> {
     super.dispose()
-    await this.args.page.unroute(INTERNAL_MATCH_ALL_REG_EXP)
-    await unrouteWebSocket(this.args.page, INTERNAL_MATCH_ALL_REG_EXP)
+    await this.args.context.unroute(INTERNAL_MATCH_ALL_REG_EXP)
+    await unrouteWebSocket(this.args.context, INTERNAL_MATCH_ALL_REG_EXP)
   }
 
-  private getPageUrl(): string | undefined {
-    const url = this.args.page.url()
-    return url !== 'about:blank' ? url : undefined
+  private getPageUrl(page: Page): string | undefined {
+    const url = page.url()
+
+    if (url === 'about:blank') {
+      return
+    }
+
+    // Encode/decode to preserve escape characters.
+    return decodeURI(new URL(encodeURI(url)).origin)
   }
 }
 
-class PlaywrightWebSocketClientConnection
-  implements WebSocketClientConnectionProtocol
-{
+class PlaywrightWebSocketClientConnection implements WebSocketClientConnectionProtocol {
   public id: string
   public url: URL
 
@@ -298,9 +330,7 @@ class PlaywrightWebSocketClientConnection
   }
 }
 
-class PlaywrightWebSocketServerConnection
-  implements WebSocketServerConnectionProtocol
-{
+class PlaywrightWebSocketServerConnection implements WebSocketServerConnectionProtocol {
   #server?: WebSocketRoute
   #bufferedEvents: Array<
     Parameters<WebSocketServerConnectionProtocol['addEventListener']>
@@ -411,22 +441,24 @@ interface InternalWebSocketRoute {
  * WebSocket route handlers from the page. Loosely inspired by `page.unroute()`.
  */
 async function unrouteWebSocket(
-  page: Page,
+  target: BrowserContext,
   url: InternalWebSocketRoute['url'],
   handler?: InternalWebSocketRoute['handler'],
 ): Promise<void> {
-  if (!('_webSocketRoutes' in page && Array.isArray(page._webSocketRoutes))) {
+  if (
+    !('_webSocketRoutes' in target && Array.isArray(target._webSocketRoutes))
+  ) {
     return
   }
 
-  for (let i = page._webSocketRoutes.length - 1; i >= 0; i--) {
-    const route = page._webSocketRoutes[i] as InternalWebSocketRoute
+  for (let i = target._webSocketRoutes.length - 1; i >= 0; i--) {
+    const route = target._webSocketRoutes[i] as InternalWebSocketRoute
 
     if (
       route.url === url &&
       (handler != null ? route.handler === handler : true)
     ) {
-      page._webSocketRoutes.splice(i, 1)
+      target._webSocketRoutes.splice(i, 1)
     }
   }
 }