chrometools-mcp 3.5.1 → 3.5.2

package/CHANGELOG.md

@@ -2,6 +2,17 @@
 
 All notable changes to this project will be documented in this file.
 
+## [3.5.2] - 2026-02-16
+
+### Added
+- **Modal/Dialog detection (React Portals)** — `analyzePage` now detects modals rendered via React Portals (antd, MUI, Bootstrap, Chakra, Element UI, Headless UI, Radix, Mantine). ModalModel class in Element Model system with `role="dialog"` / `aria-modal="true"` matching. Portal wrapper ancestors are force-included in APOM tree with compact format. Modal metadata includes title and action buttons
+- **TxtInp `clear` action** — TextInput model now supports `executeModelAction(action: "clear")` for clearing pre-filled form fields
+
+### Fixed
+- **React controlled input clearing** — `type(clearFirst: true)` now works correctly with React/Vue/Angular controlled inputs (antd `<Input>`, MUI `<TextField>`, etc.). Uses native `HTMLInputElement.prototype.value` setter to bypass framework value trackers that ignored programmatic `el.value = ''` changes. Applied to both TextInputModel and TextareaModel
+- **"ModelRegistry is not defined" error** — Fixed sporadic ReferenceError when calling `executeModelAction` or `click` after page navigation. Bare `ModelRegistry` identifier was inaccessible after `eval()` in strict mode contexts; changed to `window.ModelRegistry` reference
+- **Modal output bloat** — ModalModel now only matches actual dialog elements (`role="dialog"`), not framework wrapper divs (`ant-modal-root`, `ant-modal-wrap`). Reduces `modalCount` from 3 to 1 per modal and forces wrapper ancestors to compact container format
+
 ## [3.5.1] - 2026-02-16
 
 ### Fixed

package/README.md

@@ -335,6 +335,14 @@ executeScenario({ name: "login_flow", parameters: { email: "user@test.com" } })
    - Example: `executeModelAction({id: "input_34", action: "check"})`
    - Example: `executeModelAction({selector: ".datepicker", action: "SetDate", params: {date: "2024-03-15"}})`
    - See `models/` directory for available models and actions
+   - Available models: TxtInp, Sel, Btn, Chk, Radio, TxtArea, Link, Range, DatePicker, DateInp, FileInp, ColorInp, **Modal**, default
+
+#### Modal/Dialog Support
+- **Automatic detection**: APOM detects modals rendered via React Portals (antd, MUI, Bootstrap, Chakra, Mantine, Element UI, Headless UI, Radix)
+- **Detection methods**: `role="dialog"`, `aria-modal="true"`, framework-specific CSS classes
+- **Animation-proof**: Modal elements are included even during CSS appear animations (opacity: 0)
+- **Rich metadata**: Modal nodes include `title` and `actions` (button labels) in metadata
+- **In APOM tree**: Modals appear as `type: "dialog"` with `model: "Modal"`, containing all interactive children
 
 **Why specialized tools matter:**
 - ✅ Trigger proper browser events (click, input, change)

package/index.js

