riazmo/ui-regression-testing-3

🎨 UI Regression Testing Tool v2

Compare Figma designs with live websites to detect visual differences.

Features

Phase 1 (Current)

• —✅ Screenshot capture from Figma designs
• —✅ Screenshot capture from live websites
• —✅ Visual diff overlay with highlighted differences
• —✅ Normalized image comparison (handles Figma 2x export)
• —✅ Similarity scoring
• —✅ Side-by-side comparison view

Coming Soon

• —🔜 Element-by-element comparison
• —🔜 Typography detection
• —🔜 Color palette analysis
• —🔜 Component detection
• —🔜 114 visual difference checks

Usage

1. 1.Enter your Figma API Key
2. 2.Enter the Figma File ID (from the URL)
3. 3.Enter the Website URL to compare
4. 4.Click "Start Capture" to take screenshots
5. 5.Click "Run Analysis" to compare and see differences

Requirements

• —Figma file with frames named: *-Desktop (1440px) and *-Mobile (375px)
• —Website must be publicly accessible