chore(ci): Setup visual regression testing with BackstopJS

backstop_data/engine_scripts/puppet/onBefore.js

@@ -0,0 +1,26 @@
+/* eslint-disable */
+module.exports = async (page, scenario, vp, isReference, browserContext) => {
+  console.log('onBefore: Setting up Gatekeeper Auth Cookie...');
+
+  // BackstopJS might be hitting localhost, testing, or staging URLs
+  const gatekeeperPassword = process.env.GATEKEEPER_PASSWORD || 'klz2026';
+
+  // Extract domain from the scenario URL
+  let targetDomain = 'localhost';
+  try {
+    const urlObj = new URL(scenario.url);
+    targetDomain = urlObj.hostname;
+  } catch (e) {
+    // ignore
+  }
+
+  // Inject the ForwardAuth session cookie
+  await page.setCookie({
+    name: 'klz_gatekeeper_session',
+    value: gatekeeperPassword,
+    domain: targetDomain, // Puppeteer requires exact or matching domain for cookies
+    path: '/',
+    httpOnly: true,
+    secure: targetDomain !== 'localhost' && targetDomain !== 'host.docker.internal',
+  });
+};

backstop_data/engine_scripts/puppet/onReady.js

@@ -0,0 +1,20 @@
+/* eslint-disable */
+module.exports = async (page, scenario, vp) => {
+  console.log('SCENARIO > ' + scenario.label);
+
+  // Disable CSS animations instantly to avoid flaky screenshots
+  await page.evaluate(() => {
+    const style = document.createElement('style');
+    style.innerHTML = `
+      * {
+        animation: none !important;
+        transition: none !important;
+        caret-color: transparent !important;
+      }
+    `;
+    document.head.appendChild(style);
+  });
+
+  // Example: Wait for fonts to load
+  await page.evaluate(() => document.fonts.ready);
+};