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-core.test.ts CHANGED Viewed

@@ -2,115 +2,126 @@ import { createMCPClient } from './mcp-client.js'
 import { describe, it, expect, beforeAll, afterAll } from 'vitest'
 import { getCDPSessionForPage } from './cdp-session.js'
 import { getCdpUrl } from './utils.js'
-import { setupTestContext, cleanupTestContext, getExtensionServiceWorker, type TestContext, withTimeout, js, tryJsonParse } from './test-utils.js'
+import {
+  setupTestContext,
+  cleanupTestContext,
+  getExtensionServiceWorker,
+  type TestContext,
+  withTimeout,
+  js,
+  tryJsonParse,
+  createSimpleServer,
+} from './test-utils.js'
 import './test-declarations.js'
 const TEST_PORT = 19987
 describe('Relay Core Tests', () => {
-    let client: Awaited<ReturnType<typeof createMCPClient>>['client']
-    let cleanup: (() => Promise<void>) | null = null
-    let testCtx: TestContext | null = null
-    beforeAll(async () => {
-        testCtx = await setupTestContext({ port: TEST_PORT, tempDirPrefix: 'pw-test-', toggleExtension: true })
-        const result = await createMCPClient({ port: TEST_PORT })
-        client = result.client
-        cleanup = result.cleanup
-    }, 600000)
-    afterAll(async () => {
-        await cleanupTestContext(testCtx, cleanup)
-        cleanup = null
-        testCtx = null
+  let client: Awaited<ReturnType<typeof createMCPClient>>['client']
+  let cleanup: (() => Promise<void>) | null = null
+  let testCtx: TestContext | null = null
+  beforeAll(async () => {
+    testCtx = await setupTestContext({ port: TEST_PORT, tempDirPrefix: 'pw-test-', toggleExtension: true })
+    const result = await createMCPClient({ port: TEST_PORT })
+    client = result.client
+    cleanup = result.cleanup
+  }, 600000)
+  afterAll(async () => {
+    await cleanupTestContext(testCtx, cleanup)
+    cleanup = null
+    testCtx = null
+  })
+  const getBrowserContext = () => {
+    if (!testCtx?.browserContext) throw new Error('Browser not initialized')
+    return testCtx.browserContext
+  }
+  it('should inject script via addScriptTag through CDP relay', async () => {
+    const browserContext = getBrowserContext()
+    const serviceWorker = await withTimeout({
+      promise: getExtensionServiceWorker(browserContext),
+      timeoutMs: 5000,
+      errorMessage: 'Timed out waiting for extension service worker for iframe test',
     })
-    const getBrowserContext = () => {
-        if (!testCtx?.browserContext) throw new Error('Browser not initialized')
-        return testCtx.browserContext
-    }
-    it('should inject script via addScriptTag through CDP relay', async () => {
-        const browserContext = getBrowserContext()
-        const serviceWorker = await withTimeout({
-            promise: getExtensionServiceWorker(browserContext),
-            timeoutMs: 5000,
-            errorMessage: 'Timed out waiting for extension service worker for iframe test',
-        })
+    const page = await browserContext.newPage()
+    const html = '<html><body><button id="btn">Click</button></body></html>'
+    const dataUrl = `data:text/html,${encodeURIComponent(html)}`
+    await page.goto(dataUrl)
+    await page.bringToFront()
+    await withTimeout({
+      promise: serviceWorker.evaluate(async () => {
+        await globalThis.toggleExtensionForActiveTab()
+      }),
+      timeoutMs: 10000,
+      errorMessage: 'Timed out toggling extension for active tab',
+    })
+    await new Promise((r) => {
+      setTimeout(r, 100)
+    })
-        const page = await browserContext.newPage()
-        const html = '<html><body><button id="btn">Click</button></body></html>'
-        const dataUrl = `data:text/html,${encodeURIComponent(html)}`
-        await page.goto(dataUrl)
-        await page.bringToFront()
-        await withTimeout({
-            promise: serviceWorker.evaluate(async () => {
-                await globalThis.toggleExtensionForActiveTab()
-            }),
-            timeoutMs: 10000,
-            errorMessage: 'Timed out toggling extension for active tab',
-        })
-        await new Promise((r) => { setTimeout(r, 100) })
+    const cdpSession = await withTimeout({
+      promise: getCDPSessionForPage({ page }),
+      timeoutMs: 10000,
+      errorMessage: 'Timed out creating CDP session for page',
+    })
-        const cdpSession = await withTimeout({
-            promise: getCDPSessionForPage({ page }),
-            timeoutMs: 10000,
-            errorMessage: 'Timed out creating CDP session for page',
-        })
+    const hasGlobalBefore = await page.evaluate(() => {
+      return Boolean((globalThis as { __testGlobal?: unknown }).__testGlobal)
+    })
+    expect(hasGlobalBefore).toBe(false)
-        const hasGlobalBefore = await page.evaluate(() => {
-            return Boolean((globalThis as { __testGlobal?: unknown }).__testGlobal)
-        })
-        expect(hasGlobalBefore).toBe(false)
-        await withTimeout({
-            promise: (async () => {
-                await cdpSession.send('Page.enable')
-                await cdpSession.send('Page.addScriptToEvaluateOnNewDocument', {
-                    source: 'globalThis.__testGlobal = { foo: "bar" }',
-                })
-                await page.reload({ waitUntil: 'domcontentloaded' })
-            })(),
-            timeoutMs: 10000,
-            errorMessage: 'Timed out injecting script via CDP session',
+    await withTimeout({
+      promise: (async () => {
+        await cdpSession.send('Page.enable')
+        await cdpSession.send('Page.addScriptToEvaluateOnNewDocument', {
+          source: 'globalThis.__testGlobal = { foo: "bar" }',
         })
+        await page.reload({ waitUntil: 'domcontentloaded' })
+      })(),
+      timeoutMs: 10000,
+      errorMessage: 'Timed out injecting script via CDP session',
+    })
-        const hasGlobalAfter = await page.evaluate(() => {
-            return (globalThis as { __testGlobal?: unknown }).__testGlobal
-        })
-        expect(hasGlobalAfter).toEqual({ foo: 'bar' })
+    const hasGlobalAfter = await page.evaluate(() => {
+      return (globalThis as { __testGlobal?: unknown }).__testGlobal
+    })
+    expect(hasGlobalAfter).toEqual({ foo: 'bar' })
-        await cdpSession.detach()
-        await page.close()
-    }, 60000)
+    await cdpSession.detach()
+    await page.close()
+  }, 60000)
-    it('should execute code and capture console output', async () => {
-        await client.callTool({
-            name: 'execute',
-            arguments: {
-                code: js`
+  it('should execute code and capture console output', async () => {
+    await client.callTool({
+      name: 'execute',
+      arguments: {
+        code: js`
           const newPage = await context.newPage();
           state.page = newPage;
           if (!state.pages) state.pages = [];
           state.pages.push(newPage);
         `,
-            },
-        })
+      },
+    })
-        const result = await client.callTool({
-            name: 'execute',
-            arguments: {
-                code: js`
+    const result = await client.callTool({
+      name: 'execute',
+      arguments: {
+        code: js`
           await state.page.goto('https://example.com');
           const title = await state.page.title();
           console.log('Page title:', title);
           return { url: state.page.url(), title };
         `,
-            },
-        })
-        expect(result.content).toMatchInlineSnapshot(`
+      },
+    })
+    expect(result.content).toMatchInlineSnapshot(`
           [
             {
               "text": "Console output:
@@ -121,138 +132,134 @@ describe('Relay Core Tests', () => {
             },
           ]
         `)
-        expect(result.content).toBeDefined()
-    }, 30000)
-    it('should show extension as connected for pages created via newPage()', async () => {
-        const browserContext = getBrowserContext()
-        const serviceWorker = await getExtensionServiceWorker(browserContext)
-        // Create a page via MCP (which uses context.newPage())
-        await client.callTool({
-            name: 'execute',
-            arguments: {
-                code: js`
+    expect(result.content).toBeDefined()
+  }, 30000)
+  it('should show extension as connected for pages created via newPage()', async () => {
+    const browserContext = getBrowserContext()
+    const serviceWorker = await getExtensionServiceWorker(browserContext)
+    // Create a page via MCP (which uses context.newPage())
+    await client.callTool({
+      name: 'execute',
+      arguments: {
+        code: js`
           const newPage = await context.newPage();
           state.testPage = newPage;
           await newPage.goto('https://example.com/mcp-test');
           return newPage.url();
         `,
-            },
-        })
+      },
+    })
-        // Get extension state to verify the page is marked as connected
-        const extensionState = await serviceWorker.evaluate(async () => {
-            const state = globalThis.getExtensionState()
-            const tabs = await chrome.tabs.query({})
-            const testTab = tabs.find((t: any) => t.url?.includes('mcp-test'))
-            return {
-                connected: !!testTab && !!testTab.id && state.tabs.has(testTab.id),
-                tabId: testTab?.id,
-                tabInfo: testTab?.id ? state.tabs.get(testTab.id) : null,
-                connectionState: state.connectionState
-            }
-        })
+    // Get extension state to verify the page is marked as connected
+    const extensionState = await serviceWorker.evaluate(async () => {
+      const state = globalThis.getExtensionState()
+      const tabs = await chrome.tabs.query({})
+      const testTab = tabs.find((t: any) => t.url?.includes('mcp-test'))
+      return {
+        connected: !!testTab && !!testTab.id && state.tabs.has(testTab.id),
+        tabId: testTab?.id,
+        tabInfo: testTab?.id ? state.tabs.get(testTab.id) : null,
+        connectionState: state.connectionState,
+      }
+    })
-        expect(extensionState.connected).toBe(true)
-        expect(extensionState.tabInfo?.state).toBe('connected')
-        expect(extensionState.connectionState).toBe('connected')
+    expect(extensionState.connected).toBe(true)
+    expect(extensionState.tabInfo?.state).toBe('connected')
+    expect(extensionState.connectionState).toBe('connected')
-        // Clean up
-        await client.callTool({
-            name: 'execute',
-            arguments: {
-                code: js`
+    // Clean up
+    await client.callTool({
+      name: 'execute',
+      arguments: {
+        code: js`
           if (state.testPage) {
             await state.testPage.close();
             delete state.testPage;
           }
         `,
-            },
-        })
-    }, 30000)
-    const accessibilitySnapshotTestCases = [
-        {
-            name: 'hacker-news',
-            url: 'https://news.ycombinator.com/item?id=1',
-            expectedContent: ['role=link', 'Hacker News'],
-        },
-        {
-            name: 'shadcn-ui',
-            url: 'https://ui.shadcn.com/',
-            expectedContent: ['shadcn'],
-        },
-    ]
-    for (const testCase of accessibilitySnapshotTestCases) {
-        it(`should get accessibility snapshot of ${testCase.name}`, async () => {
-            await client.callTool({
-                name: 'execute',
-                arguments: {
-                    code: js`
+      },
+    })
+  }, 30000)
+  const snapshotTestCases = [
+    {
+      name: 'hacker-news',
+      url: 'https://news.ycombinator.com/item?id=1',
+      expectedContent: ['role=link', 'Hacker News'],
+    },
+    {
+      name: 'shadcn-ui',
+      url: 'https://ui.shadcn.com/',
+      expectedContent: ['shadcn'],
+    },
+  ]
+  for (const testCase of snapshotTestCases) {
+    it(`should get accessibility snapshot of ${testCase.name}`, async () => {
+      await client.callTool({
+        name: 'execute',
+        arguments: {
+          code: js`
               const newPage = await context.newPage();
               state.page = newPage;
               if (!state.pages) state.pages = [];
               state.pages.push(newPage);
             `,
-                },
-            })
-            // Capture interactiveOnly=true snapshot (default)
-            const interactiveResult = await client.callTool({
-                name: 'execute',
-                arguments: {
-                    code: js`
+        },
+      })
+      // Capture interactiveOnly=true snapshot (default)
+      const interactiveResult = await client.callTool({
+        name: 'execute',
+        arguments: {
+          code: js`
               await state.page.goto('${testCase.url}', { waitUntil: 'domcontentloaded' });
-              const snapshot = await accessibilitySnapshot({ page: state.page, showDiffSinceLastCall: false, interactiveOnly: true });
-              return snapshot;
+              const snap = await snapshot({ page: state.page, showDiffSinceLastCall: false, interactiveOnly: true });
+              return snap;
             `,
-                },
-            })
-            const interactiveData =
-                typeof interactiveResult === 'object' && interactiveResult.content?.[0]?.text
-                    ? tryJsonParse(interactiveResult.content[0].text)
-                    : interactiveResult
-            await expect(interactiveData).toMatchFileSnapshot(
-                `snapshots/${testCase.name}-accessibility-interactive.md`,
-            )
-            expect(interactiveResult.content).toBeDefined()
-            for (const expected of testCase.expectedContent) {
-                expect(interactiveData).toContain(expected)
-            }
-            // Capture interactiveOnly=false snapshot (full tree)
-            const fullResult = await client.callTool({
-                name: 'execute',
-                arguments: {
-                    code: js`
-              const snapshot = await accessibilitySnapshot({ page: state.page, showDiffSinceLastCall: false, interactiveOnly: false });
-              return snapshot;
+        },
+      })
+      const interactiveData =
+        typeof interactiveResult === 'object' && interactiveResult.content?.[0]?.text
+          ? tryJsonParse(interactiveResult.content[0].text)
+          : interactiveResult
+      await expect(interactiveData).toMatchFileSnapshot(`snapshots/${testCase.name}-accessibility-interactive.md`)
+      expect(interactiveResult.content).toBeDefined()
+      for (const expected of testCase.expectedContent) {
+        expect(interactiveData).toContain(expected)
+      }
+      // Capture interactiveOnly=false snapshot (full tree)
+      const fullResult = await client.callTool({
+        name: 'execute',
+        arguments: {
+          code: js`
+              const snap = await snapshot({ page: state.page, showDiffSinceLastCall: false, interactiveOnly: false });
+              return snap;
             `,
-                },
-            })
-            const fullData =
-                typeof fullResult === 'object' && fullResult.content?.[0]?.text
-                    ? tryJsonParse(fullResult.content[0].text)
-                    : fullResult
-            await expect(fullData).toMatchFileSnapshot(
-                `snapshots/${testCase.name}-accessibility-full.md`,
-            )
-            expect(fullResult.content).toBeDefined()
-            for (const expected of testCase.expectedContent) {
-                expect(fullData).toContain(expected)
-            }
-        }, 60000)
-    }
+        },
+      })
+      const fullData =
+        typeof fullResult === 'object' && fullResult.content?.[0]?.text
+          ? tryJsonParse(fullResult.content[0].text)
+          : fullResult
+      await expect(fullData).toMatchFileSnapshot(`snapshots/${testCase.name}-accessibility-full.md`)
+      expect(fullResult.content).toBeDefined()
+      for (const expected of testCase.expectedContent) {
+        expect(fullData).toContain(expected)
+      }
+    }, 60000)
+  }
-    it('should close all created pages', async () => {
-        const result = await client.callTool({
-            name: 'execute',
-            arguments: {
-                code: js`
+  it('should close all created pages', async () => {
+    const result = await client.callTool({
+      name: 'execute',
+      arguments: {
+        code: js`
           if (state.pages && state.pages.length > 0) {
             for (const page of state.pages) {
               await page.close();
@@ -263,17 +270,16 @@ describe('Relay Core Tests', () => {
           }
           return { closedCount: 0 };
         `,
-            },
-        })
+      },
     })
-    it('should capture browser console logs with getLatestLogs', async () => {
-        // Ensure clean state and clear any existing logs
-        const resetResult = await client.callTool({
-            name: 'execute',
-            arguments: {
-                code: js`
+  })
+  it('should capture browser console logs with getLatestLogs', async () => {
+    // Ensure clean state and clear any existing logs
+    const resetResult = await client.callTool({
+      name: 'execute',
+      arguments: {
+        code: js`
           // Clear any existing logs from previous tests
           clearAllLogs();
           console.log('Cleared all existing logs');
@@ -284,27 +290,27 @@ describe('Relay Core Tests', () => {
           return { success: true, pagesCount: pages.length };
         `,
-            },
-        })
-        console.log('Cleanup result:', resetResult)
+      },
+    })
+    console.log('Cleanup result:', resetResult)
-        // Create a new page for this test
-        await client.callTool({
-            name: 'execute',
-            arguments: {
-                code: js`
+    // Create a new page for this test
+    await client.callTool({
+      name: 'execute',
+      arguments: {
+        code: js`
           const newPage = await context.newPage();
           state.testLogPage = newPage;
           await newPage.goto('about:blank');
         `,
-            },
-        })
+      },
+    })
-        // Generate some console logs in the browser
-        await client.callTool({
-            name: 'execute',
-            arguments: {
-                code: js`
+    // Generate some console logs in the browser
+    await client.callTool({
+      name: 'execute',
+      arguments: {
+        code: js`
           await state.testLogPage.evaluate(() => {
             console.log('Test log 12345');
             console.error('Test error 67890');
@@ -314,325 +320,403 @@ describe('Relay Core Tests', () => {
           // Wait for logs to be captured
           await new Promise(resolve => setTimeout(resolve, 100));
         `,
-            },
-        })
+      },
+    })
-        // Test getting all logs
-        const allLogsResult = await client.callTool({
-            name: 'execute',
-            arguments: {
-                code: js`
+    // Test getting all logs
+    const allLogsResult = await client.callTool({
+      name: 'execute',
+      arguments: {
+        code: js`
           const logs = await getLatestLogs();
           logs.forEach(log => console.log(log));
         `,
-            },
-        })
+      },
+    })
-        const output = (allLogsResult as any).content[0].text
-        expect(output).toContain('[log] Test log 12345')
-        expect(output).toContain('[error] Test error 67890')
-        expect(output).toContain('[warning] Test warning 11111')
+    const output = (allLogsResult as any).content[0].text
+    expect(output).toContain('[log] Test log 12345')
+    expect(output).toContain('[error] Test error 67890')
+    expect(output).toContain('[warning] Test warning 11111')
-        // Test filtering by search string
-        const errorLogsResult = await client.callTool({
-            name: 'execute',
-            arguments: {
-                code: js`
+    // Test filtering by search string
+    const errorLogsResult = await client.callTool({
+      name: 'execute',
+      arguments: {
+        code: js`
           const logs = await getLatestLogs({ search: 'error' });
           logs.forEach(log => console.log(log));
         `,
-            },
-        })
+      },
+    })
-        const errorOutput = (errorLogsResult as any).content[0].text
-        expect(errorOutput).toContain('[error] Test error 67890')
-        // With context lines (5 above/below), nearby logs are also included
-        expect(errorOutput).toContain('[log] Test log 12345')
+    const errorOutput = (errorLogsResult as any).content[0].text
+    expect(errorOutput).toContain('[error] Test error 67890')
+    // With context lines (5 above/below), nearby logs are also included
+    expect(errorOutput).toContain('[log] Test log 12345')
-        // Test that logs are cleared on page reload
-        await client.callTool({
-            name: 'execute',
-            arguments: {
-                code: js`
+    // Test that logs are cleared on page reload
+    await client.callTool({
+      name: 'execute',
+      arguments: {
+        code: js`
           // First add a log before reload
           await state.testLogPage.evaluate(() => {
             console.log('Before reload 99999');
           });
           await new Promise(resolve => setTimeout(resolve, 100));
         `,
-            },
-        })
+      },
+    })
-        // Verify the log exists
-        const beforeReloadResult = await client.callTool({
-            name: 'execute',
-            arguments: {
-                code: js`
+    // Verify the log exists
+    const beforeReloadResult = await client.callTool({
+      name: 'execute',
+      arguments: {
+        code: js`
           const logs = await getLatestLogs({ page: state.testLogPage });
           console.log('Logs before reload:', logs.length);
           logs.forEach(log => console.log(log));
         `,
-            },
-        })
+      },
+    })
-        const beforeReloadOutput = (beforeReloadResult as any).content[0].text
-        expect(beforeReloadOutput).toContain('[log] Before reload 99999')
+    const beforeReloadOutput = (beforeReloadResult as any).content[0].text
+    expect(beforeReloadOutput).toContain('[log] Before reload 99999')
-        // Reload the page
-        await client.callTool({
-            name: 'execute',
-            arguments: {
-                code: js`
+    // Reload the page
+    await client.callTool({
+      name: 'execute',
+      arguments: {
+        code: js`
           await state.testLogPage.reload();
           await state.testLogPage.evaluate(() => {
             console.log('After reload 88888');
           });
           await new Promise(resolve => setTimeout(resolve, 100));
         `,
-            },
-        })
+      },
+    })
-        // Check logs after reload - old logs should be gone
-        const afterReloadResult = await client.callTool({
-            name: 'execute',
-            arguments: {
-                code: js`
+    // Check logs after reload - old logs should be gone
+    const afterReloadResult = await client.callTool({
+      name: 'execute',
+      arguments: {
+        code: js`
           const logs = await getLatestLogs({ page: state.testLogPage });
           console.log('Logs after reload:', logs.length);
           logs.forEach(log => console.log(log));
         `,
-            },
-        })
+      },
+    })
-        const afterReloadOutput = (afterReloadResult as any).content[0].text
-        expect(afterReloadOutput).toContain('[log] After reload 88888')
-        expect(afterReloadOutput).not.toContain('[log] Before reload 99999')
+    const afterReloadOutput = (afterReloadResult as any).content[0].text
+    expect(afterReloadOutput).toContain('[log] After reload 88888')
+    expect(afterReloadOutput).not.toContain('[log] Before reload 99999')
-        // Clean up
-        await client.callTool({
-            name: 'execute',
-            arguments: {
-                code: js`
+    // Clean up
+    await client.callTool({
+      name: 'execute',
+      arguments: {
+        code: js`
           await state.testLogPage.close();
           delete state.testLogPage;
         `,
-            },
-        })
-    }, 30000)
-    it('should keep logs separate between different pages', async () => {
-        // Clear any existing logs from previous tests
-        await client.callTool({
-            name: 'execute',
-            arguments: {
-                code: js`
+      },
+    })
+  }, 30000)
+  it('should keep logs separate between different pages', async () => {
+    // Clear any existing logs from previous tests
+    await client.callTool({
+      name: 'execute',
+      arguments: {
+        code: js`
           clearAllLogs();
           console.log('Cleared all existing logs for second log test');
         `,
-            },
-        })
+      },
+    })
-        // Create two pages
-        await client.callTool({
-            name: 'execute',
-            arguments: {
-                code: js`
+    // Create two pages
+    await client.callTool({
+      name: 'execute',
+      arguments: {
+        code: js`
           state.pageA = await context.newPage();
           state.pageB = await context.newPage();
           await state.pageA.goto('about:blank');
           await state.pageB.goto('about:blank');
         `,
-            },
-        })
+      },
+    })
-        // Generate logs in page A
-        await client.callTool({
-            name: 'execute',
-            arguments: {
-                code: js`
+    // Generate logs in page A
+    await client.callTool({
+      name: 'execute',
+      arguments: {
+        code: js`
           await state.pageA.evaluate(() => {
             console.log('PageA log 11111');
             console.error('PageA error 22222');
           });
           await new Promise(resolve => setTimeout(resolve, 100));
         `,
-            },
-        })
+      },
+    })
-        // Generate logs in page B
-        await client.callTool({
-            name: 'execute',
-            arguments: {
-                code: js`
+    // Generate logs in page B
+    await client.callTool({
+      name: 'execute',
+      arguments: {
+        code: js`
           await state.pageB.evaluate(() => {
             console.log('PageB log 33333');
             console.error('PageB error 44444');
           });
           await new Promise(resolve => setTimeout(resolve, 100));
         `,
-            },
-        })
+      },
+    })
-        // Check logs for page A - should only have page A logs
-        const pageALogsResult = await client.callTool({
-            name: 'execute',
-            arguments: {
-                code: js`
+    // Check logs for page A - should only have page A logs
+    const pageALogsResult = await client.callTool({
+      name: 'execute',
+      arguments: {
+        code: js`
           const logs = await getLatestLogs({ page: state.pageA });
           console.log('Page A logs:', logs.length);
           logs.forEach(log => console.log(log));
         `,
-            },
-        })
+      },
+    })
-        const pageAOutput = (pageALogsResult as any).content[0].text
-        expect(pageAOutput).toContain('[log] PageA log 11111')
-        expect(pageAOutput).toContain('[error] PageA error 22222')
-        expect(pageAOutput).not.toContain('PageB')
+    const pageAOutput = (pageALogsResult as any).content[0].text
+    expect(pageAOutput).toContain('[log] PageA log 11111')
+    expect(pageAOutput).toContain('[error] PageA error 22222')
+    expect(pageAOutput).not.toContain('PageB')
-        // Check logs for page B - should only have page B logs
-        const pageBLogsResult = await client.callTool({
-            name: 'execute',
-            arguments: {
-                code: js`
+    // Check logs for page B - should only have page B logs
+    const pageBLogsResult = await client.callTool({
+      name: 'execute',
+      arguments: {
+        code: js`
           const logs = await getLatestLogs({ page: state.pageB });
           console.log('Page B logs:', logs.length);
           logs.forEach(log => console.log(log));
         `,
-            },
-        })
+      },
+    })
-        const pageBOutput = (pageBLogsResult as any).content[0].text
-        expect(pageBOutput).toContain('[log] PageB log 33333')
-        expect(pageBOutput).toContain('[error] PageB error 44444')
-        expect(pageBOutput).not.toContain('PageA')
+    const pageBOutput = (pageBLogsResult as any).content[0].text
+    expect(pageBOutput).toContain('[log] PageB log 33333')
+    expect(pageBOutput).toContain('[error] PageB error 44444')
+    expect(pageBOutput).not.toContain('PageA')
-        // Check all logs - should have logs from both pages
-        const allLogsResult = await client.callTool({
-            name: 'execute',
-            arguments: {
-                code: js`
+    // Check all logs - should have logs from both pages
+    const allLogsResult = await client.callTool({
+      name: 'execute',
+      arguments: {
+        code: js`
           const logs = await getLatestLogs();
           console.log('All logs:', logs.length);
           logs.forEach(log => console.log(log));
         `,
-            },
-        })
+      },
+    })
-        const allOutput = (allLogsResult as any).content[0].text
-        expect(allOutput).toContain('[log] PageA log 11111')
-        expect(allOutput).toContain('[log] PageB log 33333')
+    const allOutput = (allLogsResult as any).content[0].text
+    expect(allOutput).toContain('[log] PageA log 11111')
+    expect(allOutput).toContain('[log] PageB log 33333')
-        // Test that reloading page A clears only page A logs
-        await client.callTool({
-            name: 'execute',
-            arguments: {
-                code: js`
+    // Test that reloading page A clears only page A logs
+    await client.callTool({
+      name: 'execute',
+      arguments: {
+        code: js`
           await state.pageA.reload();
           await state.pageA.evaluate(() => {
             console.log('PageA after reload 55555');
           });
           await new Promise(resolve => setTimeout(resolve, 100));
         `,
-            },
-        })
+      },
+    })
-        // Check page A logs - should only have new log
-        const pageAAfterReloadResult = await client.callTool({
-            name: 'execute',
-            arguments: {
-                code: js`
+    // Check page A logs - should only have new log
+    const pageAAfterReloadResult = await client.callTool({
+      name: 'execute',
+      arguments: {
+        code: js`
           const logs = await getLatestLogs({ page: state.pageA });
           console.log('Page A logs after reload:', logs.length);
           logs.forEach(log => console.log(log));
         `,
-            },
-        })
+      },
+    })
-        const pageAAfterReloadOutput = (pageAAfterReloadResult as any).content[0].text
-        expect(pageAAfterReloadOutput).toContain('[log] PageA after reload 55555')
-        expect(pageAAfterReloadOutput).not.toContain('[log] PageA log 11111')
+    const pageAAfterReloadOutput = (pageAAfterReloadResult as any).content[0].text
+    expect(pageAAfterReloadOutput).toContain('[log] PageA after reload 55555')
+    expect(pageAAfterReloadOutput).not.toContain('[log] PageA log 11111')
-        // Check page B logs - should still have original logs
-        const pageBAfterAReloadResult = await client.callTool({
-            name: 'execute',
-            arguments: {
-                code: js`
+    // Check page B logs - should still have original logs
+    const pageBAfterAReloadResult = await client.callTool({
+      name: 'execute',
+      arguments: {
+        code: js`
           const logs = await getLatestLogs({ page: state.pageB });
           console.log('Page B logs after A reload:', logs.length);
           logs.forEach(log => console.log(log));
         `,
-            },
-        })
+      },
+    })
-        const pageBAfterAReloadOutput = (pageBAfterAReloadResult as any).content[0].text
-        expect(pageBAfterAReloadOutput).toContain('[log] PageB log 33333')
-        expect(pageBAfterAReloadOutput).toContain('[error] PageB error 44444')
+    const pageBAfterAReloadOutput = (pageBAfterAReloadResult as any).content[0].text
+    expect(pageBAfterAReloadOutput).toContain('[log] PageB log 33333')
+    expect(pageBAfterAReloadOutput).toContain('[error] PageB error 44444')
-        // Test that logs are deleted when page is closed
-        await client.callTool({
-            name: 'execute',
-            arguments: {
-                code: js`
+    // Test that logs are deleted when page is closed
+    await client.callTool({
+      name: 'execute',
+      arguments: {
+        code: js`
           // Close page A
           await state.pageA.close();
           await new Promise(resolve => setTimeout(resolve, 100));
         `,
-            },
-        })
+      },
+    })
-        // Check all logs - page A logs should be gone
-        const logsAfterCloseResult = await client.callTool({
-            name: 'execute',
-            arguments: {
-                code: js`
+    // Check all logs - page A logs should be gone
+    const logsAfterCloseResult = await client.callTool({
+      name: 'execute',
+      arguments: {
+        code: js`
           const logs = await getLatestLogs();
           console.log('All logs after closing page A:', logs.length);
           logs.forEach(log => console.log(log));
         `,
-            },
-        })
+      },
+    })
-        const logsAfterCloseOutput = (logsAfterCloseResult as any).content[0].text
-        expect(logsAfterCloseOutput).not.toContain('PageA')
-        expect(logsAfterCloseOutput).toContain('[log] PageB log 33333')
+    const logsAfterCloseOutput = (logsAfterCloseResult as any).content[0].text
+    expect(logsAfterCloseOutput).not.toContain('PageA')
+    expect(logsAfterCloseOutput).toContain('[log] PageB log 33333')
-        // Clean up remaining page
-        await client.callTool({
-            name: 'execute',
-            arguments: {
-                code: js`
+    // Clean up remaining page
+    await client.callTool({
+      name: 'execute',
+      arguments: {
+        code: js`
           await state.pageB.close();
           delete state.pageA;
           delete state.pageB;
         `,
-            },
-        })
-    }, 30000)
-    // right now our extension always forces light mode because of a playwright cdp bug
-    it.todo('should preserve system color scheme instead of forcing light mode', async () => {
-        const browserContext = getBrowserContext()
-        const serviceWorker = await getExtensionServiceWorker(browserContext)
-        const page = await browserContext.newPage()
-        await page.goto('https://example.com')
-        await page.bringToFront()
-        const colorSchemeBefore = await page.evaluate(() => {
-            return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
-        })
-        console.log('Color scheme before MCP connection:', colorSchemeBefore)
+      },
+    })
+  }, 30000)
+  it('should capture console logs from cross-origin iframes', async () => {
+    // Two servers on different ports = different origins
+    const iframeServer = await createSimpleServer({
+      routes: {
+        '/iframe.html': `<!doctype html><html><body>
+          <script>
+            console.log('iframe-log-ALPHA');
+            console.error('iframe-error-BETA');
+            console.warn('iframe-warn-GAMMA');
+          </script>
+          <p>cross-origin iframe</p>
+        </body></html>`,
+      },
+    })
-        await serviceWorker.evaluate(async () => {
-            await globalThis.toggleExtensionForActiveTab()
-        })
-        await new Promise(r => setTimeout(r, 100))
+    const parentServer = await createSimpleServer({
+      routes: {
+        '/': `<!doctype html><html><body>
+          <script>console.log('parent-log-DELTA');</script>
+          <iframe src="${iframeServer.baseUrl}/iframe.html"></iframe>
+        </body></html>`,
+      },
+    })
-        const result = await client.callTool({
-            name: 'execute',
-            arguments: {
-                code: js`
+    try {
+      // Clear logs and navigate to the parent page with cross-origin iframe
+      await client.callTool({
+        name: 'execute',
+        arguments: {
+          code: js`
+            clearAllLogs();
+            state.iframePage = await context.newPage();
+            await state.iframePage.goto('${parentServer.baseUrl}', { waitUntil: 'networkidle' });
+            // Wait for iframe to load and logs to be captured
+            await state.iframePage.frameLocator('iframe').locator('p').waitFor({ timeout: 5000 });
+            await new Promise(resolve => setTimeout(resolve, 500));
+          `,
+        },
+      })
+      // Retrieve logs and verify both parent and iframe logs are captured
+      const logsResult = await client.callTool({
+        name: 'execute',
+        arguments: {
+          code: js`
+            const logs = await getLatestLogs({ page: state.iframePage });
+            console.log('Cross-origin iframe logs count:', logs.length);
+            logs.forEach(log => console.log(log));
+          `,
+        },
+      })
+      const output = (logsResult as any).content[0].text
+      // Parent page log
+      expect(output).toContain('parent-log-DELTA')
+      // Cross-origin iframe logs
+      expect(output).toContain('iframe-log-ALPHA')
+      expect(output).toContain('iframe-error-BETA')
+      expect(output).toContain('iframe-warn-GAMMA')
+      // Clean up
+      await client.callTool({
+        name: 'execute',
+        arguments: {
+          code: js`
+            await state.iframePage.close();
+            delete state.iframePage;
+          `,
+        },
+      })
+    } finally {
+      await Promise.all([parentServer.close(), iframeServer.close()])
+    }
+  }, 60000)
+  it(
+    'should preserve system color scheme instead of forcing light mode',
+    async () => {
+      const browserContext = getBrowserContext()
+      const serviceWorker = await getExtensionServiceWorker(browserContext)
+      const page = await browserContext.newPage()
+      await page.goto('https://example.com')
+      await page.bringToFront()
+      // test-utils launches with colorScheme: 'dark', so before MCP connection
+      // the browser should report dark mode
+      const colorSchemeBefore = await page.evaluate(() => {
+        return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
+      })
+      expect(colorSchemeBefore).toBe('dark')
+      await serviceWorker.evaluate(async () => {
+        await globalThis.toggleExtensionForActiveTab()
+      })
+      await new Promise((r) => setTimeout(r, 500))
+      const result = await client.callTool({
+        name: 'execute',
+        arguments: {
+          code: js`
                     const pages = context.pages();
                     const urls = pages.map(p => p.url());
                     const targetPage = pages.find(p => p.url().includes('example.com'));
@@ -643,29 +727,34 @@ describe('Relay Core Tests', () => {
                     const isLight = await targetPage.evaluate(() => window.matchMedia('(prefers-color-scheme: light)').matches);
                     return { matchesDark: isDark, matchesLight: isLight };
                 `,
-            },
-        })
-        console.log('Color scheme after MCP connection:', result.content)
-        expect(result.content).toMatchInlineSnapshot(`
-          [
-            {
-              "text": "[return value] { error: 'Page not found', urls: [ 'about:blank' ] }",
-              "type": "text",
-            },
-          ]
-        `)
-        await page.close()
-    }, 60000)
-    it('should get clean HTML with getCleanHTML', async () => {
-        const browserContext = getBrowserContext()
-        const serviceWorker = await getExtensionServiceWorker(browserContext)
-        const page = await browserContext.newPage()
-        await page.setContent(`
+        },
+      })
+      console.log('Color scheme after MCP connection:', result.content)
+      // After MCP connection, color scheme should NOT be forced to light.
+      // The page.ts default is now 'no-override', so the browser's actual
+      // color scheme (dark, from test-utils launch config) should be preserved.
+      expect(result.content).toMatchInlineSnapshot(`
+        [
+          {
+            "text": "[return value] { matchesDark: true, matchesLight: false }",
+            "type": "text",
+          },
+        ]
+      `)
+      await page.close()
+    },
+    60000,
+  )
+  it('should get clean HTML with getCleanHTML', async () => {
+    const browserContext = getBrowserContext()
+    const serviceWorker = await getExtensionServiceWorker(browserContext)
+    const page = await browserContext.newPage()
+    await page.setContent(`
             <html>
                 <head>
                     <style>.hidden { display: none; }</style>
@@ -681,18 +770,18 @@ describe('Relay Core Tests', () => {
                 </body>
             </html>
         `)
-        await page.bringToFront()
+    await page.bringToFront()
-        await serviceWorker.evaluate(async () => {
-            await globalThis.toggleExtensionForActiveTab()
-        })
-        await new Promise(r => setTimeout(r, 400))
+    await serviceWorker.evaluate(async () => {
+      await globalThis.toggleExtensionForActiveTab()
+    })
+    await new Promise((r) => setTimeout(r, 400))
-        // Test basic getCleanHTML
-        const result = await client.callTool({
-            name: 'execute',
-            arguments: {
-                code: js`
+    // Test basic getCleanHTML
+    const result = await client.callTool({
+      name: 'execute',
+      arguments: {
+        code: js`
                     let testPage;
                     for (const p of context.pages()) {
                         const html = await p.content();
@@ -702,15 +791,15 @@ describe('Relay Core Tests', () => {
                     const html = await getCleanHTML({ locator: testPage.locator('body') });
                     return html;
                 `,
-                timeout: 15000,
-            },
-        })
+        timeout: 15000,
+      },
+    })
-        expect(result.isError).toBeFalsy()
-        const text = (result.content as any)[0]?.text || ''
+    expect(result.isError).toBeFalsy()
+    const text = (result.content as any)[0]?.text || ''
-        // Inline snapshot of cleaned HTML
-        expect(text).toMatchInlineSnapshot(`
+    // Inline snapshot of cleaned HTML
+    expect(text).toMatchInlineSnapshot(`
           "[return value] <div data-testid="main">
            <h1>Hello World</h1>
            <button aria-label="Click me">Submit</button>
@@ -719,16 +808,16 @@ describe('Relay Core Tests', () => {
           </div>"
         `)
-        // Should NOT contain script/style tags (they're removed)
-        expect(text).not.toContain('<script')
-        expect(text).not.toContain('<style')
-        expect(text).not.toContain('console.log')
+    // Should NOT contain script/style tags (they're removed)
+    expect(text).not.toContain('<script')
+    expect(text).not.toContain('<style')
+    expect(text).not.toContain('console.log')
-        // Test search functionality
-        const searchResult = await client.callTool({
-            name: 'execute',
-            arguments: {
-                code: js`
+    // Test search functionality
+    const searchResult = await client.callTool({
+      name: 'execute',
+      arguments: {
+        code: js`
                     let testPage;
                     for (const p of context.pages()) {
                         const html = await p.content();
@@ -738,24 +827,24 @@ describe('Relay Core Tests', () => {
                     const html = await getCleanHTML({ locator: testPage, search: /button/i });
                     return html;
                 `,
-                timeout: 15000,
-            },
-        })
+        timeout: 15000,
+      },
+    })
-        expect(searchResult.isError).toBeFalsy()
-        const searchText = (searchResult.content as any)[0]?.text || ''
-        expect(searchText).toContain('button')
+    expect(searchResult.isError).toBeFalsy()
+    const searchText = (searchResult.content as any)[0]?.text || ''
+    expect(searchText).toContain('button')
-        await page.close()
-    }, 60000)
+    await page.close()
+  }, 60000)
-    it('should extract page content as markdown with getPageMarkdown', async () => {
-        const browserContext = getBrowserContext()
-        const serviceWorker = await getExtensionServiceWorker(browserContext)
+  it('should extract page content as markdown with getPageMarkdown', async () => {
+    const browserContext = getBrowserContext()
+    const serviceWorker = await getExtensionServiceWorker(browserContext)
-        const page = await browserContext.newPage()
-        // Create a realistic article-like page structure
-        await page.setContent(`
+    const page = await browserContext.newPage()
+    // Create a realistic article-like page structure
+    await page.setContent(`
             <html>
                 <head>
                     <title>Test Article Title</title>
@@ -782,18 +871,18 @@ describe('Relay Core Tests', () => {
                 </body>
             </html>
         `)
-        await page.bringToFront()
+    await page.bringToFront()
-        await serviceWorker.evaluate(async () => {
-            await globalThis.toggleExtensionForActiveTab()
-        })
-        await new Promise(r => setTimeout(r, 400))
+    await serviceWorker.evaluate(async () => {
+      await globalThis.toggleExtensionForActiveTab()
+    })
+    await new Promise((r) => setTimeout(r, 400))
-        // Test basic getPageMarkdown
-        const result = await client.callTool({
-            name: 'execute',
-            arguments: {
-                code: js`
+    // Test basic getPageMarkdown
+    const result = await client.callTool({
+      name: 'execute',
+      arguments: {
+        code: js`
                     let testPage;
                     for (const p of context.pages()) {
                         const html = await p.content();
@@ -803,30 +892,30 @@ describe('Relay Core Tests', () => {
                     const content = await getPageMarkdown({ page: testPage });
                     console.log(content);
                 `,
-                timeout: 15000,
-            },
-        })
+        timeout: 15000,
+      },
+    })
-        expect(result.isError).toBeFalsy()
-        const text = (result.content as any)[0]?.text || ''
+    expect(result.isError).toBeFalsy()
+    const text = (result.content as any)[0]?.text || ''
-        // Snapshot the full output
-        await expect(text).toMatchFileSnapshot('./snapshots/page-markdown-output.txt')
+    // Snapshot the full output
+    await expect(text).toMatchFileSnapshot('./snapshots/page-markdown-output.txt')
-        // Should contain article content
-        expect(text).toContain('Test Article Title')
-        expect(text).toContain('first paragraph')
-        expect(text).toContain('second paragraph')
+    // Should contain article content
+    expect(text).toContain('Test Article Title')
+    expect(text).toContain('first paragraph')
+    expect(text).toContain('second paragraph')
-        // Should NOT contain script/style content
-        expect(text).not.toContain('analytics')
-        expect(text).not.toContain('background: blue')
+    // Should NOT contain script/style content
+    expect(text).not.toContain('analytics')
+    expect(text).not.toContain('background: blue')
-        // Test search functionality
-        const searchResult = await client.callTool({
-            name: 'execute',
-            arguments: {
-                code: js`
+    // Test search functionality
+    const searchResult = await client.callTool({
+      name: 'execute',
+      arguments: {
+        code: js`
                     let testPage;
                     for (const p of context.pages()) {
                         const html = await p.content();
@@ -836,97 +925,186 @@ describe('Relay Core Tests', () => {
                     const content = await getPageMarkdown({ page: testPage, search: /important/i, showDiffSinceLastCall: false });
                     return content;
                 `,
-                timeout: 15000,
-            },
-        })
+        timeout: 15000,
+      },
+    })
-        expect(searchResult.isError).toBeFalsy()
-        const searchText = (searchResult.content as any)[0]?.text || ''
-        expect(searchText).toContain('important')
+    expect(searchResult.isError).toBeFalsy()
+    const searchText = (searchResult.content as any)[0]?.text || ''
+    expect(searchText).toContain('important')
-        await page.close()
-    }, 60000)
+    await page.close()
+  }, 60000)
-    it('should handle default page being closed and switch to another available page', async () => {
-        // This test verifies that when the default `page` in MCP scope is closed,
-        // the MCP automatically switches to another available page instead of failing
-        // with cryptic "page closed" errors.
+  it('should handle default page being closed and switch to another available page', async () => {
+    // This test verifies that when the default `page` in MCP scope is closed,
+    // the MCP automatically switches to another available page instead of failing
+    // with cryptic "page closed" errors.
-        const browserContext = getBrowserContext()
-        const serviceWorker = await getExtensionServiceWorker(browserContext)
+    const browserContext = getBrowserContext()
+    const serviceWorker = await getExtensionServiceWorker(browserContext)
-        // 1. Disconnect everything to start fresh
-        await serviceWorker.evaluate(async () => {
-            await globalThis.disconnectEverything()
-        })
-        await new Promise(r => setTimeout(r, 100))
+    // 1. Disconnect everything to start fresh
+    await serviceWorker.evaluate(async () => {
+      await globalThis.disconnectEverything()
+    })
+    await new Promise((r) => setTimeout(r, 100))
-        // 2. Create first page and enable extension
-        const page1 = await browserContext.newPage()
-        await page1.goto('https://example.com/first-page')
-        await page1.bringToFront()
+    // 2. Create first page and enable extension
+    const page1 = await browserContext.newPage()
+    await page1.goto('https://example.com/first-page')
+    await page1.bringToFront()
-        await serviceWorker.evaluate(async () => {
-            await globalThis.toggleExtensionForActiveTab()
-        })
-        await new Promise(r => setTimeout(r, 100))
+    await serviceWorker.evaluate(async () => {
+      await globalThis.toggleExtensionForActiveTab()
+    })
+    await new Promise((r) => setTimeout(r, 100))
-        // 3. Reset MCP to ensure page1 becomes the default page (only page available)
-        const resetResult = await client.callTool({
-            name: 'reset',
-            arguments: {},
-        })
-        expect((resetResult as any).content[0].text).toContain('Connection reset successfully')
+    // 3. Reset MCP to ensure page1 becomes the default page (only page available)
+    const resetResult = await client.callTool({
+      name: 'reset',
+      arguments: {},
+    })
+    expect((resetResult as any).content[0].text).toContain('Connection reset successfully')
-        // 4. Verify initial page is accessible via default `page`
-        const initialResult = await client.callTool({
-            name: 'execute',
-            arguments: {
-                code: js`
+    // 4. Verify initial page is accessible via default `page`
+    const initialResult = await client.callTool({
+      name: 'execute',
+      arguments: {
+        code: js`
                     const url = page.url();
                     console.log('Initial page URL:', url);
                     return { url };
                 `,
-            },
-        })
-        expect((initialResult as any).content[0].text).toContain('first-page')
+      },
+    })
+    expect((initialResult as any).content[0].text).toContain('first-page')
-        // 5. Create second page and enable extension
-        const page2 = await browserContext.newPage()
-        await page2.goto('https://example.com/second-page')
-        await page2.bringToFront()
+    // 5. Create second page and enable extension
+    const page2 = await browserContext.newPage()
+    await page2.goto('https://example.com/second-page')
+    await page2.bringToFront()
-        await serviceWorker.evaluate(async () => {
-            await globalThis.toggleExtensionForActiveTab()
-        })
-        await new Promise(r => setTimeout(r, 100))
-        // 6. Close the first page (which is the default `page` in MCP scope)
-        await page1.close()
-        await new Promise(r => setTimeout(r, 100))
-        // 7. Execute code via MCP - should NOT fail with "page closed" error
-        // Instead, it should automatically switch to the second page
-        const afterCloseResult = await client.callTool({
-            name: 'execute',
-            arguments: {
-                code: js`
+    await serviceWorker.evaluate(async () => {
+      await globalThis.toggleExtensionForActiveTab()
+    })
+    await new Promise((r) => setTimeout(r, 100))
+    // 6. Close the first page (which is the default `page` in MCP scope)
+    await page1.close()
+    await new Promise((r) => setTimeout(r, 100))
+    // 7. Execute code via MCP - should NOT fail with "page closed" error
+    // Instead, it should automatically switch to the second page
+    const afterCloseResult = await client.callTool({
+      name: 'execute',
+      arguments: {
+        code: js`
                     const url = page.url();
                     console.log('Page URL after close:', url);
                     const title = await page.title();
                     return { url, title };
                 `,
-            },
-        })
+      },
+    })
-        // Should succeed and return the second page's info
-        expect((afterCloseResult as any).isError).toBeFalsy()
-        const output = (afterCloseResult as any).content[0].text
-        expect(output).toContain('second-page')
-        expect(output).not.toContain('page closed')
-        expect(output).not.toContain('Target closed')
+    // Should succeed and return the second page's info
+    expect((afterCloseResult as any).isError).toBeFalsy()
+    const output = (afterCloseResult as any).content[0].text
+    expect(output).toContain('second-page')
+    expect(output).not.toContain('page closed')
+    expect(output).not.toContain('Target closed')
+    // Cleanup
+    await page2.close()
+  }, 60000)
+  it('should show descriptive error when clicking a hidden element', async () => {
+    // Create a fresh page and set content with a collapsed details element
+    await client.callTool({
+      name: 'execute',
+      arguments: {
+        code: js`
+          state.errorTestPage = await context.newPage();
+          await state.errorTestPage.setContent(\`
+            <details>
+              <summary>Toggle</summary>
+              <button id="hidden-btn">Hidden Button</button>
+            </details>
+          \`);
+        `,
+      },
+    })
+    const result = await client.callTool({
+      name: 'execute',
+      arguments: {
+        code: js`
+          await state.errorTestPage.click('#hidden-btn');
+        `,
+      },
+    })
+    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)
+    // 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 client.callTool({
+      name: 'execute',
+      arguments: {
+        code: js`
+          state.errorTestPage = await context.newPage();
+          await state.errorTestPage.setContent(\`
+            <div style="position:relative">
+              <button id="covered-btn" style="position:absolute;top:0;left:0">Covered</button>
+              <div id="overlay" style="position:absolute;top:0;left:0;width:200px;height:200px;background:red;z-index:10">Overlay</div>
+            </div>
+          \`);
+        `,
+      },
+    })
+    const result = await client.callTool({
+      name: 'execute',
+      arguments: {
+        code: js`
+          await state.errorTestPage.click('#covered-btn');
+        `,
+      },
+    })
+    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)
+    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 client.callTool({
+      name: 'execute',
+      arguments: {
+        code: js`
+          state.errorTestPage = await context.newPage();
+          await state.errorTestPage.setContent('<button id="invisible" style="display:none">Invisible</button>');
+        `,
+      },
+    })
+    const result = await client.callTool({
+      name: 'execute',
+      arguments: {
+        code: js`
+          await state.errorTestPage.click('#invisible');
+        `,
+      },
+    })
+    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)
+    await client.callTool({ name: 'execute', arguments: { code: js`await state.errorTestPage.close(); delete state.errorTestPage;` } })
+  }, 30000)
-        // Cleanup
-        await page2.close()
-    }, 60000)
 })