playwriter 0.0.103 → 0.1.0

package/src/aria-snapshots/prosemirror-interactive.txt

@@ -60,4 +60,6 @@
         - role=link[name="Backers"]
         - role=link[name="Code of Conduct"]
         - role=link[name="Discuss"] >> nth=1
-        - role=link[name="Report an Issue"]
+        - role=link[name="Report an Issue"]
+  - role=button[name="Pin element — click any element to copy its Playwriter reference"]
+  - role=button[name="Close Playwriter toolbar"]

package/src/aria-snapshots/prosemirror-raw.txt

@@ -138,4 +138,7 @@
         - role=link[name="Backers"]
         - role=link[name="Code of Conduct"]
         - role=link[name="Discuss"] >> nth=1
-        - role=link[name="Report an Issue"]
+        - role=link[name="Report an Issue"]
+  - toolbar "Playwriter tools":
+    - role=button[name="Pin element — click any element to copy its Playwriter reference"]
+    - role=button[name="Close Playwriter toolbar"]

package/src/cdp-relay.ts

@@ -163,6 +163,9 @@ export async function startPlayWriterCDPRelayServer({
     if (info.email) {
       return `email:${info.email}`
     }
+    if (info.installId) {
+      return `install:${info.browser || 'unknown'}:${info.installId}`
+    }
     if (info.browser) {
       return `browser:${info.browser}`
     }
@@ -1264,11 +1267,13 @@ export async function startPlayWriterCDPRelayServer({
     const browser = c.req.query('browser')
     const email = c.req.query('email')
     const id = c.req.query('id')
+    const installId = c.req.query('installId')
     const version = c.req.query('v')
     return {
       browser: browser || undefined,
       email: email || undefined,
       id: id || undefined,
+      installId: installId || undefined,
       version: version || undefined,
     }
   }

package/src/cli-help.test.ts

@@ -0,0 +1,41 @@
+// Verifies CLI help stays runnable without loading browser-start-only dependencies.
+import path from 'node:path'
+import { fileURLToPath } from 'node:url'
+import { execFile } from 'node:child_process'
+import { promisify } from 'node:util'
+import { describe, expect, test } from 'vitest'
+
+const execFileAsync = promisify(execFile)
+const currentDir = path.dirname(fileURLToPath(import.meta.url))
+const playwriterDir = path.resolve(currentDir, '..')
+const viteNodeBinary = path.join(
+  playwriterDir,
+  'node_modules',
+  '.bin',
+  process.platform === 'win32' ? 'vite-node.cmd' : 'vite-node',
+)
+
+async function runCli(args: string[]): Promise<{ stdout: string; stderr: string }> {
+  return execFileAsync(viteNodeBinary, ['src/cli.ts', ...args], {
+    cwd: playwriterDir,
+    env: process.env,
+  })
+}
+
+describe('playwriter cli help', () => {
+  test('renders root help without crashing', async () => {
+    const { stdout, stderr } = await runCli(['--help'])
+
+    expect(stdout).toContain('playwriter')
+    expect(stdout).toContain('serve')
+    expect(stderr).toBe('')
+  }, 30000)
+
+  test('renders serve help without crashing', async () => {
+    const { stdout, stderr } = await runCli(['serve', '--help'])
+
+    expect(stdout).toContain('Start the relay server on this machine')
+    expect(stdout).toContain('--replace')
+    expect(stderr).toBe('')
+  }, 30000)
+})

package/src/cli.ts

@@ -7,13 +7,6 @@ import { fileURLToPath } from 'node:url'
 import { goke } from 'goke'
 import { z } from 'zod'
 import pc from 'picocolors'
-import {
-  getBrowserLaunchArgs,
-  getDefaultBrowserUserDataDir,
-  startBrowserProcess,
-} from './browser-launch.js'
-import { resolveBrowserExecutablePath, shouldUseHeadlessByDefault } from './browser-config.js'
-import { getBundledExtensionPath } from './package-paths.js'
 
 // Prevent Buffers from dumping hex bytes in util.inspect output.
 Buffer.prototype[util.inspect.custom] = function () {
@@ -52,6 +45,14 @@ cli
       }
 
       try {
+        // Avoid loading playwright-core during generic CLI startup/help. This command
+        // is the only path that needs browser discovery and bundled extension launch.
+        const [{ getBrowserLaunchArgs, getDefaultBrowserUserDataDir, startBrowserProcess }, { resolveBrowserExecutablePath, shouldUseHeadlessByDefault }, { getBundledExtensionPath }] = await Promise.all([
+          import('./browser-launch.js'),
+          import('./browser-config.js'),
+          import('./package-paths.js'),
+        ])
+
         await ensureRelayServer({ logger: console, env: cliRelayEnv })
 
         const browserPath = resolveBrowserExecutablePath({ browserPath: binaryPath })
@@ -324,7 +325,11 @@ cli
   .option('--direct [endpoint]', 'Use direct CDP connection without the extension. Enable debugging first at chrome://inspect/#remote-debugging or launch Chrome with --remote-debugging-port=9222. Auto-discovers instances or accepts an explicit ws:// endpoint')
   .action(async (options) => {
     const isLocal = !options.host && !process.env.PLAYWRITER_HOST
-    const directEndpoint = typeof options.direct === 'string' ? options.direct : null
+    // goke 6.6: optional-value flags are string | undefined
+    //   `--direct ws://...` → 'ws://...' (explicit endpoint)
+    //   `--direct`          → ''          (bare flag, auto-discover)
+    //   (omitted)           → undefined   (don't use direct CDP)
+    const directEndpoint = options.direct || null
 
     // If --direct with explicit endpoint, resolve it (handles host:port → ws://) then skip discovery
     if (directEndpoint) {
@@ -344,7 +349,7 @@ cli
     }
 
     // If --direct with no endpoint, discover Chrome instances
-    if (options.direct === true) {
+    if (options.direct === '') {
       if (!isLocal) {
         console.error('Error: --direct auto-discovery only works locally.')
         console.error('For remote relay, pass an explicit endpoint reachable from the relay host:')

package/src/executor.ts

@@ -37,7 +37,7 @@ import { getPageMarkdown, type GetPageMarkdownOptions } from './page-markdown.js
 import { createRecordingApi } from './screen-recording.js'
 import { createDemoVideo } from './ffmpeg.js'
 import { type GhostCursorClientOptions } from './ghost-cursor.js'
-import { RecordingGhostCursorController } from './recording-ghost-cursor.js'
+import { GhostCursorController } from './ghost-cursor-controller.js'
 
 const __filename = fileURLToPath(import.meta.url)
 const __dirname = path.dirname(__filename)
@@ -312,6 +312,8 @@ export class PlaywrightExecutor {
   private sessionCwd: string | null
   private hasWarnedExtensionOutdated = false
 
+  private ghostCursorController: GhostCursorController
+
   constructor(options: ExecutorOptions) {
     this.cdpConfig = options.cdpConfig
     this.logger = options.logger || { log: console.log, error: console.error }
@@ -323,6 +325,13 @@ export class PlaywrightExecutor {
       this.sessionCwd || undefined,
     )
     this.sandboxedRequire = this.createSandboxedRequire(require)
+    this.ghostCursorController = new GhostCursorController({
+      logger: {
+        error: (...args: unknown[]) => {
+          this.logger.error(...args)
+        },
+      },
+    })
   }
 
   private createSandboxedRequire(originalRequire: NodeRequire): NodeRequire {
@@ -422,6 +431,9 @@ export class PlaywrightExecutor {
     const warning = getExtensionOutdatedWarning(playwriterVersion)
     if (warning) {
       this.logger.log(warning)
+      // Enqueue so MCP agents see version-skew messages in their next execute
+      // response — logger.log alone only reaches stdout, not the LLM.
+      this.enqueueWarning(warning)
       this.hasWarnedExtensionOutdated = true
     }
   }
@@ -433,7 +445,11 @@ export class PlaywrightExecutor {
     this.pagesWithListeners.add(page)
     this.setupPageCloseDetection(page)
     this.setupPageConsoleListener(page)
-    this.setupPopupDetection(page)
+    this.setupNewPageLogging(page)
+    this.ghostCursorController.attachToPage({ page })
+    page.on('close', () => {
+      this.ghostCursorController.detachFromPage({ page })
+    })
   }
 
   private setupPageCloseDetection(page: Page) {
@@ -495,20 +511,21 @@ export class PlaywrightExecutor {
     })
   }
 
-  private setupPopupDetection(page: Page) {
-    // Listen for popup events (window.open, target=_blank) on each page.
-    // This is more reliable than checking page.opener() on context 'page' event,
-    // which also fires for context.newPage() and CDP reconnection scenarios.
+  private setupNewPageLogging(page: Page) {
+    // page.on('popup') fires for window.open, target=_blank, and cmd+click
+    // (but not context.newPage() or CDP reconnection). The extension
+    // auto-relocates popups to tabs, so these pages are controllable via
+    // context.pages(). Enqueue synchronously so the warning lands in the
+    // enclosing execute() call's scope. initialUrl may be 'about:blank'
+    // for blank-then-scripted popups.
     page.on('popup', (popup) => {
-      const context = page.context()
-      const pages = context.pages()
+      const pages = popup.context().pages()
       const rawIndex = pages.indexOf(popup)
       const pageIndex = rawIndex >= 0 ? String(rawIndex) : 'unknown'
-      const url = popup.url()
+      const initialUrl = popup.url() || 'about:blank'
       this.enqueueWarning(
-        `Popup window detected (page index ${pageIndex}, url: ${url}). ` +
-          `Popup windows cannot be controlled by playwriter. ` +
-          `Repeat the interaction in a way that does not open a popup, or navigate to the URL directly in a new tab.`,
+        `New page opened from current page (index ${pageIndex}, initial url: ${initialUrl}). ` +
+          `Access it via context.pages()[${pageIndex}] to interact with it.`,
       )
     })
   }
@@ -1057,13 +1074,7 @@ export class PlaywrightExecutor {
       // This permission is granted when the user clicks the Playwriter extension icon on a tab.
       const relayPort = this.cdpConfig.port || 19988
       const self = this
-      const recordingGhostCursor = new RecordingGhostCursorController({
-        logger: {
-          error: (...args: unknown[]) => {
-            self.logger.error(...args)
-          },
-        },
-      })
+      const ghostCursorController = this.ghostCursorController
 
       const showGhostCursor = async (options?: ({ page?: Page } & GhostCursorClientOptions)) => {
         const targetPage = options?.page || page
@@ -1076,19 +1087,19 @@ export class PlaywrightExecutor {
           return rest
         })()
 
-        await recordingGhostCursor.show({ page: targetPage, cursorOptions })
+        await ghostCursorController.show({ page: targetPage, cursorOptions })
       }
 
       const hideGhostCursor = async (options?: { page?: Page }) => {
         const targetPage = options?.page || page
-        await recordingGhostCursor.hide({ page: targetPage })
+        await ghostCursorController.hide({ page: targetPage })
       }
 
       const recordingApi = createRecordingApi({
         context,
         defaultPage: page,
         relayPort,
-        ghostCursorController: recordingGhostCursor,
+        ghostCursorController,
         onStart: () => {
           self.recordingStartedAt = Date.now()
           self.executionTimestamps = []

package/src/extension-connection.test.ts

@@ -1,8 +1,12 @@
+import fs from 'node:fs'
+import os from 'node:os'
+import path from 'node:path'
 import { createMCPClient } from './mcp-client.js'
 import { describe, it, expect, beforeAll, afterAll } from 'vitest'
 import { chromium } from '@xmorse/playwright-core'
 import { getCdpUrl } from './utils.js'
 import { setupTestContext, cleanupTestContext, getExtensionServiceWorker, type TestContext, js } from './test-utils.js'
+import { getExtensionsStatus } from './relay-client.js'
 import './test-declarations.js'
 
 const TEST_PORT = 19990
@@ -660,6 +664,90 @@ describe('Extension Connection Tests', () => {
     await page.goto('about:blank')
   })
 
+  it('should keep an active browser connected when another Chromium context starts', async () => {
+    const browserContext = getBrowserContext()
+    const serviceWorker = await getExtensionServiceWorker(browserContext)
+
+    await serviceWorker.evaluate(async () => {
+      await globalThis.disconnectEverything()
+    })
+
+    const page = await browserContext.newPage()
+    const targetUrl = 'https://example.com/multi-context-stability'
+    await page.goto(targetUrl)
+    await page.waitForLoadState('domcontentloaded')
+    await page.bringToFront()
+
+    const enableResult = await serviceWorker.evaluate(async () => {
+      return await globalThis.toggleExtensionForActiveTab()
+    })
+    expect(enableResult.isConnected).toBe(true)
+
+    const secondUserDataDir = fs.mkdtempSync(path.join(os.tmpdir(), 'pw-conn-second-'))
+    const extensionPath = path.resolve(process.cwd(), '../extension', `dist-${TEST_PORT}`)
+    const secondContext = await chromium.launchPersistentContext(secondUserDataDir, {
+      channel: 'chromium',
+      headless: !process.env.HEADFUL,
+      colorScheme: 'dark',
+      args: [`--disable-extensions-except=${extensionPath}`, `--load-extension=${extensionPath}`],
+    })
+
+    try {
+      await getExtensionServiceWorker(secondContext)
+
+      const statusSnapshots: Array<{ keys: string[]; activeTargets: number[] }> = []
+      for (let i = 0; i < 4; i++) {
+        await new Promise((resolve) => {
+          setTimeout(resolve, 1000)
+        })
+        const statuses = await getExtensionsStatus(TEST_PORT)
+        statusSnapshots.push({
+          keys: statuses.map((status) => {
+            return status.stableKey || status.extensionId
+          }),
+          activeTargets: statuses.map((status) => {
+            return status.activeTargets
+          }),
+        })
+      }
+
+      expect(statusSnapshots.every((snapshot) => {
+        return snapshot.keys.length >= 2
+      })).toBe(true)
+      expect(statusSnapshots.every((snapshot) => {
+        return new Set(snapshot.keys).size === snapshot.keys.length
+      })).toBe(true)
+      expect(statusSnapshots.every((snapshot) => {
+        return snapshot.activeTargets.some((count) => count > 0)
+      })).toBe(true)
+
+      const executeResult = await client.callTool({
+        name: 'execute',
+        arguments: {
+          code: js`
+            const pages = context.pages();
+            const testPage = pages.find((p) => p.url().includes('multi-context-stability'));
+            return { pagesCount: pages.length, found: !!testPage, url: testPage?.url() };
+          `,
+        },
+      })
+
+      const executeOutput = (executeResult as any).content[0].text
+      expect(executeOutput).toContain('found: true')
+      expect(executeOutput).toContain(targetUrl)
+      expect((executeResult as any).isError).not.toBe(true)
+    } finally {
+      await secondContext.close()
+      fs.rmSync(secondUserDataDir, { recursive: true, force: true })
+      if (!page.isClosed()) {
+        await page.close()
+      }
+      await serviceWorker.evaluate(async () => {
+        await globalThis.disconnectEverything()
+      })
+    }
+  }, 120000)
+
   it('should maintain correct page.url() with service worker pages', async () => {
     const browserContext = getBrowserContext()
     const serviceWorker = await getExtensionServiceWorker(browserContext)