@sun-asterisk/sungen 1.0.23 → 2.0.0

package/src/generators/ui-model-builder/enhanced-deep-scanner.ts

@@ -1,731 +0,0 @@
-/**
- * ENHANCED Deep Scanner with Semantic Context Extraction
- *
- * Enhancements over standard deep-scanner:
- * 1. Extract ARIA attributes (role, aria-label, aria-labelledby)
- * 2. Capture form context (form name, field names)
- * 3. Record spatial context (preceding text, parent sections)
- * 4. Infer semantic purpose (input/navigation/action/display)
- * 5. Generate multiple selector strategies (ARIA, semantic, testid, CSS)
- *
- * This enables intelligent context-aware selector mapping with 90-95% accuracy.
- */
-
-import * as parser from '@babel/parser';
-import traverse from '@babel/traverse';
-import * as t from '@babel/types';
-import * as fs from 'fs';
-import * as path from 'path';
-
-// ============================================================================
-// TYPES
-// ============================================================================
-
-type Purpose = 'input' | 'navigation' | 'action' | 'display' | 'container';
-type InteractionType = 'click' | 'fill' | 'select' | 'check' | 'none';
-type SelectorType = 'aria' | 'semantic' | 'testid' | 'css';
-type Confidence = 'high' | 'medium' | 'low';
-
-interface SemanticContext {
-  purpose: Purpose;
-  section: string;
-  interactionType: InteractionType;
-
-  formContext?: {
-    formName: string;
-    formPurpose: string;
-    fieldName: string;
-    fieldType: string;
-  };
-
-  spatialContext: {
-    precedingText?: string;
-    followingText?: string;
-    parentContainer?: string;
-    nearbyLabels?: string[];
-    sectionHeading?: string;
-  };
-
-  accessibility: {
-    ariaRole?: string;
-    ariaLabel?: string;
-    ariaLabelledBy?: string;
-    ariaDescribedBy?: string;
-    implicitRole?: string;
-  };
-}
-
-interface SelectorStrategy {
-  type: SelectorType;
-  selector: string;
-  confidence: Confidence;
-  stability: 'high' | 'medium' | 'low';
-  playwrightCode?: string;
-}
-
-interface EnhancedUIElement {
-  key: string;
-  tag: string;
-  text: string | null;
-  testId?: string;
-  role?: string;
-  id?: string;
-  name?: string;
-  placeholder?: string;
-  source: string;
-
-  // HTML attributes
-  props: Record<string, any>;
-
-  // Enhanced: Rich semantic context
-  semanticContext: SemanticContext;
-
-  // Enhanced: Multiple selector strategies
-  selectorStrategies: SelectorStrategy[];
-
-  // Metadata
-  metadata?: {
-    frameworkComponent?: string;
-    originalImport?: string;
-  };
-}
-
-interface DeepScanConfig {
-  sourceRoot: string;
-  projectRoot: string;
-  maxDepth: number;
-  verbose?: boolean;
-}
-
-// ============================================================================
-// SEMANTIC CONTEXT EXTRACTOR
-// ============================================================================
-
-class SemanticContextExtractor {
-  /**
-   * Extract rich semantic context from element
-   */
-  extractContext(
-    element: any,
-    parentElement?: any,
-    siblings?: any[],
-    formContext?: any
-  ): SemanticContext {
-    const context: SemanticContext = {
-      purpose: this.inferPurpose(element),
-      section: this.inferSection(element, parentElement),
-      interactionType: this.inferInteractionType(element),
-      spatialContext: this.extractSpatialContext(element, siblings),
-      accessibility: this.extractAccessibility(element),
-    };
-
-    // Add form context if element is inside a form
-    if (formContext) {
-      context.formContext = this.buildFormContext(element, formContext);
-    }
-
-    return context;
-  }
-
-  private inferPurpose(element: any): Purpose {
-    const tag = element.tag?.toLowerCase();
-    const type = element.props?.type;
-
-    // Interactive inputs
-    if (['input', 'textarea', 'select'].includes(tag)) {
-      return 'input';
-    }
-
-    // Navigation elements
-    if (tag === 'a' || element.props?.href) {
-      return 'navigation';
-    }
-
-    // Action elements
-    if (tag === 'button' || type === 'submit' || type === 'button') {
-      return 'action';
-    }
-
-    // Display elements
-    if (['p', 'span', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'label'].includes(tag)) {
-      return 'display';
-    }
-
-    return 'container';
-  }
-
-  private inferSection(element: any, parent?: any): string {
-    // Check for semantic HTML5 sections
-    const semanticSections = ['header', 'nav', 'main', 'aside', 'footer', 'form', 'section', 'article'];
-
-    let current = parent;
-    while (current) {
-      const tag = current.tag?.toLowerCase();
-      if (semanticSections.includes(tag)) {
-        return tag;
-      }
-      if (current.props?.['data-section']) {
-        return current.props['data-section'];
-      }
-      if (current.props?.role) {
-        const role = current.props.role;
-        if (['banner', 'navigation', 'main', 'complementary', 'contentinfo'].includes(role)) {
-          return role;
-        }
-      }
-      current = current.parent;
-    }
-
-    // Infer from className
-    if (element.props?.className) {
-      const className = element.props.className.toLowerCase();
-      if (className.includes('header')) return 'header';
-      if (className.includes('sidebar')) return 'sidebar';
-      if (className.includes('footer')) return 'footer';
-      if (className.includes('modal')) return 'modal';
-      if (className.includes('nav')) return 'navigation';
-    }
-
-    return 'main';
-  }
-
-  private inferInteractionType(element: any): InteractionType {
-    const tag = element.tag?.toLowerCase();
-    const type = element.props?.type;
-
-    if (['checkbox', 'radio'].includes(type)) return 'check';
-    if (tag === 'select') return 'select';
-    if (['input', 'textarea'].includes(tag)) return 'fill';
-    if (['button', 'a'].includes(tag)) return 'click';
-    if (element.props?.onClick) return 'click';
-
-    return 'none';
-  }
-
-  private extractSpatialContext(element: any, siblings?: any[]): SemanticContext['spatialContext'] {
-    const context: SemanticContext['spatialContext'] = {};
-
-    if (!siblings) return context;
-
-    const elementIndex = siblings.findIndex(s => s.key === element.key);
-    if (elementIndex === -1) return context;
-
-    // Find preceding text (look backward)
-    for (let i = elementIndex - 1; i >= Math.max(0, elementIndex - 3); i--) {
-      const sibling = siblings[i];
-      if (sibling.text && sibling.tag !== 'script' && sibling.tag !== 'style') {
-        context.precedingText = sibling.text.trim();
-        break;
-      }
-    }
-
-    // Find following text (look forward)
-    for (let i = elementIndex + 1; i < Math.min(siblings.length, elementIndex + 3); i++) {
-      const sibling = siblings[i];
-      if (sibling.text && sibling.tag !== 'script' && sibling.tag !== 'style') {
-        context.followingText = sibling.text.trim();
-        break;
-      }
-    }
-
-    // Find nearby labels
-    context.nearbyLabels = siblings
-      .filter(s => s.tag === 'label' && Math.abs(siblings.indexOf(s) - elementIndex) <= 2)
-      .map(s => s.text)
-      .filter(Boolean);
-
-    return context;
-  }
-
-  private extractAccessibility(element: any): SemanticContext['accessibility'] {
-    const props = element.props || {};
-
-    return {
-      ariaRole: props['role'] || props['aria-role'],
-      ariaLabel: props['aria-label'] || props['ariaLabel'],
-      ariaLabelledBy: props['aria-labelledby'] || props['ariaLabelledBy'],
-      ariaDescribedBy: props['aria-describedby'] || props['ariaDescribedBy'],
-      implicitRole: this.getImplicitRole(element.tag),
-    };
-  }
-
-  private buildFormContext(element: any, formElement: any): SemanticContext['formContext'] {
-    const formProps = formElement.props || {};
-
-    return {
-      formName: formProps.name || formProps.id || 'unnamed-form',
-      formPurpose: this.inferFormPurpose(formElement),
-      fieldName: element.props?.name || element.props?.id || 'unnamed-field',
-      fieldType: element.props?.type || element.tag,
-    };
-  }
-
-  private inferFormPurpose(formElement: any): string {
-    const formName = (formElement.props?.name || '').toLowerCase();
-    const formId = (formElement.props?.id || '').toLowerCase();
-
-    if (formName.includes('login') || formId.includes('login')) return 'login';
-    if (formName.includes('register') || formId.includes('register')) return 'registration';
-    if (formName.includes('search') || formId.includes('search')) return 'search';
-    if (formName.includes('contact') || formId.includes('contact')) return 'contact';
-    if (formName.includes('settings') || formId.includes('settings')) return 'settings';
-
-    return 'generic';
-  }
-
-  private getImplicitRole(tag: string): string | undefined {
-    const implicitRoles: Record<string, string> = {
-      'button': 'button',
-      'a': 'link',
-      'input': 'textbox',
-      'textarea': 'textbox',
-      'select': 'combobox',
-      'nav': 'navigation',
-      'main': 'main',
-      'header': 'banner',
-      'footer': 'contentinfo',
-      'form': 'form',
-      'img': 'img',
-    };
-
-    return implicitRoles[tag?.toLowerCase()];
-  }
-}
-
-// ============================================================================
-// SELECTOR STRATEGY GENERATOR
-// ============================================================================
-
-class SelectorStrategyGenerator {
-  /**
-   * Generate multiple selector strategies for an element
-   */
-  generateStrategies(element: EnhancedUIElement): SelectorStrategy[] {
-    const strategies: SelectorStrategy[] = [];
-
-    // 1. ARIA-based selector (highest priority)
-    const ariaStrategy = this.generateAriaSelector(element);
-    if (ariaStrategy) strategies.push(ariaStrategy);
-
-    // 2. Semantic structure selector
-    const semanticStrategy = this.generateSemanticSelector(element);
-    if (semanticStrategy) strategies.push(semanticStrategy);
-
-    // 3. data-testid selector (if exists)
-    if (element.testId) {
-      strategies.push({
-        type: 'testid',
-        selector: `[data-testid="${element.testId}"]`,
-        confidence: 'high',
-        stability: 'high',
-        playwrightCode: `page.locator('[data-testid="${element.testId}"]')`,
-      });
-    }
-
-    // 4. ID selector (if exists and semantic)
-    if (element.id && !element.id.match(/^(mui|react|auto)-/)) {
-      strategies.push({
-        type: 'css',
-        selector: `#${element.id}`,
-        confidence: 'high',
-        stability: 'medium',
-        playwrightCode: `page.locator('#${element.id}')`,
-      });
-    }
-
-    // 5. Name attribute (for form fields)
-    if (element.name) {
-      strategies.push({
-        type: 'css',
-        selector: `${element.tag}[name="${element.name}"]`,
-        confidence: 'medium',
-        stability: 'high',
-        playwrightCode: `page.locator('${element.tag}[name="${element.name}"]')`,
-      });
-    }
-
-    // 6. CSS fallback
-    if (strategies.length === 0) {
-      const cssStrategy = this.generateCssSelector(element);
-      if (cssStrategy) strategies.push(cssStrategy);
-    }
-
-    return strategies;
-  }
-
-  private generateAriaSelector(element: EnhancedUIElement): SelectorStrategy | null {
-    const { accessibility } = element.semanticContext;
-
-    // Explicit ARIA role and label
-    if (accessibility.ariaRole && accessibility.ariaLabel) {
-      return {
-        type: 'aria',
-        selector: `role=${accessibility.ariaRole}[name="${accessibility.ariaLabel}"]`,
-        confidence: 'high',
-        stability: 'high',
-        playwrightCode: `page.getByRole('${accessibility.ariaRole}', { name: '${accessibility.ariaLabel}' })`,
-      };
-    }
-
-    // Implicit role from HTML tag + text
-    if (accessibility.implicitRole && element.text && element.text.length < 50) {
-      return {
-        type: 'aria',
-        selector: `role=${accessibility.implicitRole}[name="${element.text}"]`,
-        confidence: 'high',
-        stability: 'high',
-        playwrightCode: `page.getByRole('${accessibility.implicitRole}', { name: '${element.text}' })`,
-      };
-    }
-
-    // Role + aria-labelledby
-    if (accessibility.ariaRole && accessibility.ariaLabelledBy) {
-      return {
-        type: 'aria',
-        selector: `role=${accessibility.ariaRole}[aria-labelledby="${accessibility.ariaLabelledBy}"]`,
-        confidence: 'medium',
-        stability: 'medium',
-        playwrightCode: `page.locator('[role="${accessibility.ariaRole}"][aria-labelledby="${accessibility.ariaLabelledBy}"]')`,
-      };
-    }
-
-    // Placeholder as fallback label for inputs
-    if (accessibility.implicitRole === 'textbox' && element.placeholder) {
-      return {
-        type: 'aria',
-        selector: `role=textbox[name="${element.placeholder}"]`,
-        confidence: 'medium',
-        stability: 'medium',
-        playwrightCode: `page.getByRole('textbox', { name: '${element.placeholder}' })`,
-      };
-    }
-
-    return null;
-  }
-
-  private generateSemanticSelector(element: EnhancedUIElement): SelectorStrategy | null {
-    const { formContext, section } = element.semanticContext;
-
-    // Form field with name
-    if (formContext && formContext.fieldName && formContext.formName) {
-      const selector = `form[name="${formContext.formName}"] ${element.tag}[name="${formContext.fieldName}"]`;
-      return {
-        type: 'semantic',
-        selector,
-        confidence: 'high',
-        stability: 'high',
-        playwrightCode: `page.locator('${selector}')`,
-      };
-    }
-
-    // Link with href
-    if (element.tag === 'a' && element.props.href) {
-      const selector = section !== 'main'
-        ? `${section} a[href="${element.props.href}"]`
-        : `a[href="${element.props.href}"]`;
-
-      return {
-        type: 'semantic',
-        selector,
-        confidence: 'medium',
-        stability: 'medium',
-        playwrightCode: `page.locator('${selector}')`,
-      };
-    }
-
-    // Button with type in section
-    if (element.tag === 'button' && element.props.type) {
-      const selector = section !== 'main'
-        ? `${section} button[type="${element.props.type}"]`
-        : `button[type="${element.props.type}"]`;
-
-      return {
-        type: 'semantic',
-        selector,
-        confidence: 'low',
-        stability: 'medium',
-        playwrightCode: `page.locator('${selector}')`,
-      };
-    }
-
-    return null;
-  }
-
-  private generateCssSelector(element: EnhancedUIElement): SelectorStrategy {
-    let selector = element.tag;
-
-    if (element.id) {
-      selector = `#${element.id}`;
-    } else if (element.name) {
-      selector = `${element.tag}[name="${element.name}"]`;
-    } else if (element.props.type) {
-      selector = `${element.tag}[type="${element.props.type}"]`;
-    } else if (element.props.className) {
-      // Use first meaningful class (avoid utility classes)
-      const classes = element.props.className.split(' ');
-      const meaningfulClass = classes.find((c: string) =>
-        !c.match(/^(text-|bg-|p-|m-|flex|grid|rounded|border|shadow)/)
-      );
-      if (meaningfulClass) {
-        selector = `${element.tag}.${meaningfulClass}`;
-      }
-    }
-
-    return {
-      type: 'css',
-      selector,
-      confidence: 'low',
-      stability: 'low',
-      playwrightCode: `page.locator('${selector}')`,
-    };
-  }
-}
-
-// ============================================================================
-// ENHANCED DEEP SCANNER
-// ============================================================================
-
-export class EnhancedDeepScanner {
-  private config: DeepScanConfig;
-  private elements: EnhancedUIElement[] = [];
-  private contextExtractor = new SemanticContextExtractor();
-  private strategyGenerator = new SelectorStrategyGenerator();
-  private scannedFiles = new Set<string>();
-  private elementCounter = 0;
-  private currentFormContext: any = null;
-
-  constructor(config: DeepScanConfig) {
-    this.config = config;
-  }
-
-  /**
-   * Scan a React component file and extract all UI elements with context
-   */
-  async scanFile(
-    filePath: string,
-    depth: number = 0,
-    parentProps?: Record<string, any>,
-    parentElement?: any,
-    formContext?: any
-  ): Promise<void> {
-    if (depth > this.config.maxDepth) return;
-    if (this.scannedFiles.has(filePath)) return;
-
-    this.scannedFiles.add(filePath);
-
-    if (this.config.verbose) {
-      console.log(`${'  '.repeat(depth)}Scanning: ${path.basename(filePath)}`);
-    }
-
-    const code = fs.readFileSync(filePath, 'utf-8');
-    const ast = parser.parse(code, {
-      sourceType: 'module',
-      plugins: ['jsx', 'typescript'],
-    });
-
-    const self = this;
-    const currentDepth = depth;
-    const sourceFileName = path.basename(filePath);
-
-    traverse(ast, {
-      JSXElement(nodePath) {
-        const openingElement = nodePath.node.openingElement;
-        const tagName = self.getTagName(openingElement);
-
-        // Extract all attributes
-        const attrs = self.extractAttributes(openingElement);
-
-        // Merge with parent props
-        const mergedAttrs = { ...parentProps, ...attrs };
-
-        // Extract text content
-        const text = self.extractText(nodePath.node);
-
-        // Detect if we entered a form
-        let currentFormCtx = formContext;
-        if (tagName === 'form') {
-          currentFormCtx = {
-            tag: 'form',
-            props: mergedAttrs,
-          };
-        }
-
-        // Build base element
-        const baseElement = {
-          key: `e${++self.elementCounter}`,
-          tag: tagName,
-          text,
-          testId: attrs['data-testid'],
-          role: attrs['role'],
-          id: attrs['id'],
-          name: attrs['name'],
-          placeholder: attrs['placeholder'],
-          source: sourceFileName,
-          props: mergedAttrs,
-        };
-
-        // Add semantic context
-        const semanticContext = self.contextExtractor.extractContext(
-          baseElement,
-          parentElement,
-          undefined, // siblings would need to be tracked
-          currentFormCtx
-        );
-
-        // Create enhanced element
-        const enhancedElement: EnhancedUIElement = {
-          ...baseElement,
-          semanticContext,
-          selectorStrategies: [],
-        };
-
-        // Generate selector strategies
-        enhancedElement.selectorStrategies = self.strategyGenerator.generateStrategies(enhancedElement);
-
-        // Add to collection if it's a meaningful UI element
-        if (self.isMeaningfulElement(enhancedElement)) {
-          self.elements.push(enhancedElement);
-
-          if (self.config.verbose) {
-            console.log(`  ${'  '.repeat(depth)}  Found: <${tagName}> ${text || ''} [${enhancedElement.selectorStrategies.length} strategies]`);
-          }
-        }
-      },
-    });
-  }
-
-  /**
-   * Check if element is meaningful for testing
-   */
-  private isMeaningfulElement(element: EnhancedUIElement): boolean {
-    const interactiveTags = ['button', 'input', 'textarea', 'select', 'a'];
-    const meaningfulTags = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p', 'label'];
-
-    // Interactive elements
-    if (interactiveTags.includes(element.tag)) return true;
-
-    // Elements with text content
-    if (meaningfulTags.includes(element.tag) && element.text) return true;
-
-    // Elements with test IDs
-    if (element.testId) return true;
-
-    // Elements with ARIA labels
-    if (element.semanticContext.accessibility.ariaLabel) return true;
-
-    // Form elements
-    if (element.semanticContext.formContext) return true;
-
-    return false;
-  }
-
-  private getTagName(element: t.JSXOpeningElement): string {
-    const name = element.name;
-    if (t.isJSXIdentifier(name)) {
-      return name.name;
-    } else if (t.isJSXMemberExpression(name)) {
-      return `${(name.object as t.JSXIdentifier).name}.${name.property.name}`;
-    }
-    return 'unknown';
-  }
-
-  private extractAttributes(element: t.JSXOpeningElement): Record<string, any> {
-    const attrs: Record<string, any> = {};
-
-    element.attributes.forEach((attr) => {
-      if (t.isJSXAttribute(attr) && t.isJSXIdentifier(attr.name)) {
-        const key = attr.name.name;
-        let value: any = true;
-
-        if (attr.value) {
-          if (t.isStringLiteral(attr.value)) {
-            value = attr.value.value;
-          } else if (t.isJSXExpressionContainer(attr.value)) {
-            const expr = attr.value.expression;
-            if (t.isStringLiteral(expr)) {
-              value = expr.value;
-            } else if (t.isBooleanLiteral(expr)) {
-              value = expr.value;
-            } else if (t.isNumericLiteral(expr)) {
-              value = expr.value;
-            } else {
-              value = '{...}';
-            }
-          }
-        }
-
-        attrs[key] = value;
-      }
-    });
-
-    return attrs;
-  }
-
-  private extractText(node: t.JSXElement): string | null {
-    let text = '';
-
-    node.children.forEach((child) => {
-      if (t.isJSXText(child)) {
-        text += child.value.trim();
-      } else if (t.isJSXExpressionContainer(child)) {
-        if (t.isStringLiteral(child.expression)) {
-          text += child.expression.value;
-        }
-      }
-    });
-
-    return text.trim() || null;
-  }
-
-  /**
-   * Get all discovered elements
-   */
-  getElements(): EnhancedUIElement[] {
-    return this.elements;
-  }
-
-  /**
-   * Get scanning stats
-   */
-  getStats() {
-    return {
-      totalElements: this.elements.length,
-      filesScanned: this.scannedFiles.size,
-      strategyBreakdown: this.getStrategyBreakdown(),
-      purposeBreakdown: this.getPurposeBreakdown(),
-    };
-  }
-
-  private getStrategyBreakdown() {
-    const breakdown: Record<string, number> = {
-      aria: 0,
-      semantic: 0,
-      testid: 0,
-      css: 0,
-    };
-
-    this.elements.forEach(el => {
-      el.selectorStrategies.forEach(strategy => {
-        breakdown[strategy.type]++;
-      });
-    });
-
-    return breakdown;
-  }
-
-  private getPurposeBreakdown() {
-    const breakdown: Record<string, number> = {
-      input: 0,
-      navigation: 0,
-      action: 0,
-      display: 0,
-      container: 0,
-    };
-
-    this.elements.forEach(el => {
-      breakdown[el.semanticContext.purpose]++;
-    });
-
-    return breakdown;
-  }
-}