chrometools-mcp 2.4.2 → 3.1.2

package/models/BaseInputModel.js

@@ -0,0 +1,93 @@
+/**
+ * models/BaseInputModel.js
+ *
+ * Base class for all input element models.
+ * Provides common interface for interacting with form elements.
+ */
+
+export class BaseInputModel {
+  constructor(element, page) {
+    this.element = element;
+    this.page = page;
+  }
+
+  /**
+   * Get the input type (to be overridden by subclasses)
+   */
+  static get inputTypes() {
+    return [];
+  }
+
+  /**
+   * Check if this model handles the given input type
+   */
+  static handles(inputType) {
+    return this.inputTypes.includes(inputType?.toLowerCase());
+  }
+
+  /**
+   * Set value on the element
+   * @param {string} value - Value to set
+   * @param {object} options - Additional options (delay, clearFirst, etc.)
+   */
+  async setValue(value, options = {}) {
+    throw new Error('setValue must be implemented by subclass');
+  }
+
+  /**
+   * Get current value from the element
+   */
+  async getValue() {
+    return await this.element.evaluate(el => el.value);
+  }
+
+  /**
+   * Clear the element value
+   */
+  async clear() {
+    await this.element.evaluate(el => {
+      el.value = '';
+      el.dispatchEvent(new Event('input', { bubbles: true }));
+      el.dispatchEvent(new Event('change', { bubbles: true }));
+    });
+  }
+
+  /**
+   * Focus on the element
+   */
+  async focus() {
+    await this.element.focus();
+  }
+
+  /**
+   * Dispatch input and change events (for framework compatibility)
+   */
+  async dispatchEvents() {
+    await this.element.evaluate(el => {
+      el.dispatchEvent(new Event('input', { bubbles: true }));
+      el.dispatchEvent(new Event('change', { bubbles: true }));
+    });
+  }
+
+  /**
+   * Get element metadata
+   */
+  async getMetadata() {
+    return await this.element.evaluate(el => ({
+      tagName: el.tagName.toLowerCase(),
+      type: el.type,
+      name: el.name,
+      id: el.id,
+      disabled: el.disabled,
+      required: el.required,
+      value: el.value,
+    }));
+  }
+
+  /**
+   * Get description of the action performed (for logging)
+   */
+  getActionDescription(value, identifier) {
+    return `Set value "${value}" on ${identifier}`;
+  }
+}

package/models/CheckboxGroupModel.js

