@msw/playwright 0.4.0 → 0.4.2

package/README.md

@@ -65,3 +65,17 @@ test('displays the user dashboard', async ({ network, page }) => {
   await page.goto('/dashboard')
 })
 ```
+
+## Comparison
+
+### `playwright-msw`
+
+[`playwright-msw`](https://github.com/valendres/playwright-msw) is a community package that, just like `@msw/playwright`, aims to provide a better experience when mocking APIs in your Playwright tests.
+
+> While `playwright-msw` is a fantastic tool and a huge inspiration for this package to exist, I believe it approaches the idea at a rather complex angle. That introduces a layer of abstraction that is subjected to the "left behind" problem as it needs to map to any MSW changes explicitly.
+
+|                | `playwright-msw`                                                                      | `@msw/playwright`                                                                                  |
+| -------------- | ------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------- |
+| Initialization | `createWorkerFixture()` is used as a _part_ of your custom fixture.                   | `createNetworkFixture()` creates _the entire_ fixture for you, pre-configured.                     |
+| Implementation | Uses a custom router to match handlers and a custom wrapper around `SetupWorker` API. | Uses MSW directly. Uses `page.route()` as the source of the network to route through the handlers. |
+| Feature set    | Supports `http` and `graphql` namespaces.                                             | Supports all namespaces (`http`, `graphql`, `ws`, any other APIs exposed by MSW in the future).    |

package/build/index.d.ts

@@ -1,5 +1,5 @@
 import { LifeCycleEventsMap, RequestHandler, SetupApi, WebSocketHandler } from "msw";
-import { Page, TestFixture } from "@playwright/test";
+import { Page, PlaywrightTestArgs, PlaywrightWorkerArgs, TestFixture } from "@playwright/test";
 
 //#region src/index.d.ts
 interface CreateNetworkFixtureArgs {
@@ -24,7 +24,7 @@ interface CreateNetworkFixtureArgs {
  * })
  * ```
  */
-declare function createNetworkFixture(args?: CreateNetworkFixtureArgs): [TestFixture<NetworkFixture, any>, {
+declare function createNetworkFixture(args?: CreateNetworkFixtureArgs): [TestFixture<NetworkFixture, PlaywrightTestArgs & PlaywrightWorkerArgs>, {
   auto: boolean;
 }];
 declare class NetworkFixture extends SetupApi<LifeCycleEventsMap> {
@@ -35,6 +35,7 @@ declare class NetworkFixture extends SetupApi<LifeCycleEventsMap> {
   });
   start(): Promise<void>;
   stop(): Promise<void>;
+  private getPageUrl;
 }
 //#endregion
 export { CreateNetworkFixtureArgs, NetworkFixture, createNetworkFixture };

package/build/index.js

@@ -48,8 +48,12 @@ var NetworkFixture = class extends SetupApi {
 			});
 			const response = await getResponse(this.handlersController.currentHandlers().filter((handler) => {
 				return handler instanceof RequestHandler;
-			}), fetchRequest);
+			}), fetchRequest, { baseUrl: this.getPageUrl() });
 			if (response) {
+				if (response.status === 0) {
+					route.abort();
+					return;
+				}
 				route.fulfill({
 					status: response.status,
 					headers: Object.fromEntries(response.headers),
@@ -73,13 +77,17 @@ var NetworkFixture = class extends SetupApi {
 				client,
 				server,
 				info: { protocols: [] }
-			});
+			}, { baseUrl: this.getPageUrl() });
 		});
 	}
 	async stop() {
 		super.dispose();
 		await this.#page.unroute(/.+/);
 	}
+	getPageUrl() {
+		const url = this.#page.url();
+		return url !== "about:blank" ? url : void 0;
+	}
 };
 var PlaywrightWebSocketClientConnection = class {
 	id;

package/package.json

@@ -1,7 +1,7 @@
 {
   "type": "module",
   "name": "@msw/playwright",
-  "version": "0.4.0",
+  "version": "0.4.2",
   "description": "Mock Service Worker binding for Playwright",
   "main": "./build/index.js",
   "types": "./build/index.d.ts",
@@ -34,16 +34,17 @@
     "node": ">=20.0.0"
   },
   "peerDependencies": {
-    "msw": "^2.10.1"
+    "msw": "^2.10.3"
   },
   "devDependencies": {
     "@epic-web/test-server": "^0.1.6",
     "@ossjs/release": "^0.8.1",
     "@playwright/test": "^1.52.0",
     "@types/node": "^22.15.29",
-    "msw": "^2.10.1",
+    "msw": "^2.10.3",
     "tsdown": "^0.12.7",
-    "typescript": "^5.8.3"
+    "typescript": "^5.8.3",
+    "vite": "^7.0.2"
   },
   "dependencies": {
     "@mswjs/interceptors": "^0.39.2",
@@ -52,6 +53,9 @@
   "scripts": {
     "dev": "tsdown --watch",
     "test": "playwright test",
+    "app:dev": "vite dev",
+    "app:build": "vite build",
+    "app:start": "vite",
     "build": "tsdown",
     "release": "release publish"
   }

package/src/index.ts

@@ -1,5 +1,11 @@
 import { invariant } from 'outvariant'
-import type { Page, TestFixture, WebSocketRoute } from '@playwright/test'
+import type {
+  Page,
+  PlaywrightTestArgs,
+  PlaywrightWorkerArgs,
+  TestFixture,
+  WebSocketRoute,
+} from '@playwright/test'
 import {
   type LifeCycleEventsMap,
   SetupApi,
@@ -43,7 +49,10 @@ export interface CreateNetworkFixtureArgs {
 export function createNetworkFixture(
   args?: CreateNetworkFixtureArgs,
   /** @todo `onUnhandledRequest`? */
-): [TestFixture<NetworkFixture, any>, { auto: boolean }] {
+): [
+  TestFixture<NetworkFixture, PlaywrightTestArgs & PlaywrightWorkerArgs>,
+  { auto: boolean },
+] {
   return [
     async ({ page }, use) => {
       const worker = new NetworkFixture({
@@ -84,9 +93,17 @@ export class NetworkFixture extends SetupApi<LifeCycleEventsMap> {
           return handler instanceof RequestHandler
         }),
         fetchRequest,
+        {
+          baseUrl: this.getPageUrl(),
+        },
       )
 
       if (response) {
+        if (response.status === 0) {
+          route.abort()
+          return
+        }
+
         route.fulfill({
           status: response.status,
           headers: Object.fromEntries(response.headers),
@@ -117,11 +134,16 @@ export class NetworkFixture extends SetupApi<LifeCycleEventsMap> {
       const server = new PlaywrightWebSocketServerConnection(ws)
 
       for (const handler of allWebSocketHandlers) {
-        await handler.run({
-          client,
-          server,
-          info: { protocols: [] },
-        })
+        await handler.run(
+          {
+            client,
+            server,
+            info: { protocols: [] },
+          },
+          {
+            baseUrl: this.getPageUrl(),
+          },
+        )
       }
     })
   }
@@ -130,6 +152,11 @@ export class NetworkFixture extends SetupApi<LifeCycleEventsMap> {
     super.dispose()
     await this.#page.unroute(/.+/)
   }
+
+  private getPageUrl(): string | undefined {
+    const url = this.#page.url()
+    return url !== 'about:blank' ? url : undefined
+  }
 }
 
 class PlaywrightWebSocketClientConnection