dogfather-universe/server/pruefe-webdesign-handy.mjs

/* =====================================================================
   pruefe-webdesign-handy.mjs — Handy-Abnahme für alle Webdesign-Seiten.

   Prüft je Seite und je Bildschirmbreite (320 / 390 / 430 / 768 / 1440):
     - kein waagerechter Überlauf (der häufigste Handy-Fehler überhaupt)
     - kein Element ragt über den rechten Rand hinaus
     - alle Knöpfe und Links sind mindestens 44px hoch (Touch-Ziel)
     - keine Konsolenfehler
     - in allen fünf Sprachen: keine unübersetzten Schlüssel sichtbar

   320px ist bewusst dabei: das ist ein iPhone SE der ersten Generationen
   und immer noch die Breite, bei der Layouts zuerst brechen.

   Aufruf (lokaler Testserver muss laufen):
     node pruefe-webdesign-handy.mjs
   ===================================================================== */
import { chromium } from "playwright";

const BASIS = process.env.WD_BASIS || "http://127.0.0.1:4199";
const CODE = process.env.WD_CODE || "DOGI-TEST-1";

const SEITEN = [
  "/webdesign/",
  "/webdesign/leistungen.html",
  "/webdesign/preise.html",
  "/webdesign/portfolio.html",
  "/webdesign/ablauf.html",
  "/webdesign/ueber.html",
  "/webdesign/faq.html",
];
const BREITEN = [320, 390, 430, 768, 1440];
const SPRACHEN = ["de", "de-CH", "en", "fr", "pt"];

let ok = 0;
const probleme = [];

const browser = await chromium.launch();
const kontext = await browser.newContext();
const seite = await kontext.newPage();

const konsole = [];
seite.on("console", (m) => { if (m.type() === "error") konsole.push(m.text()); });
seite.on("pageerror", (e) => konsole.push("pageerror: " + e.message));

// --- Anmelden ---
await seite.goto(BASIS + "/webdesign/zugang.html", { waitUntil: "networkidle" });
await seite.fill("#zg-code-dogfather", CODE);
await Promise.all([
  seite.waitForURL((u) => !u.pathname.endsWith("zugang.html"), { timeout: 15000 }),
  seite.click("#zg-form-dogfather button[type=submit]"),
]);

console.log("\n=== Handy-Abnahme ===\n");

for (const pfad of SEITEN) {
  console.log(pfad);
  for (const breite of BREITEN) {
    await seite.setViewportSize({ width: breite, height: 900 });
    await seite.goto(BASIS + pfad, { waitUntil: "networkidle" });
    // Marken-Intro wegklicken, es liegt sonst über allem.
    const skip = seite.locator("#wd-intro-skip");
    if (await skip.isVisible().catch(() => false)) await skip.click();
    await seite.waitForTimeout(250);

    const befund = await seite.evaluate((vp) => {
      const raus = [];
      // Waagerechter Überlauf des ganzen Dokuments
      const ueberlauf = document.documentElement.scrollWidth > vp + 1;

      // Einzelne Elemente, die über den rechten Rand ragen
      for (const el of document.querySelectorAll("body *")) {
        const s = getComputedStyle(el);
        if (s.display === "none" || s.visibility === "hidden") continue;
        // Absichtlich waagerecht scrollbare Leisten ausnehmen
        if (el.closest(".ls-sprung, .fq-sprung, .wd-tabelle-rahmen")) continue;
        const r = el.getBoundingClientRect();
        if (r.width === 0 || r.height === 0) continue;
        if (r.right > vp + 1.5) {
          raus.push((el.tagName.toLowerCase() + "." + (el.className || "").toString().split(" ")[0])
            .slice(0, 50) + " bis " + Math.round(r.right) + "px");
        }
      }

      // Zu kleine Touch-Ziele
      const klein = [];
      for (const el of document.querySelectorAll("a, button, summary, input, select")) {
        const s = getComputedStyle(el);
        if (s.display === "none" || s.visibility === "hidden") continue;
        const r = el.getBoundingClientRect();
        if (r.height === 0 || r.width === 0) continue;
        if (r.height < 44) {
          klein.push((el.tagName.toLowerCase() + " „" + (el.textContent || "").trim().slice(0, 24) + "“ ")
            + Math.round(r.height) + "px");
        }
      }

      // Unübersetzte Schlüssel: erscheinen als roher Schlüsselname im Text
      const roh = [];
      for (const el of document.querySelectorAll("[data-i18n]")) {
        const txt = (el.textContent || "").trim();
        if (txt === el.getAttribute("data-i18n")) roh.push(txt);
      }

      return { ueberlauf, raus: raus.slice(0, 5), klein: klein.slice(0, 5), roh: roh.slice(0, 5) };
    }, breite);

    const zeile = `  ${String(breite).padStart(4)}px`;
    const fehler = [];
    if (befund.ueberlauf) fehler.push("waagerechter Ueberlauf");
    if (befund.raus.length) fehler.push("ragt heraus: " + befund.raus.join(", "));
    if (befund.klein.length) fehler.push("Touch-Ziel < 44px: " + befund.klein.join(", "));
    if (befund.roh.length) fehler.push("unuebersetzt: " + befund.roh.join(", "));

    if (fehler.length) {
      probleme.push(`${pfad} @ ${breite}px -> ${fehler.join(" | ")}`);
      console.log(`${zeile}  FEHLER: ${fehler.join(" | ")}`);
    } else {
      ok++;
      console.log(`${zeile}  ok`);
    }
  }
}

// --- Sprachen: einmal je Sprache die Startseite prüfen ---
console.log("\nSprachen (Startseite, 390px)");
await seite.setViewportSize({ width: 390, height: 900 });
for (const sprache of SPRACHEN) {
  await seite.goto(BASIS + "/webdesign/", { waitUntil: "networkidle" });
  const skip = seite.locator("#wd-intro-skip");
  if (await skip.isVisible().catch(() => false)) await skip.click();
  await seite.evaluate((s) => window.WD.setSprache(s), sprache);
  await seite.waitForTimeout(350);
  const befund = await seite.evaluate((vp) => {
    const roh = [];
    for (const el of document.querySelectorAll("[data-i18n]")) {
      const txt = (el.textContent || "").trim();
      if (txt === el.getAttribute("data-i18n")) roh.push(txt);
    }
    return { roh: roh.slice(0, 5), ueberlauf: document.documentElement.scrollWidth > vp + 1, lang: document.documentElement.lang };
  }, 390);
  const fehler = [];
  if (befund.lang !== sprache) fehler.push("lang-Attribut ist " + befund.lang);
  if (befund.roh.length) fehler.push("unuebersetzt: " + befund.roh.join(", "));
  if (befund.ueberlauf) fehler.push("waagerechter Ueberlauf");
  if (fehler.length) { probleme.push(`Sprache ${sprache} -> ${fehler.join(" | ")}`); console.log(`  ${sprache.padEnd(6)} FEHLER: ${fehler.join(" | ")}`); }
  else { ok++; console.log(`  ${sprache.padEnd(6)} ok`); }
}

await browser.close();

console.log(konsole.length ? "\nKONSOLENFEHLER:\n" + [...new Set(konsole)].join("\n") : "\nKeine Konsolenfehler.");
console.log(`\n=== ${ok} ok, ${probleme.length} Probleme ===`);
if (probleme.length) probleme.forEach((p) => console.log("  " + p));
process.exit(probleme.length === 0 && konsole.length === 0 ? 0 : 1);