playwriter 0.0.3 → 0.0.4

package/src/mcp-client.ts

@@ -8,66 +8,66 @@ import url from 'node:url'
 const __filename = url.fileURLToPath(import.meta.url)
 
 export interface CreateTransportOptions {
-    clientName?: string
+  clientName?: string
 }
 
 export async function createTransport(args: string[]): Promise<{
-    transport: Transport
-    stderr: Stream | null
+  transport: Transport
+  stderr: Stream | null
 }> {
-    const transport = new StdioClientTransport({
-        command: 'pnpm',
-        args: ['vite-node', path.join(path.dirname(__filename), 'mcp.ts'), ...args],
-        cwd: path.join(path.dirname(__filename), '..'),
-        stderr: 'pipe',
-        env: {
-            ...process.env,
-            DEBUG: 'playwriter:mcp:test',
-            DEBUG_COLORS: '0',
-            DEBUG_HIDE_DATE: '1',
-        },
-    })
+  const transport = new StdioClientTransport({
+    command: 'pnpm',
+    args: ['vite-node', path.join(path.dirname(__filename), 'mcp.ts'), ...args],
+    cwd: path.join(path.dirname(__filename), '..'),
+    stderr: 'pipe',
+    env: {
+      ...process.env,
+      DEBUG: 'playwriter:mcp:test',
+      DEBUG_COLORS: '0',
+      DEBUG_HIDE_DATE: '1',
+    },
+  })
 
-    return {
-        transport,
-        stderr: transport.stderr!,
-    }
+  return {
+    transport,
+    stderr: transport.stderr!,
+  }
 }
 
 export async function createMCPClient(options?: CreateTransportOptions): Promise<{
-    client: Client
-    stderr: string
-    cleanup: () => Promise<void>
+  client: Client
+  stderr: string
+  cleanup: () => Promise<void>
 }> {
-    const client = new Client({
-        name: options?.clientName ?? 'test',
-        version: '1.0.0'
-    })
+  const client = new Client({
+    name: options?.clientName ?? 'test',
+    version: '1.0.0',
+  })
 
-    const { transport, stderr } = await createTransport([])
+  const { transport, stderr } = await createTransport([])
 
-    let stderrBuffer = ''
-    stderr?.on('data', (data) => {
-        process.stderr.write(data)
+  let stderrBuffer = ''
+  stderr?.on('data', (data) => {
+    process.stderr.write(data)
 
-        stderrBuffer += data.toString()
-    })
+    stderrBuffer += data.toString()
+  })
 
-    await client.connect(transport)
-    await client.ping()
+  await client.connect(transport)
+  await client.ping()
 
-    const cleanup = async () => {
-        try {
-            await client.close()
-        } catch (e) {
-          console.error('Error during MCP client cleanup:', e)
-            // Ignore errors during cleanup
-        }
+  const cleanup = async () => {
+    try {
+      await client.close()
+    } catch (e) {
+      console.error('Error during MCP client cleanup:', e)
+      // Ignore errors during cleanup
     }
+  }
 
-    return {
-        client,
-        stderr: stderrBuffer,
-        cleanup,
-    }
+  return {
+    client,
+    stderr: stderrBuffer,
+    cleanup,
+  }
 }

package/src/mcp.test.ts

@@ -1,12 +1,37 @@
 import { createMCPClient } from './mcp-client.js'
-import { describe, it, expect, afterEach, beforeAll, afterAll } from 'vitest'
-import type { CallToolResult } from '@modelcontextprotocol/sdk/types.js'
+import { describe, it, expect, beforeAll, afterAll } from 'vitest'
+import { exec } from 'node:child_process'
+import { promisify } from 'node:util'
+
+const execAsync = promisify(exec)
+
+function js(strings: TemplateStringsArray, ...values: any[]): string {
+    return strings.reduce(
+        (result, str, i) => result + str + (values[i] || ''),
+        '',
+    )
+}
+
+async function killProcessOnPort(port: number): Promise<void> {
+    try {
+        const { stdout } = await execAsync(`lsof -ti:${port}`)
+        const pid = stdout.trim()
+        if (pid) {
+            await execAsync(`kill -9 ${pid}`)
+            console.log(`Killed process ${pid} on port ${port}`)
+            await new Promise((resolve) => setTimeout(resolve, 500))
+        }
+    } catch (error) {
+        // No process running on port or already killed
+    }
+}
 
 describe('MCP Server Tests', () => {
     let client: Awaited<ReturnType<typeof createMCPClient>>['client']
     let cleanup: (() => Promise<void>) | null = null
 
     beforeAll(async () => {
+        await killProcessOnPort(19988)
         const result = await createMCPClient()
         client = result.client
         cleanup = result.cleanup
@@ -19,217 +44,136 @@ describe('MCP Server Tests', () => {
         }
     })
 
-    it('should capture console logs', async () => {
-        // Connect first (open a new page)
-        const connectResult = await client.callTool({
-            name: 'new_page',
-            arguments: {},
-        })
-        expect(connectResult.content).toBeDefined()
-        expect(connectResult.content).toMatchInlineSnapshot(`
-          [
-            {
-              "text": "Created new page. URL: about:blank. Total pages: 20",
-              "type": "text",
+    it('should execute code and capture console output', async () => {
+        await client.callTool({
+            name: 'execute',
+            arguments: {
+                code: js`
+          const newPage = await context.newPage();
+          state.page = newPage;
+          if (!state.pages) state.pages = [];
+          state.pages.push(newPage);
+        `,
             },
-          ]
-        `)
+        })
 
-        // Navigate to a page and log something
         const result = await client.callTool({
             name: 'execute',
             arguments: {
-                code: `
-                    await page.goto('https://news.ycombinator.com');
-                    await page.evaluate(() => {
-                        console.log('Test log message');
-                        console.error('Test error message');
-                    });
-                `,
+                code: js`
+          await state.page.goto('https://news.ycombinator.com');
+          const title = await state.page.title();
+          console.log('Page title:', title);
+          return { url: state.page.url(), title };
+        `,
             },
         })
-        expect(result.content).toBeDefined()
         expect(result.content).toMatchInlineSnapshot(`
           [
             {
-              "text": "Code executed successfully (no output)",
-              "type": "text",
-            },
-          ]
-        `)
-
-        // Get console logs
-        const logsResult = (await client.callTool({
-            name: 'console_logs',
-            arguments: {
-                limit: 10,
-            },
-        })) as CallToolResult
-
-        expect(logsResult.content).toBeDefined()
-        expect(logsResult.content).toMatchInlineSnapshot(`
-          [
-            {
-              "text": "[log]: Test log message :1:32
-          [error]: Test error message :2:32",
+              "text": "Console output:
+          [log] Page title: Hacker News
+
+          Return value:
+          {
+            "url": "https://news.ycombinator.com/",
+            "title": "Hacker News"
+          }",
               "type": "text",
             },
           ]
         `)
-
-        // Close the page opened
-        await client.callTool({
-            name: 'close_page',
-            arguments: {},
-        })
+        expect(result.content).toBeDefined()
     }, 30000)
 
-    it('should capture accessibility snapshot of hacker news', async () => {
-        // Create new page
-        await client.callTool({
-            name: 'new_page',
-            arguments: {},
-        })
-
-        // Navigate to a specific old Hacker News story that won't change
+    it('should get accessibility snapshot of hacker news', async () => {
         await client.callTool({
             name: 'execute',
             arguments: {
-                code: `await page.goto('https://news.ycombinator.com/item?id=1', { waitUntil: 'networkidle' })`,
+                code: js`
+          const newPage = await context.newPage();
+          state.page = newPage;
+          if (!state.pages) state.pages = [];
+          state.pages.push(newPage);
+        `,
             },
         })
 
-        // Get initial accessibility snapshot
-        const initialSnapshot = await client.callTool({
-            name: 'accessibility_snapshot',
-            arguments: {},
+        const result = await client.callTool({
+            name: 'execute',
+            arguments: {
+                code: js`
+          await state.page.goto('https://news.ycombinator.com/item?id=1', { waitUntil: 'networkidle' });
+          const snapshot = await state.page._snapshotForAI();
+          return snapshot;
+        `,
+            },
         })
-        expect(initialSnapshot.content).toBeDefined()
 
-        // Save initial snapshot
         const initialData =
-            typeof initialSnapshot === 'object' &&
-            initialSnapshot.content?.[0]?.text
-                ? tryJsonParse(initialSnapshot.content[0].text)
-                : initialSnapshot
-        expect(initialData).toMatchFileSnapshot(
+            typeof result === 'object' && result.content?.[0]?.text
+                ? tryJsonParse(result.content[0].text)
+                : result
+        await expect(initialData).toMatchFileSnapshot(
             'snapshots/hacker-news-initial-accessibility.md',
         )
+        expect(result.content).toBeDefined()
         expect(initialData).toContain('table')
         expect(initialData).toContain('Hacker News')
+    }, 30000)
 
-        // Focus on first link on the page
-        await client.callTool({
-            name: 'execute',
-            arguments: {
-                code: `
-                    // Find and focus the first link
-                    const firstLink = await page.$('a')
-                    if (firstLink) {
-                        await firstLink.focus()
-                        const linkText = await firstLink.textContent()
-                        console.log('Focused on first link:', linkText)
-                    }
-                `,
-            },
-        })
-
-        // Get snapshot after focusing
-        const focusedSnapshot = await client.callTool({
-            name: 'accessibility_snapshot',
-            arguments: {},
-        })
-        expect(focusedSnapshot.content).toBeDefined()
-
-        // Save focused snapshot
-        const focusedData =
-            typeof focusedSnapshot === 'object' &&
-            focusedSnapshot.content?.[0]?.text
-                ? tryJsonParse(focusedSnapshot.content[0].text)
-                : focusedSnapshot
-        expect(focusedData).toMatchFileSnapshot(
-            'snapshots/hacker-news-focused-accessibility.md',
-        )
-
-        // Verify the snapshot contains expected content
-        expect(focusedData).toBeDefined()
-        expect(focusedData).toContain('link')
-
-        // Press Tab to go to next item
+    it('should get accessibility snapshot of shadcn UI', async () => {
         await client.callTool({
             name: 'execute',
             arguments: {
-                code: `
-                    await page.keyboard.press('Tab')
-                    console.log('Pressed Tab key')
-                `,
+                code: js`
+          const newPage = await context.newPage();
+          state.page = newPage;
+          if (!state.pages) state.pages = [];
+          state.pages.push(newPage);
+        `,
             },
         })
 
-        // Get snapshot after tab navigation
-        const tabbedSnapshot = await client.callTool({
-            name: 'accessibility_snapshot',
-            arguments: {},
-        })
-        expect(tabbedSnapshot.content).toBeDefined()
-
-        // Save tabbed snapshot
-        const tabbedData =
-            typeof tabbedSnapshot === 'object' &&
-            tabbedSnapshot.content?.[0]?.text
-                ? tryJsonParse(tabbedSnapshot.content[0].text)
-                : tabbedSnapshot
-        expect(tabbedData).toMatchFileSnapshot(
-            'snapshots/hacker-news-tabbed-accessibility.md',
-        )
-
-        // Verify the snapshot is different
-        expect(tabbedData).toBeDefined()
-        expect(tabbedData).toContain('Hacker News')
-
-        // Close the page opened
-        await client.callTool({
-            name: 'close_page',
-            arguments: {},
-        })
-    }, 30000)
-
-    it('should capture accessibility snapshot of shadcn UI', async () => {
-        // Create new page
-        await client.callTool({
-            name: 'new_page',
-            arguments: {},
-        })
-
-        // Navigate to shadcn UI
-        await client.callTool({
+        const snapshot = await client.callTool({
             name: 'execute',
             arguments: {
-                code: `await page.goto('https://ui.shadcn.com/', { waitUntil: 'networkidle' })`,
+                code: js`
+          await state.page.goto('https://ui.shadcn.com/', { waitUntil: 'networkidle' });
+          const snapshot = await state.page._snapshotForAI();
+          return snapshot;
+        `,
             },
         })
 
-        // Get accessibility snapshot
-        const snapshot = await client.callTool({
-            name: 'accessibility_snapshot',
-            arguments: {},
-        })
-        expect(snapshot.content).toBeDefined()
-
-        // Save snapshot
         const data =
             typeof snapshot === 'object' && snapshot.content?.[0]?.text
                 ? tryJsonParse(snapshot.content[0].text)
                 : snapshot
-        expect(data).toMatchFileSnapshot('snapshots/shadcn-ui-accessibility.md')
+        await expect(data).toMatchFileSnapshot('snapshots/shadcn-ui-accessibility.md')
+        expect(snapshot.content).toBeDefined()
         expect(data).toContain('shadcn')
+    }, 30000)
 
-        // Close the page opened
-        await client.callTool({
-            name: 'close_page',
-            arguments: {},
+    it('should close all created pages', async () => {
+        const result = await client.callTool({
+            name: 'execute',
+            arguments: {
+                code: js`
+          if (state.pages && state.pages.length > 0) {
+            for (const page of state.pages) {
+              await page.close();
+            }
+            const closedCount = state.pages.length;
+            state.pages = [];
+            return { closedCount };
+          }
+          return { closedCount: 0 };
+        `,
+            },
         })
-    }, 30000)
+
+    })
 })
 function tryJsonParse(str: string) {
     try {