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

playwriter 0.0.63 → 0.0.80

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 (216) hide show

package/dist/aria-snapshot.d.ts +41 -3
package/dist/aria-snapshot.d.ts.map +1 -1
package/dist/aria-snapshot.js +131 -54
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 +408 -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 +295 -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 +281 -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 +594 -255
package/dist/protocol.d.ts +4 -0
package/dist/protocol.d.ts.map +1 -1
package/dist/readability.js +1 -1
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 +44 -10
package/dist/relay-client.js.map +1 -1
package/dist/relay-core.test.d.ts.map +1 -1
package/dist/relay-core.test.js +187 -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 +54 -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 +42 -4
package/dist/screen-recording.d.ts.map +1 -1
package/dist/screen-recording.js +88 -13
package/dist/screen-recording.js.map +1 -1
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 +303 -116
package/src/aria-snapshot.unit.test.ts +199 -141
package/src/aria-snapshots/github-raw.txt +1 -1
package/src/aria-snapshots/hackernews-interactive.txt +240 -240
package/src/aria-snapshots/hackernews-raw.txt +270 -270
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 +949 -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 +372 -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 +368 -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 +107 -0
package/src/recording-relay.ts +20 -12
package/src/relay-client.ts +84 -17
package/src/relay-core.test.ts +761 -583
package/src/relay-navigation.test.ts +517 -484
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.ts +175 -31
package/src/skill.md +619 -271
package/src/snapshot-tools.test.ts +580 -528
package/src/snapshots/shadcn-ui-accessibility-full.md +181 -183
package/src/snapshots/shadcn-ui-accessibility-interactive.md +119 -121
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,194 @@
 import { describe, it, expect, beforeAll, afterAll } from 'vitest'
 import { chromium, type Page } from '@xmorse/playwright-core'
 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)
-    it('should expose iframe frames when connecting to an existing page over CDP', async () => {
-        const browserContext = getBrowserContext()
-        const serviceWorker = await getExtensionServiceWorker(browserContext)
+      const result = await targetPage.evaluate(() => window.location.href)
+      expect(result).toContain(server.baseUrl)
+    } finally {
+      await browser.close()
+      await page.close()
+      await server.close()
+    }
+  }, 15000)
-        const childServer = await createSimpleServer({
-            routes: {
-                '/child.html': '<!doctype html><html><body>child</body></html>',
-            },
-        })
-        const childUrl = `${childServer.baseUrl}/child.html`
+  it('should expose iframe frames when connecting to an existing page over CDP', async () => {
+    const browserContext = getBrowserContext()
+    const serviceWorker = await getExtensionServiceWorker(browserContext)
-        const parentServer = await createSimpleServer({
-            routes: {
-                '/': `<!doctype html><html><body><iframe src="${childUrl}"></iframe></body></html>`,
-            },
-        })
+    const childServer = await createSimpleServer({
+      routes: {
+        '/child.html': '<!doctype html><html><body>child</body></html>',
+      },
+    })
+    const childUrl = `${childServer.baseUrl}/child.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 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)
-    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 +203,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()
+    await serviceWorker.evaluate(async () => {
+      await globalThis.toggleExtensionForActiveTab()
+    })
-        const response = await cdpPage!.goto('https://www.youtube.com', { waitUntil: 'domcontentloaded', timeout: 20000 })
-        const currentUrl = cdpPage!.url()
-        const responseUrl = response?.url() ?? ''
+    await new Promise((r) => setTimeout(r, 100))
-        expect(responseUrl).toContain('youtube')
-        expect(currentUrl).toContain('youtube')
-        await waitForStableDocumentReadyState({ page: cdpPage!, timeoutMs: 5000 })
+    const browser = await chromium.connectOverCDP(getCdpUrl({ port: TEST_PORT }))
+    const cdpPage = browser
+      .contexts()[0]
+      .pages()
+      .find((p) => p.url().includes('about:'))
+    expect(cdpPage).toBeDefined()
-        await browser.close()
-        await page.close()
-    }, 60000)
+    const response = await cdpPage!.goto('https://www.youtube.com', { waitUntil: 'domcontentloaded', timeout: 20000 })
+    const currentUrl = cdpPage!.url()
+    const responseUrl = response?.url() ?? ''
-    it('should maintain correct page.url() with iframe-heavy pages', async () => {
-        const browserContext = getBrowserContext()
-        const serviceWorker = await getExtensionServiceWorker(browserContext)
+    expect(responseUrl).toContain('youtube')
+    expect(currentUrl).toContain('youtube')
+    await waitForStableDocumentReadyState({ page: cdpPage!, timeoutMs: 5000 })
-        const page = await browserContext.newPage()
-        await page.setContent(`
+    await browser.close()
+    await page.close()
+  }, 60000)
+  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 +407,222 @@ 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)
-        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,
-        })
-        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)
+    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 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)
 })