playwright: Implement msw fixture

This can be used as an alternative to the `mirage` fixture and uses `@crates-io/msw` instead.

Author: Turbo87

e2e/helper.ts

@@ -1,4 +1,9 @@
 import { test as base } from '@playwright/test';
+import type { MockServiceWorker } from 'playwright-msw';
+import { http, HttpResponse } from 'msw';
+import { createWorker } from 'playwright-msw';
+import { db, handlers } from '@crates-io/msw';
+
 import { FakeTimers, FakeTimersOptions } from './fixtures/fake-timers';
 import { MiragePage } from './fixtures/mirage';
 import { PercyPage } from './fixtures/percy';
@@ -13,6 +18,11 @@ export type AppOptions = {
 export interface AppFixtures {
   clock: FakeTimers;
   mirage: MiragePage;
+  msw: {
+    worker: MockServiceWorker;
+    db: typeof db;
+    authenticateAs: (user: any) => Promise<void>;
+  };
   ember: EmberPage;
   percy: PercyPage;
   a11y: A11yPage;
@@ -39,6 +49,21 @@ export const test = base.extend<AppOptions & AppFixtures>({
     },
     { scope: 'test' },
   ],
+  // MockServiceWorker integration via `playwright-msw`.
+  //
+  // We are explicitly not using the `createWorkerFixture()`function, because
+  // uses `auto: true`, and we want to be explicit about our usage of the fixture.
+  msw: async ({ page }, use) => {
+    const worker = await createWorker(page, handlers);
+    const authenticateAs = async function (user) {
+      db.mswSession.create({ user });
+      await page.addInitScript("globalThis.localStorage.setItem('isLoggedIn', '1')");
+    };
+
+    await use({ worker, db, authenticateAs });
+    db.reset();
+    worker.resetCookieStore();
+  },
   ember: [
     async ({ page, emberOptions }, use) => {
       let ember = new EmberPage(page);

package.json

@@ -133,6 +133,7 @@
     "msw": "2.7.0",
     "normalize.css": "8.0.1",
     "nyc": "17.1.0",
+    "playwright-msw": "3.0.1",
     "postcss-preset-env": "10.1.3",
     "prettier": "3.4.2",
     "qunit": "2.24.1",