testchimp-runner-core 0.0.35 → 0.0.36

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

@@ -1,285 +0,0 @@
-/**
- * Enhanced Page Info Utilities
- * Extracts ARIA tree, interactive elements with bounding boxes, and suggested selectors
- */
-
-export interface InteractiveElement {
-  tag: string;
-  id: string | null;
-  text: string;
-  type: string;
-  name: string;  // name attribute (critical for form inputs)
-  role: string;
-  ariaLabel: string;
-  placeholder: string;
-  bbox: {x: number; y: number; width: number; height: number};
-  selectors: string[];
-}
-
-export interface PageInfo {
-  url: string;
-  title: string;
-  ariaSnapshot: any;  // Raw ARIA tree for hierarchical structure
-  interactiveElements: InteractiveElement[];  // All interactive elements with position and selectors
-  formattedElements: string;  // Human-readable summary for logging
-}
-
-export async function getEnhancedPageInfo(page: any): Promise<PageInfo>;
-export async function getEnhancedPageInfo(domSnapshot: { url: string; title: string; accessibilityTree: any }): Promise<PageInfo>;
-export async function getEnhancedPageInfo(input: any | { url: string; title: string; accessibilityTree: any }): Promise<PageInfo> {
-  let domSnapshot: { url: string; title: string; accessibilityTree: any } = { url: 'Unknown', title: 'Unknown', accessibilityTree: null };
-  let interactiveElements: InteractiveElement[] = [];
-  let hasPageObject = false;
-  
-  try {
-    if ('accessibility' in input) {
-      // Input is a Page object
-      hasPageObject = true;
-      // 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 };
-      
-      // Extract ALL interactive elements with bounding boxes and selectors
-      try {
-        interactiveElements = await input.evaluate(() => {
-          const doc = (globalThis as any).document;
-          const elements: any[] = [];
-          
-          // Get all interactive elements
-          const interactiveSelectors = [
-            'button',
-            'input',
-            'textarea',
-            'select',
-            'a[href]',
-            '[role="button"]',
-            '[role="link"]',
-            '[role="textbox"]',
-            '[role="checkbox"]',
-            '[role="radio"]',
-            '[onclick]',
-            '[type="submit"]'
-          ];
-          
-          const allInteractive = new Set<any>();
-          interactiveSelectors.forEach((selector: string) => {
-            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;
-            }
-            
-            const id = el.id || null;
-            const tag = el.tagName.toLowerCase();
-            const text = el.textContent?.trim().substring(0, 40) || '';
-            const type = el.type || '';
-            const role = el.getAttribute('role') || el.tagName.toLowerCase();
-            const ariaLabel = el.getAttribute('aria-label') || '';
-            const placeholder = el.placeholder || '';
-            
-            // Build possible selectors - PRIORITIZE SEMANTIC SELECTORS (Playwright best practices)
-            const selectors: string[] = [];
-            
-            // 1. BEST: getByLabel for form inputs with associated labels
-            if ((tag === 'input' || tag === 'textarea' || tag === 'select') && el.labels && el.labels.length > 0) {
-              const labelText = el.labels[0].textContent?.trim();
-              if (labelText && labelText.length > 0 && labelText.length < 50) {
-                selectors.push(`getByLabel('${labelText}')`);
-              }
-            }
-            
-            // 2. BEST: getByRole with name (semantic and accessible)
-            if (text && text.length > 0 && text.length < 30) {
-              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}')`);
-            }
-            
-            // 4. GOOD: getByText for elements with visible text (fallback for non-role elements)
-            if (text && text.length > 0 && text.length < 30 && !selectors.some(s => s.includes('getByRole'))) {
-              selectors.push(`getByText('${text}')`);
-            }
-            
-            // 5. GOOD: data-testid attributes (stable, explicit)
-            const dataTestId = el.getAttribute('data-testid') || el.getAttribute('data-test-id') || 
-                              el.getAttribute('data-id') || el.getAttribute('data-test');
-            if (dataTestId) selectors.push(`getByTestId('${dataTestId}')`);
-            
-            // 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}`);
-            }
-            
-            elements.push({
-              tag,
-              id,
-              text,
-              type,
-              name: nameAttr || '',  // CRITICAL: Capture name attribute for form inputs
-              role,
-              ariaLabel,
-              placeholder,
-              bbox: {
-                x: Math.round(rect.x),
-                y: Math.round(rect.y),
-                width: Math.round(rect.width),
-                height: Math.round(rect.height)
-              },
-              selectors
-            });
-          });
-          
-          return elements;
-        });
-      } catch (evalError: any) {
-        // Error extracting interactive elements - continue with empty array
-        console.error('[getEnhancedPageInfo] Failed to extract interactive elements:', evalError.message);
-        interactiveElements = [];
-      }
-    } else {
-      // Input is already a domSnapshot
-      domSnapshot = input;
-    }
-
-    // Log extraction results for debugging
-    if (hasPageObject) {
-      console.log(`[getEnhancedPageInfo] Extracted ${interactiveElements.length} interactive elements from ${domSnapshot.url}`);
-    }
-    
-    // Create smart summary prioritizing important elements over repetitive lists
-    let formattedElements = '';
-    
-    if (interactiveElements.length > 0) {
-      // Prioritize: forms/buttons > unique elements > list items
-      const prioritized: InteractiveElement[] = [];
-      const listItems: InteractiveElement[] = [];
-      
-      // Group elements
-      for (const el of interactiveElements) {
-        // High priority: forms, buttons, unique interactive elements
-        if (['input', 'textarea', 'select', 'button'].includes(el.tag) || 
-            (el.tag === 'a' && el.text.length > 0 && el.text.length < 50)) {
-          prioritized.push(el);
-        } else {
-          listItems.push(el);
-        }
-      }
-      
-      // Take top 25 prioritized
-      const selectedElements = prioritized.slice(0, 25);
-      
-      // Add sample of list items if space remains (show diversity, not just first N)
-      if (selectedElements.length < 30 && listItems.length > 0) {
-        const step = Math.max(1, Math.floor(listItems.length / 5));  // Sample 5 from list
-        for (let i = 0; i < Math.min(5, listItems.length); i++) {
-          selectedElements.push(listItems[i * step]);
-        }
-      }
-      
-      formattedElements = selectedElements.map((e, i) => {
-        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}"` : '';
-        
-        // 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
-      const omitted = interactiveElements.length - selectedElements.length;
-      if (omitted > 0) {
-        formattedElements += `\n\n... (+${omitted} more elements)`;
-        
-        // Show pattern summary for lists/tables
-        const linkCount = interactiveElements.filter(e => e.tag === 'a').length;
-        const listItemPatterns: Record<string, number> = {};
-        
-        for (const el of interactiveElements) {
-          if (el.tag === 'a' || el.tag === 'li' || el.tag === 'div') {
-            const pattern = `${el.tag}${el.role ? `[${el.role}]` : ''}`;
-            listItemPatterns[pattern] = (listItemPatterns[pattern] || 0) + 1;
-          }
-        }
-        
-        if (Object.keys(listItemPatterns).length > 0) {
-          formattedElements += `\nPattern summary: `;
-          formattedElements += Object.entries(listItemPatterns)
-            .filter(([_, count]) => count > 5)
-            .map(([pattern, count]) => `${count}x ${pattern}`)
-            .join(', ');
-        }
-      }
-    } else {
-      formattedElements = 'No interactive elements found (page may not be loaded or extraction failed)';
-    }
-
-    return {
-      url: domSnapshot.url,
-      title: domSnapshot.title,
-      ariaSnapshot: domSnapshot.accessibilityTree,
-      interactiveElements,
-      formattedElements
-    };
-  } catch (error: any) {
-    // Error extracting page info - return defaults
-    console.error('[getEnhancedPageInfo] Top-level error:', error.message);
-    return {
-      url: domSnapshot?.url || 'Unknown',
-      title: 'Unknown',
-      ariaSnapshot: null,
-      interactiveElements: [],
-      formattedElements: `Unable to extract: ${error.message}`
-    };
-  }
-}

package/tsconfig.json

@@ -1,19 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "ES2020",
-    "module": "commonjs",
-    "lib": ["ES2020"],
-    "outDir": "./dist",
-    "rootDir": "./src",
-    "strict": true,
-    "esModuleInterop": true,
-    "skipLibCheck": true,
-    "forceConsistentCasingInFileNames": true,
-    "declaration": true,
-    "declarationMap": true,
-    "sourceMap": true,
-    "resolveJsonModule": true
-  },
-  "include": ["src/**/*"],
-  "exclude": ["node_modules", "dist", "**/*.test.ts"]
-}