npm - playwriter - Versions diffs - 0.0.63 → 0.0.89 - Mend

playwriter 0.0.63 → 0.0.89

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (223) hide show

package/dist/a11y-client.js +18 -8
package/dist/aria-snapshot.d.ts +41 -3
package/dist/aria-snapshot.d.ts.map +1 -1
package/dist/aria-snapshot.js +134 -55
package/dist/aria-snapshot.js.map +1 -1
package/dist/aria-snapshot.test.js +5 -2
package/dist/aria-snapshot.test.js.map +1 -1
package/dist/aria-snapshot.unit.test.js +83 -41
package/dist/aria-snapshot.unit.test.js.map +1 -1
package/dist/assets/cursors/screen-studio/pointer-macos-tahoe-data-url.d.ts +5 -0
package/dist/assets/cursors/screen-studio/pointer-macos-tahoe-data-url.d.ts.map +1 -0
package/dist/assets/cursors/screen-studio/pointer-macos-tahoe-data-url.js +5 -0
package/dist/assets/cursors/screen-studio/pointer-macos-tahoe-data-url.js.map +1 -0
package/dist/bippy.js +1 -1
package/dist/cdp-log.d.ts +1 -1
package/dist/cdp-log.d.ts.map +1 -1
package/dist/cdp-log.js +1 -1
package/dist/cdp-log.js.map +1 -1
package/dist/cdp-relay.d.ts.map +1 -1
package/dist/cdp-relay.js +492 -298
package/dist/cdp-relay.js.map +1 -1
package/dist/cdp-session.d.ts.map +1 -1
package/dist/cdp-session.js.map +1 -1
package/dist/cdp-types.d.ts.map +1 -1
package/dist/cdp-types.js +7 -7
package/dist/cdp-types.js.map +1 -1
package/dist/clean-html.d.ts.map +1 -1
package/dist/clean-html.js +4 -5
package/dist/clean-html.js.map +1 -1
package/dist/cli.js +45 -27
package/dist/cli.js.map +1 -1
package/dist/create-logger.d.ts.map +1 -1
package/dist/create-logger.js +3 -1
package/dist/create-logger.js.map +1 -1
package/dist/debugger-examples-types.d.ts.map +1 -1
package/dist/debugger.d.ts.map +1 -1
package/dist/debugger.js +1 -3
package/dist/debugger.js.map +1 -1
package/dist/diff-utils.d.ts.map +1 -1
package/dist/diff-utils.js +1 -4
package/dist/diff-utils.js.map +1 -1
package/dist/editor-api.md +12 -2
package/dist/editor-examples.d.ts +1 -1
package/dist/editor-examples.d.ts.map +1 -1
package/dist/editor-examples.js +1 -1
package/dist/editor-examples.js.map +1 -1
package/dist/editor.d.ts +1 -1
package/dist/editor.d.ts.map +1 -1
package/dist/editor.js +1 -1
package/dist/editor.js.map +1 -1
package/dist/executor.d.ts +26 -3
package/dist/executor.d.ts.map +1 -1
package/dist/executor.js +297 -64
package/dist/executor.js.map +1 -1
package/dist/executor.unit.test.js +38 -1
package/dist/executor.unit.test.js.map +1 -1
package/dist/extension-connection.test.js +139 -36
package/dist/extension-connection.test.js.map +1 -1
package/dist/ffmpeg.d.ts +148 -0
package/dist/ffmpeg.d.ts.map +1 -0
package/dist/ffmpeg.js +523 -0
package/dist/ffmpeg.js.map +1 -0
package/dist/ghost-browser.d.ts.map +1 -1
package/dist/ghost-browser.js.map +1 -1
package/dist/ghost-cursor-client.js +287 -0
package/dist/ghost-cursor.d.ts +27 -0
package/dist/ghost-cursor.d.ts.map +1 -0
package/dist/ghost-cursor.js +63 -0
package/dist/ghost-cursor.js.map +1 -0
package/dist/htmlrewrite.d.ts.map +1 -1
package/dist/htmlrewrite.js +17 -55
package/dist/htmlrewrite.js.map +1 -1
package/dist/htmlrewrite.test.js.map +1 -1
package/dist/kill-port.d.ts.map +1 -1
package/dist/kill-port.js +1 -3
package/dist/kill-port.js.map +1 -1
package/dist/locator-selector.test.d.ts +2 -0
package/dist/locator-selector.test.d.ts.map +1 -0
package/dist/locator-selector.test.js +96 -0
package/dist/locator-selector.test.js.map +1 -0
package/dist/mcp-client.js.map +1 -1
package/dist/mcp.d.ts.map +1 -1
package/dist/mcp.js +8 -3
package/dist/mcp.js.map +1 -1
package/dist/on-mouse-action.test.d.ts +2 -0
package/dist/on-mouse-action.test.d.ts.map +1 -0
package/dist/on-mouse-action.test.js +155 -0
package/dist/on-mouse-action.test.js.map +1 -0
package/dist/page-markdown.js +4 -4
package/dist/page-markdown.js.map +1 -1
package/dist/prompt.md +450 -377
package/dist/protocol.d.ts +4 -0
package/dist/protocol.d.ts.map +1 -1
package/dist/readability.js +16 -2
package/dist/recording-ghost-cursor.d.ts +41 -0
package/dist/recording-ghost-cursor.d.ts.map +1 -0
package/dist/recording-ghost-cursor.js +79 -0
package/dist/recording-ghost-cursor.js.map +1 -0
package/dist/recording-relay.d.ts.map +1 -1
package/dist/recording-relay.js +8 -8
package/dist/recording-relay.js.map +1 -1
package/dist/relay-client.d.ts +17 -4
package/dist/relay-client.d.ts.map +1 -1
package/dist/relay-client.js +45 -11
package/dist/relay-client.js.map +1 -1
package/dist/relay-core.test.d.ts.map +1 -1
package/dist/relay-core.test.js +515 -26
package/dist/relay-core.test.js.map +1 -1
package/dist/relay-navigation.test.d.ts.map +1 -1
package/dist/relay-navigation.test.js +169 -31
package/dist/relay-navigation.test.js.map +1 -1
package/dist/relay-session.test.d.ts.map +1 -1
package/dist/relay-session.test.js +113 -65
package/dist/relay-session.test.js.map +1 -1
package/dist/relay-state.d.ts +158 -0
package/dist/relay-state.d.ts.map +1 -0
package/dist/relay-state.js +306 -0
package/dist/relay-state.js.map +1 -0
package/dist/relay-state.test.d.ts +2 -0
package/dist/relay-state.test.d.ts.map +1 -0
package/dist/relay-state.test.js +472 -0
package/dist/relay-state.test.js.map +1 -0
package/dist/scoped-fs.d.ts.map +1 -1
package/dist/scoped-fs.js.map +1 -1
package/dist/screen-recording.d.ts +66 -4
package/dist/screen-recording.d.ts.map +1 -1
package/dist/screen-recording.js +150 -13
package/dist/screen-recording.js.map +1 -1
package/dist/screen-recording.test.d.ts +2 -0
package/dist/screen-recording.test.d.ts.map +1 -0
package/dist/screen-recording.test.js +102 -0
package/dist/screen-recording.test.js.map +1 -0
package/dist/selector-generator.js +1 -1
package/dist/snapshot-tools.test.js +71 -28
package/dist/snapshot-tools.test.js.map +1 -1
package/dist/start-relay-server.d.ts +1 -1
package/dist/start-relay-server.d.ts.map +1 -1
package/dist/start-relay-server.js +1 -1
package/dist/start-relay-server.js.map +1 -1
package/dist/styles-api.md +8 -1
package/dist/styles-examples.d.ts +1 -1
package/dist/styles-examples.d.ts.map +1 -1
package/dist/styles-examples.js +1 -1
package/dist/styles-examples.js.map +1 -1
package/dist/styles.d.ts.map +1 -1
package/dist/styles.js +1 -3
package/dist/styles.js.map +1 -1
package/dist/test-declarations.d.ts.map +1 -1
package/dist/test-utils.d.ts +1 -1
package/dist/test-utils.d.ts.map +1 -1
package/dist/test-utils.js +7 -5
package/dist/test-utils.js.map +1 -1
package/dist/utils.d.ts.map +1 -1
package/dist/utils.js.map +1 -1
package/dist/wait-for-page-load.d.ts.map +1 -1
package/dist/wait-for-page-load.js +1 -1
package/dist/wait-for-page-load.js.map +1 -1
package/package.json +4 -3
package/src/a11y-client.ts +5 -4
package/src/aria-snapshot.test.ts +5 -2
package/src/aria-snapshot.ts +306 -117
package/src/aria-snapshot.unit.test.ts +199 -141
package/src/aria-snapshots/github-interactive.txt +2 -0
package/src/aria-snapshots/github-raw.txt +5 -1
package/src/aria-snapshots/hackernews-interactive.txt +238 -241
package/src/aria-snapshots/hackernews-raw.txt +265 -269
package/src/assets/aria-labels-example.png +0 -0
package/src/assets/aria-labels-github.png +0 -0
package/src/assets/aria-labels-hacker-news.png +0 -0
package/src/assets/aria-labels-old-reddit.png +0 -0
package/src/assets/cursors/screen-studio/pointer-macos-tahoe-data-url.ts +5 -0
package/src/assets/cursors/screen-studio/pointer-macos-tahoe.svg +18 -0
package/src/cdp-log.ts +4 -1
package/src/cdp-relay.ts +1059 -737
package/src/cdp-session.ts +12 -3
package/src/cdp-types.ts +51 -51
package/src/clean-html.ts +4 -5
package/src/cli.ts +82 -55
package/src/create-logger.ts +5 -3
package/src/debugger-examples-types.ts +4 -1
package/src/debugger.ts +1 -5
package/src/diff-utils.ts +2 -5
package/src/editor-examples.ts +11 -1
package/src/editor.ts +10 -2
package/src/executor.ts +374 -73
package/src/executor.unit.test.ts +48 -1
package/src/extension-connection.test.ts +612 -488
package/src/ffmpeg.ts +769 -0
package/src/ghost-browser.ts +4 -6
package/src/ghost-cursor-client.ts +369 -0
package/src/ghost-cursor.ts +110 -0
package/src/htmlrewrite.test.ts +6 -2
package/src/htmlrewrite.ts +348 -386
package/src/kill-port.ts +1 -3
package/src/locator-selector.test.ts +115 -0
package/src/mcp-client.ts +1 -1
package/src/mcp.ts +21 -15
package/src/on-mouse-action.test.ts +196 -0
package/src/page-markdown.ts +7 -7
package/src/protocol.ts +73 -57
package/src/recording-ghost-cursor.ts +113 -0
package/src/recording-relay.ts +20 -12
package/src/relay-client.ts +85 -18
package/src/relay-core.test.ts +1117 -578
package/src/relay-navigation.test.ts +648 -483
package/src/relay-session.test.ts +984 -929
package/src/relay-state.test.ts +570 -0
package/src/relay-state.ts +497 -0
package/src/resource.md +21 -49
package/src/scoped-fs.ts +9 -3
package/src/screen-recording.test.ts +111 -0
package/src/screen-recording.ts +256 -31
package/src/skill.md +476 -396
package/src/snapshot-tools.test.ts +580 -528
package/src/snapshots/shadcn-ui-accessibility-full.md +8 -8
package/src/snapshots/shadcn-ui-accessibility-interactive.md +8 -8
package/src/start-relay-server.ts +14 -11
package/src/styles-examples.ts +8 -1
package/src/styles.ts +20 -21
package/src/test-declarations.ts +6 -6
package/src/test-utils.ts +104 -91
package/src/utils.ts +2 -1
package/src/wait-for-page-load.ts +6 -1

