@msw/playwright 0.4.0 → 0.4.1

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> {

package/build/index.js

@@ -50,6 +50,10 @@ var NetworkFixture = class extends SetupApi {
 				return handler instanceof RequestHandler;
 			}), fetchRequest);
 			if (response) {
+				if (response.status === 0) {
+					route.abort();
+					return;
+				}
 				route.fulfill({
 					status: response.status,
 					headers: Object.fromEntries(response.headers),

package/package.json

@@ -1,7 +1,7 @@
 {
   "type": "module",
   "name": "@msw/playwright",
-  "version": "0.4.0",
+  "version": "0.4.1",
   "description": "Mock Service Worker binding for Playwright",
   "main": "./build/index.js",
   "types": "./build/index.d.ts",

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({
@@ -87,6 +96,11 @@ export class NetworkFixture extends SetupApi<LifeCycleEventsMap> {
       )
 
       if (response) {
+        if (response.status === 0) {
+          route.abort()
+          return
+        }
+
         route.fulfill({
           status: response.status,
           headers: Object.fromEntries(response.headers),