e2e-pilot 0.0.69

package/src/cli.ts

@@ -0,0 +1,250 @@
+#!/usr/bin/env node
+
+import { cac } from 'cac'
+import fs from 'node:fs'
+import path from 'node:path'
+import { spawn } from 'node:child_process'
+import { fileURLToPath } from 'node:url'
+import { chromium, Page } from 'playwright-core'
+import { startE2EPilotCDPRelayServer } from './cdp-relay.js'
+import { createFileLogger } from './create-logger.js'
+import {
+  getCdpUrl,
+  VERSION,
+  sleep,
+  RELAY_PORT,
+  getServerVersion,
+  setDeviceScaleFactorForMacOS,
+  preserveSystemColorScheme,
+} from './utils.js'
+import { executeCode } from './execute.js'
+import { CDPSession } from './cdp-session.js'
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url))
+
+const cli = cac('e2e-pilot')
+
+cli
+  .command('', 'Start the MCP server (default)')
+  .option('--host <host>', 'Remote relay server host to connect to (or use E2E_PILOT_HOST env var)')
+  .option('--token <token>', 'Authentication token (or use E2E_PILOT_TOKEN env var)')
+  .action(async (options: { host?: string; token?: string }) => {
+    const { startMcp } = await import('./mcp.js')
+    await startMcp({
+      host: options.host,
+      token: options.token,
+    })
+  })
+
+cli
+  .command('serve', 'Start the CDP relay server for remote MCP connections')
+  .option('--host <host>', 'Host to bind to', { default: '0.0.0.0' })
+  .option('--token <token>', 'Authentication token (or use E2E_PILOT_TOKEN env var)')
+  .action(async (options: { host: string; token?: string }) => {
+    const token = options.token || process.env.E2E_PILOT_TOKEN
+    if (!token) {
+      console.error('Error: Authentication token is required.')
+      console.error('Provide --token <token> or set E2E_PILOT_TOKEN environment variable.')
+      process.exit(1)
+    }
+
+    const logger = createFileLogger()
+
+    process.title = 'e2e-pilot-serve'
+
+    process.on('uncaughtException', async (err) => {
+      await logger.error('Uncaught Exception:', err)
+      process.exit(1)
+    })
+
+    process.on('unhandledRejection', async (reason) => {
+      await logger.error('Unhandled Rejection:', reason)
+      process.exit(1)
+    })
+
+    const server = await startE2EPilotCDPRelayServer({
+      port: RELAY_PORT,
+      host: options.host,
+      token,
+      logger,
+    })
+
+    console.log('E2E Pilot CDP relay server started')
+    console.log(`  Host: ${options.host}`)
+    console.log(`  Port: ${RELAY_PORT}`)
+    console.log(`  Token: (configured)`)
+    console.log(`  Logs: ${logger.logFilePath}`)
+    console.log('')
+    console.log('Endpoints:')
+    console.log(`  Extension: ws://${options.host}:${RELAY_PORT}/extension`)
+    console.log(`  CDP:       ws://${options.host}:${RELAY_PORT}/cdp/<client-id>?token=<token>`)
+    console.log('')
+    console.log('Press Ctrl+C to stop.')
+
+    process.on('SIGINT', () => {
+      console.log('\nShutting down...')
+      server.close()
+      process.exit(0)
+    })
+
+    process.on('SIGTERM', () => {
+      console.log('\nShutting down...')
+      server.close()
+      process.exit(0)
+    })
+  })
+
+cli
+  .command('run [...files]', 'Execute Playwright code from file(s), --code, or stdin and exit')
+  .option('-c, --code <code>', 'Execute code passed as a string')
+  .option('--timeout <ms>', 'Execution timeout in milliseconds', { default: 30000 })
+  .option('--host <host>', 'Remote relay server host (or use E2E_PILOT_HOST env var)')
+  .option('--token <token>', 'Authentication token for remote (or use E2E_PILOT_TOKEN env var)')
+  .action(async (files: string[], options: { code?: string; timeout: number; host?: string; token?: string }) => {
+    // Priority: --code flag > stdin > files
+    const code: string = await (async () => {
+      if (options.code) {
+        return options.code
+      }
+      if (!process.stdin.isTTY) {
+        return await readStdin()
+      }
+      if (files.length > 0) {
+        const codeChunks: string[] = []
+        for (const file of files) {
+          const filePath = path.resolve(file)
+          if (!fs.existsSync(filePath)) {
+            console.error(`Error: File not found: ${filePath}`)
+            process.exit(1)
+          }
+          const content = fs.readFileSync(filePath, 'utf-8')
+          codeChunks.push(content)
+        }
+        return codeChunks.join('\n')
+      }
+      console.error('Error: Provide code via --code, stdin, or file path(s)')
+      console.error('Usage: e2e-pilot run -c "code" | e2e-pilot run <file.js> | echo "code" | e2e-pilot run')
+      process.exit(1)
+    })()
+
+    // Set up environment for remote connection if specified
+    const host = options.host || process.env.E2E_PILOT_HOST
+    const token = options.token || process.env.E2E_PILOT_TOKEN
+
+    try {
+      // Ensure relay server is running (for local mode)
+      if (!host) {
+        await ensureRelayServerForCli()
+      }
+
+      // Connect to browser
+      const cdpEndpoint = getCdpUrl(host ? { host, port: RELAY_PORT, token } : { port: RELAY_PORT })
+      console.error(`Connecting to CDP endpoint: ${cdpEndpoint}`)
+      const browser = await chromium.connectOverCDP(cdpEndpoint)
+      console.error('Connected to browser')
+
+      const contexts = browser.contexts()
+      const context = contexts.length > 0 ? contexts[0] : await browser.newContext()
+      const pages = context.pages()
+      if (pages.length === 0) {
+        console.error('Error: No browser tabs are connected.')
+        console.error('Please install and enable the E2E Pilot extension on at least one tab.')
+        process.exit(1)
+      }
+      const page = pages[0]
+
+      // Apply macOS device scale factor
+      await setDeviceScaleFactorForMacOS(context)
+      await preserveSystemColorScheme(context)
+
+      // Execute the code
+      const result = await executeCode({
+        code,
+        timeout: options.timeout,
+        deps: {
+          page,
+          context,
+          userState: {},
+          browserLogs: new Map(),
+          lastSnapshots: new WeakMap(),
+          cdpSessionCache: new WeakMap<Page, CDPSession>(),
+          getPageTargetId: async (p: Page) => (p as any)._guid || '',
+          getCdpUrl: () => getCdpUrl(host ? { host, port: RELAY_PORT, token } : { port: RELAY_PORT }),
+          resetConnection: async () => {
+            throw new Error('resetConnection is not supported in run mode')
+          },
+          logger: (...args) => {
+            console.error(...args)
+          },
+          sendLogToRelayServer: () => {},
+        },
+      })
+
+      // Output result
+      for (const item of result.content) {
+        if (item.type === 'text') {
+          console.log(item.text)
+        } else if (item.type === 'image') {
+          console.log(`[Image: ${item.mimeType}]`)
+        }
+      }
+
+      // Disconnect and exit
+      await browser.close().catch(() => {})
+      process.exit(result.isError ? 1 : 0)
+    } catch (error: any) {
+      console.error('Error:', error.message)
+      process.exit(1)
+    }
+  })
+
+async function ensureRelayServerForCli(): Promise<void> {
+  const serverVersion = await getServerVersion()
+  if (serverVersion === VERSION) {
+    return
+  }
+
+  console.error('Starting CDP relay server...')
+
+  const dev = process.env.E2E_PILOT_NODE_ENV === 'development'
+  const scriptPath = dev
+    ? path.resolve(__dirname, '../src/start-relay-server.ts')
+    : path.resolve(__dirname, 'start-relay-server.js')
+
+  const serverProcess = spawn(dev ? 'tsx' : process.execPath, [scriptPath], {
+    detached: true,
+    stdio: 'ignore',
+  })
+  serverProcess.unref()
+
+  for (let i = 0; i < 10; i++) {
+    await sleep(500)
+    const newVersion = await getServerVersion()
+    if (newVersion === VERSION) {
+      console.error('CDP relay server started')
+      await sleep(1000)
+      return
+    }
+  }
+
+  throw new Error('Failed to start CDP relay server after 5 seconds')
+}
+
+async function readStdin(): Promise<string> {
+  return new Promise((resolve, reject) => {
+    let data = ''
+    process.stdin.setEncoding('utf-8')
+    process.stdin.on('data', (chunk) => {
+      data += chunk
+    })
+    process.stdin.on('end', () => {
+      resolve(data)
+    })
+    process.stdin.on('error', reject)
+  })
+}
+
+cli.help()
+cli.version(VERSION)
+
+cli.parse()

