chore: avb transition and automated testing setup

scripts/check-broken-assets.ts

@@ -0,0 +1,197 @@
+import puppeteer, { HTTPResponse } from 'puppeteer';
+import axios from 'axios';
+import * as cheerio from 'cheerio';
+
+const targetUrl =
+  process.argv.find((arg) => !arg.startsWith('--') && arg.startsWith('http')) ||
+  process.env.NEXT_PUBLIC_BASE_URL ||
+  'http://localhost:3000';
+const limit = process.env.ASSET_CHECK_LIMIT ? parseInt(process.env.ASSET_CHECK_LIMIT) : 20;
+const gatekeeperPassword = process.env.GATEKEEPER_PASSWORD || 'mbgrid';
+
+async function main() {
+  console.log(`\n🚀 Starting Strict Asset Integrity Check for: ${targetUrl}`);
+  console.log(`📊 Limit: ${limit} pages\n`);
+
+  // 1. Fetch Sitemap to discover all routes
+  const sitemapUrl = `${targetUrl.replace(/\/$/, '')}/sitemap.xml`;
+  let urls: string[] = [];
+
+  try {
+    console.log(`📥 Fetching sitemap from ${sitemapUrl}...`);
+    const response = await axios.get(sitemapUrl, {
+      headers: { Cookie: `mb_gatekeeper_session=${gatekeeperPassword}` },
+    });
+
+    const $ = cheerio.load(response.data, { xmlMode: true });
+    urls = $('url loc')
+      .map((i, el) => $(el).text())
+      .get();
+
+    // Normalize to target URL instance
+    const urlPattern = /https?:\/\/[^\/]+/;
+    urls = [...new Set(urls)]
+      .filter((u) => u.startsWith('http'))
+      .map((u) => u.replace(urlPattern, targetUrl.replace(/\/$/, '')))
+      .sort();
+
+    console.log(`✅ Found ${urls.length} target URLs.`);
+
+    if (urls.length > limit) {
+      console.log(
+        `⚠️  Too many pages (${urls.length}). Limiting to ${limit} representative pages.`,
+      );
+      // Simplify selection: home pages + a slice of the rest
+      const homeDE = urls.filter((u) => u.endsWith('/de') || u === targetUrl);
+      const homeEN = urls.filter((u) => u.endsWith('/en'));
+      const others = urls.filter((u) => !homeEN.includes(u) && !homeDE.includes(u));
+      urls = [...homeDE, ...homeEN, ...others.slice(0, limit - (homeEN.length + homeDE.length))];
+    }
+  } catch (err: any) {
+    console.error(`❌ Failed to fetch sitemap: ${err.message}`);
+    process.exit(1);
+  }
+
+  // 2. Launch Headless Browser
+  console.log(`\n🕷️ Launching Puppeteer Headless Engine...`);
+  const browser = await puppeteer.launch({
+    headless: true,
+    executablePath: process.env.PUPPETEER_EXECUTABLE_PATH || process.env.CHROME_PATH || undefined,
+    args: ['--no-sandbox', '--disable-setuid-sandbox', '--disable-dev-shm-usage'],
+  });
+
+  const page = await browser.newPage();
+
+  // Inject Gatekeeper session bypassing auth screens
+  await page.setCookie({
+    name: 'mb_gatekeeper_session',
+    value: gatekeeperPassword,
+    domain: new URL(targetUrl).hostname,
+    path: '/',
+    httpOnly: true,
+    secure: targetUrl.startsWith('https://'),
+  });
+
+  let hasBrokenAssets = false;
+  let hasConsoleErrors = false;
+  const brokenAssetsList: Array<{ url: string; status: number; page: string }> = [];
+  const consoleErrorsList: Array<{ type: string; error: string; page: string }> = [];
+
+  // Listen for unhandled exceptions natively in the page
+  page.on('pageerror', (err: any) => {
+    consoleErrorsList.push({
+      type: 'PAGE_ERROR',
+      error: err.message,
+      page: page.url(),
+    });
+    hasConsoleErrors = true;
+  });
+
+  // Listen for console.error and console.warn messages (like Next.js Image warnings, hydration errors, CSP blocks)
+  page.on('console', (msg) => {
+    const type = msg.type();
+    if (type === 'error' || type === 'warn') {
+      const text = msg.text();
+
+      // Exclude common browser extension noise or third party tracker warnings
+      if (
+        text.includes('google-analytics') ||
+        text.includes('googletagmanager') ||
+        text.includes('SES Removing unpermitted intrinsics') ||
+        text.includes('Third-party cookie will be blocked') ||
+        text.includes('Fast Refresh')
+      )
+        return;
+
+      consoleErrorsList.push({
+        type: type.toUpperCase(),
+        error: text,
+        page: page.url(),
+      });
+      hasConsoleErrors = true;
+    }
+  });
+
+  // Listen to ALL network responses
+  page.on('response', (response: HTTPResponse) => {
+    const status = response.status();
+    // Catch classic 404s and 500s on ANY fetch/image/script
+    if (
+      status >= 400 &&
+      status !== 999 &&
+      !response.url().includes('google-analytics') &&
+      !response.url().includes('googletagmanager')
+    ) {
+      const type = response.request().resourceType();
+
+      // We explicitly care about images, stylesheets, scripts, and fetch requests (API) getting 404/500s.
+      if (['image', 'script', 'stylesheet', 'fetch', 'xhr'].includes(type)) {
+        brokenAssetsList.push({
+          url: response.url(),
+          status: status,
+          page: page.url(),
+        });
+        hasBrokenAssets = true;
+      }
+    }
+  });
+
+  // 3. Scan each page
+  for (let i = 0; i < urls.length; i++) {
+    const u = urls[i];
+    console.log(`[${i + 1}/${urls.length}] Scanning: ${u}`);
+    try {
+      // Wait until network is idle to ensure all Next.js hydration and image lazy-loads trigger
+      await page.goto(u, { waitUntil: 'networkidle0', timeout: 30000 });
+
+      // Force scroll to bottom to trigger any IntersectionObserver lazy-loaded images
+      await page.evaluate(async () => {
+        await new Promise<void>((resolve) => {
+          let totalHeight = 0;
+          const distance = 100;
+          const timer = setInterval(() => {
+            const scrollHeight = document.body.scrollHeight;
+            window.scrollBy(0, distance);
+            totalHeight += distance;
+            if (totalHeight >= scrollHeight) {
+              clearInterval(timer);
+              resolve();
+            }
+          }, 100);
+        });
+      });
+
+      // Wait a tiny bit more for final lazy loads
+      await new Promise((r) => setTimeout(r, 1000));
+    } catch (err: any) {
+      console.error(`⚠️ Timeout or navigation error on ${u}: ${err.message}`);
+      // Don't fail the whole script just because one page timed out, but flag it
+      hasBrokenAssets = true;
+    }
+  }
+
+  await browser.close();
+
+  // 4. Report Results
+  if (hasBrokenAssets && brokenAssetsList.length > 0) {
+    console.error(`\n❌ FATAL: Broken assets (404/500) detected heavily on the site!`);
+    console.table(brokenAssetsList);
+  }
+
+  if (hasConsoleErrors && consoleErrorsList.length > 0) {
+    console.error(`\n❌ FATAL: Console Errors/Warnings detected on the site!`);
+    console.table(consoleErrorsList);
+  }
+
+  if (hasBrokenAssets || hasConsoleErrors) {
+    console.error(`\n🚨 The CI build will now fail to prevent bad code from reaching production.`);
+    process.exit(1);
+  } else {
+    console.log(
+      `\n🎉 SUCCESS: All ${urls.length} pages rendered perfectly with 0 broken images or console errors!`,
+    );
+    process.exit(0);
+  }
+}
+
+main();

