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

playwriter 0.0.80 → 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 (58) hide show

package/dist/a11y-client.js +18 -8
package/dist/aria-snapshot.d.ts.map +1 -1
package/dist/aria-snapshot.js +3 -1
package/dist/aria-snapshot.js.map +1 -1
package/dist/bippy.js +1 -1
package/dist/cdp-relay.d.ts.map +1 -1
package/dist/cdp-relay.js +84 -0
package/dist/cdp-relay.js.map +1 -1
package/dist/executor.d.ts.map +1 -1
package/dist/executor.js +8 -6
package/dist/executor.js.map +1 -1
package/dist/ffmpeg.d.ts +6 -6
package/dist/ffmpeg.d.ts.map +1 -1
package/dist/ffmpeg.js +6 -6
package/dist/ffmpeg.js.map +1 -1
package/dist/ghost-cursor-client.js +15 -9
package/dist/prompt.md +71 -337
package/dist/readability.js +16 -2
package/dist/recording-ghost-cursor.d.ts.map +1 -1
package/dist/recording-ghost-cursor.js +1 -1
package/dist/recording-ghost-cursor.js.map +1 -1
package/dist/relay-client.js +1 -1
package/dist/relay-client.js.map +1 -1
package/dist/relay-core.test.d.ts.map +1 -1
package/dist/relay-core.test.js +344 -16
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 +115 -0
package/dist/relay-navigation.test.js.map +1 -1
package/dist/screen-recording.d.ts +24 -0
package/dist/screen-recording.d.ts.map +1 -1
package/dist/screen-recording.js +62 -0
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/package.json +2 -2
package/src/aria-snapshot.ts +3 -1
package/src/aria-snapshots/github-interactive.txt +2 -0
package/src/aria-snapshots/github-raw.txt +4 -0
package/src/aria-snapshots/hackernews-interactive.txt +238 -241
package/src/aria-snapshots/hackernews-raw.txt +267 -271
package/src/assets/aria-labels-hacker-news.png +0 -0
package/src/cdp-relay.ts +110 -0
package/src/executor.ts +8 -6
package/src/ffmpeg.ts +8 -8
package/src/ghost-cursor-client.ts +3 -2
package/src/recording-ghost-cursor.ts +7 -1
package/src/relay-client.ts +1 -1
package/src/relay-core.test.ts +378 -17
package/src/relay-navigation.test.ts +132 -0
package/src/screen-recording.test.ts +111 -0
package/src/screen-recording.ts +81 -0
package/src/skill.md +71 -339
package/src/snapshots/shadcn-ui-accessibility-full.md +182 -180
package/src/snapshots/shadcn-ui-accessibility-interactive.md +120 -118

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

@@ -1,7 +1,9 @@
 import { createMCPClient } from './mcp-client.js'
 import { describe, it, expect, beforeAll, afterAll } from 'vitest'
+import { chromium } from '@xmorse/playwright-core'
 import { getCDPSessionForPage } from './cdp-session.js'
