chrometools-mcp 2.4.2 → 3.1.2

package/models/SelectModel.js

@@ -0,0 +1,97 @@
+/**
+ * models/SelectModel.js
+ *
+ * Model for select (dropdown) elements.
+ * Supports selection by value, text, or index.
+ */
+
+import { BaseInputModel } from './BaseInputModel.js';
+
+export class SelectModel extends BaseInputModel {
+  static get inputTypes() {
+    return ['select', 'select-one', 'select-multiple'];
+  }
+
+  /**
+   * Check if this model handles the given element
+   * Override to check tagName for select elements
+   */
+  static handlesElement(tagName, inputType) {
+    return tagName?.toLowerCase() === 'select';
+  }
+
+  /**
+   * Select option by value, text, or index
+   * @param {string|number} value - Value to select
+   * @param {object} options - { by: 'value'|'text'|'index' }
+   */
+  async setValue(value, options = {}) {
+    const { by = 'value' } = options;
+
+    await this.element.evaluate((el, val, selectBy) => {
+      let found = false;
+
+      for (let i = 0; i < el.options.length; i++) {
+        const option = el.options[i];
+        let match = false;
+
+        switch (selectBy) {
+          case 'index':
+            match = i === parseInt(val, 10);
+            break;
+          case 'text':
+            match = option.text === val || option.text.includes(val);
+            break;
+          case 'value':
+          default:
+            match = option.value === val;
+            break;
+        }
+
+        if (match) {
+          el.selectedIndex = i;
+          found = true;
+          break;
+        }
+      }
+
+      if (!found) {
+        throw new Error(`Option not found: ${val} (by ${selectBy})`);
+      }
+
+      el.dispatchEvent(new Event('change', { bubbles: true }));
+    }, value, by);
+  }
+
+  /**
+   * Get all available options
+   */
+  async getOptions() {
+    return await this.element.evaluate(el => {
+      return Array.from(el.options).map((opt, i) => ({
+        index: i,
+        value: opt.value,
+        text: opt.text,
+        selected: opt.selected,
+      }));
+    });
+  }
+
+  async getMetadata() {
+    const base = await super.getMetadata();
+    const extra = await this.element.evaluate(el => ({
+      multiple: el.multiple,
+      selectedIndex: el.selectedIndex,
+      options: Array.from(el.options).map(opt => ({
+        value: opt.value,
+        text: opt.text,
+        selected: opt.selected,
+      })),
+    }));
+    return { ...base, ...extra };
+  }
+
+  getActionDescription(value, identifier) {
+    return `Selected "${value}" on ${identifier}`;
+  }
+}

package/models/TextInputModel.js

@@ -0,0 +1,34 @@
+/**
+ * models/TextInputModel.js
+ *
+ * Model for standard text-based inputs.
+ * Handles: text, email, tel, password, search, url, number
+ */
+
+import { BaseInputModel } from './BaseInputModel.js';
+
+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
+   * @param {string} value - Text to type
+   * @param {object} options - { delay, clearFirst }
+   */
+  async setValue(value, options = {}) {
+    const { delay = 0, clearFirst = true } = options;
+
+    if (clearFirst) {
+      await this.element.click({ clickCount: 3 });
+      await this.page.keyboard.press('Backspace');
+    }
+
+    await this.element.type(value, { delay });
+  }
+
+  getActionDescription(value, identifier) {
+    return `Typed "${value}" into ${identifier}`;
+  }
+}

package/models/TextareaModel.js

