cdp-skill 1.0.2 → 1.0.4

package/src/runner/execute-form.js

@@ -0,0 +1,315 @@
+/**
+ * Form Executors
+ * Form validation, submission, state, and assertion step executors
+ *
+ * EXPORTS:
+ * - executeFormState(formValidator, selector) → Promise<Object>
+ * - executeExtract(deps, params) → Promise<Object>
+ * - executeValidate(elementLocator, selector) → Promise<Object>
+ * - executeSubmit(elementLocator, params) → Promise<Object>
+ * - executeAssert(pageController, elementLocator, params) → Promise<Object>
+ *
+ * DEPENDENCIES:
+ * - ../utils.js: createFormValidator
+ */
+
+import { createFormValidator } from '../utils.js';
+
+export async function executeFormState(formValidator, selector) {
+  if (!formValidator) {
+    throw new Error('Form validator not available');
+  }
+
+  const formSelector = typeof selector === 'string' ? selector : selector.selector;
+  if (!formSelector) {
+    throw new Error('formState requires a selector');
+  }
+
+  return formValidator.getFormState(formSelector);
+}
+
+/**
+ * Execute an extract step - extract structured data from tables/lists (Feature 11)
+ * @param {Object} deps - Dependencies
+ * @param {string|Object} params - Selector or options
+ * @returns {Promise<Object>} Extracted data
+ */
+
+export async function executeExtract(deps, params) {
+  const { pageController } = deps;
+  const session = pageController.session;
+
+  const selector = typeof params === 'string' ? params : params.selector;
+  const type = typeof params === 'object' ? params.type : null; // 'table' or 'list'
+  const limit = typeof params === 'object' ? params.limit : 100;
+
+  if (!selector) {
+    throw new Error('extract requires a selector');
+  }
+
+  const result = await session.send('Runtime.evaluate', {
+    expression: `
+      (function() {
+        const selector = ${JSON.stringify(selector)};
+        const typeHint = ${JSON.stringify(type)};
+        const limit = ${limit};
+        const el = document.querySelector(selector);
+
+        if (!el) {
+          return { error: 'Element not found: ' + selector };
+        }
+
+        const tagName = el.tagName.toLowerCase();
+
+        // Auto-detect type if not specified
+        let detectedType = typeHint;
+        if (!detectedType) {
+          if (tagName === 'table') {
+            detectedType = 'table';
+          } else if (tagName === 'ul' || tagName === 'ol' || el.getAttribute('role') === 'list') {
+            detectedType = 'list';
+          } else if (el.querySelector('table')) {
+            detectedType = 'table';
+            // Use the inner table
+          } else if (el.querySelector('ul, ol, [role="list"]')) {
+            detectedType = 'list';
+          } else {
+            // Try to detect based on structure
+            const rows = el.querySelectorAll('[role="row"], tr');
+            if (rows.length > 0) {
+              detectedType = 'table';
+            } else {
+              const items = el.querySelectorAll('[role="listitem"], li');
+              if (items.length > 0) {
+                detectedType = 'list';
+              }
+            }
+          }
+        }
+
+        if (detectedType === 'table') {
+          // Extract table data
+          const tableEl = tagName === 'table' ? el : el.querySelector('table');
+          if (!tableEl) {
+            return { error: 'No table found', type: 'table' };
+          }
+
+          const headers = [];
+          const rows = [];
+
+          // Get headers from thead or first row
+          const headerRow = tableEl.querySelector('thead tr') || tableEl.querySelector('tr');
+          if (headerRow) {
+            const headerCells = headerRow.querySelectorAll('th, td');
+            for (const cell of headerCells) {
+              headers.push((cell.textContent || '').trim());
+            }
+          }
+
+          // Get data rows
+          const dataRows = tableEl.querySelectorAll('tbody tr, tr');
+          let count = 0;
+          for (const row of dataRows) {
+            // Skip header row
+            if (row === headerRow) continue;
+            if (count >= limit) break;
+
+            const cells = row.querySelectorAll('td, th');
+            const rowData = [];
+            for (const cell of cells) {
+              rowData.push((cell.textContent || '').trim());
+            }
+            if (rowData.length > 0) {
+              rows.push(rowData);
+              count++;
+            }
+          }
+
+          return {
+            type: 'table',
+            headers,
+            rows,
+            rowCount: rows.length
+          };
+        }
+
+        if (detectedType === 'list') {
+          // Extract list data
+          const listEl = (tagName === 'ul' || tagName === 'ol') ? el :
+                        el.querySelector('ul, ol, [role="list"]');
+
+          const items = [];
+          const listItems = listEl ?
+            listEl.querySelectorAll(':scope > li, :scope > [role="listitem"]') :
+            el.querySelectorAll('[role="listitem"], li');
+
+          let count = 0;
+          for (const item of listItems) {
+            if (count >= limit) break;
+            const text = (item.textContent || '').trim();
+            if (text) {
+              items.push(text);
+              count++;
+            }
+          }
+
+          return {
+            type: 'list',
+            items,
+            itemCount: items.length
+          };
+        }
+
+        return { error: 'Could not detect data type. Use type: "table" or "list" option.', detectedType };
+      })()
+    `,
+    returnByValue: true
+  });
+
+  if (result.exceptionDetails) {
+    throw new Error('Extract error: ' + result.exceptionDetails.text);
+  }
+
+  const data = result.result.value;
+  if (data.error) {
+    throw new Error(data.error);
+  }
+
+  return data;
+}
+
+/**
+ * Execute a selectOption step - selects option(s) in a native <select> element
+ * Following Puppeteer's approach: set option.selected and dispatch events
+ *
+ * Usage:
+ *   {"selectOption": {"selector": "#dropdown", "value": "optionValue"}}
+ *   {"selectOption": {"selector": "#dropdown", "label": "Option Text"}}
+ *   {"selectOption": {"selector": "#dropdown", "index": 2}}
+ *   {"selectOption": {"selector": "#dropdown", "values": ["a", "b"]}}  // multiple select
+ */
+
+export async function executeValidate(elementLocator, selector) {
+  const formValidator = createFormValidator(elementLocator.session, elementLocator);
+  return formValidator.validateElement(selector);
+}
+
+/**
+ * Execute a submit step - submit a form with validation error reporting
+ */
+
+export async function executeSubmit(elementLocator, params) {
+  const selector = typeof params === 'string' ? params : params.selector;
+  const options = typeof params === 'object' ? params : {};
+
+  const formValidator = createFormValidator(elementLocator.session, elementLocator);
+  return formValidator.submitForm(selector, options);
+}
+
+/**
+ * Execute an assert step - validates conditions about the page
+ * Supports URL assertions and text assertions
+ */
+
+export async function executeAssert(pageController, elementLocator, params) {
+  const result = {
+    passed: true,
+    assertions: []
+  };
+
+  // URL assertion
+  if (params.url) {
+    const currentUrl = await pageController.getUrl();
+    const urlAssertion = { type: 'url', actual: currentUrl };
+
+    if (params.url.contains) {
+      urlAssertion.expected = { contains: params.url.contains };
+      urlAssertion.passed = currentUrl.includes(params.url.contains);
+    } else if (params.url.equals) {
+      urlAssertion.expected = { equals: params.url.equals };
+      urlAssertion.passed = currentUrl === params.url.equals;
+    } else if (params.url.startsWith) {
+      urlAssertion.expected = { startsWith: params.url.startsWith };
+      urlAssertion.passed = currentUrl.startsWith(params.url.startsWith);
+    } else if (params.url.endsWith) {
+      urlAssertion.expected = { endsWith: params.url.endsWith };
+      urlAssertion.passed = currentUrl.endsWith(params.url.endsWith);
+    } else if (params.url.matches) {
+      urlAssertion.expected = { matches: params.url.matches };
+      const regex = new RegExp(params.url.matches);
+      urlAssertion.passed = regex.test(currentUrl);
+    }
+
+    result.assertions.push(urlAssertion);
+    if (!urlAssertion.passed) {
+      result.passed = false;
+    }
+  }
+
+  // Text assertion
+  if (params.text) {
+    const selector = params.selector || 'body';
+    const caseSensitive = params.caseSensitive !== false;
+    const textAssertion = { type: 'text', expected: params.text, selector };
+
+    try {
+      // Get the text content of the target element
+      const textResult = await pageController.session.send('Runtime.evaluate', {
+        expression: `
+          (function() {
+            const el = document.querySelector(${JSON.stringify(selector)});
+            return el ? el.textContent : null;
+          })()
+        `,
+        returnByValue: true
+      });
+
+      const actualText = textResult.result.value;
+      textAssertion.found = actualText !== null;
+
+      if (actualText === null) {
+        textAssertion.passed = false;
+        textAssertion.error = `Element not found: ${selector}`;
+      } else {
+        if (caseSensitive) {
+          textAssertion.passed = actualText.includes(params.text);
+        } else {
+          textAssertion.passed = actualText.toLowerCase().includes(params.text.toLowerCase());
+        }
+        textAssertion.actualLength = actualText.length;
+      }
+    } catch (e) {
+      textAssertion.passed = false;
+      textAssertion.error = e.message;
+    }
+
+    result.assertions.push(textAssertion);
+    if (!textAssertion.passed) {
+      result.passed = false;
+    }
+  }
+
+  // Throw error if assertion failed (makes the step fail)
+  if (!result.passed) {
+    const failedAssertions = result.assertions.filter(a => !a.passed);
+    const messages = failedAssertions.map(a => {
+      if (a.type === 'url') {
+        return `URL assertion failed: expected ${JSON.stringify(a.expected)}, actual "${a.actual}"`;
+      } else if (a.type === 'text') {
+        if (a.error) return `Text assertion failed: ${a.error}`;
+        return `Text assertion failed: "${a.expected}" not found in ${a.selector}`;
+      }
+      return 'Assertion failed';
+    });
+    throw new Error(messages.join('; '));
+  }
+
+  return result;
+}
+
+/**
+ * Execute a queryAll step - runs multiple queries and returns results
+ * @param {Object} elementLocator - Element locator
+ * @param {Object} params - Object mapping names to selectors
+ * @returns {Promise<Object>} Results keyed by query name
+ */