@@ -0,0 +1,199 @@
+/**
+ * models/CheckboxGroupModel.js
+ *
+ * Model for checkbox groups.
+ * Allows selecting multiple options from a group by name, values, or label texts.
+ * Supports set (replace all), add, remove, and toggle modes.
+ */
+
+import { BaseInputModel } from './BaseInputModel.js';
+
+export class CheckboxGroupModel extends BaseInputModel {
+  /**
+   * Create a CheckboxGroupModel
+   * @param {string} groupName - The name attribute of the checkbox group
+   * @param {Page} page - Puppeteer page
+   */
+  constructor(groupName, page) {
+    super(null, page);
+    this.groupName = groupName;
+  }
+
+  /**
+   * Get all options in this checkbox group
+   */
+  async getOptions() {
+    return await this.page.evaluate((name) => {
+      const inputs = document.querySelectorAll(`input[type="checkbox"][name="${name}"]`);
+      return Array.from(inputs).map(input => {
+        // Find label text
+        let label = null;
+        const parentLabel = input.closest('label');
+        if (parentLabel) {
+          label = parentLabel.textContent?.trim();
+        } else if (input.id) {
+          const labelFor = document.querySelector(`label[for="${input.id}"]`);
+          if (labelFor) {
+            label = labelFor.textContent?.trim();
+          }
+        }
+        label = label || input.getAttribute('aria-label') || input.value;
+
+        return {
+          value: input.value,
+          label,
+          checked: input.checked,
+          disabled: input.disabled
+        };
+      });
+    }, this.groupName);
+  }
+
+  /**
+   * Get currently selected values
+   */
+  async getValue() {
+    return await this.page.evaluate((name) => {
+      const checked = document.querySelectorAll(`input[type="checkbox"][name="${name}"]:checked`);
+      return Array.from(checked).map(input => input.value);
+    }, this.groupName);
+  }
+
+  /**
+   * Set checkbox values
+   * @param {string|string[]} values - Value(s) or label text(s) to select
+   * @param {object} options - { mode: 'set'|'add'|'remove'|'toggle', by: 'value'|'text'|'auto' }
+   */
+  async setValue(values, options = {}) {
+    const { mode = 'set', by = 'auto' } = options;
+    const valueList = Array.isArray(values) ? values : [values];
+
+    const result = await this.page.evaluate((name, vals, selectMode, selectBy) => {
+      const inputs = document.querySelectorAll(`input[type="checkbox"][name="${name}"]`);
+      const changes = [];
+
+      // Helper to check if value matches
+      const matches = (input, val) => {
+        // Get label text
+        let label = null;
+        const parentLabel = input.closest('label');
+        if (parentLabel) {
+          label = parentLabel.textContent?.trim();
+        } else if (input.id) {
+          const labelFor = document.querySelector(`label[for="${input.id}"]`);
+          if (labelFor) {
+            label = labelFor.textContent?.trim();
+          }
+        }
+        label = label || input.getAttribute('aria-label');
+
+        switch (selectBy) {
+          case 'value':
+            return input.value === val;
+          case 'text':
+            return label && (label === val || label.toLowerCase().includes(val.toLowerCase()));
+          case 'auto':
+          default:
+            return input.value === val ||
+                   (label && (label === val || label.toLowerCase().includes(val.toLowerCase())));
+        }
+      };
+
+      // If mode is 'set', first uncheck all (that are not in values)
+      if (selectMode === 'set') {
+        for (const input of inputs) {
+          if (input.disabled) continue;
+          const shouldBeChecked = vals.some(val => matches(input, val));
+          if (input.checked !== shouldBeChecked) {
+            input.checked = shouldBeChecked;
+            input.dispatchEvent(new Event('input', { bubbles: true }));
+            input.dispatchEvent(new Event('change', { bubbles: true }));
+            changes.push({ value: input.value, checked: shouldBeChecked });
+          }
+        }
+      } else {
+        // For add/remove/toggle modes
+        for (const val of vals) {
+          for (const input of inputs) {
+            if (input.disabled) continue;
+            if (!matches(input, val)) continue;
+
+            let newState = input.checked;
+            switch (selectMode) {
+              case 'add':
+                newState = true;
+                break;
+              case 'remove':
+                newState = false;
+                break;
+              case 'toggle':
+                newState = !input.checked;
+                break;
+            }
+
+            if (input.checked !== newState) {
+              input.checked = newState;
+              input.dispatchEvent(new Event('input', { bubbles: true }));
+              input.dispatchEvent(new Event('change', { bubbles: true }));
+              changes.push({ value: input.value, checked: newState });
+            }
+            break; // Found matching input for this value
+          }
+        }
+      }
+
+      // Get final state
+      const checked = document.querySelectorAll(`input[type="checkbox"][name="${name}"]:checked`);
+      return {
+        success: true,
+        changes,
+        selectedValues: Array.from(checked).map(input => input.value)
+      };
+    }, this.groupName, valueList, mode, by);
+
+    return result;
+  }
+
+  /**
+   * Check specific values (add mode)
+   */
+  async check(values) {
+    return await this.setValue(values, { mode: 'add' });
+  }
+
+  /**
+   * Uncheck specific values (remove mode)
+   */
+  async uncheck(values) {
+    return await this.setValue(values, { mode: 'remove' });
+  }
+
+  /**
+   * Toggle specific values
+   */
+  async toggle(values) {
+    return await this.setValue(values, { mode: 'toggle' });
+  }
+
+  /**
+   * Clear all checkboxes
+   */
+  async clear() {
+    return await this.page.evaluate((name) => {
+      const inputs = document.querySelectorAll(`input[type="checkbox"][name="${name}"]:checked`);
+      inputs.forEach(input => {
+        if (!input.disabled) {
+          input.checked = false;
+          input.dispatchEvent(new Event('input', { bubbles: true }));
+          input.dispatchEvent(new Event('change', { bubbles: true }));
+        }
+      });
+      return { success: true, cleared: inputs.length };
+    }, this.groupName);
+  }
+
+  getActionDescription(values, identifier) {
+    const valueList = Array.isArray(values) ? values : [values];
+    return `Selected [${valueList.join(', ')}] in checkbox group "${this.groupName}"`;
+  }
+}

