riazmo/ui-regression-testing-2

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. 1.Fill in your credentials in the UI
2. 2.Click "Start Regression Test"
3. 3.Wait for the test to complete (1-3 minutes)
4. 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