scripts/check-html.ts

@@ -0,0 +1,83 @@
+import axios from 'axios';
+import * as cheerio from 'cheerio';
+import * as fs from 'fs';
+import * as path from 'path';
+import { execSync } from 'child_process';
+
+const targetUrl = process.argv[2] || process.env.NEXT_PUBLIC_BASE_URL || 'http://localhost:3000';
+const gatekeeperPassword = process.env.GATEKEEPER_PASSWORD || 'mbgrid';
+
+async function main() {
+  console.log(`\n🚀 Starting HTML Validation for: ${targetUrl}`);
+  console.log(`📊 Limit: None (Full Sitemap)\n`);
+
+  try {
+    const sitemapUrl = `${targetUrl.replace(/\/$/, '')}/sitemap.xml`;
+    console.log(`📥 Fetching sitemap from ${sitemapUrl}...`);
+
+    const response = await axios.get(sitemapUrl, {
+      headers: { Cookie: `mb_gatekeeper_session=${gatekeeperPassword}` },
+      validateStatus: (status) => status < 400,
+    });
+
+    const $ = cheerio.load(response.data, { xmlMode: true });
+    let urls = $('url loc')
+      .map((i, el) => $(el).text())
+      .get();
+
+    const urlPattern = /https?:\/\/[^\/]+/;
+    urls = [...new Set(urls)]
+      .filter((u) => u.startsWith('http'))
+      .map((u) => u.replace(urlPattern, targetUrl.replace(/\/$/, '')))
+      .sort();
+
+    console.log(`✅ Found ${urls.length} URLs in sitemap.`);
+
+    if (urls.length === 0) {
+      console.error('❌ No URLs found in sitemap. Is the site up?');
+      process.exit(1);
+    }
+
+    const outputDir = path.join(process.cwd(), '.htmlvalidate-tmp');
+    if (fs.existsSync(outputDir)) fs.rmSync(outputDir, { recursive: true, force: true });
+    fs.mkdirSync(outputDir, { recursive: true });
+
+    console.log(`📥 Fetching HTML for ${urls.length} pages...`);
+    for (let i = 0; i < urls.length; i++) {
+      const u = urls[i];
+      try {
+        const res = await axios.get(u, {
+          headers: { Cookie: `mb_gatekeeper_session=${gatekeeperPassword}` },
+          validateStatus: (status) => status < 400,
+        });
+
+        // Generate a safe filename that retains URL information
+        const urlStr = new URL(u);
+        const safePath = (urlStr.pathname + urlStr.search).replace(/[^a-zA-Z0-9]/g, '_');
+        const filename = `${safePath || 'index'}.html`;
+
+        fs.writeFileSync(path.join(outputDir, filename), res.data);
+      } catch (err: any) {
+        console.error(`❌ HTTP Error fetching ${u}: ${err.message}`);
+        throw new Error(`Failed to fetch page: ${u} - ${err.message}`);
+      }
+    }
+
+    console.log(`\n💻 Executing html-validate...`);
+    try {
+      execSync(`npx html-validate .htmlvalidate-tmp/*.html`, { stdio: 'inherit' });
+      console.log(`✅ HTML Validation passed perfectly!`);
+    } catch (e) {
+      console.error(`❌ HTML Validation found issues.`);
+      process.exit(1);
+    }
+  } catch (error: any) {
+    console.error(`\n❌ Error during HTML Validation:`, error.message);
+    process.exit(1);
+  } finally {
+    const outputDir = path.join(process.cwd(), '.htmlvalidate-tmp');
+    if (fs.existsSync(outputDir)) fs.rmSync(outputDir, { recursive: true, force: true });
+  }
+}
+
+main();

