testchimp-runner-core 0.0.33 → 0.0.35

package/src/utils/page-info-utils.ts

@@ -8,6 +8,7 @@ export interface InteractiveElement {
   id: string | null;
   text: string;
   type: string;
+  name: string;  // name attribute (critical for form inputs)
   role: string;
   ariaLabel: string;
   placeholder: string;
@@ -34,7 +35,9 @@ export async function getEnhancedPageInfo(input: any | { url: string; title: str
     if ('accessibility' in input) {
       // Input is a Page object
       hasPageObject = true;
-      const snapshot = await input.accessibility.snapshot();
+      // CRITICAL: Use interestingOnly: false to get FULL ARIA tree like Playwright MCP
+      // This includes all structural nodes (generic, paragraph, etc.) not just interactive ones
+      const snapshot = await input.accessibility.snapshot({ interestingOnly: false });
       const url = input.url();
       const title = await input.title();
       domSnapshot = { url, title, accessibilityTree: snapshot };
@@ -57,7 +60,8 @@ export async function getEnhancedPageInfo(input: any | { url: string; title: str
             '[role="textbox"]',
             '[role="checkbox"]',
             '[role="radio"]',
-            '[onclick]'
+            '[onclick]',
+            '[type="submit"]'
           ];
           
           const allInteractive = new Set<any>();
@@ -65,11 +69,30 @@ export async function getEnhancedPageInfo(input: any | { url: string; title: str
             doc.querySelectorAll(selector).forEach((el: any) => allInteractive.add(el));
           });
           
+          // CRITICAL: Also detect elements that are styled/behave as interactive
+          // (e.g., divs/spans with cursor:pointer, click handlers)
+          // This catches modern web apps that use non-semantic HTML
+          const allElements = doc.querySelectorAll('div, span, p, li, td');
+          allElements.forEach((el: any) => {
+            const styles = (globalThis as any).window.getComputedStyle(el);
+            const hasClickHandler = el.onclick || 
+                                   el.getAttribute('onclick') || 
+                                   el.hasAttribute('data-action') ||
+                                   el.hasAttribute('data-click');
+            
+            // Include if: cursor is pointer, has click handler, or has tabindex (keyboard focusable)
+            if (styles.cursor === 'pointer' || hasClickHandler || el.tabIndex >= 0) {
+              allInteractive.add(el);
+            }
+          });
+          
           allInteractive.forEach((el: any) => {
             const rect = el.getBoundingClientRect();
             
             // Skip invisible elements
-            if (rect.width === 0 || rect.height === 0) return;
+            if (rect.width === 0 || rect.height === 0) {
+              return;
+            }
             
             const id = el.id || null;
             const tag = el.tagName.toLowerCase();
@@ -95,6 +118,12 @@ export async function getEnhancedPageInfo(input: any | { url: string; title: str
               selectors.push(`getByRole('${role}', {name: '${text}'})`);
             }
             
+            // 2b. BEST: getByRole for buttons with type attribute (more specific)
+            if (tag === 'button' && el.type) {
+              selectors.push(`getByRole('button', {name: '${text}'})`);
+              selectors.push(`button[type="${el.type}"]`);
+            }
+            
             // 3. BEST: getByPlaceholder for inputs with placeholders
             if (placeholder && placeholder.length > 0 && placeholder.length < 50) {
               selectors.push(`getByPlaceholder('${placeholder}')`);
@@ -110,7 +139,21 @@ export async function getEnhancedPageInfo(input: any | { url: string; title: str
                               el.getAttribute('data-id') || el.getAttribute('data-test');
             if (dataTestId) selectors.push(`getByTestId('${dataTestId}')`);
             
-            // 6. LAST RESORT: ID selector (only if stable - avoid auto-generated IDs with unicode)
+            // 6. GOOD: name attribute (especially for form inputs - very common and stable)
+            const nameAttr = el.getAttribute('name');
+            if (nameAttr && (tag === 'input' || tag === 'textarea' || tag === 'select')) {
+              selectors.push(`input[name="${nameAttr}"]`);
+            }
+            
+            // 6b. GOOD: class-based selectors for buttons (common in modern frameworks)
+            if (tag === 'button' && el.className) {
+              const classes = el.className.split(' ').filter((c: string) => c.length > 0 && !c.includes('userfront-'));
+              if (classes.length > 0) {
+                selectors.push(`button.${classes[0]}`);
+              }
+            }
+            
+            // 7. LAST RESORT: ID selector (only if stable - avoid auto-generated IDs with unicode)
             // Skip auto-generated Ant Design IDs like «r3»-form-item or rc_select_xxx
             if (id && !id.includes('«') && !id.match(/^(rc_|:r[0-9]+:|__)/)) {
               selectors.push(`#${id}`);
@@ -121,6 +164,7 @@ export async function getEnhancedPageInfo(input: any | { url: string; title: str
               id,
               text,
               type,
+              name: nameAttr || '',  // CRITICAL: Capture name attribute for form inputs
               role,
               ariaLabel,
               placeholder,
@@ -182,23 +226,14 @@ export async function getEnhancedPageInfo(input: any | { url: string; title: str
       }
       
       formattedElements = selectedElements.map((e, i) => {
-        const idInfo = e.id ? `#${e.id}` : 'NO-ID';
+        const idInfo = e.id ? `#${e.id}` : '';
         const typeInfo = e.type ? ` type="${e.type}"` : '';
+        const nameInfo = e.name ? ` name="${e.name}"` : '';
         const placeholderInfo = e.placeholder ? ` placeholder="${e.placeholder}"` : '';
+        const roleInfo = e.role ? ` role="${e.role}"` : '';
         
-        // Show BEST selector first, with alternatives
-        let selectorsInfo: string;
-        if (e.selectors && e.selectors.length > 0) {
-          selectorsInfo = e.selectors[0];  // Best option
-          if (e.selectors.length > 1) {
-            selectorsInfo += ` (or: ${e.selectors.slice(1, 3).join(', ')})`;  // Show up to 2 alternatives
-          }
-        } else {
-          selectorsInfo = 'No reliable selector available';
-        }
-        
-        return `${i + 1}. [${e.bbox.x},${e.bbox.y} ${e.bbox.width}x${e.bbox.height}] <${e.tag}> ${idInfo}${typeInfo}${placeholderInfo} "${e.text}"
-   → ${selectorsInfo}`;
+        // Compact format: show all relevant attributes for LLM to construct selectors
+        return `${i + 1}. [${e.bbox.x},${e.bbox.y} ${e.bbox.width}x${e.bbox.height}] <${e.tag}>${idInfo}${typeInfo}${nameInfo}${placeholderInfo}${roleInfo} "${e.text}"`;
       }).join('\n');
       
       // Show stats for omitted elements