@msw/playwright 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025–present Artem Zakharchenko
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,67 @@
+# `@msw/playwright`
+
+[Mock Service Worker](https://mswjs.io) binding for [Playwright](https://playwright.dev/).
+
+## Motivation
+
+While you can use MSW in Playwright following the default [Browser integration](https://mswjs.io/docs/integrations/browser), the cross-process messaging in Playwright makes it clunky to work with the `worker` instance in one process (your tests; Node.js) to affect another (your app; browser).
+
+```ts
+await page.evaluate(() => {
+  // In order to reference the worker instance in your tests,
+  // you have to set it on `window` alongside any other
+  // functions from the `msw` package you want to use since
+  // you cannot reference them in `page.evaluate` directly.
+  const { worker, http, graphql } = window.msw
+  worker.use(...)
+})
+```
+
+This package aims to provide a better developer experience when mocking APIs in Playwright.
+
+> Until we ship [cross-process request interception](https://github.com/mswjs/msw/pull/1617), `@msw/playwright` will rely on the `page.route()` API to provision the request interception in your tests. That means you _don't have to initialize the worker script_ to use this package. That also means that any `page.route()` limitations now affect this library. Treat this as an implementation detail that is likely to change in the future.
+
+## Usage
+
+```sh
+npm i @msw/playwright
+```
+
+```ts
+// playwright.setup.ts
+import { test as testBase } from '@playwright/test'
+import { createWorkerFixture, type WorkerFixture } from '@msw/playwright'
+import { handlers } from '../mocks/handlers.js'
+
+interface Fixtures {
+  worker: WorkerFixture
+}
+
+export const test = testBase.extend<Fixtures>({
+  // Create your worker fixture to access in tests.
+  worker: createWorkerFixture({
+    initialHandlers: handlers,
+  }),
+})
+```
+
+```ts
+import { http, HttpResponse } from 'msw'
+import { test } from './playwright.setup.js'
+
+test('displays the user dashboard', async ({ worker, page }) => {
+  // Access and use the worker as you normally would!
+  // No more disrupted context between processes.
+  worker.use(
+    http.get('/user', () => {
+      return HttpResponse.json({
+        id: 'abc-123',
+        firstName: 'John',
+        lastName: 'Maverick',
+      })
+    }),
+  )
+
+  await page.goto('/dashboard')
+})
+```

package/build/index.d.ts

@@ -0,0 +1,16 @@
+import { LifeCycleEventsMap, RequestHandler, SetupApi } from "msw";
+import { Page, TestFixture } from "@playwright/test";
+
+//#region src/index.d.ts
+declare function createWorkerFixture(initialHandlers?: Array<RequestHandler>): TestFixture<WorkerFixture, any>;
+declare class WorkerFixture extends SetupApi<LifeCycleEventsMap> {
+  #private;
+  constructor(args: {
+    page: Page;
+    initialHandlers: Array<RequestHandler>;
+  });
+  start(): Promise<void>;
+  stop(): Promise<void>;
+}
+//#endregion
+export { WorkerFixture, createWorkerFixture };

package/build/index.js

@@ -0,0 +1,49 @@
+import { RequestHandler, SetupApi, getResponse } from "msw";
+
+//#region src/index.ts
+function createWorkerFixture(initialHandlers = []) {
+	return async ({ page }, use) => {
+		const worker = new WorkerFixture({
+			page,
+			initialHandlers
+		});
+		await worker.start();
+		await use(worker);
+		await worker.stop();
+	};
+}
+var WorkerFixture = class extends SetupApi {
+	#page;
+	constructor(args) {
+		super(...args.initialHandlers);
+		this.#page = args.page;
+	}
+	async start() {
+		await this.#page.route(/.+/, 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) => {
+				return handler instanceof RequestHandler;
+			}), fetchRequest);
+			if (response) {
+				route.fulfill({
+					status: response.status,
+					headers: Object.fromEntries(response.headers),
+					body: response.body ? Buffer.from(await response.arrayBuffer()) : void 0
+				});
+				return;
+			}
+			route.continue();
+		});
+	}
+	async stop() {
+		super.dispose();
+		await this.#page.unroute(/.+/);
+	}
+};
+
+//#endregion
+export { WorkerFixture, createWorkerFixture };

package/package.json

@@ -0,0 +1,53 @@
+{
+  "type": "module",
+  "name": "@msw/playwright",
+  "version": "0.1.0",
+  "description": "Mock Service Worker binding for Playwright",
+  "main": "./build/index.js",
+  "types": "./build/index.d.ts",
+  "files": [
+    "./src",
+    "./build"
+  ],
+  "keywords": [
+    "playwright",
+    "api",
+    "mock",
+    "msw",
+    "request"
+  ],
+  "license": "MIT",
+  "funding": "https://github.com/sponsors/mswjs",
+  "homepage": "https://mswjs.io",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/mswjs/playwright.git"
+  },
+  "author": {
+    "name": "Artem Zakharchenko",
+    "url": "https://github.com/kettanaito"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "engines": {
+    "node": ">=20.0.0"
+  },
+  "peerDependencies": {
+    "msw": "^2.9.0"
+  },
+  "devDependencies": {
+    "@ossjs/release": "^0.8.1",
+    "@playwright/test": "^1.52.0",
+    "@types/node": "^22.15.29",
+    "msw": "^2.9.0",
+    "tsdown": "^0.12.7",
+    "typescript": "^5.8.3"
+  },
+  "scripts": {
+    "dev": "tsdown --watch",
+    "test": "playwright test",
+    "build": "tsdown",
+    "release": "release publish"
+  }
+}

package/src/index.ts

@@ -0,0 +1,67 @@
+import type { Page, TestFixture } from '@playwright/test'
+import {
+  type LifeCycleEventsMap,
+  SetupApi,
+  RequestHandler,
+  getResponse,
+} from 'msw'
+
+export function createWorkerFixture(
+  initialHandlers: Array<RequestHandler> = [],
+  /** @todo `onUnhandledRequest`? */
+): TestFixture<WorkerFixture, any> {
+  return async ({ page }, use) => {
+    const worker = new WorkerFixture({
+      page,
+      initialHandlers,
+    })
+
+    await worker.start()
+    await use(worker)
+    await worker.stop()
+  }
+}
+
+export class WorkerFixture extends SetupApi<LifeCycleEventsMap> {
+  #page: Page
+
+  constructor(args: { page: Page; initialHandlers: Array<RequestHandler> }) {
+    super(...args.initialHandlers)
+    this.#page = args.page
+  }
+
+  public async start() {
+    await this.#page.route(/.+/, 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) => {
+          return handler instanceof RequestHandler
+        }),
+        fetchRequest,
+      )
+
+      if (response) {
+        route.fulfill({
+          status: response.status,
+          headers: Object.fromEntries(response.headers),
+          body: response.body
+            ? Buffer.from(await response.arrayBuffer())
+            : undefined,
+        })
+        return
+      }
+
+      route.continue()
+    })
+  }
+
+  public async stop() {
+    super.dispose()
+    await this.#page.unroute(/.+/)
+  }
+}