All projects · SaaS Product Tools
Screenshot Comparison Tool — Visual Regression Testing
An interactive visual regression and screenshot comparison tool that allows users to upload before-and-after screenshots, automatically detect…
An interactive visual regression and screenshot comparison tool that allows users to upload before-and-after screenshots, automatically detect visual diffs with pixel-level clustering, toggle between Side-by-side, Overlay, and Difference views, compute similarity scores, annotate change notes, and persist test histories in localStorage.
- Automated pixel-level comparison engine with grid clustering into numbered bounding boxes and similarity percentage scoring
- Interactive 3-way view controller supporting Side-by-side inspection, Overlay with dynamic opacity slider, and Difference heatmap
- Change Summary drawer linking numbered pins to visual diff coordinates with interactive focus states
- Full test suite history persisted in browser localStorage with title editing, note annotations, and deletion management
- Exportable JSON visual regression reports containing metadata, diff statistics, and audit notes
Built with: HTML5 Canvas API, Pixel Difference Algorithm, Vanilla JavaScript, localStorage, CSS Grid / Flexbox, Visual Regression Testing, Google Fonts (Sora, Outfit, Chivo Mono)