-import { getCdpUrl } from './utils.js'
+import { getCdpUrl, LOG_CDP_FILE_PATH } from './utils.js'
+import fs from 'node:fs'
 import {
   setupTestContext,
   cleanupTestContext,
@@ -40,6 +42,30 @@ describe('Relay Core Tests', () => {
     return testCtx.browserContext
   }
+  const ensureConnectedTabForExecute = async (): Promise<void> => {
+    const browserContext = getBrowserContext()
+    const serviceWorker = await getExtensionServiceWorker(browserContext)
+    const connectedTabCount = await serviceWorker.evaluate(async () => {
+      const state = globalThis.getExtensionState()
+      return state.tabs.size
+    })
+    if (connectedTabCount > 0) {
+      return
+    }
+    const page = await browserContext.newPage()
+    await page.goto('about:blank')
+    await page.bringToFront()
+    await serviceWorker.evaluate(async () => {
+      await globalThis.toggleExtensionForActiveTab()
+    })
+    await new Promise((r) => {
+      setTimeout(r, 100)
+    })
+  }
   it('should inject script via addScriptTag through CDP relay', async () => {
     const browserContext = getBrowserContext()
     const serviceWorker = await withTimeout({
@@ -97,6 +123,157 @@ describe('Relay Core Tests', () => {
     await page.close()
   }, 60000)
+  it('should emit download events for both Browser and Page domains in extension mode', async () => {
+    const browserContext = getBrowserContext()
+    const serviceWorker = await getExtensionServiceWorker(browserContext)
+    const logFilePath = LOG_CDP_FILE_PATH
+    const logLineCountBefore = fs.existsSync(logFilePath)
+      ? fs
+          .readFileSync(logFilePath, 'utf-8')
+          .split('\n')
+          .filter((line) => {
+            return line.trim().length > 0
+          }).length
+      : 0
+    const server = await createSimpleServer({
+      routes: {
+        '/': `<!doctype html>
+<html>
+  <body>
+    <button id="download-button">Download</button>
+    <script>
+      const button = document.getElementById('download-button');
+      button.addEventListener('click', () => {
+        const blob = new Blob(['playwriter-download-test'], { type: 'text/plain' });
+        const url = URL.createObjectURL(blob);
+        const anchor = document.createElement('a');
+        anchor.href = url;
+        anchor.download = 'playwriter-download-test.txt';
+        document.body.appendChild(anchor);
+        anchor.click();
+        anchor.remove();
+        setTimeout(() => {
+          URL.revokeObjectURL(url);
+        }, 1000);
+      });
+    </script>
+  </body>
+</html>`,
+      },
+    })
+    const page = await browserContext.newPage()
+    await page.goto(server.baseUrl, { waitUntil: 'domcontentloaded' })
+    await page.bringToFront()
+    await serviceWorker.evaluate(async () => {
+      await globalThis.toggleExtensionForActiveTab()
+    })
+    const directBrowser = await withTimeout({
+      promise: chromium.connectOverCDP(getCdpUrl({ port: TEST_PORT })),
+      timeoutMs: 10000,
+      errorMessage: 'Timed out connecting over CDP for download reproduction test',
+    })
+    const connectedPage = directBrowser
+      .contexts()[0]
+      .pages()
+      .find((candidatePage) => {
+        return candidatePage.url() === server.baseUrl + '/'
+      })
+    if (!connectedPage) {
+      throw new Error('Connected page not found for download reproduction test')
+    }
+    const downloadResult = await Promise.all([
+      connectedPage.waitForEvent('download', { timeout: 3000 }).then(
+        (download) => {
+          return { timedOut: false, suggestedFilename: download.suggestedFilename() }
+        },
+        (error: Error) => {
+          return { timedOut: true, errorMessage: error.message }
+        },
+      ),
+      connectedPage.click('#download-button'),
+    ])
+    expect(downloadResult[0]).toMatchInlineSnapshot(`
+      {
+        "suggestedFilename": "playwriter-download-test.txt",
+        "timedOut": false,
+      }
+    `)
+    await directBrowser.close()
+    await page.close()
+    await server.close()
+    const logLinesAfter = fs
+      .readFileSync(logFilePath, 'utf-8')
+      .split('\n')
+      .filter((line) => {
+        return line.trim().length > 0
+      })
+      .slice(logLineCountBefore)
+    const newEntries = logLinesAfter
+      .map((line) => {
+        return tryJsonParse(line)
+      })
+      .filter((entry): entry is { direction: string; message: { method?: string } } => {
+        return Boolean(entry && typeof entry === 'object' && 'direction' in entry && 'message' in entry)
+      })
+    const methods = newEntries
+      .map((entry) => {
+        return {
+          direction: entry.direction,
+          method: typeof entry.message?.method === 'string' ? entry.message.method : 'response',
+        }
+      })
+      .filter((entry) => {
+        return (
+          entry.method.includes('download') ||
+          entry.method === 'Browser.setDownloadBehavior' ||
+          entry.method === 'Page.setDownloadBehavior'
+        )
+      })
+    const summary = {
+      hasBrowserSetDownloadBehavior: methods.some((entry) => {
+        return entry.direction === 'from-playwright' && entry.method === 'Browser.setDownloadBehavior'
+      }),
+      hasPageSetDownloadBehavior: methods.some((entry) => {
+        return entry.direction === 'to-extension' && entry.method === 'Page.setDownloadBehavior'
+      }),
+      hasPageDownloadWillBegin: methods.some((entry) => {
+        return entry.method === 'Page.downloadWillBegin'
+      }),
+      hasPageDownloadProgress: methods.some((entry) => {
+        return entry.method === 'Page.downloadProgress'
+      }),
+      hasBrowserDownloadWillBegin: methods.some((entry) => {
+        return entry.method === 'Browser.downloadWillBegin'
+      }),
+      hasBrowserDownloadProgress: methods.some((entry) => {
+        return entry.method === 'Browser.downloadProgress'
+      }),
+    }
+    expect(summary).toMatchInlineSnapshot(`
+      {
+        "hasBrowserDownloadProgress": false,
+        "hasBrowserDownloadWillBegin": false,
+        "hasBrowserSetDownloadBehavior": true,
+        "hasPageDownloadProgress": false,
+        "hasPageDownloadWillBegin": false,
+        "hasPageSetDownloadBehavior": true,
+      }
+    `)
+  }, 120000)
   it('should execute code and capture console output', async () => {
     await client.callTool({
       name: 'execute',
@@ -135,6 +312,116 @@ describe('Relay Core Tests', () => {
     expect(result.content).toBeDefined()
   }, 30000)
+  // Repro test for https://github.com/remorses/playwriter/issues/66.
+  // Current limitation: extension-mode routing does not support root-session
+  // Storage.getCookies in playwriter. MUST use Network.getCookies via page CDP
+  // session instead (see test below), so this repro stays skipped.
+  it.skip('should reproduce page.route failure in MCP execute path (issue #66)', async () => {
+    const server = await createSimpleServer({
+      routes: {
+        '/': '<!doctype html><html><body>route issue repro</body></html>',
+        '/api/data': '{"ok":true}',
+      },
+    })
+    try {
+      const result = await client.callTool({
+        name: 'execute',
+        arguments: {
+          code: js`
+            const newPage = await context.newPage();
+            state.issue66Page = newPage;
+            await newPage.goto('${server.baseUrl}', { waitUntil: 'domcontentloaded' });
+            let routeFetchError = null;
+            await newPage.route('**/api/**', async (route) => {
+              try {
+                const response = await route.fetch();
+                await route.fulfill({ response });
+              } catch (error) {
+                routeFetchError = error instanceof Error ? error.message : String(error);
+                await route.abort();
+              }
+            });
+            await newPage.evaluate(async () => {
+              await fetch('/api/data').catch(() => null);
+            });
+            return { routeFetchError };
+          `,
+        },
+      })
+      const resultWithContent = result as { content?: unknown }
+      const content = Array.isArray(resultWithContent.content) ? resultWithContent.content : []
+      const firstContent = content[0]
+      const output =
+        typeof firstContent === 'object' && firstContent !== null && 'text' in firstContent
+          ? String((firstContent as { text?: unknown }).text ?? '')
+          : ''
+      expect(output).toContain('routeFetchError')
+      expect(output).toContain('Storage.getCookies')
+      expect(output).toContain('No tab found for method Storage.getCookies')
+    } finally {
+      try {
+        await client.callTool({
+          name: 'execute',
+          arguments: {
+            code: js`
+              if (state.issue66Page && !state.issue66Page.isClosed()) {
+                await state.issue66Page.close();
+              }
+              delete state.issue66Page;
+            `,
+          },
+        })
+      } catch {
+        // Ignore cleanup failure if MCP disconnected due to the repro.
+      }
+      await server.close()
+    }
+  }, 30000)
+  it('should read cookies via Network.getCookies through page CDP session', async () => {
+    const browserContext = getBrowserContext()
+    const serviceWorker = await getExtensionServiceWorker(browserContext)
+    const server = await createSimpleServer({
+      routes: {
+        '/': '<!doctype html><html><body>cookies test</body></html>',
+      },
+    })
+    const page = await browserContext.newPage()
+    try {
+      await page.goto(server.baseUrl, { waitUntil: 'domcontentloaded' })
+      await page.bringToFront()
+      await serviceWorker.evaluate(async () => {
+        await globalThis.toggleExtensionForActiveTab()
+      })
+      await new Promise((r) => {
+        setTimeout(r, 200)
+      })
+      await page.evaluate(() => {
+        document.cookie = 'issue66=ok; path=/'
+      })
+      const cdpSession = await getCDPSessionForPage({ page })
+      const cookiesResult = await cdpSession.send('Network.getCookies', { urls: [page.url()] })
+      const cookie = cookiesResult.cookies.find((value) => {
+        return value.name === 'issue66'
+      })
+      expect(cookie?.value).toBe('ok')
+    } finally {
+      await page.close()
+      await server.close()
+    }
+  }, 30000)
   it('should show extension as connected for pages created via newPage()', async () => {
     const browserContext = getBrowserContext()
     const serviceWorker = await getExtensionServiceWorker(browserContext)
@@ -1020,6 +1307,8 @@ describe('Relay Core Tests', () => {
   }, 60000)
   it('should show descriptive error when clicking a hidden element', async () => {
+    await ensureConnectedTabForExecute()
     // Create a fresh page and set content with a collapsed details element
     await client.callTool({
       name: 'execute',
@@ -1039,20 +1328,42 @@ describe('Relay Core Tests', () => {
       name: 'execute',
       arguments: {
         code: js`
-          await state.errorTestPage.click('#hidden-btn');
+          await state.errorTestPage.click('#hidden-btn', { timeout: 100 });
         `,
       },
     })
-    const text = (result as any).content[0].text
-    // Strip stack traces and call logs to only match the descriptive error line
-    const errorLine = text.split('\n').find((l: string) => l.includes('Timeout') || l.includes('not visible') || l.includes('not stable'))
-    expect(errorLine).toMatchInlineSnapshot(`"Error executing code: page.click: Timeout 2000ms exceeded. Element is not visible — it may be hidden by CSS, inside a collapsed <details>, inactive tab, or closed accordion. Try: interact with the page to reveal it first, or use { force: true } to skip visibility checks"`)
-    expect((result as any).isError).toBe(true)
+    expect(result).toMatchInlineSnapshot(`
+      {
+        "content": [
+          {
+            "text": "
+      Error executing code: page.click: Timeout 100ms exceeded. Element is not visible — it may be hidden by CSS, inside a collapsed <details>, inactive tab, or closed accordion. Try: interact with the page to reveal it first, or use { force: true } to skip visibility checks
+      Call log:
+      [2m  - waiting for locator('#hidden-btn')[22m
+      [2m    - locator resolved to <button id="hidden-btn">Hidden Button</button>[22m
+      [2m  - attempting click action[22m
+      [2m    2 × waiting for element to be visible, enabled and stable[22m
+      [2m      - element is not visible[22m
+      [2m    - retrying click action[22m
+      [2m    - waiting 20ms[22m
+      [2m    - waiting for element to be visible, enabled and stable[22m
+      [2m    - element is not visible[22m
+      [2m  - retrying click action[22m
+      [2m    - waiting 100ms[22m
+      ",
+            "type": "text",
+          },
+        ],
+        "isError": true,
+      }
+    `)
     // Cleanup
     await client.callTool({ name: 'execute', arguments: { code: js`await state.errorTestPage.close(); delete state.errorTestPage;` } })
   }, 30000)
   it('should show descriptive error when clicking an element covered by another', async () => {
+    await ensureConnectedTabForExecute()
     await client.callTool({
       name: 'execute',
       arguments: {
@@ -1071,18 +1382,47 @@ describe('Relay Core Tests', () => {
       name: 'execute',
       arguments: {
         code: js`
-          await state.errorTestPage.click('#covered-btn');
+          await state.errorTestPage.click('#covered-btn', { timeout: 100 });
         `,
       },
     })
-    const text = (result as any).content[0].text
-    const errorLine = text.split('\n').find((l: string) => l.includes('Timeout') || l.includes('intercepts'))
-    expect(errorLine).toMatchInlineSnapshot(`"Error executing code: page.click: Timeout 2000ms exceeded. <div id="overlay">Overlay</div> intercepts pointer events"`)
-    expect((result as any).isError).toBe(true)
+    expect(result).toMatchInlineSnapshot(`
+      {
+        "content": [
+          {
+            "text": "
+      Error executing code: page.click: Timeout 100ms exceeded. <div id="overlay">Overlay</div> intercepts pointer events
+      Call log:
+      [2m  - waiting for locator('#covered-btn')[22m
+      [2m    - locator resolved to <button id="covered-btn">Covered</button>[22m
+      [2m  - attempting click action[22m
+      [2m    2 × waiting for element to be visible, enabled and stable[22m
+      [2m      - element is visible, enabled and stable[22m
+      [2m      - scrolling into view if needed[22m
+      [2m      - done scrolling[22m
+      [2m      - <div id="overlay">Overlay</div> intercepts pointer events[22m
+      [2m    - retrying click action[22m
+      [2m    - waiting 20ms[22m
+      [2m    - waiting for element to be visible, enabled and stable[22m
+      [2m    - element is visible, enabled and stable[22m
+      [2m    - scrolling into view if needed[22m
+      [2m    - done scrolling[22m
+      [2m    - <div id="overlay">Overlay</div> intercepts pointer events[22m
+      [2m  - retrying click action[22m
+      [2m    - waiting 100ms[22m
+      ",
+            "type": "text",
+          },
+        ],
+        "isError": true,
+      }
+    `)
     await client.callTool({ name: 'execute', arguments: { code: js`await state.errorTestPage.close(); delete state.errorTestPage;` } })
   }, 30000)
   it('should show descriptive error when clicking a display:none element', async () => {
+    await ensureConnectedTabForExecute()
     await client.callTool({
       name: 'execute',
       arguments: {
@@ -1096,14 +1436,35 @@ describe('Relay Core Tests', () => {
       name: 'execute',
       arguments: {
         code: js`
-          await state.errorTestPage.click('#invisible');
+          await state.errorTestPage.click('#invisible', { timeout: 100 });
         `,
       },
     })
-    const text = (result as any).content[0].text
-    const errorLine = text.split('\n').find((l: string) => l.includes('Timeout') || l.includes('not visible'))
-    expect(errorLine).toMatchInlineSnapshot(`"Error executing code: page.click: Timeout 2000ms exceeded. Element is not visible — it may be hidden by CSS, inside a collapsed <details>, inactive tab, or closed accordion. Try: interact with the page to reveal it first, or use { force: true } to skip visibility checks"`)
-    expect((result as any).isError).toBe(true)
+    expect(result).toMatchInlineSnapshot(`
+      {
+        "content": [
+          {
+            "text": "
+      Error executing code: page.click: Timeout 100ms exceeded. Element is not visible — it may be hidden by CSS, inside a collapsed <details>, inactive tab, or closed accordion. Try: interact with the page to reveal it first, or use { force: true } to skip visibility checks
+      Call log:
+      [2m  - waiting for locator('#invisible')[22m
+      [2m    - locator resolved to <button id="invisible">Invisible</button>[22m
+      [2m  - attempting click action[22m
+      [2m    2 × waiting for element to be visible, enabled and stable[22m
+      [2m      - element is not visible[22m
+      [2m    - retrying click action[22m
+      [2m    - waiting 20ms[22m
+      [2m    - waiting for element to be visible, enabled and stable[22m
+      [2m    - element is not visible[22m
+      [2m  - retrying click action[22m
+      [2m    - waiting 100ms[22m
+      ",
+            "type": "text",
+          },
+        ],
+        "isError": true,
+      }
+    `)
     await client.callTool({ name: 'execute', arguments: { code: js`await state.errorTestPage.close(); delete state.errorTestPage;` } })
   }, 30000)

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

@@ -1,5 +1,6 @@
 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,
@@ -625,4 +626,135 @@ describe('Relay Navigation Tests', () => {
     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()
+        })
+        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)
 })