testing ghwf for changes

Author: Bud-Macaulay

.github/workflows/visualdiffs.yml

@@ -0,0 +1,47 @@
+name: Visual URL Comparison
+
+on:
+  pull_request:
+
+jobs:
+  visual-diff:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v3
+
+      - name: Install deps for PR build
+        run: npm ci
+
+      - name: Install Playwright browsers
+        run: npx playwright install --with-deps
+
+      - name: Build PR version
+        run: npm run build
+
+      - name: Serve PR build
+        run: npm run preview -- --port 3001 &
+
+      # Checkout base branch and build
+      - name: Checkout base branch
+        run: |
+          git fetch origin ${{ github.event.pull_request.base.ref }} --depth=1
+          git checkout FETCH_HEAD
+
+      - name: Install deps for base build
+        run: npm ci
+
+      - name: Build base version
+        run: npm run build
+
+      - name: preview vite build
+        run: npm run preview -- --port 3002 &
+
+      # Run screenshot diff script
+      - name: Run visual diff
+        run: node scripts/visualDiff.js
+
+      - uses: actions/upload-artifact@v3
+        with:
+          name: visual-diffs
+          path: diffs

package-lock.json

@@ -28,6 +28,9 @@
     "eslint": "^9.33.0",
     "eslint-plugin-react": "^7.32.2",
     "eslint-plugin-react-hooks": "^5.2.0",
+    "pixelmatch": "^7.1.0",
+    "playwright": "^1.57.0",
+    "pngjs": "^7.0.0",
     "tailwindcss": "^4.1.16",
     "vite": "^7.1.2"
   }

package.json

@@ -0,0 +1,41 @@
+const { chromium } = require("playwright");
+const pixelmatch = require("pixelmatch").default || require("pixelmatch");
+const { PNG } = require("pngjs");
+const fs = require("fs");
+
+const urls = [{ name: "home", path: "/" }];
+
+async function run() {
+  if (!fs.existsSync("diffs")) fs.mkdirSync("diffs");
+
+  const browser = await chromium.launch();
+
+  for (const { name, path } of urls) {
+    const page = await browser.newPage();
+
+    // PR screenshot
+    await page.goto(`http://localhost:5173${path}`);
+    await page.screenshot({ path: `diffs/${name}_pr.png`, fullPage: true });
+
+    // Base screenshot
+    await page.goto(`http://localhost:5173${path}`);
+    await page.screenshot({ path: `diffs/${name}_base.png`, fullPage: true });
+
+    // Compare
+    const img1 = PNG.sync.read(fs.readFileSync(`diffs/${name}_base.png`));
+    const img2 = PNG.sync.read(fs.readFileSync(`diffs/${name}_pr.png`));
+    const out = new PNG({ width: img1.width, height: img1.height });
+
+    pixelmatch(img1.data, img2.data, out.data, img1.width, img1.height, {
+      threshold: 0.3,
+    });
+
+    fs.writeFileSync(`diffs/${name}_diff.png`, PNG.sync.write(out));
+
+    await page.close();
+  }
+
+  await browser.close();
+}
+
+run();