playwriter 0.0.16 → 0.0.21

package/dist/mcp.test.js

@@ -7,7 +7,10 @@ import path from 'node:path';
 import fs from 'node:fs';
 import os from 'node:os';
 import { getCdpUrl } from './utils.js';
-import { spawn } from 'node:child_process';
+import { imageSize } from 'image-size';
+import { getCDPSessionForPage } from './cdp-session.js';
+import { startPlayWriterCDPRelayServer } from './extension/cdp-relay.js';
+import { createFileLogger } from './create-logger.js';
 const execAsync = promisify(exec);
 async function getExtensionServiceWorker(context) {
     let serviceWorkers = context.serviceWorkers().filter(sw => sw.url().startsWith('chrome-extension://'));
@@ -17,6 +20,15 @@ async function getExtensionServiceWorker(context) {
             predicate: (sw) => sw.url().startsWith('chrome-extension://')
         });
     }
+    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;
 }
 function js(strings, ...values) {
@@ -36,98 +48,95 @@ async function killProcessOnPort(port) {
         // No process running on port or already killed
     }
 }
+async function setupTestContext({ tempDirPrefix }) {
+    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, cleanup) {
+    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();
+    }
+}
 describe('MCP Server Tests', () => {
     let client;
     let cleanup = null;
-    let browserContext = null;
-    let userDataDir;
-    let relayServerProcess;
+    let testCtx = 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((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;
-        userDataDir = fs.mkdtempSync(path.join(os.tmpdir(), 'pw-test-'));
-        const extensionPath = path.resolve('../extension/dist');
-        browserContext = await chromium.launchPersistentContext(userDataDir, {
-            channel: 'chromium', // <- this opts into new headless
-            headless: !process.env.HEADFUL,
-            args: [
-                `--disable-extensions-except=${extensionPath}`,
-                `--load-extension=${extensionPath}`,
-            ],
-        });
-        // Wait for service worker and connect
+    }, 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 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');
-        // Connect the tab
+        await page.setContent('<html><body><button id="btn">Click</button></body></html>');
+        await page.bringToFront();
         await serviceWorker.evaluate(async () => {
             await globalThis.toggleExtensionForActiveTab();
         });
-    }, 600000); // 10 minutes timeout
-    afterAll(async () => {
-        if (browserContext) {
-            await browserContext.close();
-        }
-        if (relayServerProcess) {
-            relayServerProcess.kill();
-        }
-        await killProcessOnPort(19988);
-        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 new Promise(r => setTimeout(r, 500));
+        const browser = await chromium.connectOverCDP(getCdpUrl());
+        const cdpPage = browser.contexts()[0].pages().find(p => {
+            return p.url().startsWith('about:');
+        });
+        expect(cdpPage).toBeDefined();
+        const hasGlobalBefore = await cdpPage.evaluate(() => !!globalThis.__testGlobal);
+        expect(hasGlobalBefore).toBe(false);
+        await cdpPage.addScriptTag({ content: 'globalThis.__testGlobal = { foo: "bar" };' });
+        const hasGlobalAfter = await cdpPage.evaluate(() => globalThis.__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({
             name: 'execute',
@@ -169,8 +178,7 @@ describe('MCP Server Tests', () => {
         expect(result.content).toBeDefined();
     }, 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())
         await client.callTool({
@@ -290,9 +298,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
         const page = await browserContext.newPage();
@@ -356,8 +362,7 @@ describe('MCP Server Tests', () => {
         await page.close();
     });
     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
         const directBrowser = await chromium.connectOverCDP(getCdpUrl());
@@ -420,8 +425,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
         const page = await browserContext.newPage();
@@ -459,83 +463,7 @@ describe('MCP Server Tests', () => {
         await page.close();
     });
     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) => t.url?.includes('tab-a'));
-            const tabB = tabs.find((t) => 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));
         // Tab A
@@ -609,10 +537,8 @@ describe('MCP Server Tests', () => {
         await pageB.close();
     });
     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);
@@ -634,10 +560,8 @@ describe('MCP Server Tests', () => {
         await page.close();
     });
     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];
@@ -1062,8 +986,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();
         const targetUrl = 'https://x.com';
@@ -1083,8 +1006,7 @@ describe('MCP Server Tests', () => {
         await page.close();
     }, 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();
         const targetUrl = 'https://example.com/repeated-test';
@@ -1105,8 +1027,7 @@ describe('MCP Server Tests', () => {
         await page.close();
     }, 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();
         const targetUrl = 'https://example.com/concurrent-test';
@@ -1138,8 +1059,7 @@ describe('MCP Server Tests', () => {
         await page.close();
     }, 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();
         const targetUrl = 'https://www.youtube.com';
@@ -1160,9 +1080,306 @@ 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 = [];
+        const commandHandler = ({ command }) => {
+            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 = [];
+        const commandHandler = ({ command }) => {
+            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.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.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[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.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 () => {
             await globalThis.disconnectEverything();
@@ -1201,6 +1418,51 @@ describe('MCP Server Tests', () => {
         expect(url).toContain('example.com');
         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);
 });
 function tryJsonParse(str) {
     try {
@@ -1210,4 +1472,228 @@ function tryJsonParse(str) {
         return str;
     }
 }
+describe('CDP Session Tests', () => {
+    let testCtx = 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((resolve) => {
+            cdpSession.on('Debugger.paused', (params) => {
+                resolve(params);
+            });
+        });
+        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((_, 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 = {};
+        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.clickedAt = null;
+            document.addEventListener('click', (e) => {
+                window.clickedAt = { x: e.clientX, y: e.clientY };
+            });
+        });
+        await cdpPage.locator('h1').click();
+        const clickedAt = await cdpPage.evaluate(() => window.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);
+});
 //# sourceMappingURL=mcp.test.js.map