README.md

---
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**