@cutleryapp/agent 1.0.46 → 1.0.47

package/dist/mcp-executor.js

@@ -1060,6 +1060,9 @@ async function tryAutocomplete(page, fieldLabel, value) {
         }
         catch { /* try next */ }
     }
+    // Smart DOM proximity scoring for any UI framework dropdown
+    if (await smartFindDropdown(page, fieldLabel, value))
+        return true;
     return false;
 }
 /** Try filling with multiple selector strategies */
@@ -1279,6 +1282,251 @@ async function tryFillDate(page, label, value) {
     // Strategy 3: fallback to regular fill
     await tryFill(page, label, value);
 }
+/**
+ * Universal element finder using DOM proximity scoring.
+ * Works across Material UI, Ant Design, Headless UI, Bootstrap, custom components — anything.
+ * Scans all interactive elements and scores them by how well their associated label text matches.
+ */
+async function smartFindAndFill(page, label, value) {
+    const SMART_ATTR = 'data-cutlery-target';
+    try {
+        const found = await page.evaluate(({ lbl, attr }) => {
+            const lower = lbl.toLowerCase().trim();
+            function score(text) {
+                if (!text)
+                    return 0;
+                const t = text.toLowerCase().trim();
+                if (t === lower)
+                    return 100;
+                if (t.includes(lower))
+                    return 60;
+                if (lower.includes(t) && t.length > 2)
+                    return 30;
+                // partial word overlap
+                const words = lower.split(/\s+/);
+                const matches = words.filter(w => t.includes(w) && w.length > 2).length;
+                if (matches > 0)
+                    return Math.floor((matches / words.length) * 25);
+                return 0;
+            }
+            function getLabelTexts(el) {
+                const texts = [];
+                const id = el.id;
+                // label[for=id]
+                if (id) {
+                    const lf = document.querySelector(`label[for="${id}"]`);
+                    if (lf)
+                        texts.push(lf.textContent || '');
+                }
+                // aria-label
+                const ariaLabel = el.getAttribute('aria-label');
+                if (ariaLabel)
+                    texts.push(ariaLabel);
+                // aria-labelledby
+                const lledby = el.getAttribute('aria-labelledby');
+                if (lledby) {
+                    lledby.split(' ').forEach(refId => {
+                        const refEl = document.getElementById(refId);
+                        if (refEl)
+                            texts.push(refEl.textContent || '');
+                    });
+                }
+                // placeholder, name, title, data attrs
+                ['placeholder', 'name', 'title', 'data-testid', 'data-test', 'data-cy', 'data-label'].forEach(a => {
+                    const v = el.getAttribute(a);
+                    if (v)
+                        texts.push(v);
+                });
+                // wrapping label ancestor
+                let ancestor = el.parentElement;
+                for (let d = 0; d < 5 && ancestor; d++) {
+                    if (ancestor.tagName === 'LABEL') {
+                        texts.push(ancestor.textContent || '');
+                        break;
+                    }
+                    // sibling label before this element
+                    const prevLabel = ancestor.querySelector('label, [class*="label"], legend, [class*="Label"]');
+                    if (prevLabel && prevLabel !== el)
+                        texts.push(prevLabel.textContent || '');
+                    ancestor = ancestor.parentElement;
+                }
+                return texts;
+            }
+            const candidates = Array.from(document.querySelectorAll('input:not([type=hidden]):not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]):not([type=file]),' +
+                'textarea,' +
+                '[contenteditable="true"]')).filter(el => {
+                const s = el.style;
+                const rect = el.getBoundingClientRect();
+                return rect.width > 0 && rect.height > 0 && s.display !== 'none' && s.visibility !== 'hidden';
+            });
+            let best = null;
+            let bestScore = 0;
+            for (const el of candidates) {
+                const texts = getLabelTexts(el);
+                const elScore = Math.max(...texts.map(t => score(t)), 0);
+                if (elScore > bestScore) {
+                    bestScore = elScore;
+                    best = el;
+                }
+            }
+            if (best && bestScore >= 25) {
+                best.setAttribute(attr, 'true');
+                return bestScore;
+            }
+            return 0;
+        }, { lbl: label, attr: SMART_ATTR });
+        if (found > 0) {
+            const el = page.locator(`[${SMART_ATTR}="true"]`).first();
+            try {
+                await el.waitFor({ state: 'visible', timeout: 500 });
+                await el.fill(value, { timeout: 1000 });
+                return true;
+            }
+            finally {
+                await page.evaluate((attr) => {
+                    document.querySelectorAll(`[${attr}]`).forEach(e => e.removeAttribute(attr));
+                }, SMART_ATTR).catch(() => { });
+            }
+        }
+    }
+    catch { /* fall through */ }
+    return false;
+}
+/**
+ * Universal dropdown/select finder using DOM proximity scoring.
+ * Finds custom select controls (Ant Design, MUI, Headless UI, react-select, etc.)
+ * by scoring clickable control elements against label proximity.
+ */
+async function smartFindDropdown(page, label, value) {
+    const SMART_ATTR = 'data-cutlery-ctrl';
+    try {
+        const found = await page.evaluate(({ lbl, attr }) => {
+            const lower = lbl.toLowerCase().trim();
+            function score(text) {
+                if (!text)
+                    return 0;
+                const t = text.toLowerCase().trim();
+                if (t === lower)
+                    return 100;
+                if (t.includes(lower))
+                    return 60;
+                if (lower.includes(t) && t.length > 2)
+                    return 30;
+                const words = lower.split(/\s+/);
+                const matches = words.filter(w => t.includes(w) && w.length > 2).length;
+                if (matches > 0)
+                    return Math.floor((matches / words.length) * 25);
+                return 0;
+            }
+            function getLabelTexts(el) {
+                const texts = [];
+                const id = el.id;
+                if (id) {
+                    const lf = document.querySelector(`label[for="${id}"]`);
+                    if (lf)
+                        texts.push(lf.textContent || '');
+                }
+                const ariaLabel = el.getAttribute('aria-label');
+                if (ariaLabel)
+                    texts.push(ariaLabel);
+                const lledby = el.getAttribute('aria-labelledby');
+                if (lledby) {
+                    lledby.split(' ').forEach(refId => {
+                        const refEl = document.getElementById(refId);
+                        if (refEl)
+                            texts.push(refEl.textContent || '');
+                    });
+                }
+                ['title', 'data-testid', 'data-test', 'data-cy', 'name'].forEach(a => {
+                    const v = el.getAttribute(a);
+                    if (v)
+                        texts.push(v);
+                });
+                let ancestor = el.parentElement;
+                for (let d = 0; d < 5 && ancestor; d++) {
+                    if (ancestor.tagName === 'LABEL') {
+                        texts.push(ancestor.textContent || '');
+                        break;
+                    }
+                    const lbl2 = ancestor.querySelector('label, [class*="label"], legend, [class*="Label"]');
+                    if (lbl2 && lbl2 !== el)
+                        texts.push(lbl2.textContent || '');
+                    ancestor = ancestor.parentElement;
+                }
+                return texts;
+            }
+            // Cast wide net for custom select controls from all major frameworks
+            const ctrlSelectors = [
+                '[role="combobox"]', '[role="listbox"]', '[role="button"][aria-haspopup]',
+                '[class*="react-select__control"]', '[class*="select__control"]',
+                '[class*="Select__control"]', '[class*="ant-select-selector"]',
+                '[class*="MuiSelect"]', '[class*="dropdown-toggle"]',
+                '[class*="select-trigger"]', '[class*="SelectTrigger"]',
+                'select',
+            ];
+            const candidates = Array.from(new Set(ctrlSelectors.flatMap(sel => Array.from(document.querySelectorAll(sel))))).filter(el => {
+                const rect = el.getBoundingClientRect();
+                return rect.width > 0 && rect.height > 0;
+            });
+            let best = null;
+            let bestScore = 0;
+            for (const el of candidates) {
+                const texts = getLabelTexts(el);
+                const elScore = Math.max(...texts.map(t => score(t)), 0);
+                if (elScore > bestScore) {
+                    bestScore = elScore;
+                    best = el;
+                }
+            }
+            if (best && bestScore >= 25) {
+                best.setAttribute(attr, 'true');
+                return bestScore;
+            }
+            return 0;
+        }, { lbl: label, attr: SMART_ATTR });
+        if (found > 0) {
+            const ctrl = page.locator(`[${SMART_ATTR}="true"]`).first();
+            try {
+                await ctrl.waitFor({ state: 'visible', timeout: 500 });
+                const tag = await ctrl.evaluate((el) => el.tagName.toLowerCase()).catch(() => '');
+                if (tag === 'select') {
+                    await ctrl.selectOption({ label: value }, { timeout: 1000 });
+                    return true;
+                }
+                await ctrl.click({ timeout: 800 });
+                await page.waitForTimeout(300);
+                // Type into any newly focused input
+                const inner = page.locator('[role="option"]:visible, [class*="option"]:visible').first();
+                const hasOptions = await inner.isVisible({ timeout: 400 }).catch(() => false);
+                if (!hasOptions) {
+                    // Try typing to filter
+                    await page.keyboard.type(value, { delay: 20 });
+                    await page.waitForTimeout(250);
+                }
+                // Click the matching option
+                try {
+                    await Promise.any([
+                        `[role="option"]:has-text("${value}")`,
+                        `[class*="option"]:has-text("${value}")`,
+                        `[class*="item"]:has-text("${value}")`,
+                        `li:has-text("${value}")`,
+                    ].map(sel => page.locator(sel).first().click({ timeout: 500 })));
+                    return true;
+                }
+                catch {
+                    return false;
+                }
+            }
+            finally {
+                await page.evaluate((attr) => {
+                    document.querySelectorAll(`[${attr}]`).forEach(e => e.removeAttribute(attr));
+                }, SMART_ATTR).catch(() => { });
+            }
+        }
+    }
+    catch { /* fall through */ }
+    return false;
+}
 async function tryFill(page, label, value) {
     const labelRe = new RegExp(escapeRegex(label), "i");
     const variants = labelVariants(label);
@@ -1305,6 +1553,9 @@ async function tryFill(page, label, value) {
         }
         catch { /* next strategy */ }
     }
+    // Smart DOM proximity scoring — works across all UI frameworks
+    if (await smartFindAndFill(page, label, value))
+        return;
     throw new Error(`Could not find input field: "${label}"`);
 }
 /** Token-aware variant generation matching executor.ts/labelVariants. */

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@cutleryapp/agent",
-    "version": "1.0.46",
+    "version": "1.0.47",
     "description": "Local agent that connects your machine to the Cutlery QA platform and runs UI tests via Playwright",
     "main": "dist/cli.js",
     "bin": {