How to Build a Visual Regression Testing Tool in JavaScript (Free API)

You push a CSS change. Everything looks fine in your browser. You merge to main. Then a user reports the checkout button disappeared on mobile. Visual regression testing catches these bugs automatically by comparing screenshots of your pages before and after changes. Here's how to build one in ~60 lines of JavaScript. What We're Building A CLI tool that: Takes screenshots of your web pages Compares them against baseline images Reports pixel-level differences Integrates with CI/CD pipelines No Puppeteer. No browser installation. Just API calls. Prerequisites Node.js 18+ A free API key from Agent Gateway (200 free credits) Step 1: The Screenshot Function Instead of spinning up a headless browser, we'll use a screenshot API that handles rendering, viewport sizing, and format conversion: import { writeFileSync , readFileSync , existsSync , mkdirSync } from ' fs ' ; import { createHash } from ' crypto ' ; import { join } from ' path ' ; const API_KEY = process . env . GATEWAY_API_KEY || ' y