package/models/CheckboxModel.js

@@ -0,0 +1,103 @@
+/**
+ * models/CheckboxModel.js
+ *
+ * Model for checkbox and radio button inputs.
+ * Supports check, uncheck, toggle, and click operations.
+ */
+
+import { BaseInputModel } from './BaseInputModel.js';
+
+export class CheckboxModel extends BaseInputModel {
+  static get inputTypes() {
+    return ['checkbox', 'radio'];
+  }
+
+  /**
+   * Set checkbox/radio state
+   * @param {string|boolean} value - 'check', 'uncheck', 'toggle', true, false
+   * @param {object} options - (unused, for interface compatibility)
+   */
+  async setValue(value, options = {}) {
+    const normalizedValue = this._normalizeValue(value);
+
+    await this.element.evaluate((el, shouldBeChecked) => {
+      if (shouldBeChecked === 'toggle') {
+        el.checked = !el.checked;
+      } else {
+        el.checked = shouldBeChecked;
+      }
+      el.dispatchEvent(new Event('input', { bubbles: true }));
+      el.dispatchEvent(new Event('change', { bubbles: true }));
+    }, normalizedValue);
+  }
+
+  _normalizeValue(value) {
+    if (typeof value === 'boolean') {
+      return value;
+    }
+
+    const strValue = String(value).toLowerCase();
+
+    if (['check', 'checked', 'true', 'yes', '1', 'on'].includes(strValue)) {
+      return true;
+    }
+    if (['uncheck', 'unchecked', 'false', 'no', '0', 'off'].includes(strValue)) {
+      return false;
+    }
+    if (strValue === 'toggle') {
+      return 'toggle';
+    }
+
+    // Default: treat as check
+    return true;
+  }
+
+  /**
+   * Check the checkbox/radio
+   */
+  async check() {
+    await this.setValue(true);
+  }
+
+  /**
+   * Uncheck the checkbox (not applicable to radio)
+   */
+  async uncheck() {
+    await this.setValue(false);
+  }
+
+  /**
+   * Toggle the checkbox state
+   */
+  async toggle() {
+    await this.setValue('toggle');
+  }
+
+  /**
+   * Check if currently checked
+   */
+  async isChecked() {
+    return await this.element.evaluate(el => el.checked);
+  }
+
+  async getValue() {
+    return await this.isChecked();
+  }
+
+  async getMetadata() {
+    const base = await super.getMetadata();
+    const extra = await this.element.evaluate(el => ({
+      checked: el.checked,
+      inputValue: el.value, // The value attribute (sent when checked)
+    }));
+    return { ...base, ...extra };
+  }
+
+  getActionDescription(value, identifier) {
+    const normalizedValue = this._normalizeValue(value);
+    if (normalizedValue === 'toggle') {
+      return `Toggled ${identifier}`;
+    }
+    return normalizedValue ? `Checked ${identifier}` : `Unchecked ${identifier}`;
+  }
+}

package/models/ColorInputModel.js

@@ -0,0 +1,53 @@
+/**
+ * models/ColorInputModel.js
+ *
+ * Model for color picker inputs.
+ * Sets value directly via JavaScript.
+ *
+ * Expected format: "#RRGGBB" (hex color)
+ */
+
+import { BaseInputModel } from './BaseInputModel.js';
+
+export class ColorInputModel extends BaseInputModel {
+  static get inputTypes() {
+    return ['color'];
+  }
+
+  /**
+   * Set color value directly via JavaScript
+   * @param {string} value - Color in hex format "#RRGGBB"
+   * @param {object} options - (unused, for interface compatibility)
+   */
+  async setValue(value, options = {}) {
+    // Normalize color format
+    let normalizedValue = value;
+
+    // Add # if missing
+    if (!normalizedValue.startsWith('#')) {
+      normalizedValue = '#' + normalizedValue;
+    }
+
+    // Convert 3-char hex to 6-char
+    if (/^#[0-9A-Fa-f]{3}$/.test(normalizedValue)) {
+      normalizedValue = '#' + normalizedValue[1] + normalizedValue[1] +
+                              normalizedValue[2] + normalizedValue[2] +
+                              normalizedValue[3] + normalizedValue[3];
+    }
+
+    // Validate hex color format
+    if (!/^#[0-9A-Fa-f]{6}$/.test(normalizedValue)) {
+      console.warn(`ColorInputModel: Value "${value}" may not be a valid hex color`);
+    }
+
+    await this.element.evaluate((el, val) => {
+      el.value = val;
+      el.dispatchEvent(new Event('input', { bubbles: true }));
+      el.dispatchEvent(new Event('change', { bubbles: true }));
+    }, normalizedValue.toLowerCase());
+  }
+
+  getActionDescription(value, identifier) {
+    return `Set color "${value}" on ${identifier}`;
+  }
+}