package/src/relay-navigation.test.ts CHANGED Viewed

@@ -1,194 +1,195 @@
 import { describe, it, expect, beforeAll, afterAll } from 'vitest'
 import { chromium, type Page } from '@xmorse/playwright-core'
+import WebSocket from 'ws'
 import { getCdpUrl } from './utils.js'
-import { setupTestContext, cleanupTestContext, getExtensionServiceWorker, type TestContext, withTimeout, createSimpleServer } from './test-utils.js'
+import {
+  setupTestContext,
+  cleanupTestContext,
+  getExtensionServiceWorker,
+  type TestContext,
+  withTimeout,
+  createSimpleServer,
+} from './test-utils.js'
 import './test-declarations.js'
 const TEST_PORT = 19992
 describe('Relay Navigation Tests', () => {
-    let testCtx: TestContext | null = null
+  let testCtx: TestContext | null = null
-    beforeAll(async () => {
-        testCtx = await setupTestContext({ port: TEST_PORT, tempDirPrefix: 'pw-nav-test-', toggleExtension: true })
-    }, 600000)
+  beforeAll(async () => {
+    testCtx = await setupTestContext({ port: TEST_PORT, tempDirPrefix: 'pw-nav-test-', toggleExtension: true })
+  }, 600000)
-    afterAll(async () => {
-        await cleanupTestContext(testCtx)
-        testCtx = null
-    })
+  afterAll(async () => {
+    await cleanupTestContext(testCtx)
+    testCtx = null
+  })
-    const getBrowserContext = () => {
-        if (!testCtx?.browserContext) throw new Error('Browser not initialized')
-        return testCtx.browserContext
-    }
+  const getBrowserContext = () => {
+    if (!testCtx?.browserContext) throw new Error('Browser not initialized')
+    return testCtx.browserContext
+  }
-    const waitForStableDocumentReadyState = async ({
-        page,
-        timeoutMs,
-    }: {
-        page: Page
-        timeoutMs: number
-    }) => {
-        const startTime = Date.now()
-        while (Date.now() - startTime < timeoutMs) {
-            try {
-                const readyState = await page.evaluate(() => {
-                    return document.readyState
-                })
-                if (readyState !== 'loading') {
-                    return
-                }
-            } catch (e) {
-                if (!(e instanceof Error) || !e.message.includes('Execution context was destroyed')) {
-                    throw new Error('Failed while waiting for stable document readyState', { cause: e })
-                }
-            }
+  const waitForStableDocumentReadyState = async ({ page, timeoutMs }: { page: Page; timeoutMs: number }) => {
+    const startTime = Date.now()
-            await page.waitForTimeout(100)
+    while (Date.now() - startTime < timeoutMs) {
+      try {
+        const readyState = await page.evaluate(() => {
+          return document.readyState
+        })
+        if (readyState !== 'loading') {
+          return
+        }
+      } catch (e) {
+        if (!(e instanceof Error) || !e.message.includes('Execution context was destroyed')) {
+          throw new Error('Failed while waiting for stable document readyState', { cause: e })
         }
+      }
-        throw new Error(`Timed out waiting for stable document readyState after ${timeoutMs}ms`)
+      await page.waitForTimeout(100)
     }
-    it('should be usable after toggle with valid URL', async () => {
-        // Validates the extension waits for a non-empty URL before attaching.
+    throw new Error(`Timed out waiting for stable document readyState after ${timeoutMs}ms`)
+  }
-        const browserContext = getBrowserContext()
-        const serviceWorker = await getExtensionServiceWorker(browserContext)
-        const browser = await chromium.connectOverCDP(getCdpUrl({ port: TEST_PORT }))
-        const context = browser.contexts()[0]
+  it('should be usable after toggle with valid URL', async () => {
+    // Validates the extension waits for a non-empty URL before attaching.
-        const server = await createSimpleServer({
-            routes: {
-                '/': '<!doctype html><html><body>ok</body></html>',
-            },
-        })
+    const browserContext = getBrowserContext()
+    const serviceWorker = await getExtensionServiceWorker(browserContext)
+    const browser = await chromium.connectOverCDP(getCdpUrl({ port: TEST_PORT }))
+    const context = browser.contexts()[0]
-        const page = await browserContext.newPage()
-        try {
-            await page.goto(server.baseUrl, { waitUntil: 'domcontentloaded' })
-            await page.bringToFront()
+    const server = await createSimpleServer({
+      routes: {
+        '/': '<!doctype html><html><body>ok</body></html>',
+      },
+    })
-            const pagePromise = context.waitForEvent('page', { timeout: 5000 })
+    const page = await browserContext.newPage()
+    try {
+      await page.goto(server.baseUrl, { waitUntil: 'domcontentloaded' })
+      await page.bringToFront()
-            await serviceWorker.evaluate(async () => {
-                await globalThis.toggleExtensionForActiveTab()
-            })
+      const pagePromise = context.waitForEvent('page', { timeout: 5000 })
-            const targetPage = await pagePromise
-            console.log('Page URL when event fired:', targetPage.url())
+      await serviceWorker.evaluate(async () => {
+        await globalThis.toggleExtensionForActiveTab()
+      })
-            expect(targetPage.url()).not.toBe('')
-            expect(targetPage.url()).not.toBe(':')
-            expect(targetPage.url()).toContain(server.baseUrl)
+      const targetPage = await pagePromise
+      console.log('Page URL when event fired:', targetPage.url())
-            const result = await targetPage.evaluate(() => window.location.href)
-            expect(result).toContain(server.baseUrl)
-        } finally {
-            await browser.close()
-            await page.close()
-            await server.close()
-        }
-    }, 15000)
+      expect(targetPage.url()).not.toBe('')
+      expect(targetPage.url()).not.toBe(':')
+      expect(targetPage.url()).toContain(server.baseUrl)
+      const result = await targetPage.evaluate(() => window.location.href)
+      expect(result).toContain(server.baseUrl)
+    } finally {
+      await browser.close()
+      await page.close()
+      await server.close()
+    }
+  }, 15000)
-    it('should expose iframe frames when connecting to an existing page over CDP', async () => {
-        const browserContext = getBrowserContext()
-        const serviceWorker = await getExtensionServiceWorker(browserContext)
+  it('should expose iframe frames when connecting to an existing page over CDP', async () => {
+    const browserContext = getBrowserContext()
+    const serviceWorker = await getExtensionServiceWorker(browserContext)
-        const childServer = await createSimpleServer({
-            routes: {
-                '/child.html': '<!doctype html><html><body>child</body></html>',
-            },
-        })
-        const childUrl = `${childServer.baseUrl}/child.html`
+    const childServer = await createSimpleServer({
+      routes: {
+        '/child.html': '<!doctype html><html><body>child</body></html>',
+      },
+    })
+    const childUrl = `${childServer.baseUrl}/child.html`
-        const parentServer = await createSimpleServer({
-            routes: {
-                '/': `<!doctype html><html><body><iframe src="${childUrl}"></iframe></body></html>`,
-            },
-        })
+    const parentServer = await createSimpleServer({
+      routes: {
+        '/': `<!doctype html><html><body><iframe src="${childUrl}"></iframe></body></html>`,
+      },
+    })
-        const page = await browserContext.newPage()
-        try {
-            await withTimeout({
-                promise: page.goto(parentServer.baseUrl, { waitUntil: 'domcontentloaded', timeout: 5000 }),
-                timeoutMs: 6000,
-                errorMessage: 'Timed out loading parent page for iframe test',
-            })
-            await withTimeout({
-                promise: page.frameLocator('iframe').locator('body').waitFor({ timeout: 5000 }),
-                timeoutMs: 6000,
-                errorMessage: 'Timed out waiting for iframe to attach in parent page',
-            })
-            expect(page.frames().map((frame) => frame.url())).toContain(childUrl)
-            await page.bringToFront()
-            await withTimeout({
-                promise: serviceWorker.evaluate(async () => {
-                    await globalThis.toggleExtensionForActiveTab()
-                }),
-                timeoutMs: 5000,
-                errorMessage: 'Timed out toggling extension for iframe test',
-            })
-            await new Promise((r) => { setTimeout(r, 400) })
-            const browser = await withTimeout({
-                promise: chromium.connectOverCDP(getCdpUrl({ port: TEST_PORT })),
-                timeoutMs: 5000,
-                errorMessage: 'Timed out connecting over CDP for iframe test',
-            })
-            const context = browser.contexts()[0]
-            const cdpPage = context.pages().find((candidate) => {
-                return candidate.url().startsWith(parentServer.baseUrl)
-            })
-            expect(cdpPage).toBeDefined()
-            const frames = cdpPage!.frames()
-            const childFrame = frames.find((frame) => {
-                return frame.url() === childUrl
-            })
-            expect(frames.length).toBe(2)
-            expect(childFrame).toBeDefined()
-            await withTimeout({
-                promise: browser.close(),
-                timeoutMs: 5000,
-                errorMessage: 'Timed out closing CDP browser for iframe test',
-            })
-        } finally {
-            await withTimeout({
-                promise: page.close(),
-                timeoutMs: 5000,
-                errorMessage: 'Timed out closing page for iframe test',
-            })
-            await Promise.all([
-                parentServer.close(),
-                childServer.close(),
-            ])
-        }
-    }, 60000)
+    const page = await browserContext.newPage()
+    try {
+      await withTimeout({
+        promise: page.goto(parentServer.baseUrl, { waitUntil: 'domcontentloaded', timeout: 5000 }),
+        timeoutMs: 6000,
+        errorMessage: 'Timed out loading parent page for iframe test',
+      })
+      await withTimeout({
+        promise: page.frameLocator('iframe').locator('body').waitFor({ timeout: 5000 }),
+        timeoutMs: 6000,
+        errorMessage: 'Timed out waiting for iframe to attach in parent page',
+      })
+      expect(page.frames().map((frame) => frame.url())).toContain(childUrl)
+      await page.bringToFront()
+      await withTimeout({
+        promise: serviceWorker.evaluate(async () => {
+          await globalThis.toggleExtensionForActiveTab()
+        }),
+        timeoutMs: 5000,
+        errorMessage: 'Timed out toggling extension for iframe test',
+      })
+      await new Promise((r) => {
+        setTimeout(r, 400)
+      })
+      const browser = await withTimeout({
+        promise: chromium.connectOverCDP(getCdpUrl({ port: TEST_PORT })),
+        timeoutMs: 5000,
+        errorMessage: 'Timed out connecting over CDP for iframe test',
+      })
+      const context = browser.contexts()[0]
+      const cdpPage = context.pages().find((candidate) => {
+        return candidate.url().startsWith(parentServer.baseUrl)
+      })
+      expect(cdpPage).toBeDefined()
+      const frames = cdpPage!.frames()
+      const childFrame = frames.find((frame) => {
+        return frame.url() === childUrl
+      })
+      expect(frames.length).toBe(2)
+      expect(childFrame).toBeDefined()
+      await withTimeout({
+        promise: browser.close(),
+        timeoutMs: 5000,
+        errorMessage: 'Timed out closing CDP browser for iframe test',
+      })
+    } finally {
+      await withTimeout({
+        promise: page.close(),
+        timeoutMs: 5000,
+        errorMessage: 'Timed out closing page for iframe test',
+      })
+      await Promise.all([parentServer.close(), childServer.close()])
+    }
+  }, 60000)
-    it('should resolve locators for cross-origin iframe that starts with empty src', async () => {
-        const browserContext = getBrowserContext()
-        const serviceWorker = await getExtensionServiceWorker(browserContext)
+  it('should resolve locators for cross-origin iframe that starts with empty src', async () => {
+    const browserContext = getBrowserContext()
+    const serviceWorker = await getExtensionServiceWorker(browserContext)
-        const childServer = await createSimpleServer({
-            routes: {
-                '/login.html': '<!doctype html><html><body><button id="login-btn">Login</button></body></html>',
-                '/canvas.html': '<!doctype html><html><body><button id="canvas-btn">Canvas</button></body></html>',
-            },
-        })
-        const loginUrl = `${childServer.baseUrl}/login.html`
-        const canvasUrl = `${childServer.baseUrl}/canvas.html`
-        const parentServer = await createSimpleServer({
-            routes: {
-                // Reproduces Framer-like plugin iframes: attached with empty src first,
-                // then navigated cross-origin after auto-attach is active.
-                '/': `<!doctype html>
+    const childServer = await createSimpleServer({
+      routes: {
+        '/login.html': '<!doctype html><html><body><button id="login-btn">Login</button></body></html>',
+        '/canvas.html': '<!doctype html><html><body><button id="canvas-btn">Canvas</button></body></html>',
+      },
+    })
+    const loginUrl = `${childServer.baseUrl}/login.html`
+    const canvasUrl = `${childServer.baseUrl}/canvas.html`
+    const parentServer = await createSimpleServer({
+      routes: {
+        // Reproduces Framer-like plugin iframes: attached with empty src first,
+        // then navigated cross-origin after auto-attach is active.
+        '/': `<!doctype html>
 <html>
   <body>
     <iframe id="plugin-frame"></iframe>
@@ -203,194 +204,200 @@ describe('Relay Navigation Tests', () => {
     </script>
   </body>
 </html>`,
-            },
+      },
+    })
+    const page = await browserContext.newPage()
+    try {
+      await withTimeout({
+        promise: page.goto(parentServer.baseUrl, { waitUntil: 'domcontentloaded', timeout: 5000 }),
+        timeoutMs: 6000,
+        errorMessage: 'Timed out loading parent page for empty-src iframe test',
+      })
+      await page.bringToFront()
+      await withTimeout({
+        promise: serviceWorker.evaluate(async () => {
+          await globalThis.toggleExtensionForActiveTab()
+        }),
+        timeoutMs: 5000,
+        errorMessage: 'Timed out toggling extension for empty-src iframe test',
+      })
+      const browser = await withTimeout({
+        promise: chromium.connectOverCDP(getCdpUrl({ port: TEST_PORT })),
+        timeoutMs: 5000,
+        errorMessage: 'Timed out connecting over CDP for empty-src iframe test',
+      })
+      try {
+        const context = browser.contexts()[0]
+        const cdpPage = context.pages().find((candidate) => {
+          return candidate.url().startsWith(parentServer.baseUrl)
         })
+        expect(cdpPage).toBeDefined()
-        const page = await browserContext.newPage()
-        try {
-            await withTimeout({
-                promise: page.goto(parentServer.baseUrl, { waitUntil: 'domcontentloaded', timeout: 5000 }),
-                timeoutMs: 6000,
-                errorMessage: 'Timed out loading parent page for empty-src iframe test',
-            })
-            await page.bringToFront()
-            await withTimeout({
-                promise: serviceWorker.evaluate(async () => {
-                    await globalThis.toggleExtensionForActiveTab()
-                }),
-                timeoutMs: 5000,
-                errorMessage: 'Timed out toggling extension for empty-src iframe test',
-            })
-            const browser = await withTimeout({
-                promise: chromium.connectOverCDP(getCdpUrl({ port: TEST_PORT })),
-                timeoutMs: 5000,
-                errorMessage: 'Timed out connecting over CDP for empty-src iframe test',
-            })
-            try {
-                const context = browser.contexts()[0]
-                const cdpPage = context.pages().find((candidate) => {
-                    return candidate.url().startsWith(parentServer.baseUrl)
-                })
-                expect(cdpPage).toBeDefined()
-                await withTimeout({
-                    promise: page.evaluate(() => {
-                        ;(window as Window & { startPluginFlow?: () => void }).startPluginFlow?.()
-                    }),
-                    timeoutMs: 3000,
-                    errorMessage: 'Timed out starting plugin iframe flow',
-                })
-                const pluginFrame = await withTimeout({
-                    promise: (async () => {
-                        for (let attempt = 0; attempt < 40; attempt += 1) {
-                            const frame = cdpPage!.frames().find((candidate) => {
-                                return candidate.url() === loginUrl || candidate.url() === canvasUrl
-                            })
-                            if (frame) {
-                                return frame
-                            }
-                            await cdpPage!.waitForTimeout(100)
-                        }
-                        throw new Error('Plugin frame did not appear with expected URL')
-                    })(),
-                    timeoutMs: 5000,
-                    errorMessage: 'Timed out waiting for plugin frame URL in empty-src iframe test',
-                })
-                await withTimeout({
-                    promise: pluginFrame.locator('button').first().waitFor({ state: 'attached' }),
-                    timeoutMs: 5000,
-                    errorMessage: 'Timed out waiting for button locator in empty-src iframe test',
-                })
-                const buttonCount = await pluginFrame.locator('button').count()
-                expect(buttonCount).toBe(1)
-            } finally {
-                await withTimeout({
-                    promise: browser.close(),
-                    timeoutMs: 5000,
-                    errorMessage: 'Timed out closing CDP browser for empty-src iframe test',
-                })
-            }
-        } finally {
-            await withTimeout({
-                promise: page.close(),
-                timeoutMs: 5000,
-                errorMessage: 'Timed out closing page for empty-src iframe test',
-            })
-            await Promise.all([
-                parentServer.close(),
-                childServer.close(),
-            ])
-        }
-    }, 60000)
+        await withTimeout({
+          promise: page.evaluate(() => {
+            ;(window as Window & { startPluginFlow?: () => void }).startPluginFlow?.()
+          }),
+          timeoutMs: 3000,
+          errorMessage: 'Timed out starting plugin iframe flow',
+        })
-    it('should have non-empty URLs when connecting to already-loaded pages', async () => {
-        const _browserContext = getBrowserContext()
-        const serviceWorker = await getExtensionServiceWorker(_browserContext)
+        const pluginFrame = await withTimeout({
+          promise: (async () => {
+            for (let attempt = 0; attempt < 40; attempt += 1) {
+              const frame = cdpPage!.frames().find((candidate) => {
+                return candidate.url() === loginUrl || candidate.url() === canvasUrl
+              })
+              if (frame) {
+                return frame
+              }
+              await cdpPage!.waitForTimeout(100)
+            }
+            throw new Error('Plugin frame did not appear with expected URL')
+          })(),
+          timeoutMs: 5000,
+          errorMessage: 'Timed out waiting for plugin frame URL in empty-src iframe test',
+        })
-        const page = await _browserContext.newPage()
-        await page.goto('https://discord.com/login', { waitUntil: 'load' })
-        await page.bringToFront()
+        await withTimeout({
+          promise: pluginFrame.locator('button').first().waitFor({ state: 'attached' }),
+          timeoutMs: 5000,
+          errorMessage: 'Timed out waiting for button locator in empty-src iframe test',
+        })
-        await serviceWorker.evaluate(async () => {
-            await globalThis.toggleExtensionForActiveTab()
+        const buttonCount = await pluginFrame.locator('button').count()
+        expect(buttonCount).toBe(1)
+      } finally {
+        await withTimeout({
+          promise: browser.close(),
+          timeoutMs: 5000,
+          errorMessage: 'Timed out closing CDP browser for empty-src iframe test',
         })
+      }
+    } finally {
+      await withTimeout({
+        promise: page.close(),
+        timeoutMs: 5000,
+        errorMessage: 'Timed out closing page for empty-src iframe test',
+      })
+      await Promise.all([parentServer.close(), childServer.close()])
+    }
+  }, 60000)
-        const browser = await chromium.connectOverCDP(getCdpUrl({ port: TEST_PORT }))
-        const context = browser.contexts()[0]
+  it('should have non-empty URLs when connecting to already-loaded pages', async () => {
+    const _browserContext = getBrowserContext()
+    const serviceWorker = await getExtensionServiceWorker(_browserContext)
-        const pages = context.pages()
-        console.log('All page URLs:', pages.map(p => p.url()))
+    const page = await _browserContext.newPage()
+    await page.goto('https://discord.com/login', { waitUntil: 'load' })
+    await page.bringToFront()
-        expect(pages.length).toBeGreaterThan(0)
-        for (const p of pages) {
-            expect(p.url()).not.toBe('')
-            expect(p.url()).not.toBe(':')
-            expect(p.url()).not.toBeUndefined()
-        }
+    await serviceWorker.evaluate(async () => {
+      await globalThis.toggleExtensionForActiveTab()
+    })
-        const discordPage = pages.find(p => p.url().includes('discord.com'))
-        expect(discordPage).toBeDefined()
+    const browser = await chromium.connectOverCDP(getCdpUrl({ port: TEST_PORT }))
+    const context = browser.contexts()[0]
-        const result = await discordPage!.evaluate(() => window.location.href)
-        expect(result).toContain('discord.com')
+    const pages = context.pages()
+    console.log(
+      'All page URLs:',
+      pages.map((p) => p.url()),
+    )
-        await browser.close()
-        await page.close()
-    }, 60000)
+    expect(pages.length).toBeGreaterThan(0)
+    for (const p of pages) {
+      expect(p.url()).not.toBe('')
+      expect(p.url()).not.toBe(':')
+      expect(p.url()).not.toBeUndefined()
+    }
-    it('should navigate to notion without hanging', async () => {
-        const browserContext = getBrowserContext()
-        const serviceWorker = await getExtensionServiceWorker(browserContext)
+    const discordPage = pages.find((p) => p.url().includes('discord.com'))
+    expect(discordPage).toBeDefined()
-        const page = await browserContext.newPage()
-        const initialUrl = 'https://example.com/notion-repro'
-        await page.goto(initialUrl)
-        await page.bringToFront()
+    const result = await discordPage!.evaluate(() => window.location.href)
+    expect(result).toContain('discord.com')
-        await serviceWorker.evaluate(async () => {
-            await globalThis.toggleExtensionForActiveTab()
-        })
+    await browser.close()
+    await page.close()
+  }, 60000)
-        await new Promise(r => setTimeout(r, 100))
+  it('should navigate to notion without hanging', async () => {
+    const browserContext = getBrowserContext()
+    const serviceWorker = await getExtensionServiceWorker(browserContext)
-        const browser = await chromium.connectOverCDP(getCdpUrl({ port: TEST_PORT }))
-        const cdpPage = browser.contexts()[0].pages().find(p => p.url() === initialUrl)
-        expect(cdpPage).toBeDefined()
+    const page = await browserContext.newPage()
+    const initialUrl = 'https://example.com/notion-repro'
+    await page.goto(initialUrl)
+    await page.bringToFront()
-        const response = await cdpPage!.goto('https://www.notion.so', { waitUntil: 'domcontentloaded', timeout: 20000 })
+    await serviceWorker.evaluate(async () => {
+      await globalThis.toggleExtensionForActiveTab()
+    })
-        const currentUrl = cdpPage!.url()
-        const responseUrl = response?.url() ?? ''
-        expect(responseUrl).toMatch(/notion\.(so|com)/)
-        expect(currentUrl).toMatch(/notion\.(so|com)/)
-        expect(await cdpPage!.evaluate(() => document.readyState)).not.toBe('loading')
+    await new Promise((r) => setTimeout(r, 100))
-        await browser.close()
-        await page.close()
-    }, 60000)
+    const browser = await chromium.connectOverCDP(getCdpUrl({ port: TEST_PORT }))
+    const cdpPage = browser
+      .contexts()[0]
+      .pages()
+      .find((p) => p.url() === initialUrl)
+    expect(cdpPage).toBeDefined()
-    it('should navigate to youtube without hanging', async () => {
-        const browserContext = getBrowserContext()
-        const serviceWorker = await getExtensionServiceWorker(browserContext)
+    const response = await cdpPage!.goto('https://www.notion.so', { waitUntil: 'domcontentloaded', timeout: 20000 })
-        const page = await browserContext.newPage()
-        await page.goto('about:blank')
-        await page.bringToFront()
+    const currentUrl = cdpPage!.url()
+    const responseUrl = response?.url() ?? ''
+    expect(responseUrl).toMatch(/notion\.(so|com)/)
+    expect(currentUrl).toMatch(/notion\.(so|com)/)
+    expect(await cdpPage!.evaluate(() => document.readyState)).not.toBe('loading')
-        await serviceWorker.evaluate(async () => {
-            await globalThis.toggleExtensionForActiveTab()
-        })
+    await browser.close()
+    await page.close()
+  }, 60000)
-        await new Promise(r => setTimeout(r, 100))
+  it('should navigate to youtube without hanging', async () => {
+    const browserContext = getBrowserContext()
+    const serviceWorker = await getExtensionServiceWorker(browserContext)
-        const browser = await chromium.connectOverCDP(getCdpUrl({ port: TEST_PORT }))
-        const cdpPage = browser.contexts()[0].pages().find(p => p.url().includes('about:'))
-        expect(cdpPage).toBeDefined()
+    const page = await browserContext.newPage()
+    await page.goto('about:blank')
+    await page.bringToFront()
-        const response = await cdpPage!.goto('https://www.youtube.com', { waitUntil: 'domcontentloaded', timeout: 20000 })
-        const currentUrl = cdpPage!.url()
-        const responseUrl = response?.url() ?? ''
+    await serviceWorker.evaluate(async () => {
+      await globalThis.toggleExtensionForActiveTab()
+    })
+    await new Promise((r) => setTimeout(r, 100))
+    const browser = await chromium.connectOverCDP(getCdpUrl({ port: TEST_PORT }))
+    const cdpPage = browser
+      .contexts()[0]
+      .pages()
+      .find((p) => p.url().includes('about:'))
+    expect(cdpPage).toBeDefined()
-        expect(responseUrl).toContain('youtube')
-        expect(currentUrl).toContain('youtube')
-        await waitForStableDocumentReadyState({ page: cdpPage!, timeoutMs: 5000 })
+    const response = await cdpPage!.goto('https://www.youtube.com', { waitUntil: 'domcontentloaded', timeout: 20000 })
+    const currentUrl = cdpPage!.url()
+    const responseUrl = response?.url() ?? ''
-        await browser.close()
-        await page.close()
-    }, 60000)
+    expect(responseUrl).toContain('youtube')
+    expect(currentUrl).toContain('youtube')
+    await waitForStableDocumentReadyState({ page: cdpPage!, timeoutMs: 5000 })
-    it('should maintain correct page.url() with iframe-heavy pages', async () => {
-        const browserContext = getBrowserContext()
-        const serviceWorker = await getExtensionServiceWorker(browserContext)
+    await browser.close()
+    await page.close()
+  }, 60000)
-        const page = await browserContext.newPage()
-        await page.setContent(`
+  it('should maintain correct page.url() with iframe-heavy pages', async () => {
+    const browserContext = getBrowserContext()
+    const serviceWorker = await getExtensionServiceWorker(browserContext)
+    const page = await browserContext.newPage()
+    await page.setContent(`
             <html>
                 <head><title>Iframe Test Page</title></head>
                 <body>
@@ -401,195 +408,353 @@ describe('Relay Navigation Tests', () => {
                 </body>
             </html>
         `)
-        await page.bringToFront()
+    await page.bringToFront()
-        await serviceWorker.evaluate(async () => {
-            await globalThis.toggleExtensionForActiveTab()
-        })
+    await serviceWorker.evaluate(async () => {
+      await globalThis.toggleExtensionForActiveTab()
+    })
-        await new Promise(r => setTimeout(r, 100))
-        for (let i = 0; i < 3; i++) {
-            const browser = await chromium.connectOverCDP(getCdpUrl({ port: TEST_PORT }))
-            const pages = browser.contexts()[0].pages()
-            let iframePage
-            for (const p of pages) {
-                const html = await p.content()
-                if (html.includes('Iframe Heavy Page')) {
-                    iframePage = p
-                    break
-                }
-            }
+    await new Promise((r) => setTimeout(r, 100))
+    for (let i = 0; i < 3; i++) {
+      const browser = await chromium.connectOverCDP(getCdpUrl({ port: TEST_PORT }))
+      const pages = browser.contexts()[0].pages()
+      let iframePage
+      for (const p of pages) {
+        const html = await p.content()
+        if (html.includes('Iframe Heavy Page')) {
+          iframePage = p
+          break
+        }
+      }
-            expect(iframePage).toBeDefined()
-            expect(iframePage?.url()).toContain('about:')
+      expect(iframePage).toBeDefined()
+      expect(iframePage?.url()).toContain('about:')
-            await browser.close()
-            await new Promise(r => setTimeout(r, 100))
-        }
+      await browser.close()
+      await new Promise((r) => setTimeout(r, 100))
+    }
-        await page.close()
-    }, 30000)
+    await page.close()
+  }, 30000)
-    it('should work with stagehand', async () => {
-        const browserContext = getBrowserContext()
-        const serviceWorker = await getExtensionServiceWorker(browserContext)
+  it('should work with stagehand', async () => {
+    const browserContext = getBrowserContext()
+    const serviceWorker = await getExtensionServiceWorker(browserContext)
-        await serviceWorker.evaluate(async () => {
-            await globalThis.disconnectEverything()
-        })
-        await new Promise(r => setTimeout(r, 100))
+    await serviceWorker.evaluate(async () => {
+      await globalThis.disconnectEverything()
+    })
+    await new Promise((r) => setTimeout(r, 100))
-        const targetUrl = 'https://example.com/'
+    const targetUrl = 'https://example.com/'
-        const enableResult = await serviceWorker.evaluate(async (url) => {
-            const tab = await chrome.tabs.create({ url, active: true })
-            await new Promise(r => setTimeout(r, 100))
-            return await globalThis.toggleExtensionForActiveTab()
-        }, targetUrl)
+    const enableResult = await serviceWorker.evaluate(async (url) => {
+      const tab = await chrome.tabs.create({ url, active: true })
+      await new Promise((r) => setTimeout(r, 100))
+      return await globalThis.toggleExtensionForActiveTab()
+    }, targetUrl)
-        console.log('Extension enabled:', enableResult)
-        expect(enableResult.isConnected).toBe(true)
+    console.log('Extension enabled:', enableResult)
+    expect(enableResult.isConnected).toBe(true)
-        await new Promise(r => setTimeout(r, 100))
+    await new Promise((r) => setTimeout(r, 100))
-        const { Stagehand } = await import('@browserbasehq/stagehand')
+    const { Stagehand } = await import('@browserbasehq/stagehand')
-        const stagehand = new Stagehand({
-            env: 'LOCAL',
-            verbose: 1,
-            disablePino: true,
-            localBrowserLaunchOptions: {
-                cdpUrl: getCdpUrl({ port: TEST_PORT }),
-            },
-        })
+    const stagehand = new Stagehand({
+      env: 'LOCAL',
+      verbose: 1,
+      disablePino: true,
+      localBrowserLaunchOptions: {
+        cdpUrl: getCdpUrl({ port: TEST_PORT }),
+      },
+    })
-        console.log('Initializing Stagehand...')
-        await stagehand.init()
-        console.log('Stagehand initialized')
+    console.log('Initializing Stagehand...')
+    await stagehand.init()
+    console.log('Stagehand initialized')
-        const context = stagehand.context
-        expect(context).toBeDefined()
+    const context = stagehand.context
+    expect(context).toBeDefined()
-        const pages = context.pages()
-        console.log('Stagehand pages:', pages.length, pages.map(p => p.url()))
+    const pages = context.pages()
+    console.log(
+      'Stagehand pages:',
+      pages.length,
+      pages.map((p) => p.url()),
+    )
-        const stagehandPage = pages.find(p => p.url().includes('example.com'))
-        expect(stagehandPage).toBeDefined()
+    const stagehandPage = pages.find((p) => p.url().includes('example.com'))
+    expect(stagehandPage).toBeDefined()
-        const url = stagehandPage!.url()
-        console.log('Stagehand page URL:', url)
-        expect(url).toContain('example.com')
+    const url = stagehandPage!.url()
+    console.log('Stagehand page URL:', url)
+    expect(url).toContain('example.com')
-        await stagehand.close()
-    }, 60000)
+    await stagehand.close()
+  }, 60000)
-    it('should expose CDP discovery endpoints /json/version and /json/list', async () => {
-        const browserContext = getBrowserContext()
-        const serviceWorker = await getExtensionServiceWorker(browserContext)
+  it('should expose CDP discovery endpoints /json/version and /json/list', async () => {
+    const browserContext = getBrowserContext()
+    const serviceWorker = await getExtensionServiceWorker(browserContext)
-        const page = await browserContext.newPage()
-        await page.goto('https://example.com')
-        await page.bringToFront()
+    const page = await browserContext.newPage()
+    await page.goto('https://example.com')
+    await page.bringToFront()
-        await serviceWorker.evaluate(async () => {
-            await globalThis.toggleExtensionForActiveTab()
-        })
-        await new Promise(r => setTimeout(r, 200))
-        // Test /json/version
-        const versionRes = await fetch(`http://127.0.0.1:${TEST_PORT}/json/version`)
-        expect(versionRes.status).toBe(200)
-        const versionJson = await versionRes.json() as { webSocketDebuggerUrl: string }
-        expect(versionJson).toMatchObject({
-            'Browser': expect.stringContaining('Playwriter/'),
-            'Protocol-Version': '1.3',
-            'webSocketDebuggerUrl': expect.stringContaining('ws://'),
-        })
-        expect(versionJson.webSocketDebuggerUrl).toContain(`127.0.0.1:${TEST_PORT}/cdp`)
-        // Test /json/version/ (trailing slash)
-        const versionSlashRes = await fetch(`http://127.0.0.1:${TEST_PORT}/json/version/`)
-        expect(versionSlashRes.status).toBe(200)
-        // Test /json/list
-        const listRes = await fetch(`http://127.0.0.1:${TEST_PORT}/json/list`)
-        expect(listRes.status).toBe(200)
-        const listJson = await listRes.json() as Array<{ url?: string }>
-        expect(Array.isArray(listJson)).toBe(true)
-        expect(listJson.length).toBeGreaterThan(0)
-        const examplePage = listJson.find((t) => t.url?.includes('example.com'))
-        expect(examplePage).toBeDefined()
-        expect(examplePage).toMatchObject({
-            id: expect.any(String),
-            type: 'page',
-            url: expect.stringContaining('example.com'),
-            webSocketDebuggerUrl: expect.stringContaining('ws://'),
-        })
+    await serviceWorker.evaluate(async () => {
+      await globalThis.toggleExtensionForActiveTab()
+    })
+    await new Promise((r) => setTimeout(r, 200))
+    // Test /json/version
+    const versionRes = await fetch(`http://127.0.0.1:${TEST_PORT}/json/version`)
+    expect(versionRes.status).toBe(200)
+    const versionJson = (await versionRes.json()) as { webSocketDebuggerUrl: string }
+    expect(versionJson).toMatchObject({
+      Browser: expect.stringContaining('Playwriter/'),
+      'Protocol-Version': '1.3',
+      webSocketDebuggerUrl: expect.stringContaining('ws://'),
+    })
+    expect(versionJson.webSocketDebuggerUrl).toContain(`127.0.0.1:${TEST_PORT}/cdp`)
+    // Test /json/version/ (trailing slash)
+    const versionSlashRes = await fetch(`http://127.0.0.1:${TEST_PORT}/json/version/`)
+    expect(versionSlashRes.status).toBe(200)
+    // Test /json/list
+    const listRes = await fetch(`http://127.0.0.1:${TEST_PORT}/json/list`)
+    expect(listRes.status).toBe(200)
+    const listJson = (await listRes.json()) as Array<{ url?: string }>
+    expect(Array.isArray(listJson)).toBe(true)
+    expect(listJson.length).toBeGreaterThan(0)
+    const examplePage = listJson.find((t) => t.url?.includes('example.com'))
+    expect(examplePage).toBeDefined()
+    expect(examplePage).toMatchObject({
+      id: expect.any(String),
+      type: 'page',
+      url: expect.stringContaining('example.com'),
+      webSocketDebuggerUrl: expect.stringContaining('ws://'),
+    })
-        // Test /json (alias for /json/list)
-        const jsonRes = await fetch(`http://127.0.0.1:${TEST_PORT}/json`)
-        expect(jsonRes.status).toBe(200)
-        const jsonData = await jsonRes.json()
-        expect(Array.isArray(jsonData)).toBe(true)
-        // Test PUT method (Chrome 66+ prefers PUT)
-        const putRes = await fetch(`http://127.0.0.1:${TEST_PORT}/json/version`, { method: 'PUT' })
-        expect(putRes.status).toBe(200)
-        await page.close()
-    }, 60000)
-    // Skip: chrome.tabCapture.getMediaStreamId() requires activeTab permission
-    it.skip('should record screen with navigation using chrome.tabCapture', async () => {
-        const browserContext = getBrowserContext()
-        const serviceWorker = await getExtensionServiceWorker(browserContext)
-        const path = await import('node:path')
-        const fs = await import('node:fs')
-        const recordingPage = await browserContext.newPage()
-        await recordingPage.goto('https://news.ycombinator.com/', { waitUntil: 'domcontentloaded' })
-        await recordingPage.bringToFront()
-        await serviceWorker.evaluate(async () => {
-            await globalThis.toggleExtensionForActiveTab()
-        })
-        await new Promise(r => setTimeout(r, 200))
+    // Test /json (alias for /json/list)
+    const jsonRes = await fetch(`http://127.0.0.1:${TEST_PORT}/json`)
+    expect(jsonRes.status).toBe(200)
+    const jsonData = await jsonRes.json()
+    expect(Array.isArray(jsonData)).toBe(true)
-        const outputPath = path.join(process.cwd(), 'tmp', 'test-recording.mp4')
-        if (!fs.existsSync(path.dirname(outputPath))) {
-            fs.mkdirSync(path.dirname(outputPath), { recursive: true })
-        }
+    // Test PUT method (Chrome 66+ prefers PUT)
+    const putRes = await fetch(`http://127.0.0.1:${TEST_PORT}/json/version`, { method: 'PUT' })
+    expect(putRes.status).toBe(200)
+    await page.close()
+  }, 60000)
+  // Skip: chrome.tabCapture.getMediaStreamId() requires activeTab permission
+  it.skip('should record screen with navigation using chrome.tabCapture', async () => {
+    const browserContext = getBrowserContext()
+    const serviceWorker = await getExtensionServiceWorker(browserContext)
+    const path = await import('node:path')
+    const fs = await import('node:fs')
+    const recordingPage = await browserContext.newPage()
+    await recordingPage.goto('https://news.ycombinator.com/', { waitUntil: 'domcontentloaded' })
+    await recordingPage.bringToFront()
+    await serviceWorker.evaluate(async () => {
+      await globalThis.toggleExtensionForActiveTab()
+    })
+    await new Promise((r) => setTimeout(r, 200))
+    const outputPath = path.join(process.cwd(), 'tmp', 'test-recording.mp4')
+    if (!fs.existsSync(path.dirname(outputPath))) {
+      fs.mkdirSync(path.dirname(outputPath), { recursive: true })
+    }
+    const { startRecording, stopRecording, isRecording } = await import('./screen-recording.js')
-        const { startRecording, stopRecording, isRecording } = await import('./screen-recording.js')
-        const startResult = await startRecording({
-            page: recordingPage,
-            outputPath,
-            frameRate: 30,
-            audio: false,
-            videoBitsPerSecond: 1500000,
-            relayPort: TEST_PORT,
+    const startResult = await startRecording({
+      page: recordingPage,
+      outputPath,
+      frameRate: 30,
+      audio: false,
+      videoBitsPerSecond: 1500000,
+      relayPort: TEST_PORT,
+    })
+    expect(startResult.isRecording).toBe(true)
+    await recordingPage.locator('.titleline a').first().click()
+    await recordingPage.waitForLoadState('domcontentloaded')
+    await new Promise((r) => setTimeout(r, 500))
+    await recordingPage.goBack()
+    await recordingPage.waitForLoadState('domcontentloaded')
+    const status = await isRecording({ page: recordingPage, relayPort: TEST_PORT })
+    expect(status.isRecording).toBe(true)
+    const stopResult = await stopRecording({ page: recordingPage, relayPort: TEST_PORT })
+    expect(stopResult.path).toBe(outputPath)
+    expect(stopResult.size).toBeGreaterThan(10000)
+    expect(fs.existsSync(outputPath)).toBe(true)
+    // Create a sped-up demo video from the recording.
+    // We fake executionTimestamps since this test calls screen-recording
+    // directly (not via executor sandbox which tracks them automatically).
+    const { createDemoVideo } = await import('./ffmpeg.js')
+    const demoPath = await createDemoVideo({
+      recordingPath: outputPath,
+      durationMs: stopResult.duration,
+      executionTimestamps: [
+        // Simulate two interactions with an idle gap between them
+        { start: 0.5, end: 1.5 },
+        { start: 3, end: 4 },
+      ],
+      speed: 4,
+    })
+    expect(fs.existsSync(demoPath)).toBe(true)
+    expect(demoPath).toContain('-demo')
+    // Verify the demo video is smaller (idle sections were sped up)
+    const demoSize = fs.statSync(demoPath).size
+    expect(demoSize).toBeGreaterThan(0)
+    console.log(`Recording: ${stopResult.size} bytes, Demo: ${demoSize} bytes`)
+    await recordingPage.close()
+    fs.unlinkSync(outputPath)
+    fs.unlinkSync(demoPath)
+  }, 60000)
+  // Regression test for https://github.com/remorses/playwriter/issues/40
+  // When Playwright sends Target.detachFromTarget on the root CDP session (no top-level
+  // sessionId), the extension must still route the command by looking at params.sessionId.
+  // Previously the extension threw "No tab found for method Target.detachFromTarget"
+  // because it only checked the top-level sessionId for routing, which is absent on root
+  // session commands. This caused cascading disconnects and instability.
+  it('should route Target.detachFromTarget without top-level sessionId (issue #40)', async () => {
+    const browserContext = getBrowserContext()
+    const serviceWorker = await getExtensionServiceWorker(browserContext)
+    const server = await createSimpleServer({
+      routes: { '/': '<!doctype html><html><body>detach test</body></html>' },
+    })
+    const page = await browserContext.newPage()
+    try {
+      await page.goto(server.baseUrl, { waitUntil: 'domcontentloaded' })
+      await page.bringToFront()
+      await withTimeout({
+        promise: serviceWorker.evaluate(async () => {
+          await globalThis.toggleExtensionForActiveTab()
+        }),
+        timeoutMs: 5000,
+        errorMessage: 'Timed out toggling extension for detach test',
+      })
+      await new Promise((r) => {
+        setTimeout(r, 400)
+      })
+      // Connect a raw WebSocket to the relay — this lets us send CDP messages
+      // exactly as they appear on the wire, without Playwright adding sessionId.
+      const ws = new WebSocket(`ws://localhost:${TEST_PORT}/cdp/test-detach-raw`)
+      await new Promise<void>((resolve, reject) => {
+        ws.on('open', () => {
+          resolve()
         })
-        expect(startResult.isRecording).toBe(true)
-        await recordingPage.locator('.titleline a').first().click()
-        await recordingPage.waitForLoadState('domcontentloaded')
-        await new Promise(r => setTimeout(r, 500))
-        await recordingPage.goBack()
-        await recordingPage.waitForLoadState('domcontentloaded')
-        const status = await isRecording({ page: recordingPage, relayPort: TEST_PORT })
-        expect(status.isRecording).toBe(true)
-        const stopResult = await stopRecording({ page: recordingPage, relayPort: TEST_PORT })
-        expect(stopResult.path).toBe(outputPath)
-        expect(stopResult.size).toBeGreaterThan(10000)
-        expect(fs.existsSync(outputPath)).toBe(true)
-        await recordingPage.close()
-        fs.unlinkSync(outputPath)
-    }, 60000)
+        ws.on('error', reject)
+      })
+      let nextId = 1
+      const sendCdp = <T = unknown>(msg: Record<string, unknown>): Promise<T> => {
+        return new Promise((resolve, reject) => {
+          const id = nextId++
+          const timeout = setTimeout(() => {
+            ws.off('message', handler)
+            reject(new Error(`CDP response timeout for id ${id}`))
+          }, 5000)
+          const handler = (data: WebSocket.RawData) => {
+            const parsed = JSON.parse(data.toString())
+            if (parsed.id === id) {
+              ws.off('message', handler)
+              clearTimeout(timeout)
+              resolve(parsed as T)
+            }
+          }
+          ws.on('message', handler)
+          ws.send(JSON.stringify({ id, ...msg }))
+        })
+      }
+      // Collect async events from the relay
+      const events: Array<{ method: string; params: Record<string, unknown>; sessionId?: string }> = []
+      ws.on('message', (data) => {
+        const msg = JSON.parse(data.toString())
+        if (!msg.id && msg.method) {
+          events.push(msg)
+        }
+      })
+      // Trigger Target.setAutoAttach so the relay sends Target.attachedToTarget for
+      // all connected tabs. This gives us the page's pw-tab-* sessionId.
+      await sendCdp({
+        method: 'Target.setAutoAttach',
+        params: { autoAttach: true, waitForDebuggerOnStart: false, flatten: true },
+      })
+      // Wait for events to arrive
+      await new Promise((r) => {
+        setTimeout(r, 500)
+      })
+      // Filter for the specific page target by URL to avoid grabbing wrong sessions
+      // (welcome tab, extension pages, etc.)
+      type AttachParams = { sessionId?: string; targetInfo?: { type?: string; url?: string } }
+      const attachEvent = events.find((e) => {
+        if (e.method !== 'Target.attachedToTarget') {
+          return false
+        }
+        const p = e.params as AttachParams
+        return p.targetInfo?.type === 'page' && p.targetInfo?.url?.startsWith(server.baseUrl)
+      })
+      expect(attachEvent).toBeDefined()
+      const pageSessionId = (attachEvent!.params as AttachParams).sessionId
+      expect(pageSessionId).toBeTruthy()
+      // Verify the session is usable before detach — send a command that requires routing.
+      const evalBefore = await sendCdp<{ id: number; error?: { message: string }; result?: unknown }>({
+        method: 'Runtime.evaluate',
+        sessionId: pageSessionId,
+        params: { expression: '1 + 1', returnByValue: true },
+      })
+      expect(evalBefore.error).toBeUndefined()
+      expect((evalBefore.result as { result?: { value?: number } })?.result?.value).toBe(2)
+      // NOW: send Target.detachFromTarget WITHOUT a top-level sessionId.
+      // This is the exact wire format Playwright uses when sending on the root session
+      // (e.g. from CRSession.detach() where _parentSession is the root browser session).
+      // The extension must route this by looking at params.sessionId.
+      const detachResult = await sendCdp<{ id: number; error?: { message: string }; result?: unknown }>({
+        method: 'Target.detachFromTarget',
+        // Intentionally NO sessionId field — this is the root session
+        params: { sessionId: pageSessionId },
+      })
+      // Must not fail with extension routing error — the command must reach Chrome.
+      // Chrome returns "No session with given id" because pw-tab-* is a virtual session
+      // managed by the relay, not a real Chrome CDP session. This is expected — the key
+      // proof is that the extension routed the command to Chrome instead of throwing
+      // "No tab found" at the routing layer.
+      expect(detachResult.error?.message).not.toContain('No tab found')
+      expect(detachResult.error?.message).toContain('No session with given id')
+      ws.close()
+    } finally {
+      await page.close()
+      await server.close()
+    }
+  }, 30000)
 })