btcp-browser-agent 0.1.11 → 0.1.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "btcp-browser-agent",
-  "version": "0.1.11",
+  "version": "0.1.12",
   "description": "Give AI agents the power to control browsers. A foundation for building agentic systems with smart DOM snapshots and stable element references.",
   "type": "module",
   "main": "dist/index.js",

package/packages/core/dist/actions.js

@@ -349,31 +349,99 @@ export class DOMActions {
     }
     async type(selector, text, options = {}) {
         const element = this.getElement(selector);
-        if (!(element instanceof HTMLInputElement || element instanceof HTMLTextAreaElement)) {
+        // Check if element is contenteditable
+        const isContentEditable = element.getAttribute('contenteditable') === 'true' ||
+            element.getAttribute('contenteditable') === '';
+        if (!(element instanceof HTMLInputElement || element instanceof HTMLTextAreaElement || isContentEditable)) {
             const actualType = element.tagName.toLowerCase();
             const availableActions = this.getAvailableActionsForElement(element);
-            throw createElementNotCompatibleError(selector, 'type', actualType, ['input', 'textarea'], availableActions);
+            throw createElementNotCompatibleError(selector, 'type', actualType, ['input', 'textarea', 'contenteditable'], availableActions);
         }
-        element.focus();
-        if (options.clear) {
-            element.value = '';
-            element.dispatchEvent(new Event('input', { bubbles: true }));
+        // Focus the element (cast to HTMLElement for contenteditable)
+        if (element instanceof HTMLElement) {
+            element.focus();
         }
-        for (const char of text) {
-            element.dispatchEvent(new KeyboardEvent('keydown', { key: char, bubbles: true }));
-            element.dispatchEvent(new KeyboardEvent('keypress', { key: char, bubbles: true }));
-            element.value += char;
-            element.dispatchEvent(new Event('input', { bubbles: true }));
-            element.dispatchEvent(new KeyboardEvent('keyup', { key: char, bubbles: true }));
-            if (options.delay) {
-                await this.sleep(options.delay);
+        // Handle contenteditable elements differently
+        if (isContentEditable) {
+            const htmlElement = element;
+            if (options.clear) {
+                htmlElement.textContent = '';
+                htmlElement.dispatchEvent(new Event('input', { bubbles: true }));
+            }
+            for (const char of text) {
+                htmlElement.dispatchEvent(new KeyboardEvent('keydown', { key: char, bubbles: true }));
+                htmlElement.dispatchEvent(new KeyboardEvent('keypress', { key: char, bubbles: true }));
+                // Insert text at cursor position or append
+                const selection = this.window.getSelection();
+                if (selection && selection.rangeCount > 0) {
+                    const range = selection.getRangeAt(0);
+                    range.deleteContents();
+                    const textNode = this.document.createTextNode(char);
+                    range.insertNode(textNode);
+                    range.setStartAfter(textNode);
+                    range.setEndAfter(textNode);
+                    selection.removeAllRanges();
+                    selection.addRange(range);
+                }
+                else {
+                    htmlElement.textContent += char;
+                }
+                htmlElement.dispatchEvent(new Event('input', { bubbles: true }));
+                htmlElement.dispatchEvent(new KeyboardEvent('keyup', { key: char, bubbles: true }));
+                if (options.delay) {
+                    await this.sleep(options.delay);
+                }
+            }
+            htmlElement.dispatchEvent(new Event('change', { bubbles: true }));
+            // Wait for verification that textContent contains typed text
+            const result = await waitForAssertion(() => {
+                const content = htmlElement.textContent || '';
+                const expected = text;
+                const actual = content;
+                if (!content.includes(text)) {
+                    return {
+                        success: false,
+                        error: `Expected textContent to contain "${text}"`,
+                        description: 'textContent check',
+                        expected,
+                        actual
+                    };
+                }
+                return {
+                    success: true,
+                    error: null,
+                    description: 'textContent check',
+                    expected,
+                    actual
+                };
+            }, { timeout: 1000, interval: 50 });
+            if (!result.success) {
+                throw createVerificationError('type', result, selector);
             }
         }
-        element.dispatchEvent(new Event('change', { bubbles: true }));
-        // Wait for verification that value contains typed text
-        const result = await waitForAssertion(() => assertValueContains(element, text), { timeout: 1000, interval: 50 });
-        if (!result.success) {
-            throw createVerificationError('type', result, selector);
+        else {
+            // Handle regular input/textarea elements
+            const inputElement = element;
+            if (options.clear) {
+                inputElement.value = '';
+                inputElement.dispatchEvent(new Event('input', { bubbles: true }));
+            }
+            for (const char of text) {
+                inputElement.dispatchEvent(new KeyboardEvent('keydown', { key: char, bubbles: true }));
+                inputElement.dispatchEvent(new KeyboardEvent('keypress', { key: char, bubbles: true }));
+                inputElement.value += char;
+                inputElement.dispatchEvent(new Event('input', { bubbles: true }));
+                inputElement.dispatchEvent(new KeyboardEvent('keyup', { key: char, bubbles: true }));
+                if (options.delay) {
+                    await this.sleep(options.delay);
+                }
+            }
+            inputElement.dispatchEvent(new Event('change', { bubbles: true }));
+            // Wait for verification that value contains typed text
+            const result = await waitForAssertion(() => assertValueContains(inputElement, text), { timeout: 1000, interval: 50 });
+            if (!result.success) {
+                throw createVerificationError('type', result, selector);
+            }
         }
         return { success: true, error: null };
     }

package/packages/core/dist/snapshot.js

@@ -110,6 +110,11 @@ function getRole(element) {
         const type = element.type || 'text';
         return INPUT_ROLES[type] || 'textbox';
     }
+    // Detect contenteditable elements (ProseMirror, Quill, TinyMCE, etc.)
+    const contentEditable = element.getAttribute('contenteditable');
+    if (contentEditable === 'true' || contentEditable === '') {
+        return 'textbox';
+    }
     return IMPLICIT_ROLES[tagName] || null;
 }
 /**
@@ -320,6 +325,21 @@ function getAccessibleName(element) {
     if (isImage) {
         return getImageLabel(element);
     }
+    // Handle contenteditable elements (ProseMirror, Quill, TinyMCE, etc.)
+    const contentEditable = element.getAttribute('contenteditable');
+    if (contentEditable === 'true' || contentEditable === '') {
+        // Try data-placeholder attribute (common in rich text editors)
+        const placeholder = element.getAttribute('data-placeholder');
+        if (placeholder)
+            return placeholder.trim();
+        // Try finding placeholder in child paragraph element
+        const placeholderEl = element.querySelector('[data-placeholder]');
+        if (placeholderEl) {
+            const placeholderText = placeholderEl.getAttribute('data-placeholder');
+            if (placeholderText)
+                return placeholderText.trim();
+        }
+    }
     const ariaLabel = element.getAttribute('aria-label');
     if (ariaLabel)
         return ariaLabel.trim();