README.md

metadata

title: UI Regression Testing
emoji: 🚀
colorFrom: blue
colorTo: indigo
sdk: docker
sdk_version: 6.2.0
app_file: app.py
pinned: false

UI Regression Testing System - Hugging Face Spaces

A powerful automated system for detecting visual regressions by comparing Figma designs with live website screenshots.

🎯 Features

• ✅ Automated Figma Screenshot Capture - Extracts design frames at correct dimensions
• ✅ Website Screenshot Capture - Captures desktop and mobile views
• ✅ Visual Difference Detection - AI-powered comparison using vision models
• ✅ Annotated Comparisons - Red/orange/green circles marking differences
• ✅ Severity Classification - High/Medium/Low severity ratings
• ✅ Detailed Reports - Comprehensive regression analysis
• ✅ Similarity Scoring - 0-100 score indicating design-to-website match

🚀 Quick Start

1. Get Your Credentials

Figma API Key:

• Go to https://www.figma.com/developers/api#access-tokens
• Create a new personal access token
• Copy the token (starts with figd_)

Figma File ID:

• Open your Figma file
• The URL looks like: https://www.figma.com/file/{FILE_ID}/...
• Copy the FILE_ID part

Website URL:

• The full URL of your website (e.g., https://example.com)
• Must be publicly accessible

Hugging Face Token (Optional):

• Go to https://huggingface.co/settings/tokens
• Create a new token with read access

2. Run the Test

1. Fill in your credentials in the UI
2. Click "Start Regression Test"
3. Wait for the test to complete (1-3 minutes)
4. Review results, comparison images, and detailed report

🔍 How It Works

This project uses an advanced multi-agent workflow powered by LangGraph.

Agent 0: Super Agent

• Generates comprehensive test plan

Agent 1: Design Inspector

• Captures Figma frames at correct dimensions

Agent 2: Website Inspector

• Screenshots website at multiple viewports

Agent 3: Integrated Analyzer

• Compares screenshots using both pixel analysis and HF Vision models.

Human-in-the-loop

• The workflow pauses before the final analysis, allowing you to review the captured screenshots and approve continuing.

🛠️ Technical Details

Key Technologies

• LangGraph: Multi-agent orchestration
• Gradio: Web UI
• Playwright: Browser automation
• Pillow: Image processing
• Hugging Face Transformers: Vision models

📚 Documentation

For more information on the advanced LangGraph features, please see README_LANGGRAPH.md.

---

Built with ❤️ for better UI quality assurance