👁️ Visual Regression Platform (Playwright + Pixelmatch)

A lightweight open-source alternative for visual testing inspired by tools like Percy and Applitools.

This project helps you detect visual changes in your UI by comparing screenshots between versions (before vs after) and generating a visual diff.

---

✨ Overview

Visual bugs are often harder to catch than functional bugs.

This tool ensures your UI remains consistent by automatically detecting:

• Layout shifts
• Missing or added components
• Style changes
• Unexpected UI regressions

---

🚀 Key Features

• 📸 Automated screenshot capture (Playwright)
• 🔍 Pixel-level image comparison (Pixelmatch)
• 🟥 Visual diff generation
• ☁️ Cloud storage support (Firebase + Cloudinary)
• 🔌 API-first design (usable via Postman)
• 🧠 Simple setup with environment tokens

---

🧰 Tech Stack

• Playwright (browser automation)
• Pixelmatch (image diffing engine)
• Node.js (backend runtime)
• Firebase NoSQL (metadata storage)
• Cloudinary (image hosting)

---

🔑 Setup (Simple)

To run this project, you only need to configure your environment variables:

• Firebase credentials
• Cloudinary credentials

Once set, the system is ready to capture and compare visual states.

---

🔄 How it works

1. Capture Before screenshot (baseline UI)
2. Capture After screenshot (new version)
3. Generate Diff image highlighting changes
4. Store results in Firebase + Cloudinary

---

📸 Visual Results

🟦 Before (Baseline UI)

🟩 After (Updated UI)

🟥 Visual Diff (Detected Changes)

🌐 Postman API Test

---

🌐 API Usage (Postman)

This system is API-driven and can be tested easily using Postman.

Request

• Method: POST
• Endpoint: /compare

{
  "before": "https://your-app.com/v1",
  "after": "https://your-app.com/v2"
}

Response

• Visual difference detected (true/false)
• Change score (%)
• Links to stored images (before / after / diff)

---

📊 Why this matters

Traditional testing often misses visual regressions.

This tool ensures:

• UI consistency across releases
• Faster QA feedback loops
• Reduced manual testing effort

---

🧪 Use cases

• QA automation pipelines
• Frontend regression testing
• Design system validation
• Dev vs Prod UI comparison

---

☁️ Integrations

Firebase

Used for storing:

• Comparison results
• Metadata
• Test history

Cloudinary

Used for:

• Hosting screenshots
• Serving diff images globally

---

🔮 Future roadmap

• 📊 Web dashboard (Percy-like UI)
• 🧩 Component-level diffing (React support)
• ⚡ GitHub Actions integration
• 🧠 Smart masking for dynamic content

---

💡 Inspiration

This project is inspired by tools like:

• Percy
• Applitools

But designed to be:

• Lightweight
• Open source friendly
• Easy to self-host

---

👨‍💻 Author

Open source project for learning and building visual regression testing systems with modern we