playwriter 0.0.26 → 0.0.29

package/src/mcp.test.ts

@@ -11,7 +11,9 @@ 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 { Debugger } from './debugger.js'
+import { Editor } from './editor.js'
+import { startPlayWriterCDPRelayServer, type RelayServer } from './cdp-relay.js'
 import { createFileLogger } from './create-logger.js'
 import type { CDPCommand } from './cdp-types.js'
 import { killPortProcess } from 'kill-port-process'
@@ -19,6 +21,7 @@ import { killPortProcess } from 'kill-port-process'
 declare const window: any
 declare const document: any
 
+const TEST_PORT = 19987
 
 const execAsync = promisify(exec)
 
@@ -66,15 +69,15 @@ interface TestContext {
 }
 
 async function setupTestContext({ tempDirPrefix }: { tempDirPrefix: string }): Promise<TestContext> {
-    await killProcessOnPort(19988)
+    await killProcessOnPort(TEST_PORT)
 
     console.log('Building extension...')
-    await execAsync('TESTING=1 pnpm build', { cwd: '../extension' })
+    await execAsync(`TESTING=1 PLAYWRITER_PORT=${TEST_PORT} 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 relayServer = await startPlayWriterCDPRelayServer({ port: TEST_PORT, logger })
 
     const userDataDir = fs.mkdtempSync(path.join(os.tmpdir(), tempDirPrefix))
     const extensionPath = path.resolve('../extension/dist')
@@ -135,7 +138,7 @@ describe('MCP Server Tests', () => {
     beforeAll(async () => {
         testCtx = await setupTestContext({ tempDirPrefix: 'pw-test-' })
 
-        const result = await createMCPClient()
+        const result = await createMCPClient({ port: TEST_PORT })
         client = result.client
         cleanup = result.cleanup
     }, 600000)
@@ -162,9 +165,9 @@ describe('MCP Server Tests', () => {
         await serviceWorker.evaluate(async () => {
             await globalThis.toggleExtensionForActiveTab()
         })
-        await new Promise(r => setTimeout(r, 500))
+        await new Promise(r => setTimeout(r, 100))
 
-        const browser = await chromium.connectOverCDP(getCdpUrl())
+        const browser = await chromium.connectOverCDP(getCdpUrl({ port: TEST_PORT }))
         const cdpPage = browser.contexts()[0].pages().find(p => {
             return p.url().startsWith('about:')
         })
@@ -199,7 +202,7 @@ describe('MCP Server Tests', () => {
             name: 'execute',
             arguments: {
                 code: js`
-          await state.page.goto('https://news.ycombinator.com');
+          await state.page.goto('https://example.com');
           const title = await state.page.title();
           console.log('Page title:', title);
           return { url: state.page.url(), title };
@@ -210,12 +213,12 @@ describe('MCP Server Tests', () => {
           [
             {
               "text": "Console output:
-          [log] Page title: Hacker News
+          [log] Page title: Example Domain
 
           Return value:
           {
-            "url": "https://news.ycombinator.com/",
-            "title": "Hacker News"
+            \"url\": \"https://example.com/\",
+            \"title\": \"Example Domain\"
           }",
               "type": "text",
             },
@@ -289,7 +292,7 @@ describe('MCP Server Tests', () => {
             name: 'execute',
             arguments: {
                 code: js`
-          await state.page.goto('https://news.ycombinator.com/item?id=1', { waitUntil: 'networkidle' });
+          await state.page.goto('https://news.ycombinator.com/item?id=1', { waitUntil: 'domcontentloaded' });
           const snapshot = await state.page._snapshotForAI();
           return snapshot;
         `,
@@ -325,7 +328,7 @@ describe('MCP Server Tests', () => {
             name: 'execute',
             arguments: {
                 code: js`
-          await state.page.goto('https://ui.shadcn.com/', { waitUntil: 'networkidle' });
+          await state.page.goto('https://ui.shadcn.com/', { waitUntil: 'domcontentloaded' });
           const snapshot = await state.page._snapshotForAI();
           return snapshot;
         `,
@@ -381,7 +384,7 @@ describe('MCP Server Tests', () => {
 
         // 3. Verify we can connect via direct CDP and see the page
 
-        let directBrowser = await chromium.connectOverCDP(getCdpUrl())
+        let directBrowser = await chromium.connectOverCDP(getCdpUrl({ port: TEST_PORT }))
         let contexts = directBrowser.contexts()
         let pages = contexts[0].pages()
 
@@ -407,7 +410,7 @@ describe('MCP Server Tests', () => {
         // connecting to relay will succeed, but listing pages should NOT show our page
 
         // Connect to relay again
-        directBrowser = await chromium.connectOverCDP(getCdpUrl())
+        directBrowser = await chromium.connectOverCDP(getCdpUrl({ port: TEST_PORT }))
         contexts = directBrowser.contexts()
         pages = contexts[0].pages()
 
@@ -425,14 +428,14 @@ describe('MCP Server Tests', () => {
 
         // 7. Verify page is back
 
-        directBrowser = await chromium.connectOverCDP(getCdpUrl())
+        directBrowser = await chromium.connectOverCDP(getCdpUrl({ port: TEST_PORT }))
         // Wait a bit for targets to populate
-        await new Promise(r => setTimeout(r, 500))
+        await new Promise(r => setTimeout(r, 100))
 
         contexts = directBrowser.contexts()
         // pages() might need a moment if target attached event comes in
         if (contexts[0].pages().length === 0) {
-             await new Promise(r => setTimeout(r, 1000))
+             await new Promise(r => setTimeout(r, 100))
         }
         pages = contexts[0].pages()
 
@@ -453,9 +456,9 @@ describe('MCP Server Tests', () => {
         const serviceWorker = await getExtensionServiceWorker(browserContext)
 
         // Connect once
-        const directBrowser = await chromium.connectOverCDP(getCdpUrl())
+        const directBrowser = await chromium.connectOverCDP(getCdpUrl({ port: TEST_PORT }))
         // Wait a bit for connection and initial target discovery
-        await new Promise(r => setTimeout(r, 500))
+        await new Promise(r => setTimeout(r, 100))
 
         // 1. Create a new page
         const page = await browserContext.newPage()
@@ -535,7 +538,7 @@ describe('MCP Server Tests', () => {
         })
 
         // 3. Connect via CDP
-        const cdpUrl = getCdpUrl()
+        const cdpUrl = getCdpUrl({ port: TEST_PORT })
         const directBrowser = await chromium.connectOverCDP(cdpUrl)
         const connectedPage = directBrowser.contexts()[0].pages().find(p => p.url() === initialUrl)
         expect(connectedPage).toBeDefined()
@@ -547,19 +550,19 @@ describe('MCP Server Tests', () => {
         // We use a loop to check if it's still connected because reload might cause temporary disconnect/reconnect events
         // that Playwright handles natively if the session ID stays valid.
         await connectedPage?.reload()
-        await connectedPage?.waitForLoadState('networkidle')
+        await connectedPage?.waitForLoadState('domcontentloaded')
         expect(await connectedPage?.title()).toBe('Example Domain')
 
         // Verify execution after reload
         expect(await connectedPage?.evaluate(() => 2 + 2)).toBe(4)
 
         // 5. Navigate to new URL
-        const newUrl = 'https://news.ycombinator.com/'
+        const newUrl = 'https://example.org/'
         await connectedPage?.goto(newUrl)
-        await connectedPage?.waitForLoadState('networkidle')
+        await connectedPage?.waitForLoadState('domcontentloaded')
 
         expect(connectedPage?.url()).toBe(newUrl)
-        expect(await connectedPage?.title()).toContain('Hacker News')
+        expect(await connectedPage?.title()).toContain('Example Domain')
 
         // Verify execution after navigation
         expect(await connectedPage?.evaluate(() => 3 + 3)).toBe(6)
@@ -571,13 +574,13 @@ describe('MCP Server Tests', () => {
     it('should support multiple concurrent tabs', async () => {
         const browserContext = getBrowserContext()
         const serviceWorker = await getExtensionServiceWorker(browserContext)
-        await new Promise(resolve => setTimeout(resolve, 500))
+        await new Promise(resolve => setTimeout(resolve, 100))
 
         // 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 new Promise(resolve => setTimeout(resolve, 100))
         await serviceWorker.evaluate(async () => {
             await globalThis.toggleExtensionForActiveTab()
         })
@@ -586,7 +589,7 @@ describe('MCP Server Tests', () => {
         const pageB = await browserContext.newPage()
         await pageB.goto('https://example.com/tab-b')
         await pageB.bringToFront()
-        await new Promise(resolve => setTimeout(resolve, 500))
+        await new Promise(resolve => setTimeout(resolve, 100))
         await serviceWorker.evaluate(async () => {
             await globalThis.toggleExtensionForActiveTab()
         })
@@ -616,7 +619,7 @@ describe('MCP Server Tests', () => {
         expect(targetIds.idA).not.toBe(targetIds.idB)
 
         // Verify independent connections
-        const browser = await chromium.connectOverCDP(getCdpUrl())
+        const browser = await chromium.connectOverCDP(getCdpUrl({ port: TEST_PORT }))
 
         const pages = browser.contexts()[0].pages()
 
@@ -664,7 +667,7 @@ describe('MCP Server Tests', () => {
         await page.bringToFront()
 
         // Wait for load
-        await page.waitForLoadState('networkidle')
+        await page.waitForLoadState('domcontentloaded')
 
         // 2. Enable extension for this page
         await serviceWorker.evaluate(async () => {
@@ -672,9 +675,9 @@ describe('MCP Server Tests', () => {
         })
 
         // 3. Verify via CDP that the correct URL is shown
-        const browser = await chromium.connectOverCDP(getCdpUrl())
+        const browser = await chromium.connectOverCDP(getCdpUrl({ port: TEST_PORT }))
         // Wait for sync
-        await new Promise(r => setTimeout(r, 1000))
+        await new Promise(r => setTimeout(r, 100))
 
         const cdpPage = browser.contexts()[0].pages().find(p => p.url() === targetUrl)
 
@@ -694,7 +697,7 @@ describe('MCP Server Tests', () => {
         const page = pages[0]
 
         await page.goto('https://example.com/disconnect-test')
-        await page.waitForLoadState('networkidle')
+        await page.waitForLoadState('domcontentloaded')
         await page.bringToFront()
 
         // Enable extension on this page
@@ -705,7 +708,7 @@ describe('MCP Server Tests', () => {
         expect(initialEnable.isConnected).toBe(true)
 
         // Wait for extension to fully connect
-        await new Promise(resolve => setTimeout(resolve, 500))
+        await new Promise(resolve => setTimeout(resolve, 100))
 
         // Verify MCP can see the page
         const beforeDisconnect = await client.callTool({
@@ -732,7 +735,7 @@ describe('MCP Server Tests', () => {
         })
 
         // Wait for disconnect to complete
-        await new Promise(resolve => setTimeout(resolve, 500))
+        await new Promise(resolve => setTimeout(resolve, 100))
 
         // 3. Verify MCP cannot see the page anymore
         const afterDisconnect = await client.callTool({
@@ -765,7 +768,7 @@ describe('MCP Server Tests', () => {
 
         // Wait for extension to fully reconnect and relay server to be ready
         console.log('Waiting for reconnection to stabilize...')
-        await new Promise(resolve => setTimeout(resolve, 1000))
+        await new Promise(resolve => setTimeout(resolve, 100))
 
         // 5. Reset the MCP client's playwright connection since it was closed by disconnectEverything
         console.log('Resetting MCP playwright connection...')
@@ -1167,23 +1170,23 @@ describe('MCP Server Tests', () => {
         const serviceWorker = await getExtensionServiceWorker(browserContext)
 
         const page = await browserContext.newPage()
-        const targetUrl = 'https://x.com'
-        await page.goto(targetUrl, { waitUntil: 'domcontentloaded' })
+        const targetUrl = 'https://example.com/sw-test'
+        await page.goto(targetUrl)
         await page.bringToFront()
 
         await serviceWorker.evaluate(async () => {
             await globalThis.toggleExtensionForActiveTab()
         })
 
-        await new Promise(r => setTimeout(r, 2000))
+        await new Promise(r => setTimeout(r, 100))
 
-        const browser = await chromium.connectOverCDP(getCdpUrl())
+        const browser = await chromium.connectOverCDP(getCdpUrl({ port: TEST_PORT }))
         const pages = browser.contexts()[0].pages()
-        const xPage = pages.find(p => p.url().includes('x.com'))
+        const testPage = pages.find(p => p.url().includes('sw-test'))
 
-        expect(xPage).toBeDefined()
-        expect(xPage?.url()).toContain('x.com')
-        expect(xPage?.url()).not.toContain('sw.js')
+        expect(testPage).toBeDefined()
+        expect(testPage?.url()).toContain('sw-test')
+        expect(testPage?.url()).not.toContain('sw.js')
 
         await browser.close()
         await page.close()
@@ -1203,7 +1206,7 @@ describe('MCP Server Tests', () => {
         })
 
         for (let i = 0; i < 5; i++) {
-            const browser = await chromium.connectOverCDP(getCdpUrl())
+            const browser = await chromium.connectOverCDP(getCdpUrl({ port: TEST_PORT }))
             const pages = browser.contexts()[0].pages()
             const testPage = pages.find(p => p.url().includes('repeated-test'))
 
@@ -1211,7 +1214,7 @@ describe('MCP Server Tests', () => {
             expect(testPage?.url()).toBe(targetUrl)
 
             await browser.close()
-            await new Promise(r => setTimeout(r, 200))
+            await new Promise(r => setTimeout(r, 100))
         }
 
         await page.close()
@@ -1230,7 +1233,7 @@ describe('MCP Server Tests', () => {
             await globalThis.toggleExtensionForActiveTab()
         })
 
-        await new Promise(r => setTimeout(r, 500))
+        await new Promise(r => setTimeout(r, 400))
 
         const [mcpResult, cdpBrowser] = await Promise.all([
             client.callTool({
@@ -1243,7 +1246,7 @@ describe('MCP Server Tests', () => {
             `,
                 },
             }),
-            chromium.connectOverCDP(getCdpUrl())
+            chromium.connectOverCDP(getCdpUrl({ port: TEST_PORT }))
         ])
 
         const mcpOutput = (mcpResult as any).content[0].text
@@ -1262,30 +1265,46 @@ describe('MCP Server Tests', () => {
         const serviceWorker = await getExtensionServiceWorker(browserContext)
 
         const page = await browserContext.newPage()
-        const targetUrl = 'https://www.youtube.com'
-        await page.goto(targetUrl, { waitUntil: 'domcontentloaded' })
+        await page.setContent(`
+            <html>
+                <head><title>Iframe Test Page</title></head>
+                <body>
+                    <h1>Iframe Heavy Page</h1>
+                    <iframe src="about:blank" id="frame1"></iframe>
+                    <iframe src="about:blank" id="frame2"></iframe>
+                    <iframe src="about:blank" id="frame3"></iframe>
+                </body>
+            </html>
+        `)
         await page.bringToFront()
 
         await serviceWorker.evaluate(async () => {
             await globalThis.toggleExtensionForActiveTab()
         })
 
-        await new Promise(r => setTimeout(r, 3000))
+        await new Promise(r => setTimeout(r, 100))
 
         for (let i = 0; i < 3; i++) {
-            const browser = await chromium.connectOverCDP(getCdpUrl())
+            const browser = await chromium.connectOverCDP(getCdpUrl({ port: TEST_PORT }))
             const pages = browser.contexts()[0].pages()
-            const ytPage = pages.find(p => p.url().includes('youtube.com'))
+            let iframePage
+            for (const p of pages) {
+                const html = await p.content()
+                if (html.includes('Iframe Heavy Page')) {
+                    iframePage = p
+                    break
+                }
+            }
 
-            expect(ytPage).toBeDefined()
-            expect(ytPage?.url()).toContain('youtube.com')
+            expect(iframePage).toBeDefined()
+            expect(iframePage?.url()).toContain('about:')
 
             await browser.close()
-            await new Promise(r => setTimeout(r, 500))
+            await new Promise(r => setTimeout(r, 100))
         }
 
         await page.close()
-    }, 60000)
+    }, 30000)
 
     it('should capture screenshot correctly', async () => {
         const browserContext = getBrowserContext()
@@ -1299,7 +1318,7 @@ describe('MCP Server Tests', () => {
             await globalThis.toggleExtensionForActiveTab()
         })
 
-        await new Promise(r => setTimeout(r, 500))
+        await new Promise(r => setTimeout(r, 100))
 
         const capturedCommands: CDPCommand[] = []
         const commandHandler = ({ command }: { clientId: string; command: CDPCommand }) => {
@@ -1309,7 +1328,7 @@ describe('MCP Server Tests', () => {
         }
         testCtx!.relayServer.on('cdp:command', commandHandler)
 
-        const browser = await chromium.connectOverCDP(getCdpUrl())
+        const browser = await chromium.connectOverCDP(getCdpUrl({ port: TEST_PORT }))
         const cdpPage = browser.contexts()[0].pages().find(p => p.url().includes('example.com'))
 
         expect(cdpPage).toBeDefined()
@@ -1428,7 +1447,7 @@ describe('MCP Server Tests', () => {
             await globalThis.toggleExtensionForActiveTab()
         })
 
-        await new Promise(r => setTimeout(r, 500))
+        await new Promise(r => setTimeout(r, 100))
 
         const capturedCommands: CDPCommand[] = []
         const commandHandler = ({ command }: { clientId: string; command: CDPCommand }) => {
@@ -1438,7 +1457,7 @@ describe('MCP Server Tests', () => {
         }
         testCtx!.relayServer.on('cdp:command', commandHandler)
 
-        const browser = await chromium.connectOverCDP(getCdpUrl())
+        const browser = await chromium.connectOverCDP(getCdpUrl({ port: TEST_PORT }))
         let cdpPage
         for (const p of browser.contexts()[0].pages()) {
             const html = await p.content()
@@ -1496,7 +1515,7 @@ describe('MCP Server Tests', () => {
             await globalThis.toggleExtensionForActiveTab()
         })
 
-        await new Promise(r => setTimeout(r, 500))
+        await new Promise(r => setTimeout(r, 400))
 
         const result = await client.callTool({
             name: 'execute',
@@ -1531,6 +1550,193 @@ describe('MCP Server Tests', () => {
         await page.close()
     }, 60000)
 
+    it('should get styles for element using getStylesForLocator', async () => {
+        const browserContext = getBrowserContext()
+        const serviceWorker = await getExtensionServiceWorker(browserContext)
+
+        const page = await browserContext.newPage()
+        await page.setContent(`
+            <html>
+                <head>
+                    <style>
+                        body { font-family: Arial, sans-serif; color: #333; }
+                        .container { padding: 20px; margin: 10px; }
+                        #main-btn { background-color: blue; color: white; border-radius: 4px; }
+                        .btn { padding: 8px 16px; }
+                    </style>
+                </head>
+                <body>
+                    <div class="container">
+                        <button id="main-btn" class="btn" style="font-weight: bold;">Click Me</button>
+                    </div>
+                </body>
+            </html>
+        `)
+        await page.bringToFront()
+
+        await serviceWorker.evaluate(async () => {
+            await globalThis.toggleExtensionForActiveTab()
+        })
+
+        await new Promise(r => setTimeout(r, 400))
+
+        const stylesResult = await client.callTool({
+            name: 'execute',
+            arguments: {
+                code: js`
+                    let testPage;
+                    for (const p of context.pages()) {
+                        const html = await p.content();
+                        if (html.includes('main-btn')) { testPage = p; break; }
+                    }
+                    if (!testPage) throw new Error('Test page not found');
+                    const btn = testPage.locator('#main-btn');
+                    const styles = await getStylesForLocator({ locator: btn });
+                    return styles;
+                `,
+                timeout: 30000,
+            },
+        })
+
+        expect(stylesResult.isError).toBeFalsy()
+        const stylesText = (stylesResult.content as any)[0]?.text || ''
+        expect(stylesText).toMatchInlineSnapshot(`
+          "Return value:
+          {
+            "element": "button#main-btn.btn",
+            "inlineStyle": {
+              "font-weight": "bold"
+            },
+            "rules": [
+              {
+                "selector": ".btn",
+                "source": null,
+                "origin": "regular",
+                "declarations": {
+                  "padding": "8px 16px",
+                  "padding-top": "8px",
+                  "padding-right": "16px",
+                  "padding-bottom": "8px",
+                  "padding-left": "16px"
+                },
+                "inheritedFrom": null
+              },
+              {
+                "selector": "#main-btn",
+                "source": null,
+                "origin": "regular",
+                "declarations": {
+                  "background-color": "blue",
+                  "color": "white",
+                  "border-radius": "4px",
+                  "border-top-left-radius": "4px",
+                  "border-top-right-radius": "4px",
+                  "border-bottom-right-radius": "4px",
+                  "border-bottom-left-radius": "4px"
+                },
+                "inheritedFrom": null
+              },
+              {
+                "selector": ".container",
+                "source": null,
+                "origin": "regular",
+                "declarations": {
+                  "padding": "20px",
+                  "margin": "10px",
+                  "padding-top": "20px",
+                  "padding-right": "20px",
+                  "padding-bottom": "20px",
+                  "padding-left": "20px",
+                  "margin-top": "10px",
+                  "margin-right": "10px",
+                  "margin-bottom": "10px",
+                  "margin-left": "10px"
+                },
+                "inheritedFrom": "ancestor[1]"
+              },
+              {
+                "selector": "body",
+                "source": null,
+                "origin": "regular",
+                "declarations": {
+                  "font-family": "Arial, sans-serif",
+                  "color": "rgb(51, 51, 51)"
+                },
+                "inheritedFrom": "ancestor[2]"
+              }
+            ]
+          }"
+        `)
+
+        const formattedResult = await client.callTool({
+            name: 'execute',
+            arguments: {
+                code: js`
+                    let testPage;
+                    for (const p of context.pages()) {
+                        const html = await p.content();
+                        if (html.includes('main-btn')) { testPage = p; break; }
+                    }
+                    if (!testPage) throw new Error('Test page not found');
+                    const btn = testPage.locator('#main-btn');
+                    const styles = await getStylesForLocator({ locator: btn });
+                    return formatStylesAsText(styles);
+                `,
+                timeout: 30000,
+            },
+        })
+
+        expect(formattedResult.isError).toBeFalsy()
+        const formattedText = (formattedResult.content as any)[0]?.text || ''
+        expect(formattedText).toMatchInlineSnapshot(`
+          "Return value:
+          Element: button#main-btn.btn
+
+          Inline styles:
+            font-weight: bold
+
+          Matched rules:
+            .btn {
+              padding: 8px 16px;
+              padding-top: 8px;
+              padding-right: 16px;
+              padding-bottom: 8px;
+              padding-left: 16px;
+            }
+            #main-btn {
+              background-color: blue;
+              color: white;
+              border-radius: 4px;
+              border-top-left-radius: 4px;
+              border-top-right-radius: 4px;
+              border-bottom-right-radius: 4px;
+              border-bottom-left-radius: 4px;
+            }
+
+          Inherited from ancestor[1]:
+            .container {
+              padding: 20px;
+              margin: 10px;
+              padding-top: 20px;
+              padding-right: 20px;
+              padding-bottom: 20px;
+              padding-left: 20px;
+              margin-top: 10px;
+              margin-right: 10px;
+              margin-bottom: 10px;
+              margin-left: 10px;
+            }
+
+          Inherited from ancestor[2]:
+            body {
+              font-family: Arial, sans-serif;
+              color: rgb(51, 51, 51);
+            }"
+        `)
+
+        await page.close()
+    }, 60000)
+
     it('should return correct layout metrics via CDP', async () => {
         const browserContext = getBrowserContext()
         const serviceWorker = await getExtensionServiceWorker(browserContext)
@@ -1543,13 +1749,13 @@ describe('MCP Server Tests', () => {
             await globalThis.toggleExtensionForActiveTab()
         })
 
-        await new Promise(r => setTimeout(r, 500))
+        await new Promise(r => setTimeout(r, 100))
 
-        const browser = await chromium.connectOverCDP(getCdpUrl())
+        const browser = await chromium.connectOverCDP(getCdpUrl({ port: TEST_PORT }))
         const cdpPage = browser.contexts()[0].pages().find(p => p.url().includes('example.com'))
         expect(cdpPage).toBeDefined()
 
-        const wsUrl = getCdpUrl()
+        const wsUrl = getCdpUrl({ port: TEST_PORT })
         const cdpSession = await getCDPSessionForPage({ page: cdpPage!, wsUrl })
 
         const layoutMetrics = await cdpSession.send('Page.getLayoutMetrics')
@@ -1606,7 +1812,7 @@ describe('MCP Server Tests', () => {
         console.log('window.devicePixelRatio:', windowDpr)
         expect(windowDpr).toBe(1)
 
-        cdpSession.detach()
+        cdpSession.close()
         await browser.close()
         await page.close()
     }, 60000)
@@ -1623,20 +1829,20 @@ describe('MCP Server Tests', () => {
             await globalThis.toggleExtensionForActiveTab()
         })
 
-        await new Promise(r => setTimeout(r, 500))
+        await new Promise(r => setTimeout(r, 100))
 
-        const browser = await chromium.connectOverCDP(getCdpUrl())
+        const browser = await chromium.connectOverCDP(getCdpUrl({ port: TEST_PORT }))
         const cdpPage = browser.contexts()[0].pages().find(p => p.url().includes('example.com'))
         expect(cdpPage).toBeDefined()
 
-        const wsUrl = getCdpUrl()
+        const wsUrl = getCdpUrl({ port: TEST_PORT })
         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()
+        client.close()
         await browser.close()
         await page.close()
     }, 60000)
@@ -1648,20 +1854,20 @@ describe('MCP Server Tests', () => {
         await serviceWorker.evaluate(async () => {
             await globalThis.disconnectEverything()
         })
-        await new Promise(r => setTimeout(r, 500))
+        await new Promise(r => setTimeout(r, 100))
 
         const targetUrl = 'https://example.com/'
 
         const enableResult = await serviceWorker.evaluate(async (url) => {
             const tab = await chrome.tabs.create({ url, active: true })
-            await new Promise(r => setTimeout(r, 1000))
+            await new Promise(r => setTimeout(r, 100))
             return await globalThis.toggleExtensionForActiveTab()
         }, targetUrl)
 
         console.log('Extension enabled:', enableResult)
         expect(enableResult.isConnected).toBe(true)
 
-        await new Promise(r => setTimeout(r, 1000))
+        await new Promise(r => setTimeout(r, 100))
 
         const { Stagehand } = await import('@browserbasehq/stagehand')
 
@@ -1670,7 +1876,7 @@ describe('MCP Server Tests', () => {
             verbose: 1,
             disablePino: true,
             localBrowserLaunchOptions: {
-                cdpUrl: getCdpUrl(),
+                cdpUrl: getCdpUrl({ port: TEST_PORT }),
             },
         })
 
@@ -1679,7 +1885,7 @@ describe('MCP Server Tests', () => {
         console.log('Stagehand initialized')
 
         const context = stagehand.context
-        console.log('Stagehand context:', context)
+        // console.log('Stagehand context:', context)
         expect(context).toBeDefined()
 
         const pages = context.pages()
@@ -1711,7 +1917,7 @@ describe('MCP Server Tests', () => {
         await serviceWorker.evaluate(async () => {
             await globalThis.toggleExtensionForActiveTab()
         })
-        await new Promise(r => setTimeout(r, 500))
+        await new Promise(r => setTimeout(r, 100))
 
         const result = await client.callTool({
             name: 'execute',
@@ -1764,6 +1970,12 @@ describe('CDP Session Tests', () => {
 
     beforeAll(async () => {
         testCtx = await setupTestContext({ tempDirPrefix: 'pw-cdp-test-' })
+
+        const serviceWorker = await getExtensionServiceWorker(testCtx.browserContext)
+        await serviceWorker.evaluate(async () => {
+            await globalThis.disconnectEverything()
+        })
+        await new Promise(r => setTimeout(r, 100))
     }, 600000)
 
     afterAll(async () => {
@@ -1776,7 +1988,7 @@ describe('CDP Session Tests', () => {
         return testCtx.browserContext
     }
 
-    it('should enable debugger and pause on debugger statement via CDP session', async () => {
+    it('should use Debugger class to set breakpoints and inspect variables', async () => {
         const browserContext = getBrowserContext()
         const serviceWorker = await getExtensionServiceWorker(browserContext)
 
@@ -1787,19 +1999,23 @@ describe('CDP Session Tests', () => {
         await serviceWorker.evaluate(async () => {
             await globalThis.toggleExtensionForActiveTab()
         })
-        await new Promise(r => setTimeout(r, 500))
+        await new Promise(r => setTimeout(r, 100))
 
-        const browser = await chromium.connectOverCDP(getCdpUrl())
+        const browser = await chromium.connectOverCDP(getCdpUrl({ port: TEST_PORT }))
         const cdpPage = browser.contexts()[0].pages().find(p => p.url().includes('example.com'))
         expect(cdpPage).toBeDefined()
 
-        const wsUrl = getCdpUrl()
+        const wsUrl = getCdpUrl({ port: TEST_PORT })
         const cdpSession = await getCDPSessionForPage({ page: cdpPage!, wsUrl })
-        await cdpSession.send('Debugger.enable')
+        const dbg = new Debugger({ cdp: cdpSession })
+
+        await dbg.enable()
 
-        const pausedPromise = new Promise<Protocol.Debugger.PausedEvent>((resolve) => {
-            cdpSession.on('Debugger.paused', (params) => {
-                resolve(params as Protocol.Debugger.PausedEvent)
+        expect(dbg.isPaused()).toBe(false)
+
+        const pausedPromise = new Promise<void>((resolve) => {
+            cdpSession.on('Debugger.paused', () => {
+                resolve()
             })
         })
 
@@ -1807,107 +2023,215 @@ describe('CDP Session Tests', () => {
             (function testFunction() {
                 const localVar = 'hello';
                 const numberVar = 42;
-                const objVar = { key: 'value', nested: { a: 1 } };
                 debugger;
                 return localVar + numberVar;
             })()
         `)
 
-        const pausedEvent = await Promise.race([
+        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(dbg.isPaused()).toBe(true)
+
+        const location = await dbg.getLocation()
+        expect(location.callstack[0].functionName).toBe('testFunction')
+        expect(location.sourceContext).toContain('debugger')
 
-        expect({
-            reason: pausedEvent.reason,
-            stackTrace: stackTrace.slice(0, 3),
-        }).toMatchInlineSnapshot(`
+        const vars = await dbg.inspectLocalVariables()
+        expect(vars).toMatchInlineSnapshot(`
           {
-            "reason": "other",
-            "stackTrace": [
-              {
-                "columnNumber": 16,
-                "functionName": "testFunction",
-                "lineNumber": 4,
-              },
-              {
-                "columnNumber": 14,
-                "functionName": "(anonymous)",
-                "lineNumber": 6,
-              },
-              {
-                "columnNumber": 29,
-                "functionName": "evaluate",
-                "lineNumber": 289,
-              },
-            ],
+            "localVar": "hello",
+            "numberVar": 42,
           }
         `)
 
-        const topFrame = pausedEvent.callFrames[0]
-        const scopeChain = topFrame.scopeChain
+        const evalResult = await dbg.evaluate({ expression: 'localVar + " world"' })
+        expect(evalResult.value).toBe('hello world')
 
-        const localScope = scopeChain.find(s => s.type === 'local')
-        const localVars: Record<string, unknown> = {}
+        await dbg.resume()
+        await new Promise(r => setTimeout(r, 100))
+        expect(dbg.isPaused()).toBe(false)
 
-        if (localScope?.object.objectId) {
-            const propsResult = await cdpSession.send('Runtime.getProperties', {
-                objectId: localScope.object.objectId,
-                ownProperties: true,
-            })
+        cdpSession.close()
+        await browser.close()
+        await page.close()
+    }, 60000)
 
-            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
-                }
+    it('should list scripts with Debugger class', async () => {
+        const browserContext = getBrowserContext()
+        const serviceWorker = await getExtensionServiceWorker(browserContext)
+
+        const page = await browserContext.newPage()
+        await page.setContent(`
+            <html>
+                <head>
+                    <script src="data:text/javascript,function testScript() { return 42; }"></script>
+                </head>
+                <body><h1>Script Test</h1></body>
+            </html>
+        `)
+        await page.bringToFront()
+
+        await serviceWorker.evaluate(async () => {
+            await globalThis.toggleExtensionForActiveTab()
+        })
+        await new Promise(r => setTimeout(r, 100))
+
+        const browser = await chromium.connectOverCDP(getCdpUrl({ port: TEST_PORT }))
+        let cdpPage
+        for (const p of browser.contexts()[0].pages()) {
+            const html = await p.content()
+            if (html.includes('Script Test')) {
+                cdpPage = p
+                break
             }
         }
+        expect(cdpPage).toBeDefined()
 
-        expect({
-            scopeTypes: scopeChain.map(s => s.type),
-            localVariables: localVars,
-        }).toMatchInlineSnapshot(`
-          {
-            "localVariables": {
-              "localVar": "hello",
-              "numberVar": 42,
-              "objVar": "[object Object]",
-            },
-            "scopeTypes": [
-              "local",
-              "global",
-            ],
-          }
+        const wsUrl = getCdpUrl({ port: TEST_PORT })
+        const cdpSession = await getCDPSessionForPage({ page: cdpPage!, wsUrl })
+        const dbg = new Debugger({ cdp: cdpSession })
+
+        const scripts = await dbg.listScripts()
+        expect(scripts.length).toBeGreaterThan(0)
+        expect(scripts[0]).toHaveProperty('scriptId')
+        expect(scripts[0]).toHaveProperty('url')
+
+        const dataScripts = await dbg.listScripts({ search: 'data:' })
+        expect(dataScripts.length).toBeGreaterThan(0)
+
+        cdpSession.close()
+        await browser.close()
+        await page.close()
+    }, 60000)
+
+    it('should manage breakpoints with Debugger class', async () => {
+        const browserContext = getBrowserContext()
+        const serviceWorker = await getExtensionServiceWorker(browserContext)
+
+        const page = await browserContext.newPage()
+        await page.setContent(`
+            <html>
+                <head>
+                    <script src="data:text/javascript,function testFunc() { return 42; }"></script>
+                </head>
+                <body></body>
+            </html>
         `)
+        await page.bringToFront()
 
-        const evalResult = await cdpSession.send('Debugger.evaluateOnCallFrame', {
-            callFrameId: topFrame.callFrameId,
-            expression: 'localVar + " world " + numberVar',
+        await serviceWorker.evaluate(async () => {
+            await globalThis.toggleExtensionForActiveTab()
         })
+        await new Promise(r => setTimeout(r, 100))
 
-        expect({
-            evaluatedExpression: 'localVar + " world " + numberVar',
-            result: evalResult.result.value,
-            type: evalResult.result.type,
-        }).toMatchInlineSnapshot(`
-          {
-            "evaluatedExpression": "localVar + " world " + numberVar",
-            "result": "hello world 42",
-            "type": "string",
-          }
+        const browser = await chromium.connectOverCDP(getCdpUrl({ port: TEST_PORT }))
+        let cdpPage
+        for (const p of browser.contexts()[0].pages()) {
+            const html = await p.content()
+            if (html.includes('testFunc')) {
+                cdpPage = p
+                break
+            }
+        }
+        expect(cdpPage).toBeDefined()
+
+        const wsUrl = getCdpUrl({ port: TEST_PORT })
+        const cdpSession = await getCDPSessionForPage({ page: cdpPage!, wsUrl })
+        const dbg = new Debugger({ cdp: cdpSession })
+
+        await dbg.enable()
+
+        expect(dbg.listBreakpoints()).toHaveLength(0)
+
+        const bpId = await dbg.setBreakpoint({ file: 'https://example.com/test.js', line: 1 })
+        expect(typeof bpId).toBe('string')
+        expect(dbg.listBreakpoints()).toHaveLength(1)
+        expect(dbg.listBreakpoints()[0]).toMatchObject({
+            id: bpId,
+            file: 'https://example.com/test.js',
+            line: 1,
+        })
+
+        await dbg.deleteBreakpoint({ breakpointId: bpId })
+        expect(dbg.listBreakpoints()).toHaveLength(0)
+
+        cdpSession.close()
+        await browser.close()
+        await page.close()
+    }, 60000)
+
+    it('should step through code with Debugger class', 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, 100))
+
+        const browser = await chromium.connectOverCDP(getCdpUrl({ port: TEST_PORT }))
+        const cdpPage = browser.contexts()[0].pages().find(p => p.url().includes('example.com'))
+        expect(cdpPage).toBeDefined()
+
+        const wsUrl = getCdpUrl({ port: TEST_PORT })
+        const cdpSession = await getCDPSessionForPage({ page: cdpPage!, wsUrl })
+        const dbg = new Debugger({ cdp: cdpSession })
+
+        await dbg.enable()
+
+        const pausedPromise = new Promise<void>((resolve) => {
+            cdpSession.on('Debugger.paused', () => resolve())
+        })
+
+        cdpPage!.evaluate(`
+            (function outer() {
+                function inner() {
+                    const x = 1;
+                    debugger;
+                    const y = 2;
+                    return x + y;
+                }
+                const result = inner();
+                return result;
+            })()
         `)
 
-        await cdpSession.send('Debugger.resume')
-        await cdpSession.send('Debugger.disable')
-        cdpSession.detach()
+        await pausedPromise
+        expect(dbg.isPaused()).toBe(true)
+
+        const location1 = await dbg.getLocation()
+        expect(location1.callstack.length).toBeGreaterThanOrEqual(2)
+        expect(location1.callstack[0].functionName).toBe('inner')
+        expect(location1.callstack[1].functionName).toBe('outer')
+
+        const stepOverPromise = new Promise<void>((resolve) => {
+            cdpSession.on('Debugger.paused', () => resolve())
+        })
+        await dbg.stepOver()
+        await stepOverPromise
+
+        const location2 = await dbg.getLocation()
+        expect(location2.lineNumber).toBeGreaterThan(location1.lineNumber)
+
+        const stepOutPromise = new Promise<void>((resolve) => {
+            cdpSession.on('Debugger.paused', () => resolve())
+        })
+        await dbg.stepOut()
+        await stepOutPromise
+
+        const location3 = await dbg.getLocation()
+        expect(location3.callstack[0].functionName).toBe('outer')
+
+        await dbg.resume()
+
+        cdpSession.close()
         await browser.close()
         await page.close()
     }, 60000)
@@ -1923,13 +2247,13 @@ describe('CDP Session Tests', () => {
         await serviceWorker.evaluate(async () => {
             await globalThis.toggleExtensionForActiveTab()
         })
-        await new Promise(r => setTimeout(r, 500))
+        await new Promise(r => setTimeout(r, 100))
 
-        const browser = await chromium.connectOverCDP(getCdpUrl())
+        const browser = await chromium.connectOverCDP(getCdpUrl({ port: TEST_PORT }))
         const cdpPage = browser.contexts()[0].pages().find(p => p.url().includes('example.com'))
         expect(cdpPage).toBeDefined()
 
-        const wsUrl = getCdpUrl()
+        const wsUrl = getCdpUrl({ port: TEST_PORT })
         const cdpSession = await getCDPSessionForPage({ page: cdpPage!, wsUrl })
         await cdpSession.send('Profiler.enable')
         await cdpSession.send('Profiler.start')
@@ -1957,33 +2281,17 @@ describe('CDP Session Tests', () => {
             .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": 6962,
-            "hasNodes": true,
-            "nodeCount": 8,
-            "sampleFunctionNames": [
-              "(root)",
-              "(program)",
-              "(idle)",
-              "evaluate",
-              "querySelectorAll",
-            ],
-          }
-        `)
+        expect(profile.nodes.length).toBeGreaterThan(0)
+        expect(profile.endTime - profile.startTime).toBeGreaterThan(0)
+        expect(functionNames.every((name) => typeof name === 'string')).toBe(true)
 
         await cdpSession.send('Profiler.disable')
-        cdpSession.detach()
+        cdpSession.close()
         await browser.close()
         await page.close()
     }, 60000)
 
-    it('should click at correct coordinates on high-DPI simulation', async () => {
+    it('should update Target.getTargets URL after page navigation', async () => {
         const browserContext = getBrowserContext()
         const serviceWorker = await getExtensionServiceWorker(browserContext)
 
@@ -1994,26 +2302,353 @@ describe('CDP Session Tests', () => {
         await serviceWorker.evaluate(async () => {
             await globalThis.toggleExtensionForActiveTab()
         })
-        await new Promise(r => setTimeout(r, 500))
+        await new Promise(r => setTimeout(r, 100))
 
-        const browser = await chromium.connectOverCDP(getCdpUrl())
+        const browser = await chromium.connectOverCDP(getCdpUrl({ port: TEST_PORT }))
         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)
+        const wsUrl = getCdpUrl({ port: TEST_PORT })
+        const cdpSession = await getCDPSessionForPage({ page: cdpPage!, wsUrl })
 
-        await cdpPage!.evaluate(() => {
-            (window as any).clickedAt = null;
-            document.addEventListener('click', (e) => {
-                (window as any).clickedAt = { x: e.clientX, y: e.clientY };
-            });
-        })
+        const initialTargets = await cdpSession.send('Target.getTargets')
+        const initialPageTarget = initialTargets.targetInfos.find(t => t.type === 'page' && t.url.includes('example.com'))
+        expect(initialPageTarget?.url).toBe('https://example.com/')
 
-        await cdpPage!.locator('h1').click()
+        await cdpPage!.goto('https://example.org/', { waitUntil: 'domcontentloaded' })
+        await new Promise(r => setTimeout(r, 100))
 
-        const clickedAt = await cdpPage!.evaluate(() => (window as any).clickedAt)
+        const afterNavTargets = await cdpSession.send('Target.getTargets')
+        const allPageTargets = afterNavTargets.targetInfos.filter(t => t.type === 'page')
+
+        const aboutBlankTargets = allPageTargets.filter(t => t.url === 'about:blank')
+        expect(aboutBlankTargets).toHaveLength(0)
+
+        const exampleComTargets = allPageTargets.filter(t => t.url.includes('example.com'))
+        expect(exampleComTargets).toHaveLength(0)
+
+        const exampleOrgTargets = allPageTargets.filter(t => t.url.includes('example.org'))
+        expect(exampleOrgTargets).toHaveLength(1)
+
+        cdpSession.close()
+        await browser.close()
+        await page.close()
+    }, 60000)
+
+    it('should return correct targets for multiple pages via Target.getTargets', async () => {
+        const browserContext = getBrowserContext()
+        const serviceWorker = await getExtensionServiceWorker(browserContext)
+
+        const page1 = await browserContext.newPage()
+        await page1.goto('https://example.com/')
+        await page1.bringToFront()
+        await serviceWorker.evaluate(async () => {
+            await globalThis.toggleExtensionForActiveTab()
+        })
+
+        const page2 = await browserContext.newPage()
+        await page2.goto('https://example.org/')
+        await page2.bringToFront()
+        await serviceWorker.evaluate(async () => {
+            await globalThis.toggleExtensionForActiveTab()
+        })
+
+        await new Promise(r => setTimeout(r, 100))
+
+        const browser = await chromium.connectOverCDP(getCdpUrl({ port: TEST_PORT }))
+        const cdpPage = browser.contexts()[0].pages().find(p => p.url().includes('example.com'))
+        expect(cdpPage).toBeDefined()
+
+        const wsUrl = getCdpUrl({ port: TEST_PORT })
+        const cdpSession = await getCDPSessionForPage({ page: cdpPage!, wsUrl })
+
+        const { targetInfos } = await cdpSession.send('Target.getTargets')
+        const allPageTargets = targetInfos.filter(t => t.type === 'page')
+
+        const aboutBlankTargets = allPageTargets.filter(t => t.url === 'about:blank')
+        expect(aboutBlankTargets).toHaveLength(0)
+
+        const pageTargets = allPageTargets
+            .map(t => ({ type: t.type, url: t.url }))
+            .sort((a, b) => a.url.localeCompare(b.url))
+
+        expect(pageTargets).toMatchInlineSnapshot(`
+          [
+            {
+              "type": "page",
+              "url": "https://example.com/",
+            },
+            {
+              "type": "page",
+              "url": "https://example.org/",
+            },
+          ]
+        `)
+
+        cdpSession.close()
+        await browser.close()
+        await page1.close()
+        await page2.close()
+    }, 60000)
+
+    it('should create CDP session for page after navigation', 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, 100))
+
+        await page.goto('https://example.org/', { waitUntil: 'domcontentloaded' })
+        await new Promise(r => setTimeout(r, 100))
+
+        const browser = await chromium.connectOverCDP(getCdpUrl({ port: TEST_PORT }))
+        const cdpPage = browser.contexts()[0].pages().find(p => p.url().includes('example.org'))
+        expect(cdpPage).toBeDefined()
+
+        const wsUrl = getCdpUrl({ port: TEST_PORT })
+        const cdpSession = await getCDPSessionForPage({ page: cdpPage!, wsUrl })
+
+        const evalResult = await cdpSession.send('Runtime.evaluate', {
+            expression: 'document.title',
+            returnByValue: true,
+        })
+        expect(evalResult.result.value).toContain('Example Domain')
+
+        cdpSession.close()
+        await browser.close()
+        await page.close()
+    }, 60000)
+
+    it('should maintain CDP session functionality after page URL change', async () => {
+        const browserContext = getBrowserContext()
+        const serviceWorker = await getExtensionServiceWorker(browserContext)
+
+        const page = await browserContext.newPage()
+        const initialUrl = 'https://example.com/'
+        await page.goto(initialUrl)
+        await page.bringToFront()
+
+        await serviceWorker.evaluate(async () => {
+            await globalThis.toggleExtensionForActiveTab()
+        })
+        await new Promise(r => setTimeout(r, 100))
+
+        const browser = await chromium.connectOverCDP(getCdpUrl({ port: TEST_PORT }))
+        const cdpPage = browser.contexts()[0].pages().find(p => p.url().includes('example.com'))
+        expect(cdpPage).toBeDefined()
+
+        const wsUrl = getCdpUrl({ port: TEST_PORT })
+        const cdpSession = await getCDPSessionForPage({ page: cdpPage!, wsUrl })
+
+        const initialEvalResult = await cdpSession.send('Runtime.evaluate', {
+            expression: 'document.title',
+            returnByValue: true,
+        })
+        expect(initialEvalResult.result.value).toBe('Example Domain')
+
+        const newUrl = 'https://example.org/'
+        await cdpPage!.goto(newUrl, { waitUntil: 'domcontentloaded' })
+
+        expect(cdpPage!.url()).toBe(newUrl)
+
+        const layoutMetrics = await cdpSession.send('Page.getLayoutMetrics')
+        expect(layoutMetrics.cssVisualViewport).toBeDefined()
+        expect(layoutMetrics.cssVisualViewport.clientWidth).toBeGreaterThan(0)
+
+        const afterNavEvalResult = await cdpSession.send('Runtime.evaluate', {
+            expression: 'document.title',
+            returnByValue: true,
+        })
+        expect(afterNavEvalResult.result.value).toContain('Example Domain')
+
+        const locationResult = await cdpSession.send('Runtime.evaluate', {
+            expression: 'window.location.href',
+            returnByValue: true,
+        })
+        expect(locationResult.result.value).toBe(newUrl)
+
+        cdpSession.close()
+        await browser.close()
+        await page.close()
+    }, 60000)
+
+    it('should pause on all exceptions with setPauseOnExceptions', 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, 100))
+
+        const browser = await chromium.connectOverCDP(getCdpUrl({ port: TEST_PORT }))
+        const cdpPage = browser.contexts()[0].pages().find(p => p.url().includes('example.com'))
+        expect(cdpPage).toBeDefined()
+
+        const wsUrl = getCdpUrl({ port: TEST_PORT })
+        const cdpSession = await getCDPSessionForPage({ page: cdpPage!, wsUrl })
+        const dbg = new Debugger({ cdp: cdpSession })
+
+        await dbg.enable()
+        await dbg.setPauseOnExceptions({ state: 'all' })
+
+        const pausedPromise = new Promise<void>((resolve) => {
+            cdpSession.on('Debugger.paused', () => resolve())
+        })
+
+        cdpPage!.evaluate(`
+            (function() {
+                try {
+                    throw new Error('Caught test error');
+                } catch (e) {
+                    // caught but should still pause with state 'all'
+                }
+            })()
+        `).catch(() => {})
+
+        await Promise.race([
+            pausedPromise,
+            new Promise<never>((_, reject) => setTimeout(() => reject(new Error('Debugger.paused timeout')), 5000))
+        ])
+
+        expect(dbg.isPaused()).toBe(true)
+
+        const location = await dbg.getLocation()
+        expect(location.sourceContext).toContain('throw')
+
+        await dbg.resume()
+
+        await dbg.setPauseOnExceptions({ state: 'none' })
+
+        cdpSession.close()
+        await browser.close()
+        await page.close()
+    }, 60000)
+
+    it('should inspect local and global variables with inline snapshots', async () => {
+        const browserContext = getBrowserContext()
+        const serviceWorker = await getExtensionServiceWorker(browserContext)
+
+        const page = await browserContext.newPage()
+        await page.setContent(`
+            <html>
+                <head>
+                    <script>
+                        const GLOBAL_CONFIG = 'production';
+                        function runTest() {
+                            const userName = 'Alice';
+                            const userAge = 25;
+                            const settings = { theme: 'dark', lang: 'en' };
+                            const scores = [10, 20, 30];
+                            debugger;
+                            return userName;
+                        }
+                    </script>
+                </head>
+                <body>
+                    <button onclick="runTest()">Run</button>
+                </body>
+            </html>
+        `)
+        await page.bringToFront()
+
+        await serviceWorker.evaluate(async () => {
+            await globalThis.toggleExtensionForActiveTab()
+        })
+        await new Promise(r => setTimeout(r, 100))
+
+        const browser = await chromium.connectOverCDP(getCdpUrl({ port: TEST_PORT }))
+        let cdpPage
+        for (const p of browser.contexts()[0].pages()) {
+            const html = await p.content()
+            if (html.includes('runTest')) {
+                cdpPage = p
+                break
+            }
+        }
+        expect(cdpPage).toBeDefined()
+
+        const wsUrl = getCdpUrl({ port: TEST_PORT })
+        const cdpSession = await getCDPSessionForPage({ page: cdpPage!, wsUrl })
+        const dbg = new Debugger({ cdp: cdpSession })
+
+        await dbg.enable()
+
+        const globalVars = await dbg.inspectGlobalVariables()
+        expect(globalVars).toMatchInlineSnapshot(`
+          [
+            "GLOBAL_CONFIG",
+          ]
+        `)
+
+        const pausedPromise = new Promise<void>((resolve) => {
+            cdpSession.on('Debugger.paused', () => resolve())
+        })
+
+        cdpPage!.evaluate('runTest()')
+
+        await pausedPromise
+        expect(dbg.isPaused()).toBe(true)
+
+        const localVars = await dbg.inspectLocalVariables()
+        expect(localVars).toMatchInlineSnapshot(`
+          {
+            "GLOBAL_CONFIG": "production",
+            "scores": "[array]",
+            "settings": "[object]",
+            "userAge": 25,
+            "userName": "Alice",
+          }
+        `)
+
+        await dbg.resume()
+
+        cdpSession.close()
+        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, 100))
+
+        const browser = await chromium.connectOverCDP(getCdpUrl({ port: TEST_PORT }))
+        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()
@@ -2023,4 +2658,226 @@ describe('CDP Session Tests', () => {
         await browser.close()
         await page.close()
     }, 60000)
+
+    it('should use Editor class to list, read, and edit scripts', 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, 100))
+
+        const browser = await chromium.connectOverCDP(getCdpUrl({ port: TEST_PORT }))
+        const cdpPage = browser.contexts()[0].pages().find(p => p.url().includes('example.com'))
+        expect(cdpPage).toBeDefined()
+
+        const wsUrl = getCdpUrl({ port: TEST_PORT })
+        const cdpSession = await getCDPSessionForPage({ page: cdpPage!, wsUrl })
+        const editor = new Editor({ cdp: cdpSession })
+
+        await editor.enable()
+
+        await cdpPage!.addScriptTag({
+            content: `
+                function greetUser(name) {
+                    console.log('Hello, ' + name);
+                    return 'Hello, ' + name;
+                }
+            `,
+        })
+        await new Promise(r => setTimeout(r, 100))
+        const scripts = await editor.list()
+        expect(scripts.length).toBeGreaterThan(0)
+
+        const matches = await editor.grep({ regex: /greetUser/ })
+        expect(matches.length).toBeGreaterThan(0)
+
+        const match = matches[0]
+        const { content, totalLines } = await editor.read({ url: match.url })
+        expect(content).toContain('greetUser')
+        expect(totalLines).toBeGreaterThan(0)
+
+        await editor.edit({
+            url: match.url,
+            oldString: "console.log('Hello, ' + name);",
+            newString: "console.log('Hello, ' + name); console.log('EDITOR_TEST_MARKER');",
+        })
+
+        const consoleLogs: string[] = []
+        cdpPage!.on('console', msg => {
+            consoleLogs.push(msg.text())
+        })
+
+        await cdpPage!.evaluate(() => {
+            (window as any).greetUser('World')
+        })
+        await new Promise(r => setTimeout(r, 100))
+
+        expect(consoleLogs).toContain('Hello, World')
+        expect(consoleLogs).toContain('EDITOR_TEST_MARKER')
+
+        cdpSession.close()
+        await browser.close()
+        await page.close()
+    }, 60000)
+
+    it('editor can list, read, and edit CSS stylesheets', 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, 100))
+
+        const browser = await chromium.connectOverCDP(getCdpUrl({ port: TEST_PORT }))
+        const cdpPage = browser.contexts()[0].pages().find(p => p.url().includes('example.com'))
+        expect(cdpPage).toBeDefined()
+
+        const wsUrl = getCdpUrl({ port: TEST_PORT })
+        const cdpSession = await getCDPSessionForPage({ page: cdpPage!, wsUrl })
+        const editor = new Editor({ cdp: cdpSession })
+
+        await editor.enable()
+
+        await cdpPage!.addStyleTag({
+            content: `
+                .editor-test-element {
+                    color: rgb(255, 0, 0);
+                    background-color: rgb(0, 0, 255);
+                }
+            `,
+        })
+        await new Promise(r => setTimeout(r, 100))
+        const stylesheets = await editor.list({ pattern: /inline-css:/ })
+        expect(stylesheets.length).toBeGreaterThan(0)
+
+        const cssMatches = await editor.grep({ regex: /editor-test-element/, pattern: /inline-css:/ })
+        expect(cssMatches.length).toBeGreaterThan(0)
+
+        const cssMatch = cssMatches[0]
+        const { content, totalLines } = await editor.read({ url: cssMatch.url })
+        expect(content).toContain('editor-test-element')
+        expect(content).toContain('rgb(255, 0, 0)')
+        expect(totalLines).toBeGreaterThan(0)
+
+        await cdpPage!.evaluate(() => {
+            const el = document.createElement('div')
+            el.className = 'editor-test-element'
+            el.id = 'test-div'
+            el.textContent = 'Test'
+            document.body.appendChild(el)
+        })
+
+        const colorBefore = await cdpPage!.evaluate(() => {
+            const el = document.getElementById('test-div')!
+            return window.getComputedStyle(el).color
+        })
+        expect(colorBefore).toBe('rgb(255, 0, 0)')
+
+        await editor.edit({
+            url: cssMatch.url,
+            oldString: 'color: rgb(255, 0, 0);',
+            newString: 'color: rgb(0, 255, 0);',
+        })
+
+        const colorAfter = await cdpPage!.evaluate(() => {
+            const el = document.getElementById('test-div')!
+            return window.getComputedStyle(el).color
+        })
+        expect(colorAfter).toBe('rgb(0, 255, 0)')
+
+        cdpSession.close()
+        await browser.close()
+        await page.close()
+    }, 60000)
+
+    it('should inject bippy and find React fiber with getReactSource', async () => {
+        const browserContext = getBrowserContext()
+        const serviceWorker = await getExtensionServiceWorker(browserContext)
+
+        const page = await browserContext.newPage()
+        await page.setContent(`
+            <!DOCTYPE html>
+            <html>
+            <head>
+                <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
+                <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
+            </head>
+            <body>
+                <div id="root"></div>
+                <script>
+                    function MyComponent() {
+                        return React.createElement('button', { id: 'react-btn' }, 'Click me');
+                    }
+                    const root = ReactDOM.createRoot(document.getElementById('root'));
+                    root.render(React.createElement(MyComponent));
+                </script>
+            </body>
+            </html>
+        `)
+        await page.bringToFront()
+
+        await serviceWorker.evaluate(async () => {
+            await globalThis.toggleExtensionForActiveTab()
+        })
+        await new Promise(r => setTimeout(r, 500))
+
+        const browser = await chromium.connectOverCDP(getCdpUrl({ port: TEST_PORT }))
+        const pages = browser.contexts()[0].pages()
+        const cdpPage = pages.find(p => p.url().startsWith('about:'))
+        expect(cdpPage).toBeDefined()
+
+        const btn = cdpPage!.locator('#react-btn')
+        const btnCount = await btn.count()
+        expect(btnCount).toBe(1)
+
+        const hasBippyBefore = await cdpPage!.evaluate(() => !!(globalThis as any).__bippy)
+        expect(hasBippyBefore).toBe(false)
+
+        const wsUrl = getCdpUrl({ port: TEST_PORT })
+        const cdpSession = await getCDPSessionForPage({ page: cdpPage!, wsUrl })
+
+        const { getReactSource } = await import('./react-source.js')
+        const source = await getReactSource({ locator: btn, cdp: cdpSession })
+
+        const hasBippyAfter = await cdpPage!.evaluate(() => !!(globalThis as any).__bippy)
+        expect(hasBippyAfter).toBe(true)
+
+        const hasFiber = await btn.evaluate((el) => {
+            const bippy = (globalThis as any).__bippy
+            const fiber = bippy.getFiberFromHostInstance(el)
+            return !!fiber
+        })
+        expect(hasFiber).toBe(true)
+
+        const componentName = await btn.evaluate((el) => {
+            const bippy = (globalThis as any).__bippy
+            const fiber = bippy.getFiberFromHostInstance(el)
+            let current = fiber
+            while (current) {
+                if (bippy.isCompositeFiber(current)) {
+                    return bippy.getDisplayName(current.type)
+                }
+                current = current.return
+            }
+            return null
+        })
+        expect(componentName).toBe('MyComponent')
+
+        console.log('Component name from fiber:', componentName)
+        console.log('Source location (null for UMD React, works on local dev servers with JSX transform):', source)
+
+        await browser.close()
+        await page.close()
+    }, 60000)
 })