playwriter 0.0.16 → 0.0.21

package/src/mcp.test.ts

@@ -8,17 +8,21 @@ import fs from 'node:fs'
 import os from 'node:os'
 import { getCdpUrl } from './utils.js'
 import type { ExtensionState } from 'mcp-extension/src/types.js'
+import type { Protocol } from 'devtools-protocol'
+import { imageSize } from 'image-size'
+import { getCDPSessionForPage } from './cdp-session.js'
+import { startPlayWriterCDPRelayServer, type RelayServer } from './extension/cdp-relay.js'
+import { createFileLogger } from './create-logger.js'
+import type { CDPCommand } from './cdp-types.js'
 
-import { spawn } from 'node:child_process'
+declare const window: any
+declare const document: any
 
 
 const execAsync = promisify(exec)
 
 async function getExtensionServiceWorker(context: BrowserContext) {
-
     let serviceWorkers = context.serviceWorkers().filter(sw => sw.url().startsWith('chrome-extension://'))
-
-
     let serviceWorker = serviceWorkers[0]
     if (!serviceWorker) {
         serviceWorker = await context.waitForEvent('serviceworker', {
@@ -26,6 +30,14 @@ async function getExtensionServiceWorker(context: BrowserContext) {
         })
     }
 
+    for (let i = 0; i < 50; i++) {
+        const isReady = await serviceWorker.evaluate(() => {
+            // @ts-ignore
+            return typeof globalThis.toggleExtensionForActiveTab === 'function'
+        })
+        if (isReady) break
+        await new Promise(r => setTimeout(r, 100))
+    }
 
     return serviceWorker
 }
@@ -51,6 +63,68 @@ async function killProcessOnPort(port: number): Promise<void> {
     }
 }
 
