browser-debugger-cli 0.6.0 → 0.6.1

package/dist/commands/dom/helpers.js

@@ -0,0 +1,244 @@
+/**
+ * DOM helpers using CDP relay pattern.
+ *
+ * Provides query, get, and screenshot functionality using the worker's persistent CDP connection.
+ * All operations go through IPC callCDP() for optimal performance.
+ */
+import { CDPConnectionError } from '../../connection/errors.js';
+import { callCDP } from '../../ipc/client.js';
+import { CommandError } from '../../ui/errors/index.js';
+import { createLogger } from '../../ui/logging/index.js';
+import { ConcurrencyLimiter } from '../../utils/concurrency.js';
+import { EXIT_CODES } from '../../utils/exitCodes.js';
+const log = createLogger('dom');
+/**
+ * Maximum concurrent CDP calls for DOM operations.
+ * Prevents overwhelming CDP connection with too many simultaneous requests.
+ */
+const CDP_CONCURRENCY_LIMIT = 10;
+/**
+ * Query DOM elements by CSS selector using CDP relay.
+ *
+ * @param selector - CSS selector to query
+ * @returns Query result with matched nodes
+ * @throws CDPConnectionError if CDP operation fails
+ */
+export async function queryDOMElements(selector) {
+    // Enable DOM domain
+    await callCDP('DOM.enable', {});
+    // Get document root
+    const docResponse = await callCDP('DOM.getDocument', {});
+    const doc = docResponse.data?.result;
+    if (!doc?.root?.nodeId) {
+        throw new CDPConnectionError('Failed to get document root', new Error('No root node'));
+    }
+    // Query selector
+    const queryResponse = await callCDP('DOM.querySelectorAll', {
+        nodeId: doc.root.nodeId,
+        selector,
+    });
+    const queryResult = queryResponse.data?.result;
+    const nodeIds = queryResult?.nodeIds ?? [];
+    // Log progress for large queries
+    if (nodeIds.length > 20) {
+        log.debug(`Querying ${nodeIds.length} elements with selector: ${selector}`);
+    }
+    // Get info for each node with concurrency control
+    const limiter = new ConcurrencyLimiter(CDP_CONCURRENCY_LIMIT);
+    const nodes = await Promise.all(nodeIds.map((nodeId, index) => limiter.run(async () => {
+        // Describe node
+        const descResponse = await callCDP('DOM.describeNode', { nodeId });
+        const descResult = descResponse.data?.result;
+        const nodeDesc = descResult?.node;
+        if (!nodeDesc) {
+            return { index, nodeId };
+        }
+        // Parse attributes
+        const attributes = {};
+        if (nodeDesc.attributes) {
+            for (let i = 0; i < nodeDesc.attributes.length; i += 2) {
+                const key = nodeDesc.attributes[i];
+                const value = nodeDesc.attributes[i + 1];
+                if (key !== undefined && value !== undefined) {
+                    attributes[key] = value;
+                }
+            }
+        }
+        // Extract classes and create preview
+        const classes = attributes['class']?.split(/\s+/).filter((c) => c.length > 0);
+        const tag = nodeDesc.nodeName.toLowerCase();
+        // Get outer HTML for preview
+        const htmlResponse = await callCDP('DOM.getOuterHTML', { nodeId });
+        const htmlResult = htmlResponse.data?.result;
+        const outerHTML = htmlResult?.outerHTML ?? '';
+        // Create preview text
+        const textContent = outerHTML
+            .replace(/<[^>]*>/g, '')
+            .replace(/\s+/g, ' ')
+            .trim();
+        const preview = textContent.slice(0, 80) + (textContent.length > 80 ? '...' : '');
+        const node = { index, nodeId };
+        if (tag)
+            node.tag = tag;
+        if (classes)
+            node.classes = classes;
+        if (preview)
+            node.preview = preview;
+        return node;
+    })));
+    return {
+        selector,
+        count: nodes.length,
+        nodes,
+    };
+}
+/**
+ * Get full HTML and attributes for DOM elements using CDP relay.
+ *
+ * @param options - Get options (selector or nodeId, plus optional --all or --nth flags)
+ * @returns Get result with node details
+ * @throws CDPConnectionError if CDP operation fails
+ */
+export async function getDOMElements(options) {
+    await callCDP('DOM.enable', {});
+    let nodeIds = [];
+    if (options.nodeId !== undefined) {
+        nodeIds = [options.nodeId];
+    }
+    else if (options.selector) {
+        // Get document root
+        const docResponse = await callCDP('DOM.getDocument', {});
+        const doc = docResponse.data?.result;
+        if (!doc?.root?.nodeId) {
+            throw new CDPConnectionError('Failed to get document root', new Error('No root node'));
+        }
+        // Query selector
+        const queryResponse = await callCDP('DOM.querySelectorAll', {
+            nodeId: doc.root.nodeId,
+            selector: options.selector,
+        });
+        const queryResult = queryResponse.data?.result;
+        nodeIds = queryResult?.nodeIds ?? [];
+        if (nodeIds.length === 0) {
+            throw new CommandError(`No elements found matching "${options.selector}"`, { suggestion: 'Verify the CSS selector is correct' }, EXIT_CODES.RESOURCE_NOT_FOUND);
+        }
+        // Apply filtering
+        if (options.nth !== undefined) {
+            if (options.nth < 1 || options.nth > nodeIds.length) {
+                throw new CommandError(`--nth ${options.nth} out of range (found ${nodeIds.length} elements)`, { suggestion: `Use a value between 1 and ${nodeIds.length}` }, EXIT_CODES.INVALID_ARGUMENTS);
+            }
+            const nthNode = nodeIds[options.nth - 1];
+            if (nthNode === undefined) {
+                throw new CommandError(`Element at index ${options.nth} not found`, {}, EXIT_CODES.RESOURCE_NOT_FOUND);
+            }
+            nodeIds = [nthNode];
+        }
+        else if (!options.all) {
+            // Default: return first match only
+            const firstNode = nodeIds[0];
+            if (firstNode === undefined) {
+                throw new CommandError('No elements found', {}, EXIT_CODES.RESOURCE_NOT_FOUND);
+            }
+            nodeIds = [firstNode];
+        }
+    }
+    else {
+        throw new CommandError('Either selector or nodeId must be provided', {}, EXIT_CODES.INVALID_ARGUMENTS);
+    }
+    // Log progress for large fetches
+    if (nodeIds.length > 20) {
+        log.debug(`Fetching details for ${nodeIds.length} DOM elements`);
+    }
+    // Fetch node details with concurrency control
+    const limiter = new ConcurrencyLimiter(CDP_CONCURRENCY_LIMIT);
+    const nodes = await Promise.all(nodeIds.map((nodeId) => limiter.run(async () => {
+        // Describe node
+        const descResponse = await callCDP('DOM.describeNode', { nodeId });
+        const descResult = descResponse.data?.result;
+        const nodeDesc = descResult?.node;
+        if (!nodeDesc) {
+            return { nodeId };
+        }
+        // Parse attributes
+        const attributes = {};
+        if (nodeDesc.attributes) {
+            for (let i = 0; i < nodeDesc.attributes.length; i += 2) {
+                const key = nodeDesc.attributes[i];
+                const value = nodeDesc.attributes[i + 1];
+                if (key !== undefined && value !== undefined) {
+                    attributes[key] = value;
+                }
+            }
+        }
+        // Extract classes
+        const classes = attributes['class']?.split(/\s+/).filter((c) => c.length > 0);
+        const tag = nodeDesc.nodeName.toLowerCase();
+        // Get outer HTML
+        const htmlResponse = await callCDP('DOM.getOuterHTML', { nodeId });
+        const htmlResult = htmlResponse.data?.result;
+        const outerHTML = htmlResult?.outerHTML;
+        const node = { nodeId };
+        if (tag)
+            node.tag = tag;
+        if (Object.keys(attributes).length > 0)
+            node.attributes = attributes;
+        if (classes)
+            node.classes = classes;
+        if (outerHTML)
+            node.outerHTML = outerHTML;
+        return node;
+    })));
+    return { nodes };
+}
+/**
+ * Capture a screenshot of the page using CDP relay.
+ *
+ * @param outputPath - Path to save screenshot
+ * @param options - Screenshot options (format, quality, fullPage)
+ * @returns Screenshot result with path, format, dimensions, and size
+ * @throws CDPConnectionError if CDP operation fails
+ */
+export async function capturePageScreenshot(outputPath, options = {}) {
+    const format = options.format ?? 'png';
+    const quality = format === 'jpeg' ? (options.quality ?? 90) : undefined;
+    const fullPage = options.fullPage ?? true;
+    // Get viewport dimensions
+    const metricsResponse = await callCDP('Page.getLayoutMetrics', {});
+    const metricsResult = metricsResponse.data?.result;
+    const contentSize = metricsResult?.contentSize ?? { width: 0, height: 0 };
+    const viewport = metricsResult?.visualViewport ?? { clientWidth: 0, clientHeight: 0 };
+    // Capture screenshot
+    const screenshotResponse = await callCDP('Page.captureScreenshot', {
+        format,
+        ...(quality !== undefined && { quality }),
+        captureBeyondViewport: fullPage,
+    });
+    const screenshotResult = screenshotResponse.data?.result;
+    if (!screenshotResult?.data) {
+        throw new CDPConnectionError('No screenshot data returned', new Error('Empty response'));
+    }
+    const path = await import('path');
+    const { AtomicFileWriter } = await import('../../utils/atomicFile.js');
+    const buffer = Buffer.from(screenshotResult.data, 'base64');
+    const absolutePath = path.resolve(outputPath);
+    await AtomicFileWriter.writeBufferAsync(absolutePath, buffer);
+    const result = {
+        path: absolutePath,
+        format,
+        width: fullPage ? contentSize.width : viewport.clientWidth,
+        height: fullPage ? contentSize.height : viewport.clientHeight,
+        size: buffer.length,
+        fullPage,
+    };
+    if (quality !== undefined) {
+        result.quality = quality;
+    }
+    if (!fullPage) {
+        result.viewport = {
+            width: viewport.clientWidth,
+            height: viewport.clientHeight,
+        };
+    }
+    return result;
+}
+//# sourceMappingURL=helpers.js.map

