playwriter 0.0.33 → 0.0.37

package/src/mcp.test.ts

@@ -217,8 +217,8 @@ describe('MCP Server Tests', () => {
 
           Return value:
           {
-            \"url\": \"https://example.com/\",
-            \"title\": \"Example Domain\"
+            "url": "https://example.com/",
+            "title": "Example Domain"
           }",
               "type": "text",
             },
@@ -686,7 +686,7 @@ describe('MCP Server Tests', () => {
 
         await browser.close()
         await page.close()
-    })
+    }, 60000)
 
     it('should be able to reconnect after disconnecting everything', async () => {
         const browserContext = getBrowserContext()
@@ -824,6 +824,83 @@ describe('MCP Server Tests', () => {
         await page.goto('about:blank')
     })
 
+    it('should auto-reconnect MCP after extension WebSocket reconnects', async () => {
+        // This test verifies that the MCP automatically reconnects when the browser
+        // disconnects (e.g., when the extension WebSocket reconnects and the relay
+        // server closes all playwright clients). The fix adds browser.on('disconnected')
+        // handler that clears state.isConnected, so ensureConnection() creates a new connection.
+
+        const serviceWorker = await getExtensionServiceWorker(testCtx!.browserContext)
+
+        // 1. Create a test page and enable extension
+        const page = await testCtx!.browserContext.newPage()
+        await page.goto('https://example.com/auto-reconnect-test')
+        await page.waitForLoadState('domcontentloaded')
+        await page.bringToFront()
+
+        const initialEnable = await serviceWorker.evaluate(async () => {
+            return await globalThis.toggleExtensionForActiveTab()
+        })
+        expect(initialEnable.isConnected).toBe(true)
+        await new Promise(resolve => setTimeout(resolve, 100))
+
+        // 2. Verify MCP can execute commands
+        const beforeResult = await client.callTool({
+            name: 'execute',
+            arguments: {
+                code: js`
+          const pages = context.pages();
+          const testPage = pages.find(p => p.url().includes('auto-reconnect-test'));
+          return { pagesCount: pages.length, foundTestPage: !!testPage };
+        `,
+            },
+        })
+        const beforeOutput = (beforeResult as any).content[0].text
+        expect(beforeOutput).toContain('foundTestPage')
+        expect(beforeOutput).toContain('true')
+
+        // 3. Simulate extension WebSocket reconnection
+        // This causes relay server to close all playwright client WebSockets
+        await serviceWorker.evaluate(async () => {
+            await globalThis.disconnectEverything()
+        })
+        await new Promise(resolve => setTimeout(resolve, 100))
+
+        // Re-enable extension (simulates extension reconnecting)
+        await page.bringToFront()
+        const reconnectResult = await serviceWorker.evaluate(async () => {
+            return await globalThis.toggleExtensionForActiveTab()
+        })
+        expect(reconnectResult.isConnected).toBe(true)
+        await new Promise(resolve => setTimeout(resolve, 100))
+
+        // 4. Execute command WITHOUT calling resetPlaywright()
+        // The browser.on('disconnected') handler should have cleared state.isConnected,
+        // causing ensureConnection() to automatically create a new connection
+        const afterResult = await client.callTool({
+            name: 'execute',
+            arguments: {
+                code: js`
+          const pages = context.pages();
+          const testPage = pages.find(p => p.url().includes('auto-reconnect-test'));
+          return { pagesCount: pages.length, foundTestPage: !!testPage, url: testPage?.url() };
+        `,
+            },
+        })
+
+        const afterOutput = (afterResult as any).content[0].text
+        // The command should succeed and find our test page
+        expect(afterOutput).toContain('foundTestPage')
+        expect(afterOutput).toContain('true')
+        expect(afterOutput).toContain('auto-reconnect-test')
+        // Should NOT contain error about extension not connected
+        expect(afterOutput).not.toContain('Extension not connected')
+        expect((afterResult as any).isError).not.toBe(true)
+
+        // Clean up
+        await page.goto('about:blank')
+    })
+
     it('should capture browser console logs with getLatestLogs', async () => {
         // Ensure clean state and clear any existing logs
         const resetResult = await client.callTool({
@@ -1260,6 +1337,92 @@ describe('MCP Server Tests', () => {
         await page.close()
     }, 30000)
 
+    it('should be usable after toggle with valid URL', async () => {
+        // This test validates the extension properly waits for valid URLs before
+        // sending Target.attachedToTarget. Uses Discord - a heavy React SPA.
+        //
+        // We use waitForEvent('page') to wait for Playwright to process the event.
+        // The KEY assertion is that when the event fires, the URL is VALID (not empty).
+        // Before the fix: event fired with empty URL -> page broken forever
+        // After the fix: event fires with valid URL -> page works immediately
+
+        const _browserContext = getBrowserContext()
+        const serviceWorker = await getExtensionServiceWorker(_browserContext)
+        const browser = await chromium.connectOverCDP(getCdpUrl({ port: TEST_PORT }))
+        const context = browser.contexts()[0]
+
+        const page = await _browserContext.newPage()
+        await page.goto('https://discord.com/login')
+        await page.bringToFront()
+
+        // Set up listener BEFORE toggle
+        const pagePromise = context.waitForEvent('page', { timeout: 10000 })
+
+        // Toggle extension - extension waits for valid URL before sending event
+        await serviceWorker.evaluate(async () => {
+            await globalThis.toggleExtensionForActiveTab()
+        })
+
+        // Wait for page event
+        const targetPage = await pagePromise
+        console.log('Page URL when event fired:', targetPage.url())
+
+        // KEY ASSERTION: URL must NOT be empty - this is what the extension fix guarantees
+        expect(targetPage.url()).not.toBe('')
+        expect(targetPage.url()).not.toBe(':')
+        expect(targetPage.url()).toContain('discord.com')
+
+        // evaluate() works immediately - no waiting needed
+        const result = await targetPage.evaluate(() => window.location.href)
+        expect(result).toContain('discord.com')
+
+        await browser.close()
+        await page.close()
+    }, 60000)
+
+    it('should have non-empty URLs when connecting to already-loaded pages', async () => {
+        // This test validates that when we connect to a browser with already-loaded pages,
+        // all pages have non-empty URLs. Empty URLs break Playwright permanently.
+
+        const _browserContext = getBrowserContext()
+        const serviceWorker = await getExtensionServiceWorker(_browserContext)
+
+        // Create and fully load a heavy page BEFORE connecting
+        const page = await _browserContext.newPage()
+        await page.goto('https://discord.com/login', { waitUntil: 'load' })
+        await page.bringToFront()
+
+        // Toggle extension to attach to the loaded page
+        await serviceWorker.evaluate(async () => {
+            await globalThis.toggleExtensionForActiveTab()
+        })
+
+        // NOW connect via CDP - page should already be attached
+        const browser = await chromium.connectOverCDP(getCdpUrl({ port: TEST_PORT }))
+        const context = browser.contexts()[0]
+
+        // Get all pages and verify NONE have empty URLs
+        const pages = context.pages()
+        console.log('All page URLs:', pages.map(p => p.url()))
+
+        expect(pages.length).toBeGreaterThan(0)
+        for (const p of pages) {
+            expect(p.url()).not.toBe('')
+            expect(p.url()).not.toBe(':')
+            expect(p.url()).not.toBeUndefined()
+        }
+
+        // Find Discord page and verify it works
+        const discordPage = pages.find(p => p.url().includes('discord.com'))
+        expect(discordPage).toBeDefined()
+
+        const result = await discordPage!.evaluate(() => window.location.href)
+        expect(result).toContain('discord.com')
+
+        await browser.close()
+        await page.close()
+    }, 60000)
+
     it('should maintain correct page.url() with iframe-heavy pages', async () => {
         const browserContext = getBrowserContext()
         const serviceWorker = await getExtensionServiceWorker(browserContext)
@@ -1943,8 +2106,8 @@ describe('MCP Server Tests', () => {
             {
               "text": "Return value:
           {
-            "error": "Page not found",
-            "urls": []
+            \"matchesDark\": false,
+            \"matchesLight\": true
           }",
               "type": "text",
             },
@@ -1954,6 +2117,196 @@ describe('MCP Server Tests', () => {
         await page.close()
     }, 60000)
 
+    it('should get aria ref for locator using getAriaSnapshot', async () => {
+        const browserContext = getBrowserContext()
+        const serviceWorker = await getExtensionServiceWorker(browserContext)
+
+        const page = await browserContext.newPage()
+        await page.setContent(`
+            <html>
+                <body>
+                    <button id="submit-btn">Submit Form</button>
+                    <a href="/about">About Us</a>
+                    <input type="text" placeholder="Enter your name" />
+                </body>
+            </html>
+        `)
+        await page.bringToFront()
+
+        await serviceWorker.evaluate(async () => {
+            await globalThis.toggleExtensionForActiveTab()
+        })
+        await new Promise(r => setTimeout(r, 400))
+
+        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('submit-btn')) {
+                cdpPage = p
+                break
+            }
+        }
+        expect(cdpPage).toBeDefined()
+
+        const { getAriaSnapshot } = await import('./aria-snapshot.js')
+
+        // Get aria snapshot and verify we can get refs
+        const ariaResult = await getAriaSnapshot({ page: cdpPage! })
+
+        expect(ariaResult.snapshot).toBeDefined()
+        expect(ariaResult.snapshot.length).toBeGreaterThan(0)
+        expect(ariaResult.snapshot).toContain('Submit Form')
+
+        // Verify refToElement map is populated
+        expect(ariaResult.refToElement.size).toBeGreaterThan(0)
+        console.log('RefToElement map size:', ariaResult.refToElement.size)
+        console.log('RefToElement entries:', [...ariaResult.refToElement.entries()])
+
+        // Verify we can select elements using aria-ref selectors
+        const btnViaAriaRef = cdpPage!.locator('aria-ref=e2')
+        const btnTextViaRef = await btnViaAriaRef.textContent()
+        console.log('Button text via aria-ref=e2:', btnTextViaRef)
+        expect(btnTextViaRef).toBe('Submit Form')
+
+        // Get ref for the submit button using getRefForLocator
+        const submitBtn = cdpPage!.locator('#submit-btn')
+        const btnAriaRef = await ariaResult.getRefForLocator(submitBtn)
+        console.log('Button ariaRef:', btnAriaRef)
+        expect(btnAriaRef).toBeDefined()
+        expect(btnAriaRef?.role).toBe('button')
+        expect(btnAriaRef?.name).toBe('Submit Form')
+        expect(btnAriaRef?.ref).toMatch(/^e\d+$/)
+
+        // Verify the ref matches what we can use to select
+        const btnFromRef = cdpPage!.locator(`aria-ref=${btnAriaRef?.ref}`)
+        const btnText = await btnFromRef.textContent()
+        expect(btnText).toBe('Submit Form')
+
+        // Test getRefStringForLocator
+        const btnRefStr = await ariaResult.getRefStringForLocator(submitBtn)
+        console.log('Button ref string:', btnRefStr)
+        expect(btnRefStr).toBe(btnAriaRef?.ref)
+
+        // Test link
+        const aboutLink = cdpPage!.locator('a')
+        const linkAriaRef = await ariaResult.getRefForLocator(aboutLink)
+        console.log('Link ariaRef:', linkAriaRef)
+        expect(linkAriaRef).toBeDefined()
+        expect(linkAriaRef?.role).toBe('link')
+        expect(linkAriaRef?.name).toBe('About Us')
+
+        // Verify the link ref works
+        const linkFromRef = cdpPage!.locator(`aria-ref=${linkAriaRef?.ref}`)
+        const linkText = await linkFromRef.textContent()
+        expect(linkText).toBe('About Us')
+
+        // Test input field
+        const inputField = cdpPage!.locator('input')
+        const inputAriaRef = await ariaResult.getRefForLocator(inputField)
+        console.log('Input ariaRef:', inputAriaRef)
+        expect(inputAriaRef).toBeDefined()
+        expect(inputAriaRef?.role).toBe('textbox')
+
+        // Test batch getRefsForLocators - single evaluate call for multiple elements
+        const batchRefs = await ariaResult.getRefsForLocators([submitBtn, aboutLink, inputField])
+        console.log('Batch refs:', batchRefs)
+        expect(batchRefs).toHaveLength(3)
+        expect(batchRefs[0]?.ref).toBe(btnAriaRef?.ref)
+        expect(batchRefs[1]?.ref).toBe(linkAriaRef?.ref)
+        expect(batchRefs[2]?.ref).toBe(inputAriaRef?.ref)
+
+        await browser.close()
+        await page.close()
+    }, 60000)
+
+    it('should show aria ref labels on real pages and save screenshots', async () => {
+        const browserContext = getBrowserContext()
+        const serviceWorker = await getExtensionServiceWorker(browserContext)
+
+        const { showAriaRefLabels, hideAriaRefLabels } = await import('./aria-snapshot.js')
+        const fs = await import('node:fs')
+        const path = await import('node:path')
+
+        // Create assets folder for screenshots
+        const assetsDir = path.join(path.dirname(new URL(import.meta.url).pathname), 'assets')
+        if (!fs.existsSync(assetsDir)) {
+            fs.mkdirSync(assetsDir, { recursive: true })
+        }
+
+        const testPages = [
+            { name: 'hacker-news', url: 'https://news.ycombinator.com/' },
+            { name: 'google', url: 'https://www.google.com/' },
+            { name: 'github', url: 'https://github.com/' },
+        ]
+
+        // Create all pages and enable extension for each
+        const pages = await Promise.all(
+            testPages.map(async ({ name, url }) => {
+                const page = await browserContext.newPage()
+                await page.goto(url, { waitUntil: 'domcontentloaded' })
+                return { name, url, page }
+            })
+        )
+
+        // Enable extension for each tab (must be done sequentially as it uses active tab)
+        for (const { page } of pages) {
+            await page.bringToFront()
+            await serviceWorker.evaluate(async () => {
+                await globalThis.toggleExtensionForActiveTab()
+            })
+        }
+
+        // Connect CDP and process all pages concurrently
+        const browser = await chromium.connectOverCDP(getCdpUrl({ port: TEST_PORT }))
+
+        await Promise.all(
+            pages.map(async ({ name, url, page }) => {
+                const cdpPage = browser.contexts()[0].pages().find(p => p.url().includes(new URL(url).hostname))
+
+                if (!cdpPage) {
+                    console.log(`Could not find CDP page for ${name}, skipping...`)
+                    return
+                }
+
+                // Show aria ref labels
+                const { snapshot, labelCount } = await showAriaRefLabels({ page: cdpPage })
+                console.log(`${name}: ${labelCount} labels shown`)
+                expect(labelCount).toBeGreaterThan(0)
+
+                // Take screenshot with labels visible
+                const screenshot = await cdpPage.screenshot({ type: 'png', fullPage: false })
+                const screenshotPath = path.join(assetsDir, `aria-labels-${name}.png`)
+                fs.writeFileSync(screenshotPath, screenshot)
+                console.log(`Screenshot saved: ${screenshotPath}`)
+
+                // Save snapshot text for reference
+                const snapshotPath = path.join(assetsDir, `aria-labels-${name}-snapshot.txt`)
+                fs.writeFileSync(snapshotPath, snapshot)
+
+                // Verify labels are in DOM
+                const labelElements = await cdpPage.evaluate(() =>
+                    document.querySelectorAll('.__pw_label__').length
+                )
+                expect(labelElements).toBe(labelCount)
+
+                // Cleanup
+                await hideAriaRefLabels({ page: cdpPage })
+
+                // Verify labels removed
+                const labelsAfterHide = await cdpPage.evaluate(() =>
+                    document.getElementById('__playwriter_labels__')
+                )
+                expect(labelsAfterHide).toBeNull()
+
+                await page.close()
+            })
+        )
+
+        await browser.close()
+        console.log(`Screenshots saved to: ${assetsDir}`)
+    }, 120000)
+
 })
 
 
@@ -2881,3 +3234,69 @@ describe('CDP Session Tests', () => {
         await page.close()
     }, 60000)
 })
+
+describe('Auto-enable Tests', () => {
+    let testCtx: TestContext | null = null
+
+    // Set env var before any setup runs
+    process.env.PLAYWRITER_AUTO_ENABLE = '1'
+
+    beforeAll(async () => {
+        testCtx = await setupTestContext({ tempDirPrefix: 'pw-auto-test-' })
+
+        // Disconnect all tabs to start with a clean state
+        const serviceWorker = await getExtensionServiceWorker(testCtx.browserContext)
+        await serviceWorker.evaluate(async () => {
+            await globalThis.disconnectEverything()
+        })
+        await new Promise(r => setTimeout(r, 100))
+    }, 600000)
+
+    afterAll(async () => {
+        delete process.env.PLAYWRITER_AUTO_ENABLE
+        await cleanupTestContext(testCtx)
+        testCtx = null
+    })
+
+    const getBrowserContext = () => {
+        if (!testCtx?.browserContext) throw new Error('Browser not initialized')
+        return testCtx.browserContext
+    }
+
+    it('should auto-create a tab when Playwright connects and no tabs exist', async () => {
+        const browserContext = getBrowserContext()
+        const serviceWorker = await getExtensionServiceWorker(browserContext)
+
+        // Verify no tabs are connected
+        const tabCountBefore = await serviceWorker.evaluate(() => {
+            const state = globalThis.getExtensionState()
+            return state.tabs.size
+        })
+        expect(tabCountBefore).toBe(0)
+
+        // Connect Playwright - this should trigger auto-create
+        const browser = await chromium.connectOverCDP(getCdpUrl({ port: TEST_PORT }))
+
+        // Verify a page was auto-created
+        const pages = browser.contexts()[0].pages()
+        expect(pages.length).toBeGreaterThan(0)
+        expect(pages.length).toBe(1)
+
+        const autoCreatedPage = pages[0]
+        expect(autoCreatedPage.url()).toBe('about:blank')
+
+        // Verify extension state shows the tab as connected
+        const tabCountAfter = await serviceWorker.evaluate(() => {
+            const state = globalThis.getExtensionState()
+            return state.tabs.size
+        })
+        expect(tabCountAfter).toBe(1)
+
+        // Verify we can interact with the auto-created page
+        await autoCreatedPage.setContent('<h1>Auto-created page</h1>')
+        const title = await autoCreatedPage.locator('h1').textContent()
+        expect(title).toBe('Auto-created page')
+
+        await browser.close()
+    }, 60000)
+})