klz-cables.com/tests/contact-form.e2e.test.ts

import { describe, it, expect, beforeAll, afterAll } from 'vitest';
import puppeteer, { Browser, Page } from 'puppeteer';

const BASE_URL = process.env.TEST_URL || 'http://localhost:3000';

describe('Contact Form E2E', () => {
  let browser: Browser;
  let page: Page;
  let isServerUp = false;

  beforeAll(async () => {
    // Check if server is up
    try {
      const res = await fetch(`${BASE_URL}/health`);
      if (res.ok) isServerUp = true;
    } catch (e) {
      isServerUp = false;
    }

    if (isServerUp) {
      browser = await puppeteer.launch({
        headless: true,
        args: ['--no-sandbox', '--disable-setuid-sandbox'],
      });
      page = await browser.newPage();
    }
  });

  afterAll(async () => {
    if (browser) await browser.close();
  });

  it('should submit the contact form and show success message', async ({ skip }) => {
    if (!isServerUp) skip();

    page.on('console', (msg) => console.log('PAGE LOG:', msg.text()));
    page.on('pageerror', (err) =>
      console.error('PAGE ERROR:', err instanceof Error ? err.message : String(err)),
    );

    await page.goto(`${BASE_URL}/de/kontakt`);

    // Wait for Next.js hydration to complete
    await new Promise((resolve) => setTimeout(resolve, 3000));

    // Fill the form
    await page.waitForSelector('input[name="name"]');
    await page.type('input[name="name"]', 'E2E Tester');
    await page.type('input[name="email"]', 'testing@mintel.me');
    await page.type('textarea[name="message"]', 'This is an automated E2E test message.');

    // Submit
    await page.click('button[type="submit"]');

    // Wait for success message (localized or generic)
    await page.waitForSelector('[role="alert"]', { timeout: 15000 });

    const text = await page.evaluate(() => document.body.innerText);
    expect(text).toMatch(/Gesendet|Sent|Erfolgreich|Success/i);
  }, 30000);
});