package/models/DateInputModel.js

@@ -0,0 +1,67 @@
+/**
+ * models/DateInputModel.js
+ *
+ * Model for date-related input fields.
+ * Handles: date, datetime-local, month, week
+ * Sets value directly via JavaScript since keyboard input doesn't work reliably.
+ *
+ * Expected formats:
+ * - date: "YYYY-MM-DD"
+ * - datetime-local: "YYYY-MM-DDTHH:MM" or "YYYY-MM-DDTHH:MM:SS"
+ * - month: "YYYY-MM"
+ * - week: "YYYY-Www" (e.g., "2024-W01")
+ */
+
+import { BaseInputModel } from './BaseInputModel.js';
+
+export class DateInputModel extends BaseInputModel {
+  static get inputTypes() {
+    return ['date', 'datetime-local', 'month', 'week'];
+  }
+
+  /**
+   * Set date value directly via JavaScript
+   * @param {string} value - Date in appropriate format for input type
+   * @param {object} options - (unused, for interface compatibility)
+   */
+  async setValue(value, options = {}) {
+    const inputType = await this.element.evaluate(el => el.type);
+
+    // Validate format based on input type
+    this._validateFormat(value, inputType);
+
+    await this.element.evaluate((el, val) => {
+      el.value = val;
+      el.dispatchEvent(new Event('input', { bubbles: true }));
+      el.dispatchEvent(new Event('change', { bubbles: true }));
+    }, value);
+  }
+
+  _validateFormat(value, inputType) {
+    const formats = {
+      'date': /^\d{4}-\d{2}-\d{2}$/,
+      'datetime-local': /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}(:\d{2})?$/,
+      'month': /^\d{4}-\d{2}$/,
+      'week': /^\d{4}-W\d{2}$/,
+    };
+
+    const regex = formats[inputType];
+    if (regex && !regex.test(value)) {
+      console.warn(`DateInputModel: Value "${value}" may not be in correct format for ${inputType}`);
+    }
+  }
+
+  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 date "${value}" on ${identifier}`;
+  }
+}

package/models/RadioGroupModel.js

@@ -0,0 +1,126 @@
+/**
+ * models/RadioGroupModel.js
+ *
+ * Model for radio button groups.
+ * Allows selecting one option from a group by name, value, or label text.
+ */
+
+import { BaseInputModel } from './BaseInputModel.js';
+
+export class RadioGroupModel extends BaseInputModel {
+  /**
+   * Create a RadioGroupModel
+   * @param {string} groupName - The name attribute of the radio group
+   * @param {Page} page - Puppeteer page
+   */
+  constructor(groupName, page) {
+    super(null, page);
+    this.groupName = groupName;
+  }
+
+  /**
+   * Get all options in this radio group
+   */
+  async getOptions() {
+    return await this.page.evaluate((name) => {
+      const inputs = document.querySelectorAll(`input[type="radio"][name="${name}"]`);
+      return Array.from(inputs).map(input => {
+        // Find label text
+        let label = null;
+        const parentLabel = input.closest('label');
+        if (parentLabel) {
+          label = parentLabel.textContent?.trim();
+        } else if (input.id) {
+          const labelFor = document.querySelector(`label[for="${input.id}"]`);
+          if (labelFor) {
+            label = labelFor.textContent?.trim();
+          }
+        }
+        label = label || input.getAttribute('aria-label') || input.value;
+
+        return {
+          value: input.value,
+          label,
+          checked: input.checked,
+          disabled: input.disabled
+        };
+      });
+    }, this.groupName);
+  }
+
+  /**
+   * Get currently selected value
+   */
+  async getValue() {
+    return await this.page.evaluate((name) => {
+      const checked = document.querySelector(`input[type="radio"][name="${name}"]:checked`);
+      return checked ? checked.value : null;
+    }, this.groupName);
+  }
+
+  /**
+   * Select a radio option by value or label text
+   * @param {string} value - Value or label text to select
+   * @param {object} options - { by: 'value'|'text'|'auto' }
+   */
+  async setValue(value, options = {}) {
+    const { by = 'auto' } = options;
+
+    const result = await this.page.evaluate((name, val, selectBy) => {
+      const inputs = document.querySelectorAll(`input[type="radio"][name="${name}"]`);
+
+      for (const input of inputs) {
+        if (input.disabled) continue;
+
+        let match = false;
+
+        // Get label text
+        let label = null;
+        const parentLabel = input.closest('label');
+        if (parentLabel) {
+          label = parentLabel.textContent?.trim();
+        } else if (input.id) {
+          const labelFor = document.querySelector(`label[for="${input.id}"]`);
+          if (labelFor) {
+            label = labelFor.textContent?.trim();
+          }
+        }
+        label = label || input.getAttribute('aria-label');
+
+        switch (selectBy) {
+          case 'value':
+            match = input.value === val;
+            break;
+          case 'text':
+            match = label && (label === val || label.toLowerCase().includes(val.toLowerCase()));
+            break;
+          case 'auto':
+          default:
+            // Try value first, then label
+            match = input.value === val ||
+                    (label && (label === val || label.toLowerCase().includes(val.toLowerCase())));
+            break;
+        }
+
+        if (match) {
+          input.checked = true;
+          input.dispatchEvent(new Event('input', { bubbles: true }));
+          input.dispatchEvent(new Event('change', { bubbles: true }));
+          return { success: true, selectedValue: input.value, selectedLabel: label };
+        }
+      }
+
+      return { success: false, error: `No matching option found for "${val}" in radio group "${name}"` };
+    }, this.groupName, value, by);
+
+    if (!result.success) {
+      throw new Error(result.error);
+    }
+
+    return result;
+  }
+
+  getActionDescription(value, identifier) {
+    return `Selected "${value}" in radio group "${this.groupName}"`;
+  }
+}

package/models/RangeInputModel.js

@@ -0,0 +1,60 @@
+/**
+ * models/RangeInputModel.js
+ *
+ * Model for range/slider inputs.
+ * Sets value directly via JavaScript.
+ *
+ * Expected format: numeric value within min/max range
+ */
+
+import { BaseInputModel } from './BaseInputModel.js';
+
+export class RangeInputModel extends BaseInputModel {
+  static get inputTypes() {
+    return ['range'];
+  }
+
+  /**
+   * Set range value directly via JavaScript
+   * @param {string|number} value - Numeric value
+   * @param {object} options - (unused, for interface compatibility)
+   */
+  async setValue(value, options = {}) {
+    const numericValue = parseFloat(value);
+
+    if (isNaN(numericValue)) {
+      console.warn(`RangeInputModel: Value "${value}" is not a valid number`);
+    }
+
+    // Get min/max and clamp value
+    const { min, max } = await this.element.evaluate(el => ({
+      min: parseFloat(el.min) || 0,
+      max: parseFloat(el.max) || 100,
+    }));
+
+    const clampedValue = Math.max(min, Math.min(max, numericValue));
+    if (clampedValue !== numericValue) {
+      console.warn(`RangeInputModel: Value ${numericValue} clamped to ${clampedValue} (range: ${min}-${max})`);
+    }
+
+    await this.element.evaluate((el, val) => {
+      el.value = val;
+      el.dispatchEvent(new Event('input', { bubbles: true }));
+      el.dispatchEvent(new Event('change', { bubbles: true }));
+    }, clampedValue.toString());
+  }
+
+  async getMetadata() {
+    const base = await super.getMetadata();
+    const extra = await this.element.evaluate(el => ({
+      min: el.min || '0',
+      max: el.max || '100',
+      step: el.step || '1',
+    }));
+    return { ...base, ...extra };
+  }
+
+  getActionDescription(value, identifier) {
+    return `Set range value "${value}" on ${identifier}`;
+  }
+}