chrometools-mcp 3.2.10 → 3.3.6

package/index.js

@@ -1,4 +1,4 @@
-#!/usr/bin/env node
+#!/usr/bin/env node
 
 import {Server} from "@modelcontextprotocol/sdk/server/index.js";
 import {StdioServerTransport} from "@modelcontextprotocol/sdk/server/stdio.js";
@@ -360,12 +360,65 @@ async function executeToolInternal(name, args) {
       };
     }
 
+    /**
+     * Check if identifier looks like an APOM ID (e.g., button_8, input_4, form_1)
+     */
+    function isApomIdPattern(identifier) {
+      return /^[a-z]+_\d+$/.test(identifier);
+    }
+
+    /**
+     * Quick element registration - runs APOM analysis and registers elements
+     */
+    async function quickRegisterElements(page) {
+      await page.evaluate((apomTreeConverterCode, selectorResolverCode) => {
+        // Inject utilities
+        if (typeof buildAPOMTree === 'undefined') {
+          eval(apomTreeConverterCode);
+        }
+        if (typeof registerElements === 'undefined') {
+          eval(selectorResolverCode);
+        }
+
+        // Build APOM tree (interactive only for speed)
+        const apomData = buildAPOMTree(true);
+
+        // Flatten and register elements
+        const elementsArray = [];
+        function collectElements(node) {
+          if (!node) return;
+          if (node.id && node.selector) {
+            elementsArray.push({
+              id: node.id,
+              selector: node.selector,
+              metadata: { type: node.type, tag: node.tag }
+            });
+          }
+          if (node.children) {
+            node.children.forEach(child => collectElements(child));
+          }
+          // Also check for container keys (div_container_0, etc.)
+          Object.keys(node).forEach(key => {
+            if (Array.isArray(node[key])) {
+              node[key].forEach(child => collectElements(child));
+            }
+          });
+        }
+        collectElements(apomData.tree);
+
+        if (typeof registerElements !== 'undefined') {
+          registerElements(elementsArray);
+        }
+      }, apomTreeConverter, selectorResolver);
+    }
+
     /**
      * Helper: Resolve selector (ID or CSS selector)
      * Injects selector-resolver and resolves element identifier
+     * Auto-refreshes element registry if APOM ID not found
      */