package/dist/commands/dom/helpers.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"helpers.js","sourceRoot":"","sources":["../../../src/commands/dom/helpers.ts"],"names":[],"mappings":"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"}

package/dist/commands/{dom.d.ts → dom/index.d.ts}

@@ -5,4 +5,4 @@ import type { Command } from 'commander';
  * @param program - Commander.js Command instance
  */
 export declare function registerDomCommands(program: Command): void;
-//# sourceMappingURL=dom.d.ts.map
+//# sourceMappingURL=index.d.ts.map

package/dist/commands/dom/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/commands/dom/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AA+KzC;;;;GAIG;AACH,wBAAgB,mBAAmB,CAAC,OAAO,EAAE,OAAO,GAAG,IAAI,CAiD1D"}

package/dist/commands/{dom.js → dom/index.js}

@@ -1,108 +1,42 @@
-import { runCommand } from '../commands/shared/CommandRunner.js';
-import { queryDOM, highlightDOM, getDOM, captureScreenshot } from '../ipc/client.js';
-import { formatDomQuery, formatDomHighlight, formatDomGet, formatDomEval, formatDomScreenshot, } from '../ui/formatters/dom.js';
-import { filterDefined } from '../utils/objects.js';
-import { mergeWithSelector } from './domOptionsBuilder.js';
+import { queryDOMElements, getDOMElements, capturePageScreenshot } from '../../commands/dom/helpers.js';
+import { runCommand } from '../../commands/shared/CommandRunner.js';
+import { formatDomQuery, formatDomGet, formatDomEval, formatDomScreenshot, } from '../../ui/formatters/dom.js';
+import { filterDefined } from '../../utils/objects.js';
+import { parsePositiveIntOption } from '../../utils/validation.js';
 /**
  * Handle bdg dom query <selector> command
  *
  * Queries the DOM using a CSS selector and displays matching elements.
- * Results are cached for 5 minutes to enable index-based references in other commands.
+ * Uses CDP relay through worker's persistent connection.
  *
  * @param selector - CSS selector to query (e.g., ".error", "#app", "button")
  * @param options - Command options
  */
 async function handleDomQuery(selector, options) {
     await runCommand(async () => {
-        const response = await queryDOM(selector);
-        if (response.status === 'error') {
-            return {
-                success: false,
-                error: response.error ?? 'Unknown error',
-            };
-        }
-        if (!response.data) {
-            return {
-                success: false,
-                error: 'No data in response',
-            };
-        }
-        return {
-            success: true,
-            data: response.data,
-        };
+        const result = await queryDOMElements(selector);
+        return { success: true, data: result };
     }, options, formatDomQuery);
 }
