@msw/playwright 0.3.0 → 0.4.0

package/README.md

@@ -13,7 +13,7 @@ await page.evaluate(() => {
   // 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(...)
+  worker.use(...overrides)
 })
 ```
 
@@ -30,16 +30,16 @@ npm i msw @msw/playwright
 ```ts
 // playwright.setup.ts
 import { test as testBase } from '@playwright/test'
-import { createWorkerFixture, type WorkerFixture } from '@msw/playwright'
+import { createNetworkFixture, type NetworkFixture } from '@msw/playwright'
 import { handlers } from '../mocks/handlers.js'
 
 interface Fixtures {
-  worker: WorkerFixture
+  network: NetworkFixture
 }
 
 export const test = testBase.extend<Fixtures>({
-  // Create your worker fixture to access in tests.
-  worker: createWorkerFixture({
+  // Create a fixture that will control the network in your tests.
+  network: createNetworkFixture({
     initialHandlers: handlers,
   }),
 })
@@ -49,10 +49,10 @@ export const test = testBase.extend<Fixtures>({
 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!
+test('displays the user dashboard', async ({ network, page }) => {
+  // Access the network fixture and use it as the `setupWorker()` API.
   // No more disrupted context between processes.
-  worker.use(
+  network.use(
     http.get('/user', () => {
       return HttpResponse.json({
         id: 'abc-123',

package/build/index.d.ts

@@ -2,11 +2,32 @@ import { LifeCycleEventsMap, RequestHandler, SetupApi, WebSocketHandler } from "
 import { Page, TestFixture } from "@playwright/test";
 
 //#region src/index.d.ts
-interface CreateWorkerFixtureArgs {
+interface CreateNetworkFixtureArgs {
   initialHandlers: Array<RequestHandler | WebSocketHandler>;
 }
-declare function createWorkerFixture(args?: CreateWorkerFixtureArgs): TestFixture<WorkerFixture, any>;
-declare class WorkerFixture extends SetupApi<LifeCycleEventsMap> {
+/**
+ * Creates a fixture that controls the network in your tests.
+ *
+ * @note The returned fixture already has the `auto` option set to `true`.
+ *
+ * **Usage**
+ * ```ts
+ * import { test as testBase } from '@playwright/test'
+ * import { createNetworkFixture, type WorkerFixture } from '@msw/playwright'
+ *
+ * interface Fixtures {
+ *  network: WorkerFixture
+ * }
+ *
+ * export const test = testBase.extend<Fixtures>({
+ *   network: createNetworkFixture()
+ * })
+ * ```
+ */
+declare function createNetworkFixture(args?: CreateNetworkFixtureArgs): [TestFixture<NetworkFixture, any>, {
+  auto: boolean;
+}];
+declare class NetworkFixture extends SetupApi<LifeCycleEventsMap> {
   #private;
   constructor(args: {
     page: Page;
@@ -16,4 +37,4 @@ declare class WorkerFixture extends SetupApi<LifeCycleEventsMap> {
   stop(): Promise<void>;
 }
 //#endregion
-export { CreateWorkerFixtureArgs, WorkerFixture, createWorkerFixture };
+export { CreateNetworkFixtureArgs, NetworkFixture, createNetworkFixture };

package/build/index.js

@@ -3,18 +3,37 @@ import { RequestHandler, SetupApi, WebSocketHandler, getResponse } from "msw";
 import { CancelableCloseEvent, CancelableMessageEvent } from "@mswjs/interceptors/WebSocket";
 
 //#region src/index.ts
-function createWorkerFixture(args) {
-	return async ({ page }, use) => {
-		const worker = new WorkerFixture({
+/**
+* Creates a fixture that controls the network in your tests.
+*
+* @note The returned fixture already has the `auto` option set to `true`.
+*
+* **Usage**
+* ```ts
+* import { test as testBase } from '@playwright/test'
+* import { createNetworkFixture, type WorkerFixture } from '@msw/playwright'
+*
+* interface Fixtures {
+*  network: WorkerFixture
+* }
+*
+* export const test = testBase.extend<Fixtures>({
+*   network: createNetworkFixture()
+* })
+* ```
+*/
+function createNetworkFixture(args) {
+	return [async ({ page }, use) => {
+		const worker = new NetworkFixture({
 			page,
 			initialHandlers: args?.initialHandlers || []
 		});
 		await worker.start();
 		await use(worker);
 		await worker.stop();
-	};
+	}, { auto: true }];
 }
-var WorkerFixture = class extends SetupApi {
+var NetworkFixture = class extends SetupApi {
 	#page;
 	constructor(args) {
 		super(...args.initialHandlers);
@@ -203,4 +222,4 @@ var PlaywrightWebSocketServerConnection = class {
 };
 
 //#endregion
-export { WorkerFixture, createWorkerFixture };
+export { NetworkFixture, createNetworkFixture };

package/package.json

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

package/src/index.ts

@@ -17,27 +17,49 @@ import {
   WebSocketServerConnectionProtocol,
 } from '@mswjs/interceptors/WebSocket'
 
-export interface CreateWorkerFixtureArgs {
+export interface CreateNetworkFixtureArgs {
   initialHandlers: Array<RequestHandler | WebSocketHandler>
 }
 
-export function createWorkerFixture(
-  args?: CreateWorkerFixtureArgs,
+/**
+ * Creates a fixture that controls the network in your tests.
+ *
+ * @note The returned fixture already has the `auto` option set to `true`.
+ *
+ * **Usage**
+ * ```ts
+ * import { test as testBase } from '@playwright/test'
+ * import { createNetworkFixture, type WorkerFixture } from '@msw/playwright'
+ *
+ * interface Fixtures {
+ *  network: WorkerFixture
+ * }
+ *
+ * export const test = testBase.extend<Fixtures>({
+ *   network: createNetworkFixture()
+ * })
+ * ```
+ */
+export function createNetworkFixture(
+  args?: CreateNetworkFixtureArgs,
   /** @todo `onUnhandledRequest`? */
-): TestFixture<WorkerFixture, any> {
-  return async ({ page }, use) => {
-    const worker = new WorkerFixture({
-      page,
-      initialHandlers: args?.initialHandlers || [],
-    })
+): [TestFixture<NetworkFixture, any>, { auto: boolean }] {
+  return [
+    async ({ page }, use) => {
+      const worker = new NetworkFixture({
+        page,
+        initialHandlers: args?.initialHandlers || [],
+      })
 
-    await worker.start()
-    await use(worker)
-    await worker.stop()
-  }
+      await worker.start()
+      await use(worker)
+      await worker.stop()
+    },
+    { auto: true },
+  ]
 }
 
-export class WorkerFixture extends SetupApi<LifeCycleEventsMap> {
+export class NetworkFixture extends SetupApi<LifeCycleEventsMap> {
   #page: Page
 
   constructor(args: {