fix(config): ensure analytics URL has protocol to prevent build crash

scripts/check-forms.ts

@@ -0,0 +1,367 @@
+import puppeteer, { HTTPResponse } from 'puppeteer';
+import axios from 'axios';
+import * as cheerio from 'cheerio';
+
+const targetUrl = process.argv[2] || process.env.NEXT_PUBLIC_BASE_URL || 'http://localhost:3000';
+const gatekeeperPassword = process.env.GATEKEEPER_PASSWORD || 'klz2026';
+
+// Utility for hardcoded delays
+const delay = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));
+
+async function main() {
+  console.log(`\n🚀 Starting E2E Form Submission Check for: ${targetUrl}`);
+
+  // 0. Pre-warming settlement: Wait for deployment to respond (sync containers/Varnish)
+  console.log(`⏳ Pre-warming: Waiting for deployment to return 200 OK...`);
+  const maxWaitMs = 60000;
+  const startTime = Date.now();
+  let warmed = false;
+
+  while (Date.now() - startTime < maxWaitMs) {
+    try {
+      const resp = await axios.get(targetUrl, {
+        headers: { Cookie: `klz_gatekeeper_session=${gatekeeperPassword}` },
+        timeout: 5000,
+        validateStatus: (s) => s === 200,
+      });
+      if (resp.status === 200) {
+        warmed = true;
+        break;
+      }
+    } catch (e) {
+      // Quietly retry
+    }
+    await delay(2000);
+  }
+
+  if (!warmed) {
+    console.warn(`⚠️ Pre-warming timed out after 60s. Proceeding anyway...`);
+  } else {
+    console.log(`✅ Deployment settled and responding.`);
+  }
+
+  // Brief stabilization buffer
+  await delay(5000);
+
+  // 1. Fetch Sitemap to discover the contact page and a product page
+  const sitemapUrl = `${targetUrl.replace(/\/$/, '')}/sitemap.xml`;
+  let urls: string[] = [];
+
+  try {
+    console.log(`📥 Fetching sitemap from ${sitemapUrl}...`);
+    const response = await axios.get(sitemapUrl, {
+      headers: { Cookie: `klz_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();
+  } catch (err: any) {
+    console.error(`❌ Failed to fetch sitemap: ${err.message}`);
+    process.exit(1);
+  }
+
+  const contactUrl = urls.find((u) => u.includes('/de/kontakt'));
+  // Ensure we select an actual product page (depth >= 7: http://host/de/produkte/category/product)
+  const productUrl = urls.find(
+    (u) =>
+      u.includes('/de/produkte/') && new URL(u).pathname.split('/').filter(Boolean).length >= 4,
+  );
+
+  if (!contactUrl) {
+    console.error(`❌ Could not find contact page in sitemap. Ensure /de/kontakt exists.`);
+    process.exit(1);
+  }
+
+  if (!productUrl) {
+    console.error(
+      `❌ Could not find a product page in sitemap. Form testing requires at least one product page.`,
+    );
+    process.exit(1);
+  }
+
+  console.log(`✅ Discovered Contact Page: ${contactUrl}`);
+  console.log(`✅ Discovered Product Page: ${productUrl}`);
+
+  // 2. Launch Headless Browser
+  console.log(`\n🕷️ Launching Puppeteer Headless Engine...`);
+  const browser = await puppeteer.launch({
+    headless: true,
+    args: [
+      '--no-sandbox',
+      '--disable-setuid-sandbox',
+      '--disable-dev-shm-usage',
+      '--disable-gpu',
+      '--ignore-certificate-errors',
+      '--disable-web-security',
+      '--disable-features=IsolateOrigins,site-per-process',
+    ],
+  });
+
+  const page = await browser.newPage();
+
+  // Enable Request Interception to force cache-busting on ALL static assets
+  await page.setRequestInterception(true);
+  page.on('request', (request) => {
+    const url = request.url();
+    // Intercept Next.js chunks and data to bypass Varnish 404-caching
+    // Includes standard /_next/ and subpath /gatekeeper/_next/
+    if (
+      (url.includes('/_next/static/') ||
+        url.includes('/_next/data/') ||
+        url.includes('/gatekeeper/_next/')) &&
+      !url.includes('?cb=') &&
+      !url.includes('&cb=')
+    ) {
+      const buster = `cb=${Date.now()}`;
+      const newUrl = url.includes('?') ? `${url}&${buster}` : `${url}?${buster}`;
+      request.continue({ url: newUrl });
+    } else {
+      request.continue();
+    }
+  });
+
+  let chunkErrorsDetected = false;
+  page.on('console', (msg) => {
+    const text = msg.text();
+    console.log('💻 BROWSER CONSOLE:', text);
+    if (text.includes('ChunkLoadError') || text.includes('failed to load chunk')) {
+      chunkErrorsDetected = true;
+    }
+  });
+  page.on('pageerror', (error) => {
+    console.error('💻 BROWSER ERROR:', error.message);
+    if (error.message.includes('ChunkLoadError')) {
+      chunkErrorsDetected = true;
+    }
+  });
+  page.on('requestfailed', (request) => {
+    const url = request.url();
+    const failure = request.failure()?.errorText;
+    console.error('💻 BROWSER REQUEST FAILED:', url, failure);
+    if (url.endsWith('.js') && (failure === 'net::ERR_ABORTED' || failure?.includes('404'))) {
+      chunkErrorsDetected = true;
+    }
+  });
+
+  // Helper for resilient navigation with cache-busting fallback
+  const navigateWithRetry = async (url: string, label: string) => {
+    chunkErrorsDetected = false;
+    console.log(`\n🧪 Testing ${label} on: ${url}`);
+
+    // First attempt: Wait for network to be relatively idle
+    await page.goto(url, { waitUntil: 'networkidle2', timeout: 30000 });
+
+    // REDIRECTION CHECK: Logging redirected landing page
+    const finalUrl = page.url();
+    if (finalUrl !== url && !finalUrl.includes(url)) {
+      console.log(`   🔀 Redirected to: ${finalUrl}`);
+    }
+
+    if (chunkErrorsDetected) {
+      const buster = `cb=${Date.now()}`;
+      const cbUrl = finalUrl.includes('?') ? `${finalUrl}&${buster}` : `${finalUrl}?${buster}`;
+      console.warn(
+        `   ⚠️ Assets failed to load (Varnish staleness suspected). Retrying with cache-buster: ${cbUrl}`,
+      );
+      chunkErrorsDetected = false;
+      await page.goto(cbUrl, { waitUntil: 'networkidle2', timeout: 30000 });
+    }
+
+    // Capture HTML on failure during hydration wait
+    try {
+      await page.waitForNetworkIdle({ idleTime: 1000, timeout: 5000 }).catch(() => {});
+    } catch (e) {
+      console.warn('   ⚠️ Network idle timeout, proceeding with current state.');
+    }
+  };
+
+  // 3. Authenticate through Gatekeeper login form
+  try {
+    // Navigate to a protected page so Gatekeeper redirects us to the login screen
+    // RELAXED NAVIGATION: Use domcontentloaded to handle rapid redirects
+    await page.goto(contactUrl, { waitUntil: 'domcontentloaded', timeout: 60000 });
+
+    // BOUNCE BUFFER: Wait for potential Gatekeeper redirect chain to settle
+    console.log(`   Waiting for potential Gatekeeper redirect bounce...`);
+    await delay(3000);
+
+    // Check if we landed on the Gatekeeper login page
+    const isGatekeeperPage = await page.$('input[name="password"]');
+    if (isGatekeeperPage) {
+      console.log(`   Gatekeeper gate detected. Logging in...`);
+      await page.type('input[name="password"]', gatekeeperPassword);
+      await Promise.all([
+        page.waitForNavigation({ waitUntil: 'domcontentloaded' }),
+        page.click('button[type="submit"]'),
+      ]);
+
+      // LOGIN SYNC BUFFER: Let the authenticated session settle
+      console.log(`   Authenticating session...`);
+      await delay(3000);
+      console.log(`✅ Gatekeeper authentication successful!`);
+    } else {
+      console.log(`✅ Already authenticated (no Gatekeeper gate detected).`);
+    }
+  } catch (err: any) {
+    console.error(`❌ Gatekeeper authentication failed: ${err.message}`);
+    await browser.close();
+    process.exit(1);
+  }
+
+  let hasErrors = false;
+
+  // 4. Test Contact Form
+  try {
+    await navigateWithRetry(contactUrl, 'Contact Form');
+
+    // Ensure React has hydrated completely - CI runners can be slow
+    console.log(`   ⏳ Waiting for hydration (5s)...`);
+    await delay(5000);
+
+    // Ensure form is visible and interactive
+    try {
+      // Find the form input by name
+      await page.waitForSelector('input[name="name"]', { visible: true, timeout: 15000 });
+    } catch (e) {
+      console.error('❌ Failed to find Contact Form input. Page Title:', await page.title());
+      const html = await page.content();
+      console.log(`💻 FULL HTML DUMP (top 2000 chars):\n${html.slice(0, 2000)}`);
+      throw e;
+    }
+
+    // Wait specifically for hydration logic to initialize the onSubmit handler
+    await page.evaluate(() => new Promise((resolve) => setTimeout(resolve, 2000)));
+
+    // Fill form fields
+    await page.type('input[name="name"]', 'Automated E2E Test');
+    await page.type('input[name="email"]', 'testing@mintel.me');
+    await page.type(
+      'textarea[name="message"]',
+      'This is an automated test verifying the contact form submission.',
+    );
+
+    // Give state a moment to settle
+    await page.evaluate(() => new Promise((resolve) => setTimeout(resolve, 500)));
+
+    console.log(`   ⏳ Waiting for alert selector (30s)...`);
+    try {
+      // Explicitly click submit and wait for navigation/state-change
+      await Promise.all([
+        page.waitForSelector('[role="alert"]', { timeout: 30000 }),
+        page.click('button[type="submit"]'),
+      ]);
+    } catch (e) {
+      console.error(`❌ Timeout waiting for [role="alert"]. Dumping page content:`);
+      const bodyHTML = await page.evaluate(() => document.body.innerHTML.slice(0, 1000));
+      console.log(`💻 PAGE BODY (partial): ${bodyHTML}`);
+      throw e;
+    }
+
+    const alertText = await page.$eval('[role="alert"]', (el) => el.textContent);
+    console.log(`   🔔 Alert text: ${alertText}`);
+
+    // Detection robust for both English and German versions
+    const isError =
+      alertText?.toLowerCase().includes('failed') ||
+      alertText?.toLowerCase().includes('wrong') ||
+      alertText?.toLowerCase().includes('fehlgeschlagen') ||
+      alertText?.toLowerCase().includes('schief gelaufen') ||
+      alertText?.toLowerCase().includes('fehler');
+
+    if (isError) {
+      throw new Error(`Form submitted but showed error: ${alertText}`);
+    }
+
+    console.log(`✅ Contact Form submitted successfully! (Success state verified)`);
+  } catch (err: any) {
+    console.error(`❌ Contact Form Test Failed: ${err.message}`);
+    hasErrors = true;
+  }
+
+  // 4. Test Product Quote Form
+  try {
+    await navigateWithRetry(productUrl, 'Product Quote Form');
+
+    // Ensure React has hydrated completely
+    console.log(`   ⏳ Waiting for hydration (5s)...`);
+    await delay(5000);
+
+    // The product form uses dynamic IDs, so we select by input type in the specific form context
+    try {
+      await page.waitForSelector('form input[type="email"]', { visible: true, timeout: 15000 });
+    } catch (e) {
+      console.error('Failed to find Product Quote Form input. Page Title:', await page.title());
+      throw e;
+    }
+
+    // Wait specifically for hydration logic to initialize the onSubmit handler
+    await page.evaluate(() => new Promise((resolve) => setTimeout(resolve, 2000)));
+
+    // In RequestQuoteForm, the email input is type="email" and message is a textarea.
+    await page.type('form input[type="email"]', 'testing@mintel.me');
+    await page.type(
+      'form textarea',
+      'Automated request for product quote via E2E testing framework.',
+    );
+
+    // Give state a moment to settle
+    await page.evaluate(() => new Promise((resolve) => setTimeout(resolve, 500)));
+
+    console.log(`   ⏳ Waiting for alert selector (30s)...`);
+    try {
+      // Submit and wait for success state
+      await Promise.all([
+        page.waitForSelector('[role="alert"]', { timeout: 30000 }),
+        page.click('form button[type="submit"]'),
+      ]);
+    } catch (e) {
+      console.error(`❌ Timeout waiting for [role="alert"] on Product page. Dumping content:`);
+      const bodyHTML = await page.evaluate(() => document.body.innerHTML.slice(0, 1000));
+      console.log(`💻 PAGE BODY (partial): ${bodyHTML}`);
+      throw e;
+    }
+
+    const alertText = await page.$eval('[role="alert"]', (el) => el.textContent);
+    console.log(`   🔔 Alert text: ${alertText}`);
+
+    const isError =
+      alertText?.toLowerCase().includes('failed') ||
+      alertText?.toLowerCase().includes('wrong') ||
+      alertText?.toLowerCase().includes('fehlgeschlagen') ||
+      alertText?.toLowerCase().includes('schief gelaufen') ||
+      alertText?.toLowerCase().includes('fehler');
+
+    if (isError) {
+      throw new Error(`Form submitted but showed error: ${alertText}`);
+    }
+
+    console.log(`✅ Product Quote Form submitted successfully! (Success state verified)`);
+  } catch (err: any) {
+    console.error(`❌ Product Quote Form Test Failed: ${err.message}`);
+    hasErrors = true;
+  }
+
+  console.log(`\n🧹 Skipping cleanup (No CMS/DB active in this infrastructure).`);
+
+  await browser.close();
+
+  // 6. Evaluation
+  if (hasErrors) {
+    console.error(`\n🚨 IMPORTANT: Form E2E checks failed. The CI build is failing.`);
+    process.exit(1);
+  } else {
+    console.log(`\n🎉 SUCCESS: All form submissions arrived and handled correctly!`);
+    process.exit(0);
+  }
+}
+
+main();