@cutleryapp/agent 1.0.45 → 1.0.47

package/dist/mcp-executor.js

@@ -392,29 +392,19 @@ class TestExecutor {
                                     catch { /* next */ }
                                 }
                             }
-                            // 2. Radio / checkbox — try before autocomplete so radios resolve in <100ms
+                            // 2. Radio / checkbox — race all selectors simultaneously; first click wins
                             if (!selHandled) {
-                                for (const sel of [
-                                    `label:text-is("${optionValue}")`, // exact case-insensitive
-                                    `label:has-text("${optionValue}")`, // substring match
-                                    `[role="radio"]:has-text("${optionValue}")`,
-                                    `input[type="radio"][value="${optionValue}" i]`,
-                                    `input[type="checkbox"][value="${optionValue}" i]`,
-                                ]) {
-                                    try {
-                                        const loc = page.locator(sel).first();
-                                        const tag = await loc.evaluate((el) => el.tagName.toLowerCase()).catch(() => 'label');
-                                        if (tag === 'input') {
-                                            await loc.click({ force: true, timeout: 800 });
-                                        }
-                                        else {
-                                            await loc.click({ timeout: 800 });
-                                        }
-                                        selHandled = true;
-                                        break;
-                                    }
-                                    catch { /* try next */ }
+                                try {
+                                    await Promise.any([
+                                        page.locator(`label:text-is("${optionValue}")`).first().click({ timeout: 300 }),
+                                        page.locator(`label:has-text("${optionValue}")`).first().click({ timeout: 300 }),
+                                        page.locator(`[role="radio"]:has-text("${optionValue}")`).first().click({ timeout: 300 }),
+                                        page.locator(`input[type="radio"][value="${optionValue}" i]`).first().click({ force: true, timeout: 300 }),
+                                        page.locator(`input[type="checkbox"][value="${optionValue}" i]`).first().click({ force: true, timeout: 300 }),
+                                    ]);
+                                    selHandled = true;
                                 }
+                                catch { /* not a radio/checkbox, fall through */ }
                             }
                             // 3. React-select / autocomplete typeahead
                             if (!selHandled) {
@@ -446,17 +436,14 @@ class TestExecutor {
                         if (cbMatch) {
                             const labelText = cbMatch[1].trim();
                             try {
-                                // Try label click (works for hidden checkboxes with styled labels)
-                                await page.locator(`label:has-text("${labelText}")`).first().click({ timeout: 2000 });
+                                await Promise.any([
+                                    page.locator(`label:text-is("${labelText}")`).first().click({ timeout: 300 }),
+                                    page.locator(`label:has-text("${labelText}")`).first().click({ timeout: 300 }),
+                                    page.getByLabel(new RegExp(labelText, 'i')).first().check({ force: true, timeout: 300 }),
+                                ]);
                                 handled = true;
                             }
-                            catch {
-                                try {
-                                    await page.getByLabel(new RegExp(labelText, 'i')).first().check({ timeout: 2000 });
-                                    handled = true;
-                                }
-                                catch { /* fall to AI */ }
-                            }
+                            catch { /* fall to AI */ }
                         }
                     }
                     // 7. Generic click fallback — try any element containing the step text before AI
@@ -980,25 +967,20 @@ async function tryAIClick(page, selector) {
 async function tryAutocomplete(page, fieldLabel, value) {
     // Click the matching option in whatever dropdown is currently open — returns true only on success
     async function clickOpenOption() {
-        const optionSelectors = [
-            `[role="option"]:has-text("${value}")`,
-            `[class*="option"]:has-text("${value}")`,
-            `[class*="suggestion"]:has-text("${value}")`,
-            `[class*="item"]:has-text("${value}")`,
-            `li:has-text("${value}")`,
-        ];
-        for (const sel of optionSelectors) {
-            try {
-                const opt = page.locator(sel).first();
-                if (await opt.isVisible({ timeout: 600 })) {
-                    await opt.click({ timeout: 1500 });
-                    console.log(`  ✓ Dropdown option clicked via "${sel}"`);
-                    return true;
-                }
-            }
-            catch { /* try next */ }
+        // Race all option selectors simultaneously — first visible one wins
+        try {
+            await Promise.any([
+                `[role="option"]:has-text("${value}")`,
+                `[class*="option"]:has-text("${value}")`,
+                `[class*="suggestion"]:has-text("${value}")`,
+                `[class*="item"]:has-text("${value}")`,
+                `li:has-text("${value}")`,
+            ].map(sel => page.locator(sel).first().click({ timeout: 300 })));
+            return true;
+        }
+        catch {
+            return false;
         }
-        return false;
     }
     // Strategy 1: React-select — find the control that BELONGS to this label via DOM traversal
     // so we don't accidentally open the wrong dropdown on a page with multiple selects
@@ -1035,13 +1017,13 @@ async function tryAutocomplete(page, fieldLabel, value) {
             // Type into the now-visible input inside the react-select
             const innerInput = page.locator('[class*="react-select__input"] input,[class*="select__input"] input').first();
             try {
-                await innerInput.waitFor({ state: 'visible', timeout: 800 });
-                await innerInput.type(value, { delay: 30 });
+                await innerInput.waitFor({ state: 'visible', timeout: 400 });
+                await innerInput.type(value, { delay: 20 });
             }
             catch {
-                await page.keyboard.type(value, { delay: 30 });
+                await page.keyboard.type(value, { delay: 20 });
             }
-            await page.waitForTimeout(400);
+            await page.waitForTimeout(250);
             if (await clickOpenOption())
                 return true;
             // No confirmed click → don't claim success, fall through to next strategy
@@ -1068,16 +1050,19 @@ async function tryAutocomplete(page, fieldLabel, value) {
                 if (['radio', 'checkbox', 'submit', 'button', 'file', 'hidden'].includes(inputType))
                     continue;
             }
-            await input.waitFor({ state: 'visible', timeout: 500 });
-            await input.click({ timeout: 500 });
+            await input.waitFor({ state: 'visible', timeout: 300 });
+            await input.click({ timeout: 300 });
             await input.fill('');
-            await input.type(value, { delay: 30 });
-            await page.waitForTimeout(350);
+            await input.type(value, { delay: 20 });
+            await page.waitForTimeout(250);
             if (await clickOpenOption())
                 return true;
         }
         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 */
@@ -1297,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);
@@ -1323,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.45",
+    "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": {