Hugging Face's logo

Spaces:
riazmo
/
ui-regression-testing-3
Sleeping

App Files Community
ui-regression-testing-3 / README.md
riazmo's picture
riazmo
Upload 17 files
cfec14d verified
preview code
|
raw
history blame contribute delete
1.08 kB
metadata 
title: UI Regression Testing v2
emoji: 🎨
colorFrom: blue
colorTo: purple
sdk: docker
app_port: 7860
pinned: false

🎨 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. Enter your Figma API Key
  2. Enter the Figma File ID (from the URL)
  3. Enter the Website URL to compare
  4. Click "Start Capture" to take screenshots
  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