-/**
- * Handle bdg dom highlight command
- *
- * Highlights elements in the browser with visual overlay. Accepts CSS selector,
- * cached index from previous query, or direct nodeId.
- *
- * @param selectorOrIndex - CSS selector (e.g., ".error") or index from cached query (e.g., "2")
- * @param options - Command options including color, opacity, targeting flags, and nodeId
- */
-async function handleDomHighlight(selectorOrIndex, options) {
-    await runCommand(async () => {
-        // Build IPC options with selector/index/nodeId merged
-        const ipcOptions = mergeWithSelector(filterDefined({
-            color: options.color,
-            opacity: options.opacity,
-            first: options.first,
-            nth: options.nth,
-        }), selectorOrIndex, options.nodeId);
-        const response = await highlightDOM(ipcOptions);
-        if (response.status === 'error') {
-            return {
-                success: false,
-                error: response.error ?? 'Unknown error',
-            };
-        }
-        if (!response.data) {
-            return {
-                success: false,
-                error: 'No data in response',
-            };
-        }
-        return {
-            success: true,
-            data: response.data,
-        };
-    }, options, formatDomHighlight);
-}
 /**
  * Handle bdg dom get command
  *
- * Retrieves full HTML and attributes for DOM elements. Accepts CSS selector,
- * cached index from previous query, or direct nodeId.
+ * Retrieves full HTML and attributes for DOM elements. Accepts CSS selector or direct nodeId.
+ * Uses CDP relay through worker's persistent connection.
  *
- * @param selectorOrIndex - CSS selector (e.g., ".error") or index from cached query (e.g., "2")
+ * @param selector - CSS selector (e.g., ".error")
  * @param options - Command options including --all, --nth, and nodeId
  */
