@cutleryapp/agent 1.0.14 → 1.0.16

package/dist/mcp-executor.js

@@ -76,7 +76,7 @@ class TestExecutor {
                         }
                     }
                     else if (lower.includes("click")) {
-                        const labelMatch = raw.match(/click\s+(?:on\s+)?(?:the\s+)?"?([^"]+?)"?\s*(?:button|link|tab)?$/i);
+                        const labelMatch = raw.match(/click\s+(?:on\s+)?(?:the\s+)?"?([^"]+?)"?(?:\s+(?:button|link|tab))?$/i);
                         let label = labelMatch?.[1]?.trim();
                         if (label) {
                             // Split "Add to cart under Sauce Labs Bike Light product" into target + scope
@@ -207,6 +207,8 @@ async function tryClick(page, nameRe, label) {
         () => page.getByRole('link', { name: nameRe }).first().click({ timeout: FAST }),
         () => page.getByText(nameRe).first().click({ timeout: FAST }),
         () => page.locator(`[value="${label}"], [aria-label="${label}"], [title="${label}"]`).first().click({ timeout: FAST }),
+        // data-* attributes (common in test automation)
+        () => page.locator(`[data-test*="${label}" i], [data-testid*="${label}" i], [id*="${label}" i]`).first().click({ timeout: FAST }),
     ];
     for (const fn of strategies) {
         try {
@@ -215,27 +217,131 @@ async function tryClick(page, nameRe, label) {
         }
         catch { /* try next */ }
     }
-    return false;
+    // AI vision fallback
+    return await aiClickFallback(page, label);
+}
+/** Use OpenAI vision to identify the element and generate a selector, then click it */
+async function aiClickFallback(page, description) {
+    const openaiKey = process.env.OPENAI_API_KEY;
+    if (!openaiKey)
+        return false;
+    try {
+        const { default: OpenAI } = await import('openai');
+        const openai = new OpenAI({ apiKey: openaiKey });
+        const screenshotBuffer = await page.screenshot({ type: 'png' });
+        const base64 = screenshotBuffer.toString('base64');
+        const response = await openai.chat.completions.create({
+            model: 'gpt-4o',
+            max_tokens: 100,
+            messages: [{
+                    role: 'user',
+                    content: [
+                        {
+                            type: 'text',
+                            text: `I need to click on: "${description}"\n\nLook at this screenshot and return a single CSS selector that identifies the element to click.\nRules:\n- Return ONLY the CSS selector, nothing else\n- No markdown, no explanation\n- If not found, return: NOT_FOUND\n- Use data-testid, id, aria-label, or text-based selectors\n- Prefer: [data-test="..."], #id, [aria-label="..."], button:has-text("...")`
+                        },
+                        { type: 'image_url', image_url: { url: `data:image/png;base64,${base64}` } }
+                    ]
+                }]
+        });
+        const selector = response.choices[0]?.message?.content?.trim() || '';
+        if (!selector || selector === 'NOT_FOUND')
+            return false;
+        const clean = selector.replace(/```[a-z]*\n?/gi, '').replace(/```/g, '').trim();
+        await page.locator(clean).first().click({ timeout: 5000 });
+        return true;
+    }
+    catch {
+        return false;
+    }
+}
+/** Use OpenAI vision to identify a field and fill it */
+async function aiFillFallback(page, label, value) {
+    const openaiKey = process.env.OPENAI_API_KEY;
+    if (!openaiKey)
+        return false;
+    try {
+        const { default: OpenAI } = await import('openai');
+        const openai = new OpenAI({ apiKey: openaiKey });
+        const screenshotBuffer = await page.screenshot({ type: 'png' });
+        const base64 = screenshotBuffer.toString('base64');
+        const response = await openai.chat.completions.create({
+            model: 'gpt-4o',
+            max_tokens: 100,
+            messages: [{
+                    role: 'user',
+                    content: [
+                        {
+                            type: 'text',
+                            text: `I need to fill the "${label}" input field with the value "${value}".\n\nLook at this screenshot and return a single CSS selector for the input field.\nRules:\n- Return ONLY the CSS selector, nothing else\n- No markdown, no explanation\n- If not found, return: NOT_FOUND\n- Prefer: input[name="..."], input[id="..."], input[placeholder="..."], [aria-label="..."]`
+                        },
+                        { type: 'image_url', image_url: { url: `data:image/png;base64,${base64}` } }
+                    ]
+                }]
+        });
+        const selector = response.choices[0]?.message?.content?.trim() || '';
+        if (!selector || selector === 'NOT_FOUND')
+            return false;
+        const clean = selector.replace(/```[a-z]*\n?/gi, '').replace(/```/g, '').trim();
+        await page.locator(clean).first().fill(value);
+        return true;
+    }
+    catch {
+        return false;
+    }
 }
 async function tryClickScoped(page, nameRe, target, scope) {
     const FAST = 3000;
     // Strip trailing generic nouns that won't appear verbatim on the page
     const cleanScope = scope.replace(/\s+(?:product|item|section|card|row|container|element|button|link|area|panel|block)$/i, '').trim();
-    const strategies = [
-        () => page.locator(`:has-text("${cleanScope}")`).last().getByRole('button', { name: nameRe }).first().click({ timeout: FAST }),
-        () => page.locator(`:has-text("${cleanScope}")`).last().getByRole('link', { name: nameRe }).first().click({ timeout: FAST }),
-        () => page.locator(`:has-text("${cleanScope}")`).last().getByText(nameRe).first().click({ timeout: FAST }),
-        // Fallback: ignore scope and click anywhere
-        () => page.getByRole('button', { name: nameRe }).first().click({ timeout: FAST }),
-        () => page.getByText(nameRe).first().click({ timeout: FAST }),
+    // Use card/item container selectors — these are tight enough to contain the button
+    // but not so deep that they exclude it. Filter by scope text, then click target within.
+    const containerSelectors = [
+        '[class*="item"]',
+        '[class*="card"]',
+        '[class*="product"]',
+        'li',
+        'article',
+        'tr',
+        '[role="listitem"]',
+        '[role="row"]',
     ];
-    for (const fn of strategies) {
+    for (const containerSel of containerSelectors) {
         try {
-            await fn();
-            return true;
+            const container = page.locator(containerSel).filter({ hasText: cleanScope });
+            const count = await container.count();
+            if (count === 0)
+                continue;
+            // Try button first, then any clickable element
+            try {
+                await container.first().getByRole('button', { name: nameRe }).first().click({ timeout: FAST });
+                return true;
+            }
+            catch { /* try next */ }
+            try {
+                await container.first().getByRole('link', { name: nameRe }).first().click({ timeout: FAST });
+                return true;
+            }
+            catch { /* try next */ }
+            try {
+                await container.first().getByText(nameRe).first().click({ timeout: FAST });
+                return true;
+            }
+            catch { /* try next */ }
         }
-        catch { /* try next */ }
+        catch { /* try next container */ }
+    }
+    // Fallback: ignore scope
+    try {
+        await page.getByRole('button', { name: nameRe }).first().click({ timeout: FAST });
+        return true;
+    }
+    catch { }
+    try {
+        await page.getByText(nameRe).first().click({ timeout: FAST });
+        return true;
     }
+    catch { }
     return false;
 }
 async function tryFill(page, label, value) {
@@ -291,6 +397,10 @@ async function tryFill(page, label, value) {
             errors.push(e?.message?.split("\n")[0] || String(e));
         }
     }
+    // AI vision fallback
+    const aiSuccess = await aiFillFallback(page, label, value);
+    if (aiSuccess)
+        return;
     throw new Error(`Could not find input field: "${label}". Tried ${strategies.length} strategies.`);
 }
 /** Token-aware variant generation matching executor.ts/labelVariants. */

package/package.json

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