@@ -584,7 +584,7 @@ async function executeToolInternal(name, args) {
 
             // Initialize registry if needed
             const registry = window.__MODEL_REGISTRY__ || (() => {
-              const reg = new ModelRegistry();
+              const reg = new window.ModelRegistry();
               if (window.ELEMENT_MODELS_CLASSES) {
                 reg.registerAll(window.ELEMENT_MODELS_CLASSES);
               }

package/models/TextInputModel.js

@@ -42,13 +42,22 @@ export class TextInputModel extends BaseInputModel {
     try {
       // Method 1: Try Puppeteer typing (works for most cases)
       try {
-        // Focus and clear using JS (most reliable)
+        // Focus and clear using native setter (works with React/Vue/Angular controlled inputs)
         await withTimeout(
           () => this.element.evaluate((el, shouldClear) => {
             el.focus();
             el.click();
             if (shouldClear) {
-              el.value = '';
+              // Use native HTMLInputElement setter to bypass React's value tracker
+              // React overrides the value setter and ignores programmatic changes via el.value = ''
+              const nativeSetter = Object.getOwnPropertyDescriptor(
+                window.HTMLInputElement.prototype, 'value'
+              )?.set;
+              if (nativeSetter) {
+                nativeSetter.call(el, '');
+              } else {
+                el.value = '';
+              }
               el.dispatchEvent(new Event('input', { bubbles: true }));
               el.dispatchEvent(new Event('change', { bubbles: true }));
             }
@@ -78,11 +87,20 @@ export class TextInputModel extends BaseInputModel {
         // Fall through to JS method
       }
 
-      // Method 2: Fallback to direct JS value setting
+      // Method 2: Fallback to direct JS value setting (with React-compatible native setter)
       await withTimeout(
         () => this.element.evaluate((el, newValue, shouldClear) => {
           el.focus();
-          el.value = shouldClear ? newValue : el.value + newValue;
+          const finalValue = shouldClear ? newValue : el.value + newValue;
+          // Use native setter to bypass React's value tracker
+          const nativeSetter = Object.getOwnPropertyDescriptor(
+            window.HTMLInputElement.prototype, 'value'
+          )?.set;
+          if (nativeSetter) {
+            nativeSetter.call(el, finalValue);
+          } else {
+            el.value = finalValue;
+          }
           el.dispatchEvent(new Event('input', { bubbles: true }));
           el.dispatchEvent(new Event('change', { bubbles: true }));
         }, value, clearFirst),

package/models/TextareaModel.js

@@ -54,7 +54,15 @@ export class TextareaModel extends BaseInputModel {
           await withTimeout(
             () => this.element.evaluate(el => {
               el.focus();
-              el.value = '';
+              // Use native setter to bypass React's value tracker
+              const nativeSetter = Object.getOwnPropertyDescriptor(
+                window.HTMLTextAreaElement.prototype, 'value'
+              )?.set;
+              if (nativeSetter) {
+                nativeSetter.call(el, '');
+              } else {
+                el.value = '';
+              }
               el.dispatchEvent(new Event('input', { bubbles: true }));
               el.dispatchEvent(new Event('change', { bubbles: true }));
             }),
@@ -82,11 +90,19 @@ export class TextareaModel extends BaseInputModel {
         // Fall through to JS method
       }
 
-      // Method 2: Fallback to direct JS value setting
+      // Method 2: Fallback to direct JS value setting (with React-compatible native setter)
       await withTimeout(
         () => this.element.evaluate((el, newValue, shouldClear) => {
           el.focus();
-          el.value = shouldClear ? newValue : el.value + newValue;
+          const finalValue = shouldClear ? newValue : el.value + newValue;
+          const nativeSetter = Object.getOwnPropertyDescriptor(
+            window.HTMLTextAreaElement.prototype, 'value'
+          )?.set;
+          if (nativeSetter) {
+            nativeSetter.call(el, finalValue);
+          } else {
+            el.value = finalValue;
+          }
           el.dispatchEvent(new Event('input', { bubbles: true }));
           el.dispatchEvent(new Event('change', { bubbles: true }));
         }, value, clearFirst),

package/models/index.js

@@ -19,7 +19,7 @@ class TextInputModel extends ElementModel {
   }
 
   getActions() {
-    return ['type', 'click', 'hover', 'screenshot'];
+    return ['type', 'clear', 'click', 'hover', 'screenshot'];
   }
 
   matches(element, elementType) {
@@ -32,6 +32,7 @@ class TextInputModel extends ElementModel {
   getActionHandler(actionName) {
     const handlers = {
       'type': 'executeTypeAction',
+      'clear': 'executeTypeAction',
       'click': 'executeClickAction',
       'hover': 'executeHoverAction',
       'screenshot': 'executeScreenshotAction'
@@ -381,6 +382,42 @@ class ColorInputModel extends ElementModel {
   }
 }
 
+/**
+ * Modal/Dialog Model
+ * Handles: Modal dialogs, popups, overlays (React Portals, framework modals)
+ * Detects elements rendered via portals outside the main React tree
+ */
+class ModalModel extends ElementModel {
+  getName() {
+    return 'Modal';
+  }
+
+  getActions() {
+    return ['screenshot', 'close', 'scrollTo'];
+  }
+
+  getPriority() {
+    return 200; // High priority — check before containers
+  }
+
+  matches(element, elementType) {
+    // Only match actual dialog elements, not framework wrappers
+    // Framework wrappers are detected separately for portal inclusion
+    if (element.getAttribute('role') === 'dialog') return true;
+    if (element.getAttribute('aria-modal') === 'true') return true;
+    return false;
+  }
+
+  getActionHandler(actionName) {
+    const handlers = {
+      'screenshot': 'executeScreenshotAction',
+      'close': 'executeClickAction',
+      'scrollTo': 'executeScrollToAction'
+    };
+    return handlers[actionName] || null;
+  }
+}
+
 /**
  * Default Model (fallback for non-interactive elements)
  */
@@ -424,6 +461,7 @@ const MODELS = [
   DateInputModel,
   FileInputModel,
   ColorInputModel,
+  ModalModel,
   DefaultModel
 ];
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "chrometools-mcp",
-  "version": "3.5.1",
+  "version": "3.5.2",
   "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

@@ -16,7 +16,7 @@ function initializeModelRegistry() {
   }
 
   // Create and populate registry
-  const registry = new ModelRegistry();
+  const registry = new (window.ModelRegistry || ModelRegistry)();
 
   // Register all models (order doesn't matter, priority is handled internally)
   if (typeof window !== 'undefined' && window.ELEMENT_MODELS_CLASSES) {
@@ -73,12 +73,51 @@ function buildAPOMTree(interactiveOnly = true, viewportOnly = false) {
   let idCounter = 0;
   const elementIds = new WeakMap();
   const interactiveElements = new WeakSet();
+  const modalElements = new WeakSet(); // Elements inside modal portals (skip visibility checks)
+  const modalAncestors = new WeakSet(); // Portal wrapper ancestors (force compact format)
 
   // First pass: mark all interactive elements
   if (interactiveOnly) {
     markInteractiveElements(document.body);
   }
 
+  // Second pass: detect modal/dialog portals and force-mark for inclusion
+  // Modals are rendered via React Portals outside the main tree and may have
+  // opacity: 0 during animation — force-include them and all their descendants
+  if (interactiveOnly) {
+    // Framework-specific portal container patterns (used only for detection, not model assignment)
+    const portalPatterns = [
+      'ant-modal-root', 'ant-modal-wrap',
+      'MuiDialog-root', 'MuiModal-root',
+      'modal-dialog',
+      'chakra-modal__content-container',
+      'el-dialog__wrapper', 'el-overlay-dialog',
+      'headlessui-dialog',
+      'radix-dialog',
+      'mantine-Modal-root',
+    ];
+    function isPortalElement(el) {
+      if (el.getAttribute('role') === 'dialog') return true;
+      if (el.getAttribute('aria-modal') === 'true') return true;
+      const classes = el.className || '';
+      if (typeof classes !== 'string') return false;
+      return portalPatterns.some(p => classes.includes(p));
+    }
+
+    // Scan body direct children for framework-specific portal roots
+    for (const child of document.body.children) {
+      if (isPortalElement(child)) {
+        forceMarkModalTree(child);
+      }
+    }
+    // Also find deeper dialog elements (some frameworks nest portals)
+    document.querySelectorAll('[role="dialog"], [aria-modal="true"]').forEach(el => {
+      if (!modalElements.has(el)) {
+        forceMarkModalTree(el);
+      }
+    });
+  }
+
   // Build tree from body
   result.tree = buildNode(document.body, null, 0, []);
 
@@ -408,6 +447,31 @@ function buildAPOMTree(interactiveOnly = true, viewportOnly = false) {
     interactiveElements.add(document.body);
   }
 
+  /**
+   * Force-mark modal portal element and all its descendants for inclusion in APOM tree.
+   * Modal portals (React Portals) are rendered outside the main tree and may have
+   * opacity: 0 during CSS animations — this ensures they're always included.
+   */
+  function forceMarkModalTree(element) {
+    modalElements.add(element);
+    interactiveElements.add(element);
+    // Mark all descendants — inputs, buttons, etc. inside the modal
+    element.querySelectorAll('*').forEach(el => {
+      modalElements.add(el);
+      interactiveElements.add(el);
+    });
+    // Mark ancestors up to body (so the path from body to modal is traversed)
+    // Must add to modalElements for isVisible() bypass (0x0 dimensions, opacity:0)
+    // Also mark as modalAncestors to force compact format (portal wrappers are pass-through)
+    let current = element.parentElement;
+    while (current && current !== document.body) {
+      modalElements.add(current);
+      modalAncestors.add(current);
+      interactiveElements.add(current);
+      current = current.parentElement;
+    }
+  }
+
   /**
    * Check if element is in viewport
    */
@@ -431,7 +495,11 @@ function buildAPOMTree(interactiveOnly = true, viewportOnly = false) {
    */
   function isVisible(el) {
     // Check dimensions first (works for fixed position elements)
-    if (el.offsetWidth === 0 || el.offsetHeight === 0) return false;
+    // Exception: modal portal wrapper divs may have 0x0 dimensions
+    // while their visible content (dialog, inputs, buttons) does not
+    if (el.offsetWidth === 0 || el.offsetHeight === 0) {
+      if (!modalElements.has(el)) return false;
+    }
 
     // Check computed styles
     const style = window.getComputedStyle(el);
@@ -439,11 +507,12 @@ function buildAPOMTree(interactiveOnly = true, viewportOnly = false) {
       return false;
     }
 
-    // Check opacity, but allow exceptions for inputs that are commonly styled with opacity:0
-    // (checkboxes, radios, file inputs often use opacity:0 with custom visual overlay)
+    // Check opacity, but allow exceptions for:
+    // - inputs styled with opacity:0 (checkboxes, radios, file inputs with custom overlay)
+    // - elements inside modal portals (opacity: 0 during CSS appear animation)
     const tag = el.tagName.toLowerCase();
     const isStylableInput = tag === 'input' && ['checkbox', 'radio', 'file'].includes(el.type);
-    if (style.opacity === '0' && !isStylableInput) {
+    if (style.opacity === '0' && !isStylableInput && !modalElements.has(el)) {
       return false;
     }
 
@@ -457,7 +526,8 @@ function buildAPOMTree(interactiveOnly = true, viewportOnly = false) {
 
     // Additional check: element should be in viewport or have offsetParent
     // This handles elements inside position:fixed containers (Angular Material)
-    return el.offsetParent !== null || style.position === 'fixed' || style.position === 'sticky';
+    // Exception: modal portal elements may lack offsetParent
+    return el.offsetParent !== null || style.position === 'fixed' || style.position === 'sticky' || modalElements.has(el);
   }
 
   /**
@@ -505,8 +575,31 @@ function buildAPOMTree(interactiveOnly = true, viewportOnly = false) {
       }
     }
 
+    // Modal containers: promote to interactive node with metadata
+    if (modelName === 'Modal') {
+      elementType.isInteractive = true;
+      elementType.type = 'dialog';
+      // Extract modal title
+      const titleEl = element.querySelector(
+        '.ant-modal-title, .MuiDialogTitle-root, [class*="modal-title"], [class*="dialog-title"], .modal-header h5, .modal-header h4'
+      );
+      const titleText = titleEl ? titleEl.textContent.trim().substring(0, 100) : null;
+      // Extract action buttons
+      const buttons = element.querySelectorAll('button');
+      const actions = Array.from(buttons)
+        .map(b => b.textContent.trim())
+        .filter(t => t && t.length > 0 && t.length < 30);
+      elementType.metadata = {
+        ...(elementType.metadata || {}),
+        ...(titleText ? { title: titleText } : {}),
+        ...(actions.length ? { actions: actions.slice(0, 5) } : {})
+      };
+    }
+
     // Build node - minimize non-interactive parents
-    const isInteractive = elementType.isInteractive;
+    // Modal ancestors (portal wrappers) are forced to compact format —
+    // they have onclick handlers (close on outside click) but are just pass-through containers
+    const isInteractive = elementType.isInteractive && !modalAncestors.has(element);
 
     // Build node structure based on mode
     let node;
@@ -562,16 +655,14 @@ function buildAPOMTree(interactiveOnly = true, viewportOnly = false) {
 
     // Update metadata counters
     result.metadata.totalElements++;
-    if (elementType.isInteractive) {
+    if (isInteractive) {
       result.metadata.interactiveCount++;
     }
     if (elementType.type === 'form') {
       result.metadata.formCount++;
     }
-    if (position && (position.type === 'fixed' || position.type === 'absolute')) {
-      if (position.zIndex && position.zIndex >= 100) {
-        result.metadata.modalCount++;
-      }
+    if (modelName === 'Modal') {
+      result.metadata.modalCount++;
     }
     if (depth > result.metadata.maxDepth) {
       result.metadata.maxDepth = depth;