scripts/wcag-sitemap.ts

@@ -0,0 +1,187 @@
+import axios from 'axios';
+import * as cheerio from 'cheerio';
+import { execSync } from 'child_process';
+import * as fs from 'fs';
+import * as path from 'path';
+
+/**
+ * WCAG Audit Script
+ *
+ * 1. Fetches sitemap.xml from the target URL
+ * 2. Extracts all URLs
+ * 3. Runs pa11y-ci on those URLs
+ */
+
+const targetUrl = process.argv[2] || process.env.NEXT_PUBLIC_BASE_URL || 'http://localhost:3000';
+const limit = process.env.PAGESPEED_LIMIT ? parseInt(process.env.PAGESPEED_LIMIT) : 20;
+const gatekeeperPassword = process.env.GATEKEEPER_PASSWORD || 'mbgrid';
+
+async function main() {
+  console.log(`\n🚀 Starting WCAG Audit for: ${targetUrl}`);
+  console.log(`📊 Limit: ${limit} pages\n`);
+
+  try {
+    // 1. Fetch Sitemap
+    const sitemapUrl = `${targetUrl.replace(/\/$/, '')}/sitemap.xml`;
+    console.log(`📥 Fetching sitemap from ${sitemapUrl}...`);
+
+    const response = await axios.get(sitemapUrl, {
+      headers: {
+        Cookie: `mb_gatekeeper_session=${gatekeeperPassword}`,
+      },
+      validateStatus: (status) => status < 400,
+    });
+
+    const $ = cheerio.load(response.data, { xmlMode: true });
+    let urls = $('url loc')
+      .map((i, el) => $(el).text())
+      .get();
+
+    // Cleanup, filter and normalize domains to targetUrl
+    const urlPattern = /https?:\/\/[^\/]+/;
+    urls = [...new Set(urls)]
+      .filter((u) => u.startsWith('http'))
+      .map((u) => u.replace(urlPattern, targetUrl.replace(/\/$/, '')))
+      .sort();
+
+    console.log(`✅ Found ${urls.length} URLs in sitemap.`);
+
+    if (urls.length === 0) {
+      console.error('❌ No URLs found in sitemap. Is the site up?');
+      process.exit(1);
+    }
+
+    if (urls.length > limit) {
+      console.log(
+        `⚠️  Too many pages (${urls.length}). Limiting to ${limit} representative pages.`,
+      );
+      const home = urls.filter((u) => u.endsWith('/de') || u.endsWith('/en') || u === targetUrl);
+      const others = urls.filter((u) => !home.includes(u));
+      urls = [...home, ...others.slice(0, limit - home.length)];
+    }
+
+    console.log(`🧪 Pages to be tested:`);
+    urls.forEach((u) => console.log(`   - ${u}`));
+
+    // 2. Prepare pa11y-ci config
+    const baseConfigPath = path.join(process.cwd(), '.pa11yci.json');
+    let baseConfig: any = { defaults: {} };
+    if (fs.existsSync(baseConfigPath)) {
+      baseConfig = JSON.parse(fs.readFileSync(baseConfigPath, 'utf8'));
+    }
+
+    // Extract domain for cookie
+    const urlObj = new URL(targetUrl);
+    const domain = urlObj.hostname;
+
+    // Update config with discovered URLs and gatekeeper cookie
+    const tempConfig = {
+      ...baseConfig,
+      defaults: {
+        ...baseConfig.defaults,
+        threshold: 0, // Force threshold to 0 so all errors are shown in JSON
+        runners: ['axe'],
+        ignore: [...(baseConfig.defaults?.ignore || []), 'color-contrast'],
+        chromeLaunchConfig: {
+          ...baseConfig.defaults?.chromeLaunchConfig,
+          ...(process.env.CHROME_PATH ? { executablePath: process.env.CHROME_PATH } : {}),
+          args: [
+            ...(baseConfig.defaults?.chromeLaunchConfig?.args || []),
+            '--no-sandbox',
+            '--disable-setuid-sandbox',
+          ],
+        },
+        headers: {
+          Cookie: `mb_gatekeeper_session=${gatekeeperPassword}`,
+        },
+        timeout: 60000, // Increase timeout for slower pages
+      },
+      urls: urls,
+    };
+
+    // Create output directory
+    const outputDir = path.join(process.cwd(), '.pa11yci');
+    if (!fs.existsSync(outputDir)) {
+      fs.mkdirSync(outputDir, { recursive: true });
+    }
+
+    const tempConfigPath = path.join(outputDir, 'config.temp.json');
+    const reportPath = path.join(outputDir, 'report.json');
+    fs.writeFileSync(tempConfigPath, JSON.stringify(tempConfig, null, 2));
+
+    // 3. Execute pa11y-ci
+    console.log(`\n💻 Executing pa11y-ci...`);
+    const pa11yCommand = `npx pa11y-ci --config .pa11yci/config.temp.json --reporter json > .pa11yci/report.json`;
+
+    try {
+      execSync(pa11yCommand, {
+        encoding: 'utf8',
+        stdio: 'inherit',
+      });
+    } catch (err: any) {
+      // pa11y-ci exits with non-zero if issues are found, which is expected
+    }
+
+    // 4. Summarize Results
+    if (fs.existsSync(reportPath)) {
+      const reportData = JSON.parse(fs.readFileSync(reportPath, 'utf8'));
+      console.log(`\n📊 WCAG Audit Summary:\n`);
+
+      const summaryTable = Object.keys(reportData.results).map((url) => {
+        const results = reportData.results[url];
+        // Results might have errors or just a top level message if it crashed
+        let errors = 0;
+        let warnings = 0;
+        let notices = 0;
+
+        if (Array.isArray(results)) {
+          // pa11y action execution errors come as objects with a message but no type
+          const actionErrors = results.filter((r: any) => !r.type && r.message).length;
+          errors = results.filter((r: any) => r.type === 'error').length + actionErrors;
+          warnings = results.filter((r: any) => r.type === 'warning').length;
+          notices = results.filter((r: any) => r.type === 'notice').length;
+        }
+
+        // Clean URL for display
+        const displayUrl = url.replace(targetUrl, '') || '/';
+
+        return {
+          URL: displayUrl.length > 50 ? displayUrl.substring(0, 47) + '...' : displayUrl,
+          Errors: errors,
+          Warnings: warnings,
+          Notices: notices,
+          Status: errors === 0 ? '✅' : '❌',
+        };
+      });
+
+      console.table(summaryTable);
+
+      const totalErrors = summaryTable.reduce((acc, curr) => acc + curr.Errors, 0);
+      const totalPages = summaryTable.length;
+      const cleanPages = summaryTable.filter((p) => p.Errors === 0).length;
+
+      console.log(`\n📈 Result: ${cleanPages}/${totalPages} pages are error-free.`);
+      if (totalErrors > 0) {
+        console.log(`   Total Errors discovered: ${totalErrors}`);
+        process.exitCode = 1;
+      }
+    }
+
+    console.log(`\n✨ WCAG Audit completed!`);
+  } catch (error: any) {
+    console.error(`\n❌ Error during WCAG Audit:`);
+    if (axios.isAxiosError(error)) {
+      console.error(`Status: ${error.response?.status}`);
+      console.error(`URL: ${error.config?.url}`);
+    } else {
+      console.error(error.message);
+    }
+    process.exit(1);
+  } finally {
+    // Clean up temp config file, keep report
+    const tempConfigPath = path.join(process.cwd(), '.pa11yci/config.temp.json');
+    if (fs.existsSync(tempConfigPath)) fs.unlinkSync(tempConfigPath);
+  }
+}
+
+main();