playwriter 0.0.63 → 0.0.89

package/src/snapshots/shadcn-ui-accessibility-full.md

@@ -8,15 +8,15 @@
           - role=link[name="Directory"]
           - role=link[name="Create"]
             - role=button[name="Search documentation..."]
-          - role=link[name="107k"]
+          - role=link[name="109k"]
           - role=button[name="Toggle theme"]
-          - role=link[name="New Project"]
+            - role=link[name="New"]
   - main:
-          - role=link[name="RTL Support"]
+          - role=link[name="shadcn/skills, presets and more"]
           - heading "The Foundation for your Design System"
           - paragraph:
             - text: "A set of beautifully designed components that you can customize, extend, and build on. Start here then make it your own. Open Source. Open Code."
-            - role=link[name="Get Started"]
+            - role=link[name="New Project"]
             - role=link[name="View Components"]
               - layouttable:
                   - role=link[name="Examples"]
@@ -95,7 +95,7 @@
                 - role=button[name="Info"] >> nth=0
                 - role=textbox[name="Ask, Search or Chat..."]
                 - role=button[name="Add"] >> nth=1
-                - button "Auto" [id="radix-_R_2jlbav5uiuplb_"]
+                - button "Auto" [id="radix-_R_aeldbsnqbr6lb_"]
                   - text: "52% used"
                 - role=button[name="Send"] >> nth=0
                 - role=textbox[name="@shadcn"]
@@ -141,14 +141,14 @@
               - textbox "Prompt" [id="notion-prompt"]
               - role=button[name="Add context"]
               - role=button[name="Attach file"]
-              - button "Auto" [id="radix-_R_1e6bav5uiuplb_"]
-              - button "All Sources" [id="radix-_R_1u6bav5uiuplb_"]
+              - button "Auto" [id="radix-_R_5opdbsnqbr6lb_"]
+              - button "All Sources" [id="radix-_R_7opdbsnqbr6lb_"]
               - role=button[name="Send"] >> nth=1
               - role=button[name="Go Back"]
               - role=button[name="Archive"]
               - role=button[name="Report"]
               - role=button[name="Snooze"]
-              - button "More Options" [id="radix-_R_babav5uiuplb_"]
+              - button "More Options" [id="radix-_R_1d9dbsnqbr6lb_"]
               - labeltext:
                 - "I agree to the terms and conditions" [id="checkbox-demo"]
                 - labeltext:

package/src/snapshots/shadcn-ui-accessibility-interactive.md

@@ -8,12 +8,12 @@
           - role=link[name="Directory"]
           - role=link[name="Create"]
             - role=button[name="Search documentation..."]
-          - role=link[name="107k"]
+          - role=link[name="109k"]
           - role=button[name="Toggle theme"]
-          - role=link[name="New Project"]
+            - role=link[name="New"]
   - main:
-          - role=link[name="RTL Support"]
-            - role=link[name="Get Started"]
+          - role=link[name="shadcn/skills, presets and more"]
+            - role=link[name="New Project"]
             - role=link[name="View Components"]
                 - role=link[name="Examples"]
                 - role=link[name="Dashboard"]
@@ -59,7 +59,7 @@
                 - role=button[name="Info"] >> nth=0
                 - role=textbox[name="Ask, Search or Chat..."]
                 - role=button[name="Add"] >> nth=1
-                - button "Auto" [id="radix-_R_2jlbav5uiuplb_"]
+                - button "Auto" [id="radix-_R_aeldbsnqbr6lb_"]
                 - role=button[name="Send"] >> nth=0
                 - role=textbox[name="@shadcn"]
                 - labeltext:
@@ -90,14 +90,14 @@
               - textbox "Prompt" [id="notion-prompt"]
               - role=button[name="Add context"]
               - role=button[name="Attach file"]
-              - button "Auto" [id="radix-_R_1e6bav5uiuplb_"]
-              - button "All Sources" [id="radix-_R_1u6bav5uiuplb_"]
+              - button "Auto" [id="radix-_R_5opdbsnqbr6lb_"]
+              - button "All Sources" [id="radix-_R_7opdbsnqbr6lb_"]
               - role=button[name="Send"] >> nth=1
               - role=button[name="Go Back"]
               - role=button[name="Archive"]
               - role=button[name="Report"]
               - role=button[name="Snooze"]