@@ -0,0 +1,59 @@
+/**
+ * models/TextareaModel.js
+ *
+ * Model for textarea elements.
+ * Similar to TextInputModel but handles multiline text.
+ */
+
+import { BaseInputModel } from './BaseInputModel.js';
+
+export class TextareaModel extends BaseInputModel {
+  static get inputTypes() {
+    return ['textarea'];
+  }
+
+  /**
+   * Check if this model handles the given element
+   * Override to check tagName for textarea elements
+   */
+  static handlesElement(tagName, inputType) {
+    return tagName?.toLowerCase() === 'textarea';
+  }
+
+  /**
+   * Type text into the textarea
+   * @param {string} value - Text to type (can include newlines)
+   * @param {object} options - { delay, clearFirst }
+   */
+  async setValue(value, options = {}) {
+    const { delay = 0, clearFirst = true } = options;
+
+    if (clearFirst) {
+      await this.element.click({ clickCount: 3 });
+      await this.page.keyboard.press('Backspace');
+      // For multiline, also clear with Ctrl+A
+      await this.page.keyboard.down('Control');
+      await this.page.keyboard.press('a');
+      await this.page.keyboard.up('Control');
+      await this.page.keyboard.press('Backspace');
+    }
+
+    await this.element.type(value, { delay });
+  }
+
+  async getMetadata() {
+    const base = await super.getMetadata();
+    const extra = await this.element.evaluate(el => ({
+      rows: el.rows,
+      cols: el.cols,
+      maxLength: el.maxLength > 0 ? el.maxLength : null,
+      placeholder: el.placeholder || null,
+    }));
+    return { ...base, ...extra };
+  }
+
+  getActionDescription(value, identifier) {
+    const preview = value.length > 30 ? value.substring(0, 30) + '...' : value;
+    return `Typed "${preview}" into ${identifier}`;
+  }
+}

package/models/TimeInputModel.js

@@ -0,0 +1,49 @@
+/**
+ * models/TimeInputModel.js
+ *
+ * Model for time input fields.
+ * Sets value directly via JavaScript since keyboard input doesn't work reliably.
+ *
+ * Expected format: "HH:MM" (24-hour) or "HH:MM:SS"
+ */
+
+import { BaseInputModel } from './BaseInputModel.js';
+
+export class TimeInputModel extends BaseInputModel {
+  static get inputTypes() {
+    return ['time'];
+  }
+
+  /**
+   * Set time value directly via JavaScript
+   * @param {string} value - Time in format "HH:MM" or "HH:MM:SS"
+   * @param {object} options - (unused, for interface compatibility)
+   */
+  async setValue(value, options = {}) {
+    // Validate time format
+    const timeRegex = /^([0-1]?[0-9]|2[0-3]):[0-5][0-9](:[0-5][0-9])?$/;
+    if (!timeRegex.test(value)) {
+      console.warn(`TimeInputModel: Value "${value}" may not be in correct format (HH:MM or HH:MM:SS)`);
+    }
+
+    await this.element.evaluate((el, val) => {
+      el.value = val;
+      el.dispatchEvent(new Event('input', { bubbles: true }));
+      el.dispatchEvent(new Event('change', { bubbles: true }));
+    }, value);
+  }
+
+  async getMetadata() {
+    const base = await super.getMetadata();
+    const extra = await this.element.evaluate(el => ({
+      min: el.min || null,
+      max: el.max || null,
+      step: el.step || null,
+    }));
+    return { ...base, ...extra };
+  }
+
+  getActionDescription(value, identifier) {
+    return `Set time "${value}" on ${identifier}`;
+  }
+}

package/models/index.js

