
How to monitor a website for visual changes (without a browser)
How to Monitor a Website for Visual Changes Price trackers, competitor monitors, status pages, government data feeds — there's a whole class of problems where you care when a web page looks different , not just when a specific element changes. Parsing HTML is brittle. Scraping structured data works until the layout changes. Screenshots capture everything. Here's a minimal visual change monitor in Node.js: screenshot a URL, diff against the last capture, alert when the difference exceeds a threshold. The monitor import fs from ' fs/promises ' ; import { PNG } from ' pngjs ' ; import pixelmatch from ' pixelmatch ' ; const PAGES = [ { name : ' competitor-pricing ' , url : ' https://competitor.com/pricing ' }, { name : ' status-page ' , url : ' https://status.yourvendor.com ' }, ]; const THRESHOLD = 0.02 ; // 2% pixel change triggers alert const SNAPSHOTS_DIR = ' ./snapshots ' ; async function capture ( url ) { const res = await fetch ( ' https://api.pagebolt.dev/v1/screenshot ' , { method
Continue reading on Dev.to DevOps
Opens in a new tab



