Spaces:
Sleeping
Sleeping
| 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** |