@@ -0,0 +1,122 @@
+/**
+ * models/index.js
+ *
+ * Input element models for chrometools-mcp.
+ * Provides specialized handlers for different input types.
+ *
+ * Usage:
+ *   import { getInputModel, InputModelFactory } from './models/index.js';
+ *
+ *   const model = await getInputModel(element, page);
+ *   await model.setValue('some value');
+ */
+
+import { BaseInputModel } from './BaseInputModel.js';
+import { TextInputModel } from './TextInputModel.js';
+import { TimeInputModel } from './TimeInputModel.js';
+import { DateInputModel } from './DateInputModel.js';
+import { ColorInputModel } from './ColorInputModel.js';
+import { RangeInputModel } from './RangeInputModel.js';
+import { SelectModel } from './SelectModel.js';
+import { CheckboxModel } from './CheckboxModel.js';
+import { TextareaModel } from './TextareaModel.js';
+import { RadioGroupModel } from './RadioGroupModel.js';
+import { CheckboxGroupModel } from './CheckboxGroupModel.js';
+
+/**
+ * Registry of all input models in priority order.
+ * More specific models should come before generic ones.
+ */
+const MODEL_REGISTRY = [
+  TimeInputModel,
+  DateInputModel,
+  ColorInputModel,
+  RangeInputModel,
+  CheckboxModel,
+  SelectModel,
+  TextareaModel,
+  TextInputModel,  // Default fallback for text-like inputs
+];
+
+/**
+ * Factory class for creating appropriate input models
+ */
+export class InputModelFactory {
+  /**
+   * Get element info (tagName, inputType)
+   */
+  static async getElementInfo(element) {
+    return await element.evaluate(el => ({
+      tagName: el.tagName.toLowerCase(),
+      inputType: el.type?.toLowerCase() || null,
+    }));
+  }
+
+  /**
+   * Find the appropriate model class for an element
+   */
+  static findModelClass(tagName, inputType) {
+    // Check for element-specific handlers first (select, textarea)
+    for (const ModelClass of MODEL_REGISTRY) {
+      if (ModelClass.handlesElement && ModelClass.handlesElement(tagName, inputType)) {
+        return ModelClass;
+      }
+    }
+
+    // Then check input type handlers
+    for (const ModelClass of MODEL_REGISTRY) {
+      if (ModelClass.handles(inputType)) {
+        return ModelClass;
+      }
+    }
+
+    // Fallback to TextInputModel for unknown types
+    return TextInputModel;
+  }
+
+  /**
+   * Create a model instance for the given element
+   * @param {ElementHandle} element - Puppeteer element handle
+   * @param {Page} page - Puppeteer page
+   * @returns {Promise<BaseInputModel>} Model instance
+   */
+  static async create(element, page) {
+    const { tagName, inputType } = await this.getElementInfo(element);
+    const ModelClass = this.findModelClass(tagName, inputType);
+    return new ModelClass(element, page);
+  }
+
+  /**
+   * Get model class name for an element (useful for logging)
+   */
+  static async getModelName(element) {
+    const { tagName, inputType } = await this.getElementInfo(element);
+    const ModelClass = this.findModelClass(tagName, inputType);
+    return ModelClass.name;
+  }
+}
+
+/**
+ * Convenience function to get a model for an element
+ * @param {ElementHandle} element - Puppeteer element handle
+ * @param {Page} page - Puppeteer page
+ * @returns {Promise<BaseInputModel>} Model instance
+ */
+export async function getInputModel(element, page) {
+  return await InputModelFactory.create(element, page);
+}
+
+// Export all models for direct use if needed
+export {
+  BaseInputModel,
+  TextInputModel,
+  TimeInputModel,
+  DateInputModel,
+  ColorInputModel,
+  RangeInputModel,
+  SelectModel,
+  CheckboxModel,
+  TextareaModel,
+  RadioGroupModel,
+  CheckboxGroupModel,
+};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "chrometools-mcp",
-  "version": "2.4.2",
-  "description": "MCP (Model Context Protocol) server for Chrome automation using Puppeteer. Persistent browser sessions, visual testing, Figma comparison, and design validation. Works seamlessly in WSL, Linux, and macOS.",
+  "version": "3.1.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",
   "bin": {
@@ -50,6 +50,7 @@
     "jimp": "^0.22.12",
     "pixelmatch": "^7.1.0",
     "puppeteer": "^24.27.0",
+    "ws": "^8.18.0",
     "zod": "^3.25.76"
   }
 }

package/pom/apom-converter.js