-              - button "More Options" [id="radix-_R_babav5uiuplb_"]
+              - button "More Options" [id="radix-_R_1d9dbsnqbr6lb_"]
               - labeltext:
                 - "I agree to the terms and conditions" [id="checkbox-demo"]
                 - labeltext:

package/src/start-relay-server.ts

@@ -7,21 +7,24 @@ process.title = 'playwriter-ws-server'
 const logger = createFileLogger()
 
 process.on('uncaughtException', async (err) => {
-  await logger.error('Uncaught Exception:', err);
-  process.exit(1);
-});
+  await logger.error('Uncaught Exception:', err)
+  process.exit(1)
+})
 
 process.on('unhandledRejection', async (reason) => {
-  await logger.error('Unhandled Rejection:', reason);
-  process.exit(1);
-});
+  await logger.error('Unhandled Rejection:', reason)
+  process.exit(1)
+})
 
 process.on('exit', async (code) => {
-  await logger.log(`Process exiting with code: ${code}`);
-});
-
-
-export async function startServer({ port = 19988, host = '127.0.0.1', token }: { port?: number; host?: string; token?: string } = {}) {
+  await logger.log(`Process exiting with code: ${code}`)
+})
+
+export async function startServer({
+  port = 19988,
+  host = '127.0.0.1',
+  token,
+}: { port?: number; host?: string; token?: string } = {}) {
   const server = await startPlayWriterCDPRelayServer({ port, host, token, logger })
 
   console.log('CDP Relay Server running. Press Ctrl+C to stop.')

package/src/styles-examples.ts

@@ -74,4 +74,11 @@ async function compareStyles() {
   console.log(formatStylesAsText(secondary))
 }
 
-export { getElementStyles, inspectButtonStyles, getStylesWithUserAgent, findPropertySource, checkInheritedStyles, compareStyles }
+export {
+  getElementStyles,
+  inspectButtonStyles,
+  getStylesWithUserAgent,
+  findPropertySource,
+  checkInheritedStyles,
+  compareStyles,
+}

package/src/styles.ts

@@ -120,12 +120,12 @@ export async function getStylesForLocator({
   const matchedStyles = await cdp.send('CSS.getMatchedStylesForNode', { nodeId })
 
   const stylesheetUrls = new Map<string, string>()
-  
+
   const processStyleSheetId = async (styleSheetId: string | undefined): Promise<StyleSource | null> => {
     if (!styleSheetId) {
       return null
     }
-    
+
     if (!stylesheetUrls.has(styleSheetId)) {
       try {
         const header = await cdp.send('CSS.getStyleSheetText', { styleSheetId })
@@ -134,7 +134,7 @@ export async function getStylesForLocator({
         stylesheetUrls.set(styleSheetId, '')
       }
     }
-    
+
     return null
   }
 
@@ -145,14 +145,15 @@ export async function getStylesForLocator({
       const rule = ruleMatch.rule
       const sourceRange = (rule as any).selectorList?.range as SourceRange | undefined
       const styleSheetId = rule.styleSheetId
-      
+
       let source: StyleSource | null = null
       if (styleSheetId && sourceRange) {
         const styleSheet = (matchedStyles as any).cssStyleSheetHeaders?.find(
-          (h: CSSStyleSheetHeader) => h.styleSheetId === styleSheetId
+          (h: CSSStyleSheetHeader) => h.styleSheetId === styleSheetId,
         )
-        const url = styleSheet?.sourceURL || (rule as any).origin === 'user-agent' ? 'user-agent' : `stylesheet:${styleSheetId}`
-        
+        const url =
+          styleSheet?.sourceURL || (rule as any).origin === 'user-agent' ? 'user-agent' : `stylesheet:${styleSheetId}`
+
         source = {
           url: (rule as any).styleSheetId ? await getStylesheetUrl(cdp, styleSheetId) : 'user-agent',
           line: sourceRange.startLine + 1,
@@ -224,9 +225,7 @@ export async function getStylesForLocator({
     }
   }
 
-  const filteredRules = includeUserAgentStyles
-    ? rules
-    : rules.filter((r) => r.origin !== 'user-agent')
+  const filteredRules = includeUserAgentStyles ? rules : rules.filter((r) => r.origin !== 'user-agent')
 
   return {
     element: elementDescription,
@@ -239,7 +238,7 @@ function extractDeclarations(style: CSSStyle): StyleDeclarations {
   if (!style?.cssProperties) {
     return {}
   }
-  
+
   const result: StyleDeclarations = {}
   for (const prop of style.cssProperties) {
     if (!prop.value || prop.value === 'initial' || prop.name.startsWith('-webkit-')) {
@@ -253,13 +252,13 @@ function extractDeclarations(style: CSSStyle): StyleDeclarations {
 
 function formatElementDescription(node: any): string {
   let desc = node.localName || node.nodeName?.toLowerCase() || 'element'
-  
+
   if (node.attributes) {
     const attrs: Record<string, string> = {}
     for (let i = 0; i < node.attributes.length; i += 2) {
       attrs[node.attributes[i]] = node.attributes[i + 1]
     }
-    
+
     if (attrs.id) {
       desc += `#${attrs.id}`
     }
@@ -267,7 +266,7 @@ function formatElementDescription(node: any): string {
       desc += `.${attrs.class.split(' ').join('.')}`
     }
   }
-  
+
   return desc
 }
 
@@ -282,10 +281,10 @@ async function getStylesheetUrl(cdp: ICDPSession, styleSheetId: string): Promise
 
 export function formatStylesAsText(styles: StylesResult): string {
   const lines: string[] = []
-  
+
   lines.push(`Element: ${styles.element}`)
   lines.push('')
-  
+
   if (styles.inlineStyle) {
     lines.push('Inline styles:')
     for (const [prop, value] of Object.entries(styles.inlineStyle)) {
@@ -293,10 +292,10 @@ export function formatStylesAsText(styles: StylesResult): string {
     }
     lines.push('')
   }
-  
+
   const directRules = styles.rules.filter((r) => !r.inheritedFrom)
   const inheritedRules = styles.rules.filter((r) => r.inheritedFrom)
-  
+
   if (directRules.length > 0) {
     lines.push('Matched rules:')
     for (const rule of directRules) {
@@ -312,7 +311,7 @@ export function formatStylesAsText(styles: StylesResult): string {
     }
     lines.push('')
   }
-  
+
   if (inheritedRules.length > 0) {
     const byAncestor = new Map<string, StyleRule[]>()
     for (const rule of inheritedRules) {
@@ -322,7 +321,7 @@ export function formatStylesAsText(styles: StylesResult): string {
       }
       byAncestor.get(key)!.push(rule)
     }
-    
+
     for (const [ancestor, rules] of byAncestor) {
       lines.push(`Inherited from ${ancestor}:`)
       for (const rule of rules) {
@@ -339,6 +338,6 @@ export function formatStylesAsText(styles: StylesResult): string {
       lines.push('')
     }
   }
-  
+
   return lines.join('\n')
 }

package/src/test-declarations.ts

@@ -1,13 +1,13 @@
 import type { ExtensionState } from 'mcp-extension/src/types.js'
 
 declare global {
-    var toggleExtensionForActiveTab: () => Promise<{ isConnected: boolean; state: ExtensionState }>;
-    var getExtensionState: () => ExtensionState;
-    var disconnectEverything: () => Promise<void>;
+  var toggleExtensionForActiveTab: () => Promise<{ isConnected: boolean; state: ExtensionState }>
+  var getExtensionState: () => ExtensionState
+  var disconnectEverything: () => Promise<void>
 
-    // Browser globals used in evaluate() calls
-    var window: any;
-    var document: any;
+  // Browser globals used in evaluate() calls
+  var window: any
+  var document: any
 }
 
 export {}

package/src/test-utils.ts

@@ -21,10 +21,15 @@ async function buildExtension({ port, distDir }: { port: number; distDir: string
     })
     .then(async () => {
       // Build into a per-port dist to avoid parallel test runs overwriting each other.
-      await execAsync(`TESTING=1 PLAYWRITER_PORT=${port} PLAYWRITER_EXTENSION_DIST=${distDir} pnpm build`, { cwd: '../extension' })
+      await execAsync(`TESTING=1 PLAYWRITER_PORT=${port} PLAYWRITER_EXTENSION_DIST=${distDir} pnpm build`, {
+        cwd: '../extension',
+      })
     })
 
-  extensionBuildQueues.set(distDir, buildPromise.finally(() => {}))
+  extensionBuildQueues.set(
+    distDir,
+    buildPromise.finally(() => {}),
+  )
   await buildPromise
 }
 
@@ -103,7 +108,10 @@ export async function setupTestContext({
   return { browserContext, userDataDir, relayServer }
 }
 
-export async function cleanupTestContext(ctx: TestContext | null, cleanup?: (() => Promise<void>) | null): Promise<void> {
+export async function cleanupTestContext(
+  ctx: TestContext | null,
+  cleanup?: (() => Promise<void>) | null,
+): Promise<void> {
   if (ctx?.browserContext) {
     await ctx.browserContext.close()
   }
@@ -188,7 +196,7 @@ export async function createSseServer(): Promise<SseServer> {
       res.writeHead(200, {
         'Content-Type': 'text/event-stream',
         'Cache-Control': 'no-cache, no-transform',
-        'Connection': 'keep-alive',
+        Connection: 'keep-alive',
       })
       res.write('retry: 1000\n\n')
       res.write('data: hello\n\n')
@@ -265,129 +273,134 @@ export async function createSseServer(): Promise<SseServer> {
           resolve()
         })
       })
-    }
+    },
   }
 }
 
-export async function withTimeout<T>({ promise, timeoutMs, errorMessage }: { promise: Promise<T>; timeoutMs: number; errorMessage: string }): Promise<T> {
-    return await new Promise<T>((resolve, reject) => {
-        const timeoutId = setTimeout(() => {
-            reject(new Error(errorMessage))
-        }, timeoutMs)
-
-        promise
-            .then((value) => {
-                clearTimeout(timeoutId)
-                resolve(value)
-            })
-            .catch((error) => {
-                clearTimeout(timeoutId)
-                reject(error)
-            })
-    })
+export async function withTimeout<T>({
+  promise,
+  timeoutMs,
+  errorMessage,
+}: {
+  promise: Promise<T>
+  timeoutMs: number
+  errorMessage: string
+}): Promise<T> {
+  return await new Promise<T>((resolve, reject) => {
+    const timeoutId = setTimeout(() => {
+      reject(new Error(errorMessage))
+    }, timeoutMs)
+
+    promise
+      .then((value) => {
+        clearTimeout(timeoutId)
+        resolve(value)
+      })
+      .catch((error) => {
+        clearTimeout(timeoutId)
+        reject(error)
+      })
+  })
 }
 
 /** Tagged template for inline JS code strings used in MCP execute calls */
 export function js(strings: TemplateStringsArray, ...values: unknown[]): string {
-    return strings.reduce(
-        (result, str, i) => result + str + (values[i] || ''),
-        '',
-    )
+  return strings.reduce((result, str, i) => result + str + (values[i] || ''), '')
 }
 
 export function tryJsonParse(str: string) {
-    try {
-        return JSON.parse(str)
-    } catch {
-        return str
-    }
+  try {
+    return JSON.parse(str)
+  } catch {
+    return str
+  }
 }
 
 /**
  * Safely close a browser connected via connectOverCDP.
- * 
+ *
  * Playwright's CRConnection uses async message handling (messageWrap) that can cause
  * a race condition where _onClose() runs before all pending _onMessage() handlers complete.
  * This results in "Assertion error" from crConnection.js when a CDP response arrives
  * after callbacks were cleared by dispose().
- * 
+ *
  * This helper waits for the message queue to drain before closing, avoiding the race.
- * 
+ *
  * @param browser - Browser instance from chromium.connectOverCDP()
  * @param drainDelayMs - Time to wait for pending messages to be processed (default: 50ms)
  */
 export async function safeCloseCDPBrowser(
-    browser: Awaited<ReturnType<typeof import('@xmorse/playwright-core').chromium.connectOverCDP>>,
-    drainDelayMs = 50
+  browser: Awaited<ReturnType<typeof import('@xmorse/playwright-core').chromium.connectOverCDP>>,
+  drainDelayMs = 50,
 ): Promise<void> {
-    // Wait for any queued message handlers to run
-    // This gives Playwright's messageWrap time to process pending CDP responses
-    await new Promise(r => setTimeout(r, drainDelayMs))
-    await browser.close()
+  // Wait for any queued message handlers to run
+  // This gives Playwright's messageWrap time to process pending CDP responses
+  await new Promise((r) => setTimeout(r, drainDelayMs))
+  await browser.close()
 }
 
 export type SimpleServer = {
-    baseUrl: string
-    close: () => Promise<void>
+  baseUrl: string
+  close: () => Promise<void>
 }
 
 /** Minimal local HTTP server for tests that need cross-origin iframes or custom routes */
 export async function createSimpleServer({ routes }: { routes: Record<string, string> }): Promise<SimpleServer> {
-    const openSockets: Set<net.Socket> = new Set()
-    const server = http.createServer((req, res) => {
-        const url = req.url || '/'
-        const body = routes[url]
-        if (!body) {
-            res.writeHead(404, { 'Content-Type': 'text/plain' })
-            res.end('not found')
-            return
-        }
-        res.writeHead(200, { 'Content-Type': 'text/html' })
-        res.end(body)
+  const openSockets: Set<net.Socket> = new Set()
+  const server = http.createServer((req, res) => {
+    const url = req.url || '/'
+    const body = routes[url]
+    if (!body) {
+      res.writeHead(404, { 'Content-Type': 'text/plain' })
+      res.end('not found')
+      return
+    }
+    res.writeHead(200, { 'Content-Type': 'text/html' })
+    res.end(body)
+  })
+
+  server.on('connection', (socket) => {
+    openSockets.add(socket)
+    socket.on('close', () => {
+      openSockets.delete(socket)
     })
+  })
 
-    server.on('connection', (socket) => {
-        openSockets.add(socket)
-        socket.on('close', () => {
-            openSockets.delete(socket)
-        })
+  await new Promise<void>((resolve) => {
+    server.listen(0, '127.0.0.1', () => {
+      resolve()
     })
+  })
 
-    await new Promise<void>((resolve) => {
-        server.listen(0, '127.0.0.1', () => {
-            resolve()
-        })
+  const address = server.address()
+  if (!address || typeof address === 'string') {
+    await new Promise<void>((resolve, reject) => {
+      server.close((error) => {
+        if (error) {
+          reject(error)
+          return
+        }
+        resolve()
+      })
     })
+    throw new Error('Failed to start test server')
+  }
 
-    const address = server.address()
-    if (!address || typeof address === 'string') {
-        await new Promise<void>((resolve, reject) => {
-            server.close((error) => {
-                if (error) {
-                    reject(error)
-                    return
-                }
-                resolve()
-            })
+  return {
+    baseUrl: `http://127.0.0.1:${address.port}`,
+    close: async () => {
+      for (const socket of openSockets) {
+        socket.destroy()
+      }
+      await new Promise<void>((resolve, reject) => {
+        server.close((error) => {
+          if (error) {
+            reject(error)
+            return
+          }
+          resolve()
         })
-        throw new Error('Failed to start test server')
-    }
-
-    return {
-        baseUrl: `http://127.0.0.1:${address.port}`,
-        close: async () => {
-            for (const socket of openSockets) {
-                socket.destroy()
-            }
-            await new Promise<void>((resolve, reject) => {
-                server.close((error) => {
-                    if (error) {
-                        reject(error)
-                        return
-                    }
-                    resolve()
-                })
-            })
-        },
-    }
+      })
+    },
+  }
 }

package/src/utils.ts

@@ -59,7 +59,8 @@ export function getCdpUrl({
 // Use ~/.playwriter for logs so each OS user gets their own dir (avoids permission errors on shared machines, see #44)
 const LOG_BASE_DIR = path.join(os.homedir(), '.playwriter')
 export const LOG_FILE_PATH = process.env.PLAYWRITER_LOG_FILE_PATH || path.join(LOG_BASE_DIR, 'relay-server.log')
-export const LOG_CDP_FILE_PATH = process.env.PLAYWRITER_CDP_LOG_FILE_PATH || path.join(path.dirname(LOG_FILE_PATH), 'cdp.jsonl')
+export const LOG_CDP_FILE_PATH =
+  process.env.PLAYWRITER_CDP_LOG_FILE_PATH || path.join(path.dirname(LOG_FILE_PATH), 'cdp.jsonl')
 
 const packageJsonPath = path.join(path.dirname(fileURLToPath(import.meta.url)), '..', 'package.json')
 export const VERSION = JSON.parse(fs.readFileSync(packageJsonPath, 'utf-8')).version as string

package/src/wait-for-page-load.ts

@@ -66,7 +66,12 @@ export async function waitForPageLoad(options: WaitForPageLoadOptions): Promise<
 
   const checkPageReady = async (): Promise<{ ready: boolean; readyState: string; pendingRequests: string[] }> => {
     const result = await page.evaluate(
-      ({ filteredDomains, filteredExtensions, stuckThreshold, slowResourceThreshold }): {
+      ({
+        filteredDomains,
+        filteredExtensions,
+        stuckThreshold,
+        slowResourceThreshold,
+      }): {
         ready: boolean
         readyState: string
         pendingRequests: string[]