refactor(playwright): use @msw/playwright binding

Add @msw/playwright to the playwright example.

Update Playwright to avoid TypeError: this[#page].routeWebSocket is not a function errors when using @msw/playwright.

Use the `@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/example.test.ts

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

examples/with-playwright/package.json

@@ -6,10 +6,11 @@
     "postinstall": "pnpm exec playwright install"
   },
   "devDependencies": {
-    "@playwright/test": "^1.40.1",
+    "@msw/playwright": "^0.4.2",
+    "@playwright/test": "^1.55.0",
     "@web/dev-server": "^0.2.1",
     "msw": "2.11.2",
-    "playwright": "^1.33.0",
+    "playwright": "^1.55.0",
     "typescript": "^5.0.4"
   },
   "msw": {

examples/with-playwright/playwright.utils.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-remix/package.json

@@ -20,14 +20,14 @@
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@playwright/test": "^1.33.0",
+    "@playwright/test": "^1.55.0",
     "@remix-run/dev": "^1.15.0",
     "@remix-run/eslint-config": "^1.15.0",
     "@types/react": "^18.0.35",
     "@types/react-dom": "^18.0.11",
     "eslint": "^8.38.0",
     "msw": "2.11.2",
-    "playwright": "^1.33.0",
+    "playwright": "^1.55.0",
     "typescript": "^4.9.5"
   },
   "engines": {

examples/with-svelte/package.json

@@ -15,7 +15,7 @@
     "postinstall": "pnpm exec playwright install"
   },
   "devDependencies": {
-    "@playwright/test": "^1.33.0",
+    "@playwright/test": "^1.55.0",
     "@sveltejs/adapter-auto": "^2.0.1",
     "@sveltejs/kit": "^1.16.2",
     "@typescript-eslint/eslint-plugin": "^5.59.2",
@@ -24,7 +24,7 @@
     "eslint-config-prettier": "^8.8.0",
     "eslint-plugin-svelte": "^2.27.4",
     "msw": "2.11.2",
-    "playwright": "^1.33.0",
+    "playwright": "^1.55.0",
     "prettier": "^2.8.8",
     "prettier-plugin-svelte": "^2.10.0",
     "svelte": "^3.59.0",