+interface TestContext {
+    browserContext: Awaited<ReturnType<typeof chromium.launchPersistentContext>>
+    userDataDir: string
+    relayServer: RelayServer
+}
+
+async function setupTestContext({ tempDirPrefix }: { tempDirPrefix: string }): Promise<TestContext> {
+    await killProcessOnPort(19988)
+
+    console.log('Building extension...')
+    await execAsync('TESTING=1 pnpm build', { cwd: '../extension' })
+    console.log('Extension built')
+
+    const localLogPath = path.join(process.cwd(), 'relay-server.log')
+    const logger = createFileLogger({ logFilePath: localLogPath })
+    const relayServer = await startPlayWriterCDPRelayServer({ port: 19988, logger })
+
+    const userDataDir = fs.mkdtempSync(path.join(os.tmpdir(), tempDirPrefix))
+    const extensionPath = path.resolve('../extension/dist')
+
+    const browserContext = await chromium.launchPersistentContext(userDataDir, {
+        channel: 'chromium',
+        headless: !process.env.HEADFUL,
+        colorScheme: 'dark',
+        args: [
+            `--disable-extensions-except=${extensionPath}`,
+            `--load-extension=${extensionPath}`,
+        ],
+    })
+
+    const serviceWorker = await getExtensionServiceWorker(browserContext)
+
+    const page = await browserContext.newPage()
+    await page.goto('about:blank')
+
+    await serviceWorker.evaluate(async () => {
+        await globalThis.toggleExtensionForActiveTab()
+    })
+
+    return { browserContext, userDataDir, relayServer }
+}
+
+async function cleanupTestContext(ctx: TestContext | null, cleanup?: (() => Promise<void>) | null): Promise<void> {
+    if (ctx?.browserContext) {
+        await ctx.browserContext.close()
+    }
+    if (ctx?.relayServer) {
+        ctx.relayServer.close()
+    }
+
+    if (ctx?.userDataDir) {
+        try {
+            fs.rmSync(ctx.userDataDir, { recursive: true, force: true })
+        } catch (e) {
+            console.error('Failed to cleanup user data dir:', e)
+        }
+    }
+    if (cleanup) {
+        await cleanup()
+    }
+}
+
 declare global {
     var toggleExtensionForActiveTab: () => Promise<{ isConnected: boolean; state: ExtensionState }>;
     var getExtensionState: () => ExtensionState;
@@ -60,106 +134,57 @@ declare global {
 describe('MCP Server Tests', () => {
     let client: Awaited<ReturnType<typeof createMCPClient>>['client']
     let cleanup: (() => Promise<void>) | null = null
-    let browserContext: Awaited<ReturnType<typeof chromium.launchPersistentContext>> | null = null
-    let userDataDir: string
-    let relayServerProcess: any
+    let testCtx: TestContext | null = null
 
     beforeAll(async () => {
-        await killProcessOnPort(19988)
-
-        // Build extension
-        console.log('Building extension...')
-        await execAsync('TESTING=1 pnpm build', { cwd: '../extension' })
-        console.log('Extension built')
-
-        // Start Relay Server manually
-        relayServerProcess = spawn('pnpm', ['tsx', 'src/start-relay-server.ts'], {
-            cwd: process.cwd(),
-            stdio: 'inherit'
-        })
-
-        // Wait for port 19988 to be ready
-        await new Promise<void>((resolve, reject) => {
-             let retries = 0
-             const interval = setInterval(async () => {
-                 try {
-                     const { stdout } = await execAsync('lsof -ti:19988')
-                     if (stdout.trim()) {
-                         clearInterval(interval)
-                         resolve()
-                     }
-                 } catch {
-                     // ignore
-                 }
-                 retries++
-                 if (retries > 30) {
-                     clearInterval(interval)
-                     reject(new Error('Relay server failed to start'))
-                 }
-             }, 1000)
-        })
+        testCtx = await setupTestContext({ tempDirPrefix: 'pw-test-' })
 
         const result = await createMCPClient()
         client = result.client
         cleanup = result.cleanup
+    }, 600000)
 
-        userDataDir = fs.mkdtempSync(path.join(os.tmpdir(), 'pw-test-'))
-        const extensionPath = path.resolve('../extension/dist')
+    afterAll(async () => {
+        await cleanupTestContext(testCtx, cleanup)
+        cleanup = null
+        testCtx = null
+    })
 
-        browserContext = await chromium.launchPersistentContext(userDataDir, {
-          channel: 'chromium', // <- this opts into new headless
-          headless: !process.env.HEADFUL,
-            args: [
-                `--disable-extensions-except=${extensionPath}`,
-                `--load-extension=${extensionPath}`,
-            ],
-        })
+    const getBrowserContext = () => {
+        if (!testCtx?.browserContext) throw new Error('Browser not initialized')
+        return testCtx.browserContext
+    }
 
-        // Wait for service worker and connect
+    it('should inject script via addScriptTag through CDP relay', async () => {
+        const browserContext = getBrowserContext()
         const serviceWorker = await getExtensionServiceWorker(browserContext)
 
-        // Wait for extension to initialize global functions
-        for (let i = 0; i < 50; i++) {
-             const isReady = await serviceWorker.evaluate(() => {
-                 // @ts-ignore
-                 return typeof globalThis.toggleExtensionForActiveTab === 'function'
-             })
-             if (isReady) break
-             await new Promise(r => setTimeout(r, 100))
-        }
-
-        // Create a page to attach to
         const page = await browserContext.newPage()
-        await page.goto('about:blank')
+        await page.setContent('<html><body><button id="btn">Click</button></body></html>')
+        await page.bringToFront()
 
-        // Connect the tab
         await serviceWorker.evaluate(async () => {
-             await globalThis.toggleExtensionForActiveTab()
+            await globalThis.toggleExtensionForActiveTab()
         })
+        await new Promise(r => setTimeout(r, 500))
 
-    }, 600000) // 10 minutes timeout
+        const browser = await chromium.connectOverCDP(getCdpUrl())
+        const cdpPage = browser.contexts()[0].pages().find(p => {
+            return p.url().startsWith('about:')
+        })
+        expect(cdpPage).toBeDefined()
 
-    afterAll(async () => {
-        if (browserContext) {
-            await browserContext.close()
-        }
-        if (relayServerProcess) {
-            relayServerProcess.kill()
-        }
-        await killProcessOnPort(19988)
+        const hasGlobalBefore = await cdpPage!.evaluate(() => !!(globalThis as any).__testGlobal)
+        expect(hasGlobalBefore).toBe(false)
 
-        if (userDataDir) {
-             try {
-                fs.rmSync(userDataDir, { recursive: true, force: true })
-            } catch (e) {
-                console.error('Failed to cleanup user data dir:', e)
-            }
-        }
-        if (cleanup) {
-            await cleanup()
-            cleanup = null
-        }
-    })
+        await cdpPage!.addScriptTag({ content: 'globalThis.__testGlobal = { foo: "bar" };' })
+
+        const hasGlobalAfter = await cdpPage!.evaluate(() => (globalThis as any).__testGlobal)
+        expect(hasGlobalAfter).toEqual({ foo: 'bar' })
+
+        await browser.close()
+        await page.close()
+    }, 60000)
 
     it('should execute code and capture console output', async () => {
         await client.callTool({
@@ -204,7 +229,7 @@ describe('MCP Server Tests', () => {
     }, 30000)
 
     it('should show extension as connected for pages created via newPage()', async () => {
-        if (!browserContext) throw new Error('Browser not initialized')
+        const browserContext = getBrowserContext()
         const serviceWorker = await getExtensionServiceWorker(browserContext)
 
         // Create a page via MCP (which uses context.newPage())
@@ -341,9 +366,7 @@ describe('MCP Server Tests', () => {
     })
 
     it('should handle new pages and toggling with new connections', async () => {
-        if (!browserContext) throw new Error('Browser not initialized')
-
-        // Find the correct service worker by URL
+        const browserContext = getBrowserContext()
         const serviceWorker = await getExtensionServiceWorker(browserContext)
 
         // 1. Create a new page
@@ -430,8 +453,7 @@ describe('MCP Server Tests', () => {
     })
 
     it('should handle new pages and toggling with persistent connection', async () => {
-        if (!browserContext) throw new Error('Browser not initialized')
-
+        const browserContext = getBrowserContext()
         const serviceWorker = await getExtensionServiceWorker(browserContext)
 
         // Connect once
@@ -502,7 +524,7 @@ describe('MCP Server Tests', () => {
         await directBrowser.close()
     })
     it('should maintain connection across reloads and navigation', async () => {
-        if (!browserContext) throw new Error('Browser not initialized')
+        const browserContext = getBrowserContext()
         const serviceWorker = await getExtensionServiceWorker(browserContext)
 
         // 1. Setup page
@@ -551,93 +573,7 @@ describe('MCP Server Tests', () => {
     })
 
     it('should support multiple concurrent tabs', async () => {
-        if (!browserContext) throw new Error('Browser not initialized')
-        const serviceWorker = await getExtensionServiceWorker(browserContext)
-        await new Promise(resolve => setTimeout(resolve, 500))
-
-        // Tab A
-        const pageA = await browserContext.newPage()
-        await pageA.goto('https://example.com/tab-a')
-        await pageA.bringToFront()
-        await new Promise(resolve => setTimeout(resolve, 500))
-        await serviceWorker.evaluate(async () => {
-            await globalThis.toggleExtensionForActiveTab()
-        })
-
-        // Tab B
-        const pageB = await browserContext.newPage()
-        await pageB.goto('https://example.com/tab-b')
-        await pageB.bringToFront()
-        await new Promise(resolve => setTimeout(resolve, 500))
-        await serviceWorker.evaluate(async () => {
-            await globalThis.toggleExtensionForActiveTab()
-        })
-
-        // Get target IDs for both
-        const targetIds = await serviceWorker.evaluate(async () => {
-             const state = globalThis.getExtensionState()
-             const chrome = globalThis.chrome
-             const tabs = await chrome.tabs.query({})
-             const tabA = tabs.find((t: any) => t.url?.includes('tab-a'))
-             const tabB = tabs.find((t: any) => t.url?.includes('tab-b'))
-             return {
-                 idA: state.tabs.get(tabA?.id ?? -1)?.targetId,
-                 idB: state.tabs.get(tabB?.id ?? -1)?.targetId
-             }
-        })
-
-        expect(targetIds).toMatchInlineSnapshot({
-            idA: expect.any(String),
-            idB: expect.any(String)
-        }, `
-          {
-            "idA": Any<String>,
-            "idB": Any<String>,
-          }
-        `)
-        expect(targetIds.idA).not.toBe(targetIds.idB)
-
-        // Verify independent connections
-        const browser = await chromium.connectOverCDP(getCdpUrl())
-
-        const pages = browser.contexts()[0].pages()
-
-        const results = await Promise.all(pages.map(async (p) => ({
-            url: p.url(),
-            title: await p.title()
-        })))
-
-        expect(results).toMatchInlineSnapshot(`
-          [
-            {
-              "title": "",
-              "url": "about:blank",
-            },
-            {
-              "title": "Example Domain",
-              "url": "https://example.com/tab-a",
-            },
-            {
-              "title": "Example Domain",
-              "url": "https://example.com/tab-b",
-            },
-          ]
-        `)
-
-        // Verify execution on both pages
-        const pageA_CDP = pages.find(p => p.url().includes('tab-a'))
-        const pageB_CDP = pages.find(p => p.url().includes('tab-b'))
-
-        expect(await pageA_CDP?.evaluate(() => 10 + 10)).toBe(20)
-        expect(await pageB_CDP?.evaluate(() => 20 + 20)).toBe(40)
-
-        await browser.close()
-        await pageA.close()
-        await pageB.close()
-    })
-
-    it('should support multiple concurrent tabs', async () => {
-        if (!browserContext) throw new Error('Browser not initialized')
+        const browserContext = getBrowserContext()
         const serviceWorker = await getExtensionServiceWorker(browserContext)
         await new Promise(resolve => setTimeout(resolve, 500))
 
@@ -723,10 +659,9 @@ describe('MCP Server Tests', () => {
     })
 
     it('should show correct url when enabling extension after navigation', async () => {
-        if (!browserContext) throw new Error('Browser not initialized')
+        const browserContext = getBrowserContext()
         const serviceWorker = await getExtensionServiceWorker(browserContext)
 
-        // 1. Open a new page (extension not yet enabled for it)
         const page = await browserContext.newPage()
         const targetUrl = 'https://example.com/late-enable'
         await page.goto(targetUrl)
@@ -755,10 +690,9 @@ describe('MCP Server Tests', () => {
     })
 
     it('should be able to reconnect after disconnecting everything', async () => {
-        if (!browserContext) throw new Error('Browser not initialized')
+        const browserContext = getBrowserContext()
         const serviceWorker = await getExtensionServiceWorker(browserContext)
 
-        // 1. Use the existing about:blank page from beforeAll
         const pages = await browserContext.pages()
         expect(pages.length).toBeGreaterThan(0)
         const page = pages[0]
@@ -1233,7 +1167,7 @@ describe('MCP Server Tests', () => {
     }, 30000)
 
     it('should maintain correct page.url() with service worker pages', async () => {
-        if (!browserContext) throw new Error('Browser not initialized')
+        const browserContext = getBrowserContext()
         const serviceWorker = await getExtensionServiceWorker(browserContext)
 
         const page = await browserContext.newPage()
@@ -1260,7 +1194,7 @@ describe('MCP Server Tests', () => {
     }, 30000)
 
     it('should maintain correct page.url() after repeated connections', async () => {
-        if (!browserContext) throw new Error('Browser not initialized')
+        const browserContext = getBrowserContext()
         const serviceWorker = await getExtensionServiceWorker(browserContext)
 
         const page = await browserContext.newPage()
@@ -1288,7 +1222,7 @@ describe('MCP Server Tests', () => {
     }, 30000)
 
     it('should maintain correct page.url() with concurrent MCP and CDP connections', async () => {
-        if (!browserContext) throw new Error('Browser not initialized')
+        const browserContext = getBrowserContext()
         const serviceWorker = await getExtensionServiceWorker(browserContext)
 
         const page = await browserContext.newPage()
@@ -1328,7 +1262,7 @@ describe('MCP Server Tests', () => {
     }, 30000)
 
     it('should maintain correct page.url() with iframe-heavy pages', async () => {
-        if (!browserContext) throw new Error('Browser not initialized')
+        const browserContext = getBrowserContext()
         const serviceWorker = await getExtensionServiceWorker(browserContext)
 
         const page = await browserContext.newPage()
@@ -1357,8 +1291,362 @@ describe('MCP Server Tests', () => {
         await page.close()
     }, 60000)
 
+    it('should capture screenshot correctly', async () => {
+        const browserContext = getBrowserContext()
+        const serviceWorker = await getExtensionServiceWorker(browserContext)
+
+        const page = await browserContext.newPage()
+        await page.goto('https://example.com/')
+        await page.bringToFront()
+
+        await serviceWorker.evaluate(async () => {
+            await globalThis.toggleExtensionForActiveTab()
+        })
+
+        await new Promise(r => setTimeout(r, 500))
+
+        const capturedCommands: CDPCommand[] = []
+        const commandHandler = ({ command }: { clientId: string; command: CDPCommand }) => {
+            if (command.method === 'Page.captureScreenshot') {
+                capturedCommands.push(command)
+            }
+        }
+        testCtx!.relayServer.on('cdp:command', commandHandler)
+
+        const browser = await chromium.connectOverCDP(getCdpUrl())
+        const cdpPage = browser.contexts()[0].pages().find(p => p.url().includes('example.com'))
+
+        expect(cdpPage).toBeDefined()
+
+        const viewportSize = cdpPage!.viewportSize()
+        console.log('Viewport size:', viewportSize)
+
+        const viewportScreenshot = await cdpPage!.screenshot()
+        expect(viewportScreenshot).toBeDefined()
+
+        const viewportDimensions = imageSize(viewportScreenshot)
+        console.log('Viewport screenshot dimensions:', viewportDimensions)
+        expect(viewportDimensions.width).toBeGreaterThan(0)
+        expect(viewportDimensions.height).toBeGreaterThan(0)
+        if (viewportSize) {
+            expect(viewportDimensions.width).toBe(viewportSize.width)
+            expect(viewportDimensions.height).toBe(viewportSize.height)
+        }
+
+        const fullPageScreenshot = await cdpPage!.screenshot({ fullPage: true })
+        expect(fullPageScreenshot).toBeDefined()
+
+        const fullPageDimensions = imageSize(fullPageScreenshot)
+        console.log('Full page screenshot dimensions:', fullPageDimensions)
+        expect(fullPageDimensions.width).toBeGreaterThan(0)
+        expect(fullPageDimensions.height).toBeGreaterThan(0)
+        expect(fullPageDimensions.width).toBeGreaterThanOrEqual(viewportDimensions.width!)
+
+        testCtx!.relayServer.off('cdp:command', commandHandler)
+
+        expect(capturedCommands.length).toBe(2)
+        expect(capturedCommands.map(c => ({
+            method: c.method,
+            params: c.params
+        }))).toMatchInlineSnapshot(`
+          [
+            {
+              "method": "Page.captureScreenshot",
+              "params": {
+                "captureBeyondViewport": false,
+                "clip": {
+                  "height": 720,
+                  "scale": 1,
+                  "width": 1280,
+                  "x": 0,
+                  "y": 0,
+                },
+                "format": "png",
+              },
+            },
+            {
+              "method": "Page.captureScreenshot",
+              "params": {
+                "captureBeyondViewport": false,
+                "clip": {
+                  "height": 528,
+                  "scale": 1,
+                  "width": 1280,
+                  "x": 0,
+                  "y": 0,
+                },
+                "format": "png",
+              },
+            },
+          ]
+        `)
+
+        const screenshotPath = path.join(os.tmpdir(), 'playwriter-test-screenshot.png')
+        fs.writeFileSync(screenshotPath, viewportScreenshot)
+        console.log('Screenshot saved to:', screenshotPath)
+
+        await browser.close()
+        await page.close()
+    }, 60000)
+
+    it('should capture element screenshot with correct coordinates', async () => {
+        const browserContext = getBrowserContext()
+        const serviceWorker = await getExtensionServiceWorker(browserContext)
+
+        const target = { x: 200, y: 150, width: 300, height: 100 }
+        const scrolledTarget = { x: 100, y: 1500, width: 200, height: 80 }
+
+        const page = await browserContext.newPage()
+        await page.setContent(`
+            <html>
+                <head>
+                    <style>
+                        body { margin: 0; padding: 0; height: 2000px; }
+                        #target {
+                            position: absolute;
+                            top: ${target.y}px;
+                            left: ${target.x}px;
+                            width: ${target.width}px;
+                            height: ${target.height}px;
+                            background: red;
+                        }
+                        #scrolled-target {
+                            position: absolute;
+                            top: ${scrolledTarget.y}px;
+                            left: ${scrolledTarget.x}px;
+                            width: ${scrolledTarget.width}px;
+                            height: ${scrolledTarget.height}px;
+                            background: blue;
+                        }
+                    </style>
+                </head>
+                <body>
+                    <div id="target">Target Element</div>
+                    <div id="scrolled-target">Scrolled Target</div>
+                </body>
+            </html>
+        `)
+        await page.bringToFront()
+
+        await serviceWorker.evaluate(async () => {
+            await globalThis.toggleExtensionForActiveTab()
+        })
+
+        await new Promise(r => setTimeout(r, 500))
+
+        const capturedCommands: CDPCommand[] = []
+        const commandHandler = ({ command }: { clientId: string; command: CDPCommand }) => {
+            if (command.method === 'Page.captureScreenshot') {
+                capturedCommands.push(command)
+            }
+        }
+        testCtx!.relayServer.on('cdp:command', commandHandler)
+
+        const browser = await chromium.connectOverCDP(getCdpUrl())
+        let cdpPage
+        for (const p of browser.contexts()[0].pages()) {
+            const html = await p.content()
+            if (html.includes('scrolled-target')) {
+                cdpPage = p
+                break
+            }
+        }
+        expect(cdpPage).toBeDefined()
+
+        await cdpPage!.locator('#target').screenshot()
+
+        await cdpPage!.locator('#scrolled-target').screenshot()
+
+        testCtx!.relayServer.off('cdp:command', commandHandler)
+
+        expect(capturedCommands.length).toBe(2)
+
+        const targetCmd = capturedCommands[0]
+        expect(targetCmd.method).toBe('Page.captureScreenshot')
+        const targetClip = (targetCmd.params as any).clip
+        expect(targetClip.x).toBe(target.x)
+        expect(targetClip.y).toBe(target.y)
+        expect(targetClip.width).toBe(target.width)
+        expect(targetClip.height).toBe(target.height)
+
+        const scrolledCmd = capturedCommands[1]
+        expect(scrolledCmd.method).toBe('Page.captureScreenshot')
+        const scrolledClip = (scrolledCmd.params as any).clip
+        expect(scrolledClip.x).toBe(scrolledTarget.x)
+        expect(scrolledClip.y).toBe(scrolledTarget.y)
+        expect(scrolledClip.width).toBe(scrolledTarget.width)
+        expect(scrolledClip.height).toBe(scrolledTarget.height)
+
+        await browser.close()
+        await page.close()
+    }, 60000)
+
+    it('should get locator string for element using getLocatorStringForElement', async () => {
+        const browserContext = getBrowserContext()
+        const serviceWorker = await getExtensionServiceWorker(browserContext)
+
+        const page = await browserContext.newPage()
+        await page.setContent(`
+            <html>
+                <body>
+                    <button id="test-btn">Click Me</button>
+                    <input type="text" placeholder="Enter name" />
+                </body>
+            </html>
+        `)
+        await page.bringToFront()
+
+        await serviceWorker.evaluate(async () => {
+            await globalThis.toggleExtensionForActiveTab()
+        })
+
+        await new Promise(r => setTimeout(r, 500))
+
+        const result = await client.callTool({
+            name: 'execute',
+            arguments: {
+                code: js`
+                    let testPage;
+                    for (const p of context.pages()) {
+                        const html = await p.content();
+                        if (html.includes('test-btn')) { testPage = p; break; }
+                    }
+                    if (!testPage) throw new Error('Test page not found');
+                    const btn = testPage.locator('#test-btn');
+                    const locatorString = await getLocatorStringForElement(btn);
+                    console.log('Locator string:', locatorString);
+                    const locatorFromString = eval('testPage.' + locatorString);
+                    const count = await locatorFromString.count();
+                    console.log('Locator count:', count);
+                    const text = await locatorFromString.textContent();
+                    console.log('Locator text:', text);
+                `,
+                timeout: 30000,
+            },
+        })
+
+        expect(result.isError).toBeFalsy()
+        const text = (result.content as any)[0]?.text || ''
+        expect(text).toContain('Locator string:')
+        expect(text).toContain("getByRole('button', { name: 'Click Me' })")
+        expect(text).toContain('Locator count: 1')
+        expect(text).toContain('Locator text: Click Me')
+
+        await page.close()
+    }, 60000)
+
+    it('should return correct layout metrics via CDP', async () => {
+        const browserContext = getBrowserContext()
+        const serviceWorker = await getExtensionServiceWorker(browserContext)
+
+        const page = await browserContext.newPage()
+        await page.goto('https://example.com/')
+        await page.bringToFront()
+
+        await serviceWorker.evaluate(async () => {
+            await globalThis.toggleExtensionForActiveTab()
+        })
+
+        await new Promise(r => setTimeout(r, 500))
+
+        const browser = await chromium.connectOverCDP(getCdpUrl())
+        const cdpPage = browser.contexts()[0].pages().find(p => p.url().includes('example.com'))
+        expect(cdpPage).toBeDefined()
+
+        const wsUrl = getCdpUrl()
+        const cdpSession = await getCDPSessionForPage({ page: cdpPage!, wsUrl })
+
+        const layoutMetrics = await cdpSession.send('Page.getLayoutMetrics')
+
+        const normalized = {
+            cssLayoutViewport: layoutMetrics.cssLayoutViewport,
+            cssVisualViewport: layoutMetrics.cssVisualViewport,
+            layoutViewport: layoutMetrics.layoutViewport,
+            visualViewport: layoutMetrics.visualViewport,
+            devicePixelRatio: layoutMetrics.cssVisualViewport.clientWidth > 0
+                ? layoutMetrics.visualViewport.clientWidth / layoutMetrics.cssVisualViewport.clientWidth
+                : 1,
+        }
+
+        expect(normalized).toMatchInlineSnapshot(`
+          {
+            "cssLayoutViewport": {
+              "clientHeight": 720,
+              "clientWidth": 1280,
+              "pageX": 0,
+              "pageY": 0,
+            },
+            "cssVisualViewport": {
+              "clientHeight": 720,
+              "clientWidth": 1280,
+              "offsetX": 0,
+              "offsetY": 0,
+              "pageX": 0,
+              "pageY": 0,
+              "scale": 1,
+              "zoom": 1,
+            },
+            "devicePixelRatio": 1,
+            "layoutViewport": {
+              "clientHeight": 720,
+              "clientWidth": 1280,
+              "pageX": 0,
+              "pageY": 0,
+            },
+            "visualViewport": {
+              "clientHeight": 720,
+              "clientWidth": 1280,
+              "offsetX": 0,
+              "offsetY": 0,
+              "pageX": 0,
+              "pageY": 0,
+              "scale": 1,
+              "zoom": 1,
+            },
+          }
+        `)
+
+        const windowDpr = await cdpPage!.evaluate(() => (globalThis as any).devicePixelRatio)
+        console.log('window.devicePixelRatio:', windowDpr)
+        expect(windowDpr).toBe(1)
+
+        cdpSession.detach()
+        await browser.close()
+        await page.close()
+    }, 60000)
+
+    it('should support getCDPSession through the relay', async () => {
+        const browserContext = getBrowserContext()
+        const serviceWorker = await getExtensionServiceWorker(browserContext)
+
+        const page = await browserContext.newPage()
+        await page.goto('https://example.com/')
+        await page.bringToFront()
+
+        await serviceWorker.evaluate(async () => {
+            await globalThis.toggleExtensionForActiveTab()
+        })
+
+        await new Promise(r => setTimeout(r, 500))
+
+        const browser = await chromium.connectOverCDP(getCdpUrl())
+        const cdpPage = browser.contexts()[0].pages().find(p => p.url().includes('example.com'))
+        expect(cdpPage).toBeDefined()
+
+        const wsUrl = getCdpUrl()
+        const client = await getCDPSessionForPage({ page: cdpPage!, wsUrl })
+        
+        const layoutMetrics = await client.send('Page.getLayoutMetrics')
+        expect(layoutMetrics.cssVisualViewport).toBeDefined()
+        expect(layoutMetrics.cssVisualViewport.clientWidth).toBeGreaterThan(0)
+
+        client.detach()
+        await browser.close()
+        await page.close()
+    }, 60000)
+
     it('should work with stagehand', async () => {
-        if (!browserContext) throw new Error('Browser not initialized')
+        const browserContext = getBrowserContext()
         const serviceWorker = await getExtensionServiceWorker(browserContext)
 
         await serviceWorker.evaluate(async () => {
@@ -1411,6 +1699,59 @@ describe('MCP Server Tests', () => {
         await stagehand.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()
+
+        const colorSchemeBefore = await page.evaluate(() => {
+            return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
+        })
+        console.log('Color scheme before MCP connection:', colorSchemeBefore)
+
+        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'));
+                    if (!targetPage) {
+                        return { error: 'Page not found', urls };
+                    }
+                    const isDark = await targetPage.evaluate(() => window.matchMedia('(prefers-color-scheme: dark)').matches);
+                    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:
+          {
+            "matchesDark": true,
+            "matchesLight": false
+          }",
+              "type": "text",
+            },
+          ]
+        `)
+
+        await page.close()
+    }, 60000)
+
 })
 
 
@@ -1421,3 +1762,268 @@ function tryJsonParse(str: string) {
         return str
     }
 }
+
+describe('CDP Session Tests', () => {
+    let testCtx: TestContext | null = null
+
+    beforeAll(async () => {
+        testCtx = await setupTestContext({ tempDirPrefix: 'pw-cdp-test-' })
+    }, 600000)
+
+    afterAll(async () => {
+        await cleanupTestContext(testCtx)
+        testCtx = null
+    })
+
+    const getBrowserContext = () => {
+        if (!testCtx?.browserContext) throw new Error('Browser not initialized')
+        return testCtx.browserContext
+    }
+
+    it('should enable debugger and pause on debugger statement via CDP session', async () => {
+        const browserContext = getBrowserContext()
+        const serviceWorker = await getExtensionServiceWorker(browserContext)
+
+        const page = await browserContext.newPage()
+        await page.goto('https://example.com/')
+        await page.bringToFront()
+
+        await serviceWorker.evaluate(async () => {
+            await globalThis.toggleExtensionForActiveTab()
+        })
+        await new Promise(r => setTimeout(r, 500))
+
+        const browser = await chromium.connectOverCDP(getCdpUrl())
+        const cdpPage = browser.contexts()[0].pages().find(p => p.url().includes('example.com'))
+        expect(cdpPage).toBeDefined()
+
+        const wsUrl = getCdpUrl()
+        const cdpSession = await getCDPSessionForPage({ page: cdpPage!, wsUrl })
+        await cdpSession.send('Debugger.enable')
+
+        const pausedPromise = new Promise<Protocol.Debugger.PausedEvent>((resolve) => {
+            cdpSession.on('Debugger.paused', (params) => {
+                resolve(params as Protocol.Debugger.PausedEvent)
+            })
+        })
+
+        cdpPage!.evaluate(`
+            (function testFunction() {
+                const localVar = 'hello';
+                const numberVar = 42;
+                const objVar = { key: 'value', nested: { a: 1 } };
+                debugger;
+                return localVar + numberVar;
+            })()
+        `)
+
+        const pausedEvent = await Promise.race([
+            pausedPromise,
+            new Promise<never>((_, reject) => setTimeout(() => reject(new Error('Debugger.paused timeout')), 5000))
+        ])
+
+        const stackTrace = pausedEvent.callFrames.map(frame => ({
+            functionName: frame.functionName || '(anonymous)',
+            lineNumber: frame.location.lineNumber,
+            columnNumber: frame.location.columnNumber,
+        }))
+
+        expect({
+            reason: pausedEvent.reason,
+            stackTrace: stackTrace.slice(0, 3),
+        }).toMatchInlineSnapshot(`
+          {
+            "reason": "other",
+            "stackTrace": [
+              {
+                "columnNumber": 16,
+                "functionName": "testFunction",
+                "lineNumber": 4,
+              },
+              {
+                "columnNumber": 14,
+                "functionName": "(anonymous)",
+                "lineNumber": 6,
+              },
+              {
+                "columnNumber": 29,
+                "functionName": "evaluate",
+                "lineNumber": 289,
+              },
+            ],
+          }
+        `)
+
+        const topFrame = pausedEvent.callFrames[0]
+        const scopeChain = topFrame.scopeChain
+
+        const localScope = scopeChain.find(s => s.type === 'local')
+        const localVars: Record<string, unknown> = {}
+
+        if (localScope?.object.objectId) {
+            const propsResult = await cdpSession.send('Runtime.getProperties', {
+                objectId: localScope.object.objectId,
+                ownProperties: true,
+            })
+
+            for (const prop of propsResult.result) {
+                if (prop.value) {
+                    localVars[prop.name] = prop.value.type === 'object'
+                        ? `[object ${prop.value.className || prop.value.subtype || 'Object'}]`
+                        : prop.value.value
+                }
+            }
+        }
+
+        expect({
+            scopeTypes: scopeChain.map(s => s.type),
+            localVariables: localVars,
+        }).toMatchInlineSnapshot(`
+          {
+            "localVariables": {
+              "localVar": "hello",
+              "numberVar": 42,
+              "objVar": "[object Object]",
+            },
+            "scopeTypes": [
+              "local",
+              "global",
+            ],
+          }
+        `)
+
+        const evalResult = await cdpSession.send('Debugger.evaluateOnCallFrame', {
+            callFrameId: topFrame.callFrameId,
+            expression: 'localVar + " world " + numberVar',
+        })
+
+        expect({
+            evaluatedExpression: 'localVar + " world " + numberVar',
+            result: evalResult.result.value,
+            type: evalResult.result.type,
+        }).toMatchInlineSnapshot(`
+          {
+            "evaluatedExpression": "localVar + " world " + numberVar",
+            "result": "hello world 42",
+            "type": "string",
+          }
+        `)
+
+        await cdpSession.send('Debugger.resume')
+        await cdpSession.send('Debugger.disable')
+        cdpSession.detach()
+        await browser.close()
+        await page.close()
+    }, 60000)
+
+    it('should profile JavaScript execution using CDP Profiler', async () => {
+        const browserContext = getBrowserContext()
+        const serviceWorker = await getExtensionServiceWorker(browserContext)
+
+        const page = await browserContext.newPage()
+        await page.goto('https://example.com/')
+        await page.bringToFront()
+
+        await serviceWorker.evaluate(async () => {
+            await globalThis.toggleExtensionForActiveTab()
+        })
+        await new Promise(r => setTimeout(r, 500))
+
+        const browser = await chromium.connectOverCDP(getCdpUrl())
+        const cdpPage = browser.contexts()[0].pages().find(p => p.url().includes('example.com'))
+        expect(cdpPage).toBeDefined()
+
+        const wsUrl = getCdpUrl()
+        const cdpSession = await getCDPSessionForPage({ page: cdpPage!, wsUrl })
+        await cdpSession.send('Profiler.enable')
+        await cdpSession.send('Profiler.start')
+
+        await cdpPage!.evaluate(`
+            (() => {
+                function fibonacci(n) {
+                    if (n <= 1) return n
+                    return fibonacci(n - 1) + fibonacci(n - 2)
+                }
+                for (let i = 0; i < 5; i++) {
+                    fibonacci(20)
+                }
+                for (let i = 0; i < 1000; i++) {
+                    document.querySelectorAll('*')
+                }
+            })()
+        `)
+
+        const stopResult = await cdpSession.send('Profiler.stop')
+        const profile = stopResult.profile
+
+        const functionNames = profile.nodes
+            .map(n => n.callFrame.functionName)
+            .filter(name => name && name.length > 0)
+            .slice(0, 10)
+
+        expect({
+            hasNodes: profile.nodes.length > 0,
+            nodeCount: profile.nodes.length,
+            durationMicroseconds: profile.endTime - profile.startTime,
+            sampleFunctionNames: functionNames,
+        }).toMatchInlineSnapshot(`
+          {
+            "durationMicroseconds": 7500,
+            "hasNodes": true,
+            "nodeCount": 7,
+            "sampleFunctionNames": [
+              "(root)",
+              "(program)",
+              "(idle)",
+              "evaluate",
+            ],
+          }
+        `)
+
+        await cdpSession.send('Profiler.disable')
+        cdpSession.detach()
+        await browser.close()
+        await page.close()
+    }, 60000)
+
+    it('should click at correct coordinates on high-DPI simulation', async () => {
+        const browserContext = getBrowserContext()
+        const serviceWorker = await getExtensionServiceWorker(browserContext)
+
+        const page = await browserContext.newPage()
+        await page.goto('https://example.com/')
+        await page.bringToFront()
+
+        await serviceWorker.evaluate(async () => {
+            await globalThis.toggleExtensionForActiveTab()
+        })
+        await new Promise(r => setTimeout(r, 500))
+
+        const browser = await chromium.connectOverCDP(getCdpUrl())
+        const cdpPage = browser.contexts()[0].pages().find(p => p.url().includes('example.com'))
+        expect(cdpPage).toBeDefined()
+
+        const h1Bounds = await cdpPage!.locator('h1').boundingBox()
+        expect(h1Bounds).toBeDefined()
+        console.log('H1 bounding box:', h1Bounds)
+
+        await cdpPage!.evaluate(() => {
+            (window as any).clickedAt = null;
+            document.addEventListener('click', (e) => {
+                (window as any).clickedAt = { x: e.clientX, y: e.clientY };
+            });
+        })
+
+        await cdpPage!.locator('h1').click()
+
+        const clickedAt = await cdpPage!.evaluate(() => (window as any).clickedAt)
+        console.log('Clicked at:', clickedAt)
+
+        expect(clickedAt).toBeDefined()
+        expect(clickedAt.x).toBeGreaterThan(0)
+        expect(clickedAt.y).toBeGreaterThan(0)
+
+        await browser.close()
+        await page.close()
+    }, 60000)
+})