-async function handleDomGet(selectorOrIndex, options) {
+async function handleDomGet(selector, options) {
     await runCommand(async () => {
-        // Build IPC options with selector/index/nodeId merged
-        const ipcOptions = mergeWithSelector(filterDefined({
+        const getOptions = filterDefined({
+            selector,
             all: options.all,
             nth: options.nth,
-        }), selectorOrIndex, options.nodeId);
-        const response = await getDOM(ipcOptions);
-        if (response.status === 'error') {
-            return {
-                success: false,
-                error: response.error ?? 'Unknown error',
-            };
-        }
-        if (!response.data) {
-            return {
-                success: false,
-                error: 'No data in response',
-            };
-        }
-        return {
-            success: true,
-            data: response.data,
-        };
+            nodeId: options.nodeId,
+        });
+        const result = await getDOMElements(getOptions);
+        return { success: true, data: result };
     }, options, formatDomGet);
 }
 /**
@@ -110,6 +44,7 @@ async function handleDomGet(selectorOrIndex, options) {
  *
  * Captures a screenshot of the current page and saves it to disk.
  * Supports PNG and JPEG formats with customizable quality and viewport options.
+ * Uses CDP relay through worker's persistent connection.
  *
  * @param path - Output file path (absolute or relative)
  * @param options - Screenshot options (format, quality, fullPage)
@@ -121,23 +56,8 @@ async function handleDomScreenshot(path, options) {
             quality: options.quality,
             fullPage: options.fullPage,
         });
-        const response = await captureScreenshot(path, screenshotOptions);
-        if (response.status === 'error') {
-            return {
-                success: false,
-                error: response.error ?? 'Unknown error',
-            };
-        }
-        if (!response.data) {
-            return {
-                success: false,
-                error: 'No data in response',
-            };
-        }
-        return {
-            success: true,
-            data: response.data,
-        };
+        const result = await capturePageScreenshot(path, screenshotOptions);
+        return { success: true, data: result };
     }, options, formatDomScreenshot);
 }
 /**
@@ -153,14 +73,18 @@ async function handleDomScreenshot(path, options) {
 async function handleDomEval(script, options) {
     await runCommand(async () => {
         // Lazy load CDP connection (only needed for eval command)
-        const { CDPConnection } = await import('../connection/cdp.js');
-        const { validateActiveSession, getValidatedSessionMetadata, verifyTargetExists, executeScript, } = await import('./domEvalHelpers.js');
+        const { CDPConnection } = await import('../../connection/cdp.js');
+        const { validateActiveSession, getValidatedSessionMetadata, verifyTargetExists, executeScript, } = await import('../../commands/dom/evalHelpers.js');
         // Validate session is running
         validateActiveSession();
         // Get and validate session metadata
         const metadata = getValidatedSessionMetadata();
         // Verify target still exists
-        const port = parseInt(options.port ?? '9222', 10);
+        const port = parsePositiveIntOption('port', options.port, {
+            defaultValue: 9222,
+            min: 1,
+            max: 65535,
+        });
         await verifyTargetExists(metadata, port);
         // Create temporary CDP connection and execute script
         const cdp = new CDPConnection();
@@ -202,31 +126,17 @@ export function registerDomCommands(program) {
         .action(async (script, options) => {
         await handleDomEval(script, options);
     });
-    // bdg dom highlight <selector|index>
-    dom
-        .command('highlight')
-        .description('Highlight elements in browser')
-        .argument('<selector|index>', 'CSS selector or index from last query')
-        .option('--first', 'Target first match only')
-        .option('--nth <n>', 'Target nth match', parseInt)
-        .option('--node-id <id>', 'Use nodeId directly (advanced)', parseInt)
-        .option('--color <color>', 'Highlight color (red, blue, green, yellow, orange, purple)')
-        .option('--opacity <value>', 'Highlight opacity (0.0 - 1.0)', parseFloat)
-        .option('-j, --json', 'Output as JSON')
-        .action(async (selectorOrIndex, options) => {
-        await handleDomHighlight(selectorOrIndex, options);
-    });
-    // bdg dom get <selector|index>
+    // bdg dom get <selector>
     dom
         .command('get')
         .description('Get full HTML and attributes for elements')
-        .argument('<selector|index>', 'CSS selector or index from last query')
+        .argument('<selector>', 'CSS selector (e.g., ".error", "#app", "button")')
         .option('--all', 'Target all matches')
         .option('--nth <n>', 'Target nth match', parseInt)
         .option('--node-id <id>', 'Use nodeId directly (advanced)', parseInt)
         .option('-j, --json', 'Output as JSON')
-        .action(async (selectorOrIndex, options) => {
-        await handleDomGet(selectorOrIndex, options);
+        .action(async (selector, options) => {
+        await handleDomGet(selector, options);
     });
     // bdg dom screenshot <path>
     dom
@@ -241,4 +151,4 @@ export function registerDomCommands(program) {
         await handleDomScreenshot(path, options);
     });
 }
-//# sourceMappingURL=dom.js.map
+//# sourceMappingURL=index.js.map

package/dist/commands/dom/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/commands/dom/index.ts"],"names":[],"mappings":"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"}

package/dist/commands/dom/reactEventHelpers.d.ts

@@ -0,0 +1,80 @@
+/**
+ * React-compatible event handling for form interactions.
+ *
+ * React uses synthetic events and doesn't detect direct DOM manipulation.
+ * This module provides JavaScript snippets that can be injected via Runtime.evaluate
+ * to properly trigger React's event system.
+ */
+/**
+ * JavaScript function to fill an input element in a React-compatible way.
+ *
+ * This approach:
+ * 1. Uses native property setters to bypass React's value tracking
+ * 2. Dispatches input/change events that React listens for
+ * 3. Properly handles focus/blur for form validation
+ *
+ * @remarks
+ * Works with React, Vue, Angular, and vanilla JS applications.
+ */
+export declare const REACT_FILL_SCRIPT = "\n(function(selector, value, options) {\n  const el = document.querySelector(selector);\n  \n  if (!el) {\n    return { \n      success: false, \n      error: 'Element not found',\n      selector: selector\n    };\n  }\n  \n  // Check if element is fillable\n  const tagName = el.tagName.toLowerCase();\n  const inputType = el.type?.toLowerCase();\n  \n  const isFillable = (\n    tagName === 'input' || \n    tagName === 'textarea' || \n    tagName === 'select' ||\n    el.isContentEditable\n  );\n  \n  if (!isFillable) {\n    return {\n      success: false,\n      error: 'Element is not fillable',\n      elementType: tagName,\n      suggestion: 'Only input, textarea, select, and contenteditable elements can be filled'\n    };\n  }\n  \n  // Focus element first\n  el.focus();\n  \n  // Handle different input types\n  if (tagName === 'select') {\n    // For select elements\n    el.value = value;\n    el.dispatchEvent(new Event('change', { bubbles: true }));\n  } else if (inputType === 'checkbox' || inputType === 'radio') {\n    // For checkbox/radio, value should be \"true\" or \"false\"\n    const shouldCheck = value === 'true' || value === true;\n    el.checked = shouldCheck;\n    el.dispatchEvent(new Event('change', { bubbles: true }));\n  } else if (inputType === 'file') {\n    return {\n      success: false,\n      error: 'File inputs require CDP DOM.setFileInputFiles method',\n      suggestion: 'Use: bdg cdp DOM.setFileInputFiles --params {\\\"files\\\":[\\\"path\\\"]}'\n    };\n  } else if (el.isContentEditable) {\n    // For contenteditable elements\n    el.textContent = value;\n    el.dispatchEvent(new Event('input', { bubbles: true }));\n  } else {\n    // For text inputs, use native setter (React compatibility)\n    const nativeInputValueSetter = Object.getOwnPropertyDescriptor(\n      window.HTMLInputElement.prototype,\n      'value'\n    )?.set;\n    \n    const nativeTextAreaValueSetter = Object.getOwnPropertyDescriptor(\n      window.HTMLTextAreaElement.prototype,\n      'value'\n    )?.set;\n    \n    const setter = tagName === 'textarea' \n      ? nativeTextAreaValueSetter \n      : nativeInputValueSetter;\n    \n    if (setter) {\n      setter.call(el, value);\n    } else {\n      el.value = value;\n    }\n    \n    // Dispatch events that React/Vue/Angular listen for\n    el.dispatchEvent(new Event('input', { bubbles: true }));\n    el.dispatchEvent(new Event('change', { bubbles: true }));\n  }\n  \n  // Blur if requested (triggers validation in many forms)\n  if (options.blur !== false) {\n    el.blur();\n    // Dispatch focusout event for React/framework validation handlers\n    el.dispatchEvent(new FocusEvent('focusout', { bubbles: true }));\n  }\n  \n  return {\n    success: true,\n    selector: selector,\n    value: el.value || el.textContent,\n    elementType: tagName,\n    inputType: inputType || null,\n    checked: el.checked || undefined\n  };\n})\n";
+/**
+ * JavaScript function to click an element.
+ *
+ * @remarks
+ * Simple click implementation that works with buttons, links, and custom components.
+ * When selector matches multiple elements, prioritizes visible ones.
+ */
+export declare const CLICK_ELEMENT_SCRIPT = "\n(function(selector) {\n  let el = document.querySelector(selector);\n  \n  // If not found, return error\n  if (!el) {\n    return {\n      success: false,\n      error: 'Element not found',\n      selector: selector\n    };\n  }\n  \n  // Check if there are multiple matches and pick the visible one\n  const allMatches = document.querySelectorAll(selector);\n  if (allMatches.length > 1) {\n    // Find first visible element using bounding rect and computed styles\n    for (const candidate of allMatches) {\n      const style = window.getComputedStyle(candidate);\n      const rect = candidate.getBoundingClientRect();\n      \n      // Check if element is actually visible:\n      // - Must have dimensions (non-zero width/height)\n      // - Must not be display:none or visibility:hidden\n      // - Opacity check (but allow semi-transparent elements)\n      // - offsetParent check (but position:fixed elements have null offsetParent, so also check position)\n      const hasSize = rect.width > 0 && rect.height > 0;\n      const isDisplayed = style.display !== 'none' && style.visibility !== 'hidden';\n      const isOpaque = parseFloat(style.opacity) > 0;\n      const isPositioned = candidate.offsetParent !== null || style.position === 'fixed';\n      \n      // Don't filter out elements without text - icon buttons, inputs, etc. are valid\n      const isVisible = hasSize && isDisplayed && isOpaque && isPositioned;\n      \n      if (isVisible) {\n        el = candidate;\n        break;\n      }\n    }\n  }\n  \n  // Check if element is clickable (has click handler or is a button/link)\n  const tagName = el.tagName.toLowerCase();\n  const isClickable = (\n    tagName === 'button' ||\n    tagName === 'a' ||\n    tagName === 'input' ||\n    el.onclick !== null ||\n    el.getAttribute('role') === 'button' ||\n    window.getComputedStyle(el).cursor === 'pointer'\n  );\n  \n  if (!isClickable) {\n    console.warn('Warning: Element may not be clickable:', el);\n  }\n  \n  // Scroll element into view first\n  el.scrollIntoView({ behavior: 'auto', block: 'center' });\n  \n  // Click the element\n  el.click();\n  \n  return {\n    success: true,\n    selector: selector,\n    elementType: tagName,\n    clickable: isClickable\n  };\n})\n";
+/**
+ * JavaScript function to get multiple elements by selector.
+ *
+ * @remarks
+ * Used when --index is specified to select from multiple matches.
+ */
+export declare const GET_ELEMENT_BY_INDEX_SCRIPT = "\n(function(selector, index) {\n  const elements = document.querySelectorAll(selector);\n  \n  if (elements.length === 0) {\n    return {\n      success: false,\n      error: 'No elements found',\n      selector: selector,\n      matchCount: 0\n    };\n  }\n  \n  if (index < 1 || index > elements.length) {\n    return {\n      success: false,\n      error: 'Index out of range',\n      selector: selector,\n      matchCount: elements.length,\n      requestedIndex: index,\n      suggestion: `Use --index between 1 and ${elements.length}`\n    };\n  }\n  \n  // Return element info (we'll use this to build a more specific selector)\n  const el = elements[index - 1]; // Convert to 0-based\n  \n  // Build a truly unique selector by constructing a scoped DOM path\n  function buildUniquePath(element: Element): string {\n    // If element has an ID, that's unique enough\n    if (element.id) {\n      return `#${CSS.escape(element.id)}`;\n    }\n    \n    // Build path from root using nth-of-type for each ancestor\n    const path: string[] = [];\n    let current: Element | null = element;\n    \n    while (current && current !== document.documentElement) {\n      let selector = current.tagName.toLowerCase();\n      \n      // Use nth-of-type to ensure uniqueness within parent\n      if (current.parentElement) {\n        const siblings = Array.from(current.parentElement.children);\n        const sameTagSiblings = siblings.filter(\n          (sibling) => sibling.tagName === current!.tagName\n        );\n        \n        if (sameTagSiblings.length > 1) {\n          const index = sameTagSiblings.indexOf(current) + 1;\n          selector += `:nth-of-type(${index})`;\n        }\n      }\n      \n      path.unshift(selector);\n      current = current.parentElement;\n    }\n    \n    // Prefix with html to anchor to document root\n    return 'html > ' + path.join(' > ');\n  }\n  \n  const uniqueSelector = buildUniquePath(el);\n  \n  return {\n    success: true,\n    selector: selector,\n    matchCount: elements.length,\n    selectedIndex: index,\n    uniqueSelector: uniqueSelector\n  };\n})\n";
+/**
+ * Options for filling an element.
+ */
+export interface FillOptions {
+    /** Whether to blur the element after filling (default: true) */
+    blur?: boolean;
+    /** Index to use if selector matches multiple elements (1-based) */
+    index?: number;
+}
+/**
+ * Result of filling an element.
+ */
+export interface FillResult {
+    success: boolean;
+    error?: string;
+    selector?: string;
+    value?: string;
+    elementType?: string;
+    inputType?: string | null;
+    checked?: boolean;
+    suggestion?: string;
+}
+/**
+ * Result of clicking an element.
+ */
+export interface ClickResult {
+    success: boolean;
+    error?: string;
+    selector?: string;
+    elementType?: string;
+    clickable?: boolean;
+}
+/**
+ * Result of getting element by index.
+ */
+export interface ElementByIndexResult {
+    success: boolean;
+    error?: string;
+    selector?: string;
+    matchCount?: number;
+    selectedIndex?: number;
+    requestedIndex?: number;
+    uniqueSelector?: string;
+    suggestion?: string;
+}
+//# sourceMappingURL=reactEventHelpers.d.ts.map

package/dist/commands/dom/reactEventHelpers.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"reactEventHelpers.d.ts","sourceRoot":"","sources":["../../../src/commands/dom/reactEventHelpers.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH;;;;;;;;;;GAUG;AACH,eAAO,MAAM,iBAAiB,i3FAkG7B,CAAC;AAEF;;;;;;GAMG;AACH,eAAO,MAAM,oBAAoB,stEAqEhC,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,2BAA2B,kkEAwEvC,CAAC;AAEF;;GAEG;AACH,MAAM,WAAW,WAAW;IAC1B,gEAAgE;IAChE,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,mEAAmE;IACnE,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED;;GAEG;AACH,MAAM,WAAW,UAAU;IACzB,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED;;GAEG;AACH,MAAM,WAAW,WAAW;IAC1B,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED;;GAEG;AACH,MAAM,WAAW,oBAAoB;IACnC,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB"}