package/src/create-logger.ts

@@ -0,0 +1,36 @@
+import fs from 'node:fs'
+import path from 'node:path'
+import util from 'node:util'
+import stripAnsi from 'strip-ansi'
+import { LOG_FILE_PATH } from './utils.js'
+
+export type Logger = {
+  log(...args: unknown[]): Promise<void>
+  error(...args: unknown[]): Promise<void>
+  logFilePath: string
+}
+
+export function createFileLogger({ logFilePath }: { logFilePath?: string } = {}): Logger {
+  const resolvedLogFilePath = logFilePath || LOG_FILE_PATH
+  const logDir = path.dirname(resolvedLogFilePath)
+  if (!fs.existsSync(logDir)) {
+    fs.mkdirSync(logDir, { recursive: true })
+  }
+  fs.writeFileSync(resolvedLogFilePath, '')
+
+  let queue: Promise<void> = Promise.resolve()
+
+  const log = (...args: unknown[]): Promise<void> => {
+    const message = args.map(arg =>
+      typeof arg === 'string' ? arg : util.inspect(arg, { depth: null, colors: false })
+    ).join(' ')
+    queue = queue.then(() => fs.promises.appendFile(resolvedLogFilePath, stripAnsi(message) + '\n'))
+    return queue
+  }
+
+  return {
+    log,
+    error: log,
+    logFilePath: resolvedLogFilePath,
+  }
+}

