playwriter 0.0.33 → 0.0.37

package/dist/mcp.test.js

@@ -167,8 +167,8 @@ describe('MCP Server Tests', () => {
 
           Return value:
           {
-            \"url\": \"https://example.com/\",
-            \"title\": \"Example Domain\"
+            "url": "https://example.com/",
+            "title": "Example Domain"
           }",
               "type": "text",
             },
@@ -557,7 +557,7 @@ describe('MCP Server Tests', () => {
         expect(cdpPage?.url()).toBe(targetUrl);
         await browser.close();
         await page.close();
-    });
+    }, 60000);
     it('should be able to reconnect after disconnecting everything', async () => {
         const browserContext = getBrowserContext();
         const serviceWorker = await getExtensionServiceWorker(browserContext);
@@ -676,6 +676,73 @@ describe('MCP Server Tests', () => {
         // Clean up - navigate page back to about:blank to not interfere with other 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.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.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.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({
@@ -1057,6 +1124,73 @@ describe('MCP Server Tests', () => {
         await cdpBrowser.close();
         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);
@@ -1647,8 +1781,8 @@ describe('MCP Server Tests', () => {
             {
               "text": "Return value:
           {
-            "error": "Page not found",
-            "urls": []
+            \"matchesDark\": false,
+            \"matchesLight\": true
           }",
               "type": "text",
             },
@@ -1656,6 +1790,154 @@ 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);
 });
 function tryJsonParse(str) {
     try {
@@ -2397,4 +2679,57 @@ describe('CDP Session Tests', () => {
         await page.close();
     }, 60000);
 });
+describe('Auto-enable Tests', () => {
+    let testCtx = 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);
+});
 //# sourceMappingURL=mcp.test.js.map