-    async function resolveSelector(page, identifier) {
-      return await page.evaluate((id, selectorResolverCode) => {
+    async function resolveSelector(page, identifier, timeoutMs = 5000) {
+      const tryResolve = () => page.evaluate((id, selectorResolverCode) => {
         // Inject selector resolver if not already loaded
         if (typeof resolveSelector === 'undefined') {
           eval(selectorResolverCode);
@@ -378,6 +431,20 @@ async function executeToolInternal(name, args) {
           found: document.querySelector(resolved.selector) !== null
         };
       }, identifier, selectorResolver);
+
+      const timeoutPromise = new Promise((_, reject) =>
+        setTimeout(() => reject(new Error(`resolveSelector timed out after ${timeoutMs}ms`)), timeoutMs)
+      );
+
+      let resolved = await Promise.race([tryResolve(), timeoutPromise]);
+
+      // Auto-refresh: if looks like APOM ID but not found, re-register elements and retry
+      if (!resolved.found && isApomIdPattern(identifier)) {
+        await quickRegisterElements(page);
+        resolved = await Promise.race([tryResolve(), timeoutPromise]);
+      }
+
+      return resolved;
     }
 
     if (name === "click") {
@@ -401,31 +468,56 @@ async function executeToolInternal(name, args) {
           throw new Error(`Element not found: ${identifier}`);
         }
 
-        // Capture timestamp BEFORE click for error filtering
+        // Capture timestamp and URL BEFORE click for diagnostics
         const beforeClickTimestamp = Date.now();
+        const urlBeforeClick = page.url();
+
+        // ALWAYS scroll to element first to ensure it's in viewport
+        await element.evaluate(el => el.scrollIntoView({ behavior: 'instant', block: 'center' }));
+
+        // Click with timeout to prevent hanging on navigation
+        const clickWithTimeout = async (timeoutMs = 5000) => {
+          const clickPromise = element.click().catch(() => {
+            // If Puppeteer click fails, fallback to JS click
+            return element.evaluate(el => el.click());
+          });
+          const timeoutPromise = new Promise((_, reject) =>
+            setTimeout(() => reject(new Error('click timeout')), timeoutMs)
+          );
+          return Promise.race([clickPromise, timeoutPromise]).catch(() => {
+            // If click times out, try JS click as last resort
+            return element.evaluate(el => el.click());
+          });
+        };
 
-        // Try multiple click methods for better reliability
-        try {
-          // Method 1: Puppeteer click (most reliable for most cases)
-          await element.click();
-        } catch (clickError) {
-          // Method 2: Scroll into view and try again
-          try {
-            await element.evaluate(el => el.scrollIntoView({ behavior: 'instant', block: 'center' }));
-            await new Promise(resolve => setTimeout(resolve, 100));
-            await element.click();
-          } catch (scrollClickError) {
-            // Method 3: JavaScript click (works for hidden/overlapping elements)
-            await element.evaluate(el => el.click());
-          }
-        }
+        await clickWithTimeout();
 
         // NEW POST-CLICK PATTERN:
-        // 1. Run post-click diagnostics (waits 500ms, checks pending requests, collects errors)
-        const diagnostics = await runPostClickDiagnostics(page, beforeClickTimestamp);
+        // 1. Run post-click diagnostics (waits for network requests within 200ms, max 10s timeout)
+        let diagnostics;
+        try {
+          diagnostics = await runPostClickDiagnostics(page, beforeClickTimestamp, {
+            skipNetworkWait: validatedArgs.skipNetworkWait,
+            networkWaitTimeout: validatedArgs.networkWaitTimeout,
+            urlBeforeAction: urlBeforeClick
+          });
+        } catch (diagError) {
+          // Diagnostics may fail if page navigated - create minimal diagnostics
+          diagnostics = {
+            networkActivity: { trackedRequests: [], bridgeRequests: [], stillPending: 0, pendingRequests: [] },
+            navigation: { from: urlBeforeClick, to: page.url(), likelyFormSubmit: true },
+            errors: { consoleErrors: [], networkErrors: [], totalErrors: 0 },
+            hasErrors: false
+          };
+        }
 
         // 2. Generate AI hints after click
-        const hints = await generateClickHints(page, identifier);
+        let hints;
+        try {
+          hints = await generateClickHints(page, identifier);
+        } catch (hintsError) {
+          hints = { modalOpened: false, newElements: [], suggestedNext: [] };
+        }
 
         // 3. Format output with hints and diagnostics
         let hintsText = '\n\n** AI HINTS **';
@@ -464,36 +556,60 @@ async function executeToolInternal(name, args) {
     if (name === "type") {
       const validatedArgs = schemas.TypeSchema.parse(args);
       const page = await getLastOpenPage();
+      const timeout = validatedArgs.timeout || 30000;
 
-      // Get identifier (id or selector)
-      const identifier = validatedArgs.id || validatedArgs.selector;
+      // Wrap operation in timeout
+      const typeOperation = async () => {
+        // Get identifier (id or selector)
+        const identifier = validatedArgs.id || validatedArgs.selector;
 
-      // Resolve selector (supports both APOM ID and CSS selector)
-      const resolved = await resolveSelector(page, identifier);
-      if (!resolved.found) {
-        throw new Error(`Element not found: ${identifier}${resolved.isPageObjectId ? ' (APOM ID)' : ' (CSS selector)'}`);
-      }
+        // Resolve selector (supports both APOM ID and CSS selector)
+        const resolved = await resolveSelector(page, identifier);
+        if (!resolved.found) {
+          throw new Error(`Element not found: ${identifier}${resolved.isPageObjectId ? ' (APOM ID)' : ' (CSS selector)'}`);
+        }
 
-      const element = await page.$(resolved.selector);
-      if (!element) {
-        throw new Error(`Element not found: ${identifier}`);
-      }
+        const element = await page.$(resolved.selector);
+        if (!element) {
+          throw new Error(`Element not found: ${identifier}`);
+        }
 
-      // Use input model to handle the element appropriately
-      const model = await getInputModel(element, page);
-      const options = {
-        delay: validatedArgs.delay !== undefined ? validatedArgs.delay : 30,
-        clearFirst: validatedArgs.clearFirst !== undefined ? validatedArgs.clearFirst : true,
-      };
+        // ALWAYS scroll to element first to ensure it's in viewport
+        await element.evaluate(el => el.scrollIntoView({ behavior: 'instant', block: 'center' }));
+        await new Promise(resolve => setTimeout(resolve, 100));
 
-      await model.setValue(validatedArgs.text, options);
-      const description = model.getActionDescription(validatedArgs.text, identifier);
+        // Use input model to handle the element appropriately
+        const model = await getInputModel(element, page);
+        const options = {
+          delay: validatedArgs.delay !== undefined ? validatedArgs.delay : 30,
+          clearFirst: validatedArgs.clearFirst !== undefined ? validatedArgs.clearFirst : true,
+        };
 
-      return {
-        content: [
-          { type: "text", text: description }
-        ],
+        await model.setValue(validatedArgs.text, options);
+        const description = model.getActionDescription(validatedArgs.text, identifier);
+
+        // Capture timestamp AFTER typing finishes - requests should start within 200ms of this
+        const afterTypeTimestamp = Date.now();
+
+        // Run diagnostics with 3s timeout for type (shorter than click's 10s)
+        const diagnostics = await runPostClickDiagnostics(page, afterTypeTimestamp, {
+          networkWaitTimeout: 3000
+        });
+        const diagnosticsText = formatDiagnosticsForAI(diagnostics);
+
+        return {
+          content: [
+            { type: "text", text: `${description}${diagnosticsText}` }
+          ],
+        };
       };
+
+      // Execute with timeout
+      const timeoutPromise = new Promise((_, reject) =>
+        setTimeout(() => reject(new Error(`Type operation timed out after ${timeout}ms`)), timeout)
+      );
+
+      return Promise.race([typeOperation(), timeoutPromise]);
     }
 
     if (name === "getComputedCss") {
@@ -2462,6 +2578,9 @@ Start coding now.`;
       const extensionConnected = isExtensionConnected();
       const debugInfo = getWsDebugInfo();
 
+      // Always log connection state for debugging
+      console.error(`[chrometools-mcp] enableRecorder check: bridgeConnected=${debugInfo.bridgeConnected}, extensionConnected=${extensionConnected}, wsState=${debugInfo.readyState}`);
+
       if (extensionConnected) {
         return {
           content: [{

package/models/TextInputModel.js

@@ -7,25 +7,76 @@
 
 import { BaseInputModel } from './BaseInputModel.js';
 
+/**
+ * Wrap operation with timeout to prevent hanging
+ */
+async function withTimeout(operation, timeoutMs, operationName) {
+  const timeoutPromise = new Promise((_, reject) =>
+    setTimeout(() => reject(new Error(`${operationName} timed out after ${timeoutMs}ms`)), timeoutMs)
+  );
+  return Promise.race([operation(), timeoutPromise]);
+}
+
 export class TextInputModel extends BaseInputModel {
   static get inputTypes() {
     return ['text', 'email', 'tel', 'password', 'search', 'url', 'number', null];
   }
 
   /**
-   * Type text into the input using keyboard simulation
+   * Type text into the input using keyboard simulation with JS fallback
    * @param {string} value - Text to type
    * @param {object} options - { delay, clearFirst }
    */
   async setValue(value, options = {}) {
     const { delay = 0, clearFirst = true } = options;
+    const opTimeout = 5000; // 5s timeout per operation
+
+    // Method 1: Try Puppeteer typing (works for most cases)
+    try {
+      // Focus and clear using JS (most reliable)
+      await withTimeout(
+        () => this.element.evaluate((el, shouldClear) => {
+          el.focus();
+          el.click();
+          if (shouldClear) {
+            el.select(); // Select all text
+          }
+        }, clearFirst),
+        opTimeout,
+        'focus-and-select'
+      );
+
+      // Small delay to ensure focus is established
+      await new Promise(resolve => setTimeout(resolve, 50));
+
+      // Type the new value
+      const typeTimeout = Math.max(opTimeout, value.length * delay + 5000);
+      await withTimeout(
+        () => this.element.type(value, { delay }),
+        typeTimeout,
+        'type'
+      );
 
-    if (clearFirst) {
-      await this.element.click({ clickCount: 3 });
-      await this.page.keyboard.press('Backspace');
+      // Verify the value was set
+      const actualValue = await this.element.evaluate(el => el.value);
+      if (actualValue.includes(value)) {
+        return; // Success
+      }
+    } catch (e) {
+      // Fall through to JS method
     }
 
-    await this.element.type(value, { delay });
+    // Method 2: Fallback to direct JS value setting
+    await withTimeout(
+      () => this.element.evaluate((el, newValue) => {
+        el.focus();
+        el.value = newValue;
+        el.dispatchEvent(new Event('input', { bubbles: true }));
+        el.dispatchEvent(new Event('change', { bubbles: true }));
+      }, value),
+      opTimeout,
+      'js-set-value'
+    );
   }
 
   getActionDescription(value, identifier) {

package/models/index.js

@@ -38,18 +38,32 @@ const MODEL_REGISTRY = [
   TextInputModel,  // Default fallback for text-like inputs
 ];
 
+/**
+ * Wrap operation with timeout to prevent hanging
+ */
+async function withTimeout(operation, timeoutMs, operationName) {
+  const timeoutPromise = new Promise((_, reject) =>
+    setTimeout(() => reject(new Error(`${operationName} timed out after ${timeoutMs}ms`)), timeoutMs)
+  );
+  return Promise.race([operation(), timeoutPromise]);
+}
+
 /**
  * Factory class for creating appropriate input models
  */
 export class InputModelFactory {
   /**
-   * Get element info (tagName, inputType)
+   * Get element info (tagName, inputType) with timeout
    */
-  static async getElementInfo(element) {
-    return await element.evaluate(el => ({
-      tagName: el.tagName.toLowerCase(),
-      inputType: el.type?.toLowerCase() || null,
-    }));
+  static async getElementInfo(element, timeoutMs = 5000) {
+    return await withTimeout(
+      () => element.evaluate(el => ({
+        tagName: el.tagName.toLowerCase(),
+        inputType: el.type?.toLowerCase() || null,
+      })),
+      timeoutMs,
+      'getElementInfo'
+    );
   }
 
   /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "chrometools-mcp",
-  "version": "3.2.10",
+  "version": "3.3.6",
   "description": "MCP (Model Context Protocol) server for Chrome automation using Puppeteer. Persistent browser sessions, UI framework detection (MUI, Ant Design, etc.), Page Object support, visual testing, Figma comparison. Works seamlessly in WSL, Linux, macOS, and Windows.",
   "type": "module",
   "main": "index.js",

package/pom/apom-tree-converter.js

@@ -711,12 +711,17 @@ function buildAPOMTree(interactiveOnly = true) {
     // Try to find stable class name (excluding framework-specific dynamic classes)
     const stableClass = getStableClassName(element);
     if (stableClass) {
-      const classSelector = `.${stableClass}`;
+      const escapedClass = CSS.escape(stableClass);
+      const classSelector = `.${escapedClass}`;
       // Verify it's unique within parent context
       if (element.parentElement) {
-        const matches = element.parentElement.querySelectorAll(classSelector);
-        if (matches.length === 1 && matches[0] === element) {
-          return classSelector;
+        try {
+          const matches = element.parentElement.querySelectorAll(classSelector);
+          if (matches.length === 1 && matches[0] === element) {
+            return classSelector;
+          }
+        } catch (e) {
+          // Invalid selector, continue to path-based approach
         }
       }
     }
@@ -728,10 +733,10 @@ function buildAPOMTree(interactiveOnly = true) {
     while (current && current !== document.body) {
       let selector = current.tagName.toLowerCase();
 
-      // Add stable class if available
+      // Add stable class if available (escaped for CSS selector safety)
       const stableClass = getStableClassName(current);
       if (stableClass) {
-        selector += `.${stableClass}`;
+        selector += `.${CSS.escape(stableClass)}`;
       }
 
       // Add nth-of-type if needed
@@ -754,6 +759,7 @@ function buildAPOMTree(interactiveOnly = true) {
 
   /**
    * Get stable class name excluding framework-specific dynamic classes
+   * and Tailwind CSS utility classes with special characters
    * Returns first stable class or null
    */
   function getStableClassName(element) {
@@ -763,8 +769,14 @@ function buildAPOMTree(interactiveOnly = true) {
 
     const classes = element.className.split(/\s+/).filter(c => c);
 
-    // Filter out framework-specific classes
+    // Filter out framework-specific classes and Tailwind utilities
     const stableClasses = classes.filter(className => {
+      // Tailwind CSS: classes with special characters that break CSS selectors
+      // Colons for variants (hover:, focus:, md:, etc.)
+      // Slashes for fractions (w-1/2)
+      // Brackets for arbitrary values (bg-[#1da1f2])
+      if (/[:\/\[\]]/.test(className)) return false;
+
       // React: CSS Modules, Styled Components, Emotion
       if (/^[a-zA-Z0-9_-]+-[a-zA-Z0-9_-]{5,}$/.test(className)) return false;
       if (/^css-[a-z0-9]+(-[a-z0-9]+)?$/i.test(className)) return false;

package/server/tool-schemas.js

@@ -21,6 +21,8 @@ export const ClickSchema = z.object({
   waitAfter: z.number().optional().describe("Milliseconds to wait after click (default: 1500)"),
   screenshot: z.boolean().optional().describe("Capture screenshot after click (default: false for performance)"),
   timeout: z.number().optional().describe("Maximum time to wait for operation in ms (default: 30000)"),
+  skipNetworkWait: z.boolean().optional().describe("Skip waiting for network requests (default: false). Use for forms with long-polling/WebSockets to avoid timeouts."),
+  networkWaitTimeout: z.number().optional().describe("Maximum time to wait for network requests in ms (default: 3000). Only used if skipNetworkWait is false."),
 }).refine(data => (data.id && !data.selector) || (!data.id && data.selector), {
   message: "Either 'id' or 'selector' must be provided, but not both"
 });
@@ -31,6 +33,7 @@ export const TypeSchema = z.object({
   text: z.string().describe("Text to type"),
   delay: z.number().optional().describe("Delay between keystrokes in ms (default: 30)"),
   clearFirst: z.boolean().optional().describe("Clear field before typing (default: true)"),
+  timeout: z.number().optional().describe("Maximum time to wait for operation in ms (default: 30000)"),
 }).refine(data => (data.id && !data.selector) || (!data.id && data.selector), {
   message: "Either 'id' or 'selector' must be provided, but not both"
 });

package/utils/hints-generator.js

@@ -8,6 +8,20 @@
  */
 export function generateNavigationHints(page, url) {
   return page.evaluate(() => {
+    // Helper to get safe class selector (filters Tailwind special chars)
+    function getSafeClassSelector(element) {
+      if (!element.className || typeof element.className !== 'string') return null;
+      const classes = element.className.split(' ')
+        .filter(c => c && !/[:\/\[\]]/.test(c))
+        .slice(0, 1);
+      if (classes.length === 0) return null;
+      try {
+        return `.${CSS.escape(classes[0])}`;
+      } catch (e) {
+        return null;
+      }
+    }
+
     const hints = {
       pageType: 'unknown',
       availableActions: [],
@@ -64,7 +78,7 @@ export function generateNavigationHints(page, url) {
       hints.keyElements.push({
         type: 'primary-button',
         text: mainButton.textContent.trim(),
-        selector: mainButton.id ? `#${mainButton.id}` : `.${mainButton.className.split(' ')[0]}`,
+        selector: mainButton.id ? `#${CSS.escape(mainButton.id)}` : (getSafeClassSelector(mainButton) || 'button'),
       });
     }
 
@@ -74,7 +88,7 @@ export function generateNavigationHints(page, url) {
         hints.keyElements.push({
           type: 'notification',
           text: alert.textContent.trim().substring(0, 100),
-          selector: alert.className ? `.${alert.className.split(' ')[0]}` : 'notification',
+          selector: getSafeClassSelector(alert) || '[role="alert"]',
         });
       }
     });
@@ -91,6 +105,20 @@ export async function generateClickHints(page, selector) {
   await new Promise(resolve => setTimeout(resolve, 100));
 
   return page.evaluate((clickedSelector) => {
+    // Helper to get safe class selector (filters Tailwind special chars)
+    function getSafeClassSelector(element) {
+      if (!element.className || typeof element.className !== 'string') return null;
+      const classes = element.className.split(' ')
+        .filter(c => c && !/[:\/\[\]]/.test(c))
+        .slice(0, 1);
+      if (classes.length === 0) return null;
+      try {
+        return `.${CSS.escape(classes[0])}`;
+      } catch (e) {
+        return null;
+      }
+    }
+
     const hints = {
       pageChanged: false,
       newElements: [],
@@ -105,7 +133,7 @@ export async function generateClickHints(page, selector) {
         hints.modalOpened = true;
         hints.newElements.push({
           type: 'modal',
-          selector: modal.className ? `.${modal.className.split(' ')[0]}` : '[role="dialog"]',
+          selector: getSafeClassSelector(modal) || '[role="dialog"]',
         });
         hints.suggestedNext.push('Interact with modal or close it');
       }
@@ -145,6 +173,20 @@ export async function generateFormSubmitHints(page) {
   await new Promise(resolve => setTimeout(resolve, 500));
 
   return page.evaluate(() => {
+    // Helper to get safe class selector (filters Tailwind special chars)
+    function getSafeClassSelector(element) {
+      if (!element.className || typeof element.className !== 'string') return null;
+      const classes = element.className.split(' ')
+        .filter(c => c && !/[:\/\[\]]/.test(c))
+        .slice(0, 1);
+      if (classes.length === 0) return null;
+      try {
+        return `.${CSS.escape(classes[0])}`;
+      } catch (e) {
+        return null;
+      }
+    }
+
     const hints = {
       success: false,
       errors: [],
@@ -173,7 +215,7 @@ export async function generateFormSubmitHints(page) {
       if (el.offsetWidth > 0) {
         hints.errors.push({
           text: el.textContent.trim().substring(0, 100),
-          selector: el.className ? `.${el.className.split(' ')[0]}` : 'error-element',
+          selector: getSafeClassSelector(el) || '[aria-invalid="true"]',
         });
       }
     });