tailwind2-7  Exercise 3: A Pixel-Diff Check With Headless Chrome
================================================================

Setup: npm install tailwindcss @tailwindcss/cli pngjs pixelmatch ; Chrome installed. Build a.css (just  @import "tailwindcss";) to o.css. Make v1.html, then v2.html and v3.html as variants by changing classes.

--- v1.html ---
<link rel=stylesheet href="o.css">
<div class="p-6 bg-slate-100 min-h-screen"><div class="max-w-xs rounded-lg bg-white p-4 shadow-md"><h1 class="text-lg font-bold text-slate-900">Card</h1><p class="mt-2 text-sm text-slate-600">Some body text for the card.</p><button class="mt-4 rounded-md bg-blue-600 px-3 py-2 text-white hover:bg-blue-700">Save</button></div></div>

v2.html = v1.html with  bg-blue-600 -> bg-blue-500  and  px-3 py-2 -> px-3 py-2.5
v3.html = v1.html with  text-slate-600 -> text-slate-500  (one paragraph)

Screenshots (a new browser profile for each, so nothing is shared):
  chrome.exe --headless=new --disable-gpu --hide-scrollbars --user-data-dir=<new folder> --window-size=500,400 --screenshot=v1a.png file:///.../v1.html
  (v1b.png: the same page again; v2.png; v3.png)

--- diff.mjs ---
import fs from 'node:fs'; import { PNG } from 'pngjs'; import pixelmatch from 'pixelmatch'; import crypto from 'node:crypto';
const rd = f => PNG.sync.read(fs.readFileSync(f));
const h = f => crypto.createHash('sha1').update(fs.readFileSync(f)).digest('hex').slice(0,10);
const cmp = (a,b,t=0.1) => { const A=rd(a),B=rd(b); return pixelmatch(A.data,B.data,null,A.width,A.height,{threshold:t}); };
console.log('sha1 v1a', h('v1a.png'), 'v1b', h('v1b.png'), 'v2', h('v2.png'), 'v3', h('v3.png'));
console.log('v1a vs v1b (same page twice): differing pixels', cmp('v1a.png','v1b.png'));
console.log('v1a vs v2 (button colour + padding): ', cmp('v1a.png','v2.png'));
console.log('v1a vs v3 (text-slate-600 -> 500): threshold 0.1 ->', cmp('v1a.png','v3.png'), '| threshold 0 ->', cmp('v1a.png','v3.png',0));

Output:
sha1 v1a 701fca2778 v1b 701fca2778 v2 e03ba6b975 v3 02e9148008
v1a vs v1b (same page twice): differing pixels 0
v1a vs v2 (button colour + padding):  3253
v1a vs v3 (text-slate-600 -> 500): threshold 0.1 -> 185 | threshold 0 -> 346

WHY THIS WORKS AS AN ANSWER
---------------------------
The control (v1a against v1b) is the important line: the same page screenshotted twice gave 0 differing pixels and identical file hashes, so on this machine with this browser any difference is a real change, not noise. The button
change (colour and a padding step that moves the layout) gave 3,253 pixels; the subtle one-shade text colour change was still visible (185 pixels at pixelmatch's default threshold of 0.1, 346 at 0), which shows that a
looser threshold reports fewer pixels and could hide a smaller change. What this does not show: screenshots from another operating system, browser version or font set will differ in text rendering even for identical
CSS, so keep reference images per environment (for example generated and compared inside the same CI image). I did not run Playwright's own comparison.
Note: pixelmatch is called with null as the output image, so it returns the count only; pass a PNG buffer as the third argument to get a picture of the differences.