refactor(playwright): use @msw/playwright binding

Author: kleinfreund

examples/with-playwright/app/browser.js

@@ -1,4 +1,4 @@
 import { setupWorker } from 'msw/browser'
 import { handlers } from './handlers'
 
-window.worker = setupWorker(...handlers)
+export const worker = setupWorker(...handlers)

examples/with-playwright/app/index.html

@@ -7,9 +7,11 @@
     <script>
       globalThis.process = { env: {} }
     </script>
-    <script type="module" src="/browser.js"></script>
     <script type="module">
-      await window.worker.start()
+      if (process.env.NODE_ENV === 'development') {
+        const { worker } = await import('./browser.js')
+        await worker.start()
+      }
 
       async function main() {
         fetch('/user')

examples/with-playwright/playwright.config.ts

@@ -11,4 +11,16 @@ export default defineConfig({
       devtools: true,
     },
   },
+  testDir: 'tests',
+  projects: [
+    // Setup file following https://playwright.dev/docs/test-global-setup-teardown
+    {
+      name: 'setup',
+      testMatch: 'playwright.setup.ts',
+    },
+    {
+      name: 'tests',
+      dependencies: ['setup'],
+    },
+  ],
 })

examples/with-playwright/playwright.setup.ts

@@ -0,0 +1,15 @@
+import { test as testBase } from '@playwright/test'
+import { createNetworkFixture, type NetworkFixture } from '@msw/playwright'
+import { handlers } from './app/handlers.js'
+
+interface Fixtures {
+  network: NetworkFixture
+}
+
+// Set up `test` with the msw playwright binding following https://github.com/mswjs/playwright
+export const test = testBase.extend<Fixtures>({
+  // Create a fixture that will control the network in your tests.
+  network: createNetworkFixture({
+    initialHandlers: handlers,
+  }),
+})

examples/with-playwright/example.test.ts …es/with-playwright/tests/example.test.tsexamples/with-playwright/example.test.ts renamed to examples/with-playwright/tests/example.test.ts examples/with-playwright/example.test.ts renamed to examples/with-playwright/tests/example.test.ts

@@ -1,4 +1,5 @@
-import { test, expect } from '@playwright/test'
+import { expect } from '@playwright/test'
+import { test } from '../playwright.setup.js'
 
 test('receives a mocked response to a REST API request', async ({ page }) => {
   await page.goto('/', { waitUntil: 'networkidle' })