package/src/debugger-examples-types.ts

@@ -0,0 +1,13 @@
+import type { Page, Locator } from 'playwright-core'
+import type { CDPSession } from './cdp-session.js'
+import type { Debugger } from './debugger.js'
+import type { Editor } from './editor.js'
+import type { StylesResult } from './styles.js'
+
+export declare const page: Page
+export declare const getCDPSession: (options: { page: Page }) => Promise<CDPSession>
+export declare const createDebugger: (options: { cdp: CDPSession }) => Debugger
+export declare const createEditor: (options: { cdp: CDPSession }) => Editor
+export declare const getStylesForLocator: (options: { locator: Locator; includeUserAgentStyles?: boolean }) => Promise<StylesResult>
+export declare const formatStylesAsText: (styles: StylesResult) => string
+export declare const console: { log: (...args: unknown[]) => void }

package/src/debugger-examples.ts

@@ -0,0 +1,66 @@
+import { page, getCDPSession, createDebugger, console } from './debugger-examples-types.js'
+
+// Example: List available scripts and set a breakpoint
+async function listScriptsAndSetBreakpoint() {
+  const cdp = await getCDPSession({ page })
+  const dbg = createDebugger({ cdp })
+  await dbg.enable()
+
+  const scripts = await dbg.listScripts({ search: 'app' })
+  console.log(scripts)
+
+  if (scripts.length > 0) {
+    const bpId = await dbg.setBreakpoint({ file: scripts[0].url, line: 100 })
+    console.log('Breakpoint set:', bpId)
+  }
+}
+
+// Example: Inspect state when paused at a breakpoint
+async function inspectWhenPaused() {
+  const cdp = await getCDPSession({ page })
+  const dbg = createDebugger({ cdp })
+  await dbg.enable()
+
+  if (dbg.isPaused()) {
+    const loc = await dbg.getLocation()
+    console.log('Paused at:', loc.url, 'line', loc.lineNumber)
+    console.log('Source:', loc.sourceContext)
+
+    const vars = await dbg.inspectLocalVariables()
+    console.log('Variables:', vars)
+
+    const result = await dbg.evaluate({ expression: 'myVar.length' })
+    console.log('myVar.length =', result.value)
+
+    await dbg.stepOver()
+  }
+}
+
+// Example: Step through code
+async function stepThroughCode() {
+  const cdp = await getCDPSession({ page })
+  const dbg = createDebugger({ cdp })
+  await dbg.enable()
+
+  await dbg.setBreakpoint({ file: 'https://example.com/app.js', line: 42 })
+
+  if (dbg.isPaused()) {
+    await dbg.stepOver()
+    await dbg.stepInto()
+    await dbg.stepOut()
+    await dbg.resume()
+  }
+}
+
+// Example: Cleanup all breakpoints
+async function cleanupBreakpoints() {
+  const cdp = await getCDPSession({ page })
+  const dbg = createDebugger({ cdp })
+
+  const breakpoints = dbg.listBreakpoints()
+  for (const bp of breakpoints) {
+    await dbg.deleteBreakpoint({ breakpointId: bp.id })
+  }
+}
+
+export { listScriptsAndSetBreakpoint, inspectWhenPaused, stepThroughCode, cleanupBreakpoints }