cdp-skill 1.0.2 → 1.0.4

package/src/dom/keyboard-executor.js

@@ -0,0 +1,202 @@
+/**
+ * Keyboard Executor
+ * Type and select operations for form inputs
+ *
+ * EXPORTS:
+ * - createKeyboardExecutor(session, elementLocator, inputEmulator) → KeyboardExecutor
+ *   Methods: executeType, executeSelect
+ *
+ * DEPENDENCIES:
+ * - ./element-validator.js: createElementValidator
+ * - ../utils.js: elementNotFoundError, elementNotEditableError
+ */
+
+import { createElementValidator } from './element-validator.js';
+import { elementNotFoundError, elementNotEditableError } from '../utils.js';
+
+/**
+ * Create a keyboard executor for handling type and select operations
+ * @param {Object} session - CDP session
+ * @param {Object} elementLocator - Element locator instance
+ * @param {Object} inputEmulator - Input emulator instance
+ * @returns {Object} Keyboard executor interface
+ */
+export function createKeyboardExecutor(session, elementLocator, inputEmulator) {
+  const validator = createElementValidator(session);
+
+  async function executeType(params) {
+    const { selector, text, delay = 0 } = params;
+
+    if (!selector || text === undefined) {
+      throw new Error('Type requires selector and text');
+    }
+
+    const element = await elementLocator.findElement(selector);
+    if (!element) {
+      throw elementNotFoundError(selector, 0);
+    }
+
+    const editableCheck = await validator.isEditable(element._handle.objectId);
+    if (!editableCheck.editable) {
+      await element._handle.dispose();
+      throw elementNotEditableError(selector, editableCheck.reason);
+    }
+
+    try {
+      await element._handle.scrollIntoView({ block: 'center' });
+      await element._handle.waitForStability({ frames: 2, timeout: 500 });
+
+      await element._handle.focus();
+
+      await inputEmulator.type(String(text), { delay });
+
+      return {
+        selector,
+        typed: String(text),
+        length: String(text).length
+      };
+    } finally {
+      await element._handle.dispose();
+    }
+  }
+
+  async function executeSelect(params) {
+    let selector;
+    let start = null;
+    let end = null;
+
+    if (typeof params === 'string') {
+      selector = params;
+    } else if (params && typeof params === 'object') {
+      selector = params.selector;
+      start = params.start !== undefined ? params.start : null;
+      end = params.end !== undefined ? params.end : null;
+    } else {
+      throw new Error('Select requires a selector string or params object');
+    }
+
+    if (!selector) {
+      throw new Error('Select requires selector');
+    }
+
+    const element = await elementLocator.findElement(selector);
+    if (!element) {
+      throw elementNotFoundError(selector, 0);
+    }
+
+    try {
+      await element._handle.scrollIntoView({ block: 'center' });
+      await element._handle.waitForStability({ frames: 2, timeout: 500 });
+
+      await element._handle.focus();
+
+      const result = await session.send('Runtime.callFunctionOn', {
+        objectId: element._handle.objectId,
+        functionDeclaration: `function(start, end) {
+          const el = this;
+          const tagName = el.tagName.toLowerCase();
+
+          if (tagName === 'input' || tagName === 'textarea') {
+            const len = el.value.length;
+            const selStart = start !== null ? Math.min(start, len) : 0;
+            const selEnd = end !== null ? Math.min(end, len) : len;
+
+            el.focus();
+            el.setSelectionRange(selStart, selEnd);
+
+            return {
+              success: true,
+              start: selStart,
+              end: selEnd,
+              selectedText: el.value.substring(selStart, selEnd),
+              totalLength: len
+            };
+          }
+
+          if (el.isContentEditable) {
+            const range = document.createRange();
+            const text = el.textContent || '';
+            const len = text.length;
+            const selStart = start !== null ? Math.min(start, len) : 0;
+            const selEnd = end !== null ? Math.min(end, len) : len;
+
+            let currentPos = 0;
+            let startNode = null, startOffset = 0;
+            let endNode = null, endOffset = 0;
+
+            function findPosition(node, target) {
+              if (node.nodeType === Node.TEXT_NODE) {
+                const nodeLen = node.textContent.length;
+                if (!startNode && currentPos + nodeLen >= selStart) {
+                  startNode = node;
+                  startOffset = selStart - currentPos;
+                }
+                if (!endNode && currentPos + nodeLen >= selEnd) {
+                  endNode = node;
+                  endOffset = selEnd - currentPos;
+                  return true;
+                }
+                currentPos += nodeLen;
+              } else {
+                for (const child of node.childNodes) {
+                  if (findPosition(child, target)) return true;
+                }
+              }
+              return false;
+            }
+
+            findPosition(el, null);
+
+            if (startNode && endNode) {
+              range.setStart(startNode, startOffset);
+              range.setEnd(endNode, endOffset);
+
+              const selection = window.getSelection();
+              selection.removeAllRanges();
+              selection.addRange(range);
+
+              return {
+                success: true,
+                start: selStart,
+                end: selEnd,
+                selectedText: text.substring(selStart, selEnd),
+                totalLength: len
+              };
+            }
+          }
+
+          return {
+            success: false,
+            reason: 'Element does not support text selection'
+          };
+        }`,
+        arguments: [
+          { value: start },
+          { value: end }
+        ],
+        returnByValue: true
+      });
+
+      const selectionResult = result.result.value;
+
+      if (!selectionResult.success) {
+        throw new Error(selectionResult.reason || 'Selection failed');
+      }
+
+      return {
+        selector,
+        start: selectionResult.start,
+        end: selectionResult.end,
+        selectedText: selectionResult.selectedText,
+        totalLength: selectionResult.totalLength
+      };
+    } finally {
+      await element._handle.dispose();
+    }
+  }
+
+  return {
+    executeType,
+    executeSelect
+  };
+}

package/src/dom/quad-helpers.js

@@ -0,0 +1,89 @@
+/**
+ * Quad Helpers
+ * Geometry calculations for content quads (used by CDP for element positioning)
+ *
+ * EXPORTS:
+ * - calculateQuadCenter(quad) → {x, y} - Get center point of a quad
+ * - calculateQuadArea(quad) → number - Calculate area using shoelace formula
+ * - isPointInQuad(quad, x, y) → boolean - Ray casting point-in-polygon test
+ * - getLargestQuad(quads) → quad|null - Find largest quad by area
+ *
+ * DEPENDENCIES: None
+ */
+
+/**
+ * Calculate center point of a quad
+ * Quads are arrays of 8 numbers: [x1,y1, x2,y2, x3,y3, x4,y4]
+ * @param {number[]} quad - Quad coordinates
+ * @returns {{x: number, y: number}}
+ */
+export function calculateQuadCenter(quad) {
+  let x = 0, y = 0;
+  for (let i = 0; i < 8; i += 2) {
+    x += quad[i];
+    y += quad[i + 1];
+  }
+  return { x: x / 4, y: y / 4 };
+}
+
+/**
+ * Calculate area of a quad using shoelace formula
+ * @param {number[]} quad - Quad coordinates
+ * @returns {number}
+ */
+export function calculateQuadArea(quad) {
+  let area = 0;
+  for (let i = 0; i < 4; i++) {
+    const j = (i + 1) % 4;
+    area += quad[i * 2] * quad[j * 2 + 1];
+    area -= quad[j * 2] * quad[i * 2 + 1];
+  }
+  return Math.abs(area) / 2;
+}
+
+/**
+ * Check if a point is inside a quad using ray casting algorithm
+ * @param {number[]} quad - Quad coordinates
+ * @param {number} x - Point x
+ * @param {number} y - Point y
+ * @returns {boolean}
+ */
+export function isPointInQuad(quad, x, y) {
+  const points = [];
+  for (let i = 0; i < 8; i += 2) {
+    points.push({ x: quad[i], y: quad[i + 1] });
+  }
+
+  let inside = false;
+  for (let i = 0, j = points.length - 1; i < points.length; j = i++) {
+    const xi = points[i].x, yi = points[i].y;
+    const xj = points[j].x, yj = points[j].y;
+
+    if (((yi > y) !== (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi)) {
+      inside = !inside;
+    }
+  }
+  return inside;
+}
+
+/**
+ * Get the largest quad from an array (most likely the visible content area)
+ * @param {number[][]} quads - Array of quads
+ * @returns {number[]|null}
+ */
+export function getLargestQuad(quads) {
+  if (!quads || quads.length === 0) return null;
+  if (quads.length === 1) return quads[0];
+
+  let largest = quads[0];
+  let largestArea = calculateQuadArea(quads[0]);
+
+  for (let i = 1; i < quads.length; i++) {
+    const area = calculateQuadArea(quads[i]);
+    if (area > largestArea) {
+      largestArea = area;
+      largest = quads[i];
+    }
+  }
+  return largest;
+}

package/src/dom/react-filler.js

@@ -0,0 +1,94 @@
+/**
+ * React Input Filler
+ * Handles React controlled component input filling
+ *
+ * EXPORTS:
+ * - createReactInputFiller(session) → ReactInputFiller
+ *   Methods: fillByObjectId, fillBySelector
+ *
+ * DEPENDENCIES: None (uses session directly)
+ */
+
+/**
+ * Create a React input filler for handling React controlled components
+ * @param {Object} session - CDP session
+ * @returns {Object} React input filler interface
+ */
+export function createReactInputFiller(session) {
+  if (!session) {
+    throw new Error('CDP session is required');
+  }
+
+  async function fillByObjectId(objectId, value) {
+    const result = await session.send('Runtime.callFunctionOn', {
+      objectId,
+      functionDeclaration: `function(newValue) {
+        const el = this;
+        const prototype = el.tagName === 'TEXTAREA'
+          ? window.HTMLTextAreaElement.prototype
+          : window.HTMLInputElement.prototype;
+        const nativeValueSetter = Object.getOwnPropertyDescriptor(prototype, 'value').set;
+        nativeValueSetter.call(el, newValue);
+        el.dispatchEvent(new Event('input', { bubbles: true }));
+        el.dispatchEvent(new Event('change', { bubbles: true }));
+        return { success: true, value: el.value };
+      }`,
+      arguments: [{ value: String(value) }],
+      returnByValue: true
+    });
+
+    if (result.exceptionDetails) {
+      const errorText = result.exceptionDetails.exception?.description ||
+                        result.exceptionDetails.text ||
+                        'Unknown error during React fill';
+      throw new Error(`React fill failed: ${errorText}`);
+    }
+
+    return result.result.value;
+  }
+
+  async function fillBySelector(selector, value) {
+    const result = await session.send('Runtime.evaluate', {
+      expression: `
+        (function(selector, newValue) {
+          const el = document.querySelector(selector);
+          if (!el) {
+            return { success: false, error: 'Element not found: ' + selector };
+          }
+          const prototype = el.tagName === 'TEXTAREA'
+            ? window.HTMLTextAreaElement.prototype
+            : window.HTMLInputElement.prototype;
+          const descriptor = Object.getOwnPropertyDescriptor(prototype, 'value');
+          if (!descriptor || !descriptor.set) {
+            return { success: false, error: 'Cannot get native value setter' };
+          }
+          const nativeValueSetter = descriptor.set;
+          nativeValueSetter.call(el, newValue);
+          el.dispatchEvent(new Event('input', { bubbles: true }));
+          el.dispatchEvent(new Event('change', { bubbles: true }));
+          return { success: true, value: el.value };
+        })(${JSON.stringify(selector)}, ${JSON.stringify(String(value))})
+      `,
+      returnByValue: true
+    });
+
+    if (result.exceptionDetails) {
+      const errorText = result.exceptionDetails.exception?.description ||
+                        result.exceptionDetails.text ||
+                        'Unknown error during React fill';
+      throw new Error(`React fill failed: ${errorText}`);
+    }
+
+    const fillResult = result.result.value;
+    if (!fillResult.success) {
+      throw new Error(fillResult.error);
+    }
+
+    return fillResult;
+  }
+
+  return {
+    fillByObjectId,
+    fillBySelector
+  };
+}