@@ -0,0 +1,267 @@
+/**
+ * pom/apom-converter.js
+ *
+ * Converts analyzePage output to APOM (Agent Page Object Model) format
+ * Adds unique IDs and registers elements in selector resolver
+ */
+
+/**
+ * Convert analyzePage result to APOM format
+ * This function runs in browser context via page.evaluate()
+ *
+ * @param {Object} analysis - Result from analyzePage
+ * @param {Object} options - Conversion options
+ * @returns {Object} APOM formatted result
+ */
+function convertToAPOM(analysis, options = {}) {
+  const {
+    registerElements = true,
+    groupBy = 'type'
+  } = options;
+
+  // Generate pageId from URL + timestamp
+  const pageId = `page_${btoa(analysis.url).replace(/[^a-zA-Z0-9]/g, '').substring(0, 20)}_${Date.now()}`;
+
+  const result = {
+    pageId,
+    url: analysis.url,
+    title: analysis.title,
+    timestamp: Date.now(),
+    elements: {},
+    groups: {},
+    metadata: {
+      totalElements: 0,
+      interactiveCount: 0,
+      formCount: analysis.forms?.length || 0
+    }
+  };
+
+  const elementsToRegister = [];
+  let elementCounter = { form: 0, input: 0, textarea: 0, select: 0, button: 0, link: 0, element: 0 };
+
+  // Process forms
+  if (analysis.forms && analysis.forms.length > 0) {
+    result.groups.forms = [];
+
+    analysis.forms.forEach((form, formIdx) => {
+      const formId = generateElementId(null, 'form', elementCounter.form++);
+
+      const formElement = {
+        id: formId,
+        type: 'form',
+        selector: form.selector,
+        method: form.method || 'GET',
+        action: form.action || '',
+        fields: {
+          inputs: {},
+          textareas: {},
+          selects: {},
+          checkboxes: {},
+          radios: {}
+        },
+        submitButtons: [],
+        resetButtons: [],
+        validation: {
+          valid: false,
+          requiredFields: [],
+          invalidFields: []
+        }
+      };
+
+      // Process form fields
+      if (form.fields) {
+        form.fields.forEach((field, fieldIdx) => {
+          let fieldType = 'input';
+          if (field.type === 'textarea') fieldType = 'textarea';
+          else if (field.type === 'select') fieldType = 'select';
+          else if (field.type === 'checkbox') fieldType = 'checkbox';
+          else if (field.type === 'radio') fieldType = 'radio';
+
+          const fieldId = generateElementId(null, fieldType, elementCounter[fieldType] || 0);
+          elementCounter[fieldType] = (elementCounter[fieldType] || 0) + 1;
+
+          const fieldElement = {
+            id: fieldId,
+            type: fieldType,
+            selector: field.selector,
+            name: field.name,
+            placeholder: field.placeholder,
+            required: field.required || false,
+            label: field.label,
+            value: field.value || '',
+            disabled: field.disabled || false
+          };
+
+          // Add select-specific data
+          if (fieldType === 'select' && field.options) {
+            fieldElement.options = field.options;
+            fieldElement.selectedValue = field.selectedValue;
+            fieldElement.selectedText = field.selectedText;
+            fieldElement.selectedIndex = field.selectedIndex || -1;
+            fieldElement.multiple = field.multiple || false;
+          }
+
+          // Add UI framework info
+          if (field.uiFramework) {
+            fieldElement.uiFramework = field.uiFramework;
+          }
+
+          // Add to form fields
+          if (fieldType === 'checkbox') {
+            formElement.fields.checkboxes[fieldId] = fieldElement;
+          } else if (fieldType === 'radio') {
+            formElement.fields.radios[fieldId] = fieldElement;
+          } else if (fieldType === 'select') {
+            formElement.fields.selects[fieldId] = fieldElement;
+          } else if (fieldType === 'textarea') {
+            formElement.fields.textareas[fieldId] = fieldElement;
+          } else {
+            formElement.fields.inputs[fieldId] = fieldElement;
+          }
+
+          // Add to global elements
+          result.elements[fieldId] = fieldElement;
+          elementsToRegister.push({ id: fieldId, selector: field.selector });
+
+          // Track required fields
+          if (field.required) {
+            formElement.validation.requiredFields.push(fieldId);
+          }
+        });
+      }
+
+      // Process submit button
+      if (form.submitButton) {
+        const buttonId = generateElementId(null, 'button', elementCounter.button++);
+        const buttonElement = {
+          id: buttonId,
+          type: 'button',
+          buttonType: 'submit',
+          selector: form.submitButton.selector,
+          text: form.submitButton.text,
+          disabled: false
+        };
+
+        formElement.submitButtons.push(buttonElement);
+        result.elements[buttonId] = buttonElement;
+        elementsToRegister.push({ id: buttonId, selector: form.submitButton.selector });
+      }
+
+      // Add form to elements and groups
+      result.elements[formId] = formElement;
+      result.groups.forms.push(formElement);
+      elementsToRegister.push({ id: formId, selector: form.selector });
+    });
+  }
+
+  // Process inputs (that are not in forms)
+  if (analysis.inputs && analysis.inputs.length > 0) {
+    result.groups.inputs = [];
+
+    analysis.inputs.forEach(input => {
+      let inputType = 'input';
+      if (input.type === 'select') inputType = 'select';
+      else if (input.type === 'textarea') inputType = 'textarea';
+
+      const inputId = generateElementId(null, inputType, elementCounter[inputType]++);
+
+      const inputElement = {
+        id: inputId,
+        type: inputType,
+        selector: input.selector,
+        name: input.name,
+        placeholder: input.placeholder
+      };
+
+      // Add select-specific data
+      if (inputType === 'select' && input.options) {
+        inputElement.options = input.options;
+        inputElement.selectedValue = input.selectedValue;
+        inputElement.selectedText = input.selectedText;
+        inputElement.selectedIndex = input.selectedIndex || -1;
+        inputElement.multiple = input.multiple || false;
+      }
+
+      // Add UI framework info
+      if (input.uiFramework) {
+        inputElement.uiFramework = input.uiFramework;
+      }
+
+      result.elements[inputId] = inputElement;
+      result.groups.inputs.push(inputElement);
+      elementsToRegister.push({ id: inputId, selector: input.selector });
+    });
+  }
+
+  // Process buttons
+  if (analysis.buttons && analysis.buttons.length > 0) {
+    result.groups.buttons = [];
+
+    analysis.buttons.forEach(button => {
+      const buttonId = generateElementId(null, 'button', elementCounter.button++);
+
+      const buttonElement = {
+        id: buttonId,
+        type: 'button',
+        buttonType: button.type || 'button',
+        selector: button.selector,
+        text: button.text,
+        inForm: button.inForm || false
+      };
+
+      result.elements[buttonId] = buttonElement;
+      result.groups.buttons.push(buttonElement);
+      elementsToRegister.push({ id: buttonId, selector: button.selector });
+    });
+  }
+
+  // Process links
+  if (analysis.links && analysis.links.length > 0) {
+    result.groups.links = [];
+
+    analysis.links.forEach(link => {
+      const linkId = generateElementId(null, 'link', elementCounter.link++);
+
+      const linkElement = {
+        id: linkId,
+        type: 'link',
+        selector: link.selector,
+        text: link.text,
+        href: link.href
+      };
+
+      result.elements[linkId] = linkElement;
+      result.groups.links.push(linkElement);
+      elementsToRegister.push({ id: linkId, selector: link.selector });
+    });
+  }
+
+  // Update metadata
+  result.metadata.totalElements = Object.keys(result.elements).length;
+  result.metadata.interactiveCount = result.metadata.totalElements;
+
+  // Register elements if requested (registerElements is boolean flag in options)
+  // The actual registration happens in the calling code in index.js after conversion
+
+  return result;
+}
+
+// Helper function: generateElementId
+// Simple version - uses type + context + index
+function generateElementId(element, type, index) {
+  return `${type}_${index}`;
+}
+
+// Export for use in both Node.js and browser context
+if (typeof module !== 'undefined' && module.exports) {
+  module.exports = {
+    convertToAPOM,
+    generateElementId
+  };
+}
+
+// Make available globally in browser context
+if (typeof window !== 'undefined') {
+  window.convertToAPOM = convertToAPOM;
+  window.generateElementId = generateElementId;
+}