package/src/runner/execute-input.js

@@ -0,0 +1,308 @@
+/**
+ * Input Executors
+ * Fill and select step executors
+ *
+ * EXPORTS:
+ * - executeFill(elementLocator, inputEmulator, params) → Promise<void>
+ * - executeFillActive(pageController, inputEmulator, params) → Promise<Object>
+ * - executeSelectOption(elementLocator, params) → Promise<Object>
+ *
+ * DEPENDENCIES:
+ * - ../dom/index.js: createElementValidator, createReactInputFiller
+ * - ../utils.js: elementNotFoundError, elementNotEditableError, resetInputState
+ */
+
+import { createElementValidator, createReactInputFiller } from '../dom/index.js';
+import { elementNotFoundError, elementNotEditableError, resetInputState } from '../utils.js';
+
+export async function executeFill(elementLocator, inputEmulator, params) {
+  const { selector, value, react } = params;
+
+  if (!selector || value === undefined) {
+    throw new Error('Fill requires selector and value');
+  }
+
+  const element = await elementLocator.findElement(selector);
+  if (!element) {
+    throw elementNotFoundError(selector, 0);
+  }
+
+  // Validate element is editable before attempting fill
+  const validator = createElementValidator(elementLocator.session);
+  const editableCheck = await validator.isEditable(element._handle.objectId);
+  if (!editableCheck.editable) {
+    await element._handle.dispose();
+    throw elementNotEditableError(selector, editableCheck.reason);
+  }
+
+  // Try fast path first - scroll to center with short stability check
+  let actionable;
+  try {
+    await element._handle.scrollIntoView({ block: 'center' });
+    // Use short stability timeout - most elements stabilize quickly
+    await element._handle.waitForStability({ frames: 2, timeout: 300 });
+    actionable = await element._handle.isActionable();
+  } catch (e) {
+    // Stability check failed, check actionability anyway
+    actionable = await element._handle.isActionable();
+  }
+
+  // If not actionable, try alternative scroll strategies
+  if (!actionable.actionable) {
+    let lastError = new Error(`Element not actionable: ${actionable.reason}`);
+
+    for (const strategy of ['end', 'start', 'nearest']) {
+      try {
+        await element._handle.scrollIntoView({ block: strategy });
+        await element._handle.waitForStability({ frames: 2, timeout: 500 });
+        actionable = await element._handle.isActionable();
+
+        if (actionable.actionable) break;
+        lastError = new Error(`Element not actionable: ${actionable.reason}`);
+      } catch (e) {
+        lastError = e;
+      }
+    }
+
+    if (!actionable.actionable) {
+      await element._handle.dispose();
+      await resetInputState(elementLocator.session);
+      throw lastError;
+    }
+  }
+
+  try {
+    // Use React-specific fill approach if react option is set
+    if (react) {
+      const reactFiller = createReactInputFiller(elementLocator.session);
+      await reactFiller.fillByObjectId(element._handle.objectId, value);
+      return; // Success
+    }
+
+    // Standard fill approach using keyboard events
+    const box = await element._handle.getBoundingBox();
+    const x = box.x + box.width / 2;
+    const y = box.y + box.height / 2;
+
+    // Click to focus
+    await inputEmulator.click(x, y);
+
+    // Focus element directly - more reliable than relying on click
+    await element._handle.focus();
+
+    if (params.clear !== false) {
+      await inputEmulator.selectAll();
+    }
+
+    await inputEmulator.type(String(value));
+  } catch (e) {
+    await resetInputState(elementLocator.session);
+    throw e;
+  } finally {
+    await element._handle.dispose();
+  }
+}
+
+/**
+ * Execute a selectOption step - select option in dropdown
+ */
+export async function executeSelectOption(elementLocator, params) {
+  const selector = params.selector;
+  const value = params.value;
+  const label = params.label;
+  const index = params.index;
+  const values = params.values; // for multi-select
+
+  if (!selector) {
+    throw new Error('selectOption requires selector');
+  }
+  if (value === undefined && label === undefined && index === undefined && !values) {
+    throw new Error('selectOption requires value, label, index, or values');
+  }
+
+  const element = await elementLocator.findElement(selector);
+  if (!element) {
+    throw elementNotFoundError(selector, 0);
+  }
+
+  try {
+    const result = await elementLocator.session.send('Runtime.callFunctionOn', {
+      objectId: element._handle.objectId,
+      functionDeclaration: `function(matchBy, matchValue, matchValues) {
+        const el = this;
+
+        // Validate element is a select
+        if (!(el instanceof HTMLSelectElement)) {
+          return { error: 'Element is not a <select> element' };
+        }
+
+        const selectedValues = [];
+        const isMultiple = el.multiple;
+        const options = Array.from(el.options);
+
+        // Build match function based on type
+        let matchFn;
+        if (matchBy === 'value') {
+          const valuesToMatch = matchValues ? matchValues : [matchValue];
+          matchFn = (opt) => valuesToMatch.includes(opt.value);
+        } else if (matchBy === 'label') {
+          matchFn = (opt) => opt.textContent.trim() === matchValue || opt.label === matchValue;
+        } else if (matchBy === 'index') {
+          matchFn = (opt, idx) => idx === matchValue;
+        } else {
+          return { error: 'Invalid match type' };
+        }
+
+        // For single-select, deselect all first
+        if (!isMultiple) {
+          for (const option of options) {
+            option.selected = false;
+          }
+        }
+
+        // Select matching options
+        let matched = false;
+        for (let i = 0; i < options.length; i++) {
+          const option = options[i];
+          if (matchFn(option, i)) {
+            option.selected = true;
+            selectedValues.push(option.value);
+            matched = true;
+            if (!isMultiple) break; // Single select stops at first match
+          }
+        }
+
+        if (!matched) {
+          return {
+            error: 'No option matched',
+            matchBy,
+            matchValue: matchValues || matchValue,
+            availableOptions: options.slice(0, 10).map(o => ({ value: o.value, label: o.textContent.trim() }))
+          };
+        }
+
+        // Dispatch events (same as Puppeteer)
+        el.dispatchEvent(new Event('input', { bubbles: true }));
+        el.dispatchEvent(new Event('change', { bubbles: true }));
+
+        return {
+          success: true,
+          selected: selectedValues,
+          multiple: isMultiple
+        };
+      }`,
+      arguments: [
+        { value: values ? 'value' : (value !== undefined ? 'value' : (label !== undefined ? 'label' : 'index')) },
+        { value: value !== undefined ? value : (label !== undefined ? label : index) },
+        { value: values || null }
+      ],
+      returnByValue: true
+    });
+
+    const selectResult = result.result.value;
+
+    if (selectResult.error) {
+      const errorMsg = selectResult.error;
+      if (selectResult.availableOptions) {
+        throw new Error(`${errorMsg}. Available options: ${JSON.stringify(selectResult.availableOptions)}`);
+      }
+      throw new Error(errorMsg);
+    }
+
+    return {
+      selected: selectResult.selected,
+      multiple: selectResult.multiple
+    };
+  } finally {
+    await element._handle.dispose();
+  }
+}
+
+/**
+ * Execute a getDom step - get raw HTML of page or element
+ * @param {Object} pageController - Page controller
+ * @param {boolean|string|Object} params - true for full page, selector string, or options object
+ * @returns {Promise<Object>} DOM content
+ */
+
+export async function executeFillActive(pageController, inputEmulator, params) {
+  const session = pageController.session;
+
+  // Parse params
+  const value = typeof params === 'string' ? params : params.value;
+  const clear = typeof params === 'object' ? params.clear !== false : true;
+
+  // Check if there's an active element and if it's editable
+  const checkResult = await session.send('Runtime.evaluate', {
+    expression: `(function() {
+      const el = document.activeElement;
+      if (!el || el === document.body || el === document.documentElement) {
+        return { error: 'No element is focused' };
+      }
+
+      const tag = el.tagName;
+      const isInput = tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT';
+      const isContentEditable = el.isContentEditable;
+
+      if (!isInput && !isContentEditable) {
+        return { error: 'Focused element is not editable', tag: tag };
+      }
+
+      // Check if disabled or readonly
+      if (el.disabled) {
+        return { error: 'Focused element is disabled', tag: tag };
+      }
+      if (el.readOnly) {
+        return { error: 'Focused element is readonly', tag: tag };
+      }
+
+      // Build selector for reporting
+      let selector = tag.toLowerCase();
+      if (el.id) {
+        selector = '#' + el.id;
+      } else if (el.name) {
+        selector = '[name="' + el.name + '"]';
+      }
+
+      return {
+        editable: true,
+        tag: tag,
+        type: tag === 'INPUT' ? (el.type || 'text') : null,
+        selector: selector,
+        valueBefore: el.value || ''
+      };
+    })()`,
+    returnByValue: true
+  });
+
+  if (checkResult.exceptionDetails) {
+    throw new Error(`fillActive error: ${checkResult.exceptionDetails.text}`);
+  }
+
+  const check = checkResult.result.value;
+  if (check.error) {
+    throw new Error(check.error);
+  }
+
+  // Clear existing content if requested
+  if (clear) {
+    await inputEmulator.selectAll();
+  }
+
+  // Type the new value
+  await inputEmulator.type(String(value));
+
+  return {
+    filled: true,
+    tag: check.tag,
+    type: check.type,
+    selector: check.selector,
+    valueBefore: check.valueBefore,
+    valueAfter: value
+  };
+}
+
+/**
+ * Execute a refAt step - get or create a ref for the element at given coordinates
+ * Uses document.elementFromPoint to find the element, then assigns/retrieves a ref
+ */