deflake 1.2.46 → 1.2.47

package/cli.js

@@ -105,6 +105,96 @@ function parseAxTreeSelectors(axTreeContent) {
     return selectors;
 }
 
+// --- SELECTOR VALIDATION: Check if AI's proposed selector matches the AX Tree ---
+// TODO [PREMIUM]: Browser-based Component Testing — launch headless browser, navigate to 
+// the failing page URL with saved auth state, and run proposed selector against the live DOM.
+// This would catch false positives from AX tree matching and validate dynamic/conditional elements.
+function validateSelectorAgainstAxTree(newLine, axTreeContent) {
+    if (!newLine || !axTreeContent) return { valid: true, reason: 'no data to validate' };
+    
+    // Extract the selector pattern from the proposed fix line
+    // Patterns: getByRole('role', { name: 'X' }), getByText('X'), getByPlaceholder('X'), getByLabel('X')
+    
+    // 1. getByRole('role', { name: 'X' }) or { name: /regex/ }
+    const roleMatch = newLine.match(/getByRole\s*\(\s*['"](\w+)['"]\s*,\s*\{\s*name:\s*(?:['"]([^'"]+)['"]|\/([^/]+)\/)/);
+    if (roleMatch) {
+        const [, role, exactName, regexName] = roleMatch;
+        // Map Playwright roles to AX tree roles
+        const axRole = role === 'heading' ? 'heading' : role === 'button' ? 'button' : role === 'link' ? 'link' : role === 'tab' ? 'tab' : role;
+        
+        if (exactName) {
+            const found = axTreeContent.includes(`${axRole} "${exactName}"`) || axTreeContent.includes(`${axRole} '${exactName}'`);
+            if (!found) {
+                // Try partial match for names that might be slightly different
+                const partialFound = axTreeContent.toLowerCase().includes(`${axRole}`) && axTreeContent.toLowerCase().includes(exactName.toLowerCase());
+                if (!partialFound) {
+                    return { valid: false, reason: `No ${axRole} with name "${exactName}" found in the page` };
+                }
+            }
+        } else if (regexName) {
+            try {
+                const regex = new RegExp(regexName, 'i');
+                // Search AX tree for any matching role+name
+                const lines = axTreeContent.split('\n');
+                const found = lines.some(line => {
+                    const m = line.match(new RegExp(`- ${axRole}\\s+["']([^"']+)["']`, 'i'));
+                    return m && regex.test(m[1]);
+                });
+                if (!found) {
+                    return { valid: false, reason: `No ${axRole} matching /${regexName}/ found in the page` };
+                }
+            } catch (e) { /* regex parse error, skip validation */ }
+        }
+        return { valid: true, reason: `${axRole} found in AX tree` };
+    }
+    
+    // 2. getByText('X')
+    const textMatch = newLine.match(/getByText\s*\(\s*['"]([^'"]+)['"]/);
+    if (textMatch) {
+        const text = textMatch[1];
+        const found = axTreeContent.includes(`text: ${text}`) || axTreeContent.includes(`"${text}"`) || axTreeContent.includes(`'${text}'`) || axTreeContent.toLowerCase().includes(text.toLowerCase());
+        if (!found) {
+            return { valid: false, reason: `No text "${text}" found on the page` };
+        }
+        return { valid: true, reason: `text "${text}" found` };
+    }
+    
+    // 3. getByPlaceholder('X')
+    const phMatch = newLine.match(/getByPlaceholder\s*\(\s*['"]([^'"]+)['"]/);
+    if (phMatch) {
+        const ph = phMatch[1];
+        const found = axTreeContent.includes(ph) || axTreeContent.toLowerCase().includes(ph.toLowerCase());
+        if (!found) {
+            return { valid: false, reason: `No placeholder "${ph}" found on the page` };
+        }
+        return { valid: true, reason: `placeholder "${ph}" found` };
+    }
+    
+    // 4. getByLabel('X')
+    const labelMatch = newLine.match(/getByLabel\s*\(\s*['"]([^'"]+)['"]/);
+    if (labelMatch) {
+        const label = labelMatch[1];
+        const found = axTreeContent.includes(label) || axTreeContent.toLowerCase().includes(label.toLowerCase());
+        if (!found) {
+            return { valid: false, reason: `No label "${label}" found on the page` };
+        }
+        return { valid: true, reason: `label "${label}" found` };
+    }
+    
+    // 5. CSS class selectors — REJECT immediately if using .ant-* classes
+    if (/\.(ant-|css-dev-only|anticon-)/.test(newLine)) {
+        return { valid: false, reason: 'Uses banned CSS class selector (.ant-*/css-dev-only-*)' };
+    }
+    
+    // 6. locator('.parent') followed by .locator('..') — parent traversal is OK
+    if (/locator\s*\(\s*['"]\.\.['"]/.test(newLine)) {
+        return { valid: true, reason: 'parent traversal locator (..)' };
+    }
+    
+    // Default: can't validate, allow through
+    return { valid: true, reason: 'selector type not validated (passed through)' };
+}
+
 // --- PREMIUM COLORS ---
 const C = {
     RESET: "\x1b[0m",
@@ -328,14 +418,81 @@ async function analyzeAndFix(artifacts, client, argv, capturedOutput = '', backu
                 console.log(`   ${C.GRAY}🎯 Available selectors: ${axSelectors.length} elements found in AX Tree${C.RESET}`);
             }
             
-            // Step 4: API call — send error-context, console error block, AND available selectors
+            // Step 4: API call with validation-retry loop
+            // Validate proposed selectors against AX tree before applying (component testing lite)
             const selectorsContext = axSelectors.length > 0 
                 ? `\n\n=== AVAILABLE SELECTORS (pre-computed from page) ===\nThese selectors are VERIFIED to exist on the page. Pick from this list:\n${axSelectors.map((s, i) => `${i+1}. ${s}`).join('\n')}\n=== END AVAILABLE SELECTORS ===`
                 : '';
-            const enrichedOutput = (relevantOutput || '') + selectorsContext;
             
-            console.log(`   ${C.GRAY}🌐 Calling DeFlake API...${C.RESET}`);
-            const res = await client.heal(null, art.htmlPath, loc, source, argv.fix, enrichedOutput);
+            const MAX_VALIDATION_RETRIES = 3;
+            let validatedRes = null;
+            let rejectionHistory = '';
+            
+            for (let retryIdx = 0; retryIdx < MAX_VALIDATION_RETRIES; retryIdx++) {
+                const retryLabel = retryIdx > 0 ? ` (validation retry ${retryIdx}/${MAX_VALIDATION_RETRIES - 1})` : '';
+                const enrichedOutput = (relevantOutput || '') + selectorsContext + rejectionHistory;
+                
+                console.log(`   ${C.GRAY}🌐 Calling DeFlake API...${retryLabel}${C.RESET}`);
+                const res = await client.heal(null, art.htmlPath, loc, source, argv.fix, enrichedOutput);
+                
+                if (!res || res.status !== 'success') {
+                    validatedRes = res; // pass through non-success for handling below
+                    break;
+                }
+                
+                try {
+                    const parsed = JSON.parse(res.fix);
+                    if (!parsed.patches || parsed.patches.length === 0) {
+                        validatedRes = res;
+                        break;
+                    }
+                    
+                    // Validate each patch's proposed selector against the AX tree
+                    let allValid = true;
+                    const rejections = [];
+                    
+                    for (const p of parsed.patches) {
+                        if (p.new_line && p.action === 'REPLACE') {
+                            const validation = validateSelectorAgainstAxTree(p.new_line, content);
+                            if (!validation.valid) {
+                                allValid = false;
+                                rejections.push(`Line ${p.line}: "${p.new_line.trim()}" → REJECTED: ${validation.reason}`);
+                                console.log(`   ${C.YELLOW}🔍 Validation FAILED for line ${p.line}: ${validation.reason}${C.RESET}`);
+                            } else {
+                                console.log(`   ${C.GREEN}🔍 Validation OK for line ${p.line}: ${validation.reason}${C.RESET}`);
+                            }
+                        }
+                    }
+                    
+                    if (allValid) {
+                        validatedRes = res;
+                        if (retryIdx > 0) {
+                            console.log(`   ${C.GREEN}✅ All selectors validated after ${retryIdx + 1} attempt(s)${C.RESET}`);
+                        }
+                        break;
+                    }
+                    
+                    // Build rejection feedback for the next retry
+                    rejectionHistory = `\n\n=== PREVIOUS FIX REJECTED (attempt ${retryIdx + 1}) ===\n` +
+                        `Your previous fix was REJECTED because the proposed selectors do NOT exist on the page:\n` +
+                        rejections.join('\n') + '\n' +
+                        `Pick DIFFERENT selectors from the AVAILABLE SELECTORS list. Do NOT repeat rejected selectors.\n` +
+                        `=== END REJECTION ===`;
+                    
+                    console.log(`   ${C.YELLOW}⚠️  Selectors rejected — requesting new fix from AI...${C.RESET}`);
+                    
+                } catch (e) {
+                    validatedRes = res; // parse error, pass through
+                    break;
+                }
+            }
+            
+            if (!validatedRes && rejectionHistory) {
+                console.log(`   ${C.RED}❌ Could not find valid selectors after ${MAX_VALIDATION_RETRIES} attempts${C.RESET}`);
+                continue;
+            }
+            
+            const res = validatedRes;
             
             if (res && res.status === 'success') {
                 console.log(`   ${C.GREEN}✅ API Response: SUCCESS${C.RESET}`);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "deflake",
-  "version": "1.2.46",
+  "version": "1.2.47",
   "description": "AI-powered self-healing tool for Playwright, Cypress, and WebdriverIO tests.",
   "main": "client.js",
   "bin": {