dogfather-universe/server/pruef-browser.mjs

/* DREI RENDERING-MASCHINEN, NICHT EINE.

   Auftrag vom 04.09.2026 (vollstaendiger Audit), Abschnitt 5:
   Chrome, Edge, Firefox, Safari, Mobile Safari, mobiles Chrome.

   WARUM DAS NOETIG IST. Alle bisherigen Pruefungen dieses Hauses laufen
   in Chromium -- und damit deckt jede einzelne nur Chrome und Edge ab
   (beide bauen darauf auf). Firefox (Gecko) und Safari (WebKit) sind
   voellig andere Maschinen. Genau dort zeigen sich:
     * CSS, das nur eine Maschine kennt (color-mix, :has, mask-composite,
       aspect-ratio, backdrop-filter -- dieses Haus benutzt alles davon)
     * JavaScript, das eine Maschine noch nicht mitbringt
     * unterschiedliche Voreinstellungen bei Formularen und Schriften

   Safari ist der wichtigste Fall: Wer den Workspace auf dem iPhone
   benutzt, benutzt WebKit -- auch dann, wenn "Chrome" auf dem
   Bildschirm steht. Auf iOS gibt es keine andere Maschine.

   GEMESSEN WIRD JE MASCHINE:
     1. Kommt die Seite an (echter Inhalt, nicht nur Geruest)?
     2. Meldet die Konsole einen Fehler?
     3. Steht etwas seitlich ueber?
     4. Kommt man ueberhaupt hinein (Anmeldung, Weiterleitung)?

   DIE ANZAHL GEHOERT IN DIE BEDINGUNG. Faellt eine Maschine aus (nicht
   installiert), darf das nicht als "bestanden" durchgehen -- dafuer gibt
   es den dritten Ausgang: nicht in Ordnung ist etwas anderes als nicht
   nachgesehen.

   GEGENPROBE am Ende: In jeder Maschine muss ein absichtlicher Fehler
   gefunden werden. */

import { mkdtempSync, rmSync } from "node:fs";
import { tmpdir } from "node:os";
import { join } from "node:path";
import { heuteLokal } from "./helfer-zeit.mjs";

const ordner = mkdtempSync(join(tmpdir(), "ws-browser-"));
process.env.WORKSPACE_DB = join(ordner, "workspace.db");
/* Der Port muss frei sein -- sonst wird gegen einen fremden Server
   gemessen. Begruendung in helfer-port.mjs. */
import { notbremse } from "./helfer-notbremse.mjs";
const { eigenerPort } = await import("./helfer-port.mjs");
const PORT = await eigenerPort(import.meta, "die Browserpruefung");

process.env.PORT = `${PORT}`;
process.env.SITE_ACCESS_SECRET = "lokaler-test";
process.env.SITE_PUBLIC_LAUNCH_AT = "2020-01-01T00:00:00+01:00";

const express = (await import("express")).default;
const ec = express.response.cookie;
express.response.cookie = function (n, w, o) { return ec.call(this, n, w, { ...(o || {}), secure: false }); };
await import("./index.js");
/* DIE NOTBREMSE. Muss NACH index.js stehen: Der Server haengt dort
   zwei Auffangnetze ein, die einen Absturz nur protokollieren --
   richtig fuer den Betrieb, fatal fuer eine Pruefung. Ohne diese
   Zeile bleibt der Prozess nach einem Fehler ewig stehen, weil der
   Server ihn am Leben haelt (siehe helfer-notbremse.mjs). */
notbremse(480_000, "pruef-browser");
await new Promise((r) => setTimeout(r, 900));
const BASIS = `http://127.0.0.1:${PORT}`;

/* LAUFEND MITSCHREIBEN, nicht erst am Ende.

   Node puffert stdout, sobald es in eine Datei umgeleitet wird -- bei
   einem Lauf, der drei Browser startet und eine Viertelstunde braucht,
   steht bis zum Schluss NICHTS in der Datei. Beim ersten Versuch wurde
   der Lauf abgeraeumt, bevor er fertig war, und hinterliess null Bytes:
   eine Viertelstunde Rechenzeit ohne ein einziges Ergebnis.

   Deshalb geht jede Zeile zusaetzlich sofort auf die Platte. Wird der
   Lauf abgebrochen, ist wenigstens alles da, was bis dahin gemessen
   wurde. */
const { appendFileSync } = await import("node:fs");
const PROTOKOLL = join(process.cwd(), "pruef-browser-lauf.txt");
try { rmSync(PROTOKOLL, { force: true }); } catch { /* gab es noch nicht */ }
const melde = (zeile) => {
  console.log(zeile);
  try { appendFileSync(PROTOKOLL, zeile + "\n"); } catch { /* Protokoll ist Zugabe */ }
};

let fehler = 0;
const ok = (b, t) => { melde((b ? "  ok   " : "  FEHL ") + t); if (!b) fehler++; };
/* DER DRITTE AUSGANG, wie in pruef-ports: Was sich hier nicht
   nachsehen laesst, ist weder in Ordnung noch ein Befund. Es muss
   dastehen, es muss gezaehlt werden -- und es darf den Lauf nicht
   rot faerben, sonst kommt die Warnung bei jedem Lauf und nimmt die
   echte mit. */
let offen = 0;
const unklar = (t) => { melde("  --   " + t); offen++; };

/* ---- Bestand ------------------------------------------------------------ */
const { DatabaseSync } = await import("node:sqlite");
const { scryptSync, randomBytes } = await import("node:crypto");
await fetch(BASIS + "/workspace/api/anmelden", {
  method: "POST", headers: { "Content-Type": "application/json" },
  body: JSON.stringify({ rolle: "admin", code: "x" }) }).catch(() => {});
for (let i = 0; i < 60; i++) {
  try {
    const p = new DatabaseSync(process.env.WORKSPACE_DB);
    try { p.prepare("SELECT 1 FROM personen LIMIT 1").get(); break; } finally { p.close(); }
  } catch { await new Promise((r) => setTimeout(r, 250)); }
}
const d = new DatabaseSync(process.env.WORKSPACE_DB);
const jetzt = new Date().toISOString();
/* ORTSZEIT, nicht UTC -- Begruendung in helfer-zeit.mjs. Mit
   `jetzt.slice(0, 10)` lag dieser Wert zwischen Mitternacht und
   zwei Uhr einen Tag daneben. */
const heute = heuteLokal();
function anlegen(name, rolle, code) {
  const salt = randomBytes(16).toString("hex");
  const hash = scryptSync(code, salt, 64, { N: 32768, r: 8, p: 1, maxmem: 96 * 1024 * 1024 }).toString("hex");
  d.prepare("INSERT INTO personen (name, rolle, code_hash, code_salt, code_n, aktiv, erstellt) VALUES (?,?,?,?,?,1,?)")
    .run(name, rolle, hash, salt, 32768, jetzt);
  return d.prepare("SELECT last_insert_rowid() AS id").get().id;
}
const idDogi = anlegen("Filipe Fernandes Ribeiro", "admin", "CODE-DOGI-0001");
const idPat = anlegen("Patrick von Hohenstein", "scout", "CODE-SCOU-0001");
const idLuna = anlegen("Luna", "creator", "CODE-CREA-0001");
d.prepare("INSERT INTO betreuung (creator_id, betreuer_id, seit) VALUES (?,?,?)").run(idLuna, idPat, jetzt);
for (const [t, st] of [["Eine offene Aufgabe", "offen"], ["In Arbeit", "arbeit"],
  ["Im Review", "review"], ["Erledigt", "erledigt"]]) {
  d.prepare(`INSERT INTO aufgaben (titel, beschreibung, status, prioritaet, frist,
    creator_id, verantwortlich_id, erstellt, erstellt_von) VALUES (?,?,?,'hoch',?,?,?,?,?)`)
    .run(t, "Beschreibung.", st, heute, idLuna, idPat, jetzt, idDogi);
}
d.prepare(`INSERT INTO termine (titel, art, beginn, dauer_min, creator_id, erstellt, erstellt_von)
  VALUES ('Ein Call','call',?,30,?,?,?)`).run(heute + "T10:00", idLuna, jetzt, idDogi);
for (const b of ["live", "content", "technik", "community", "schutz"]) {
  d.prepare(`INSERT INTO eintraege (bereich, art, titel, text, status, dringlichkeit,
    datum, creator_id, erstellt, erstellt_von) VALUES (?,?,?,?,?,?,?,?,?,?)`)
    .run(b, b === "content" ? "idee" : "vorbereitung", "Ein Eintrag", "Text.",
         "offen", "hoch", heute, idLuna, jetzt, idPat);
}
d.close();

/* ---- Die drei Maschinen -------------------------------------------------- */
const pw = await import("file:///C:/Users/qciga/Documents/Obelix/Analyse/node_modules/playwright/index.mjs");

const SEITEN = [
  "start.html", "uebersicht.html", "aufgaben.html", "kalender.html", "calls.html",
  "dateien.html", "content.html", "bereich.html?b=live", "profil.html",
  "startcheck.html", "report.html", "scouting.html", "personen.html",
  "wissen.html", "automation.html", "steckbrief.html",
];

/* Handy-Format fuer WebKit dazu -- das ist der Fall, der auf dem iPhone
   wirklich vorkommt. */
const MASCHINEN = [
  ["chromium", "Chromium (Chrome, Edge)", 1280, 900],
  ["firefox", "Firefox (Gecko)", 1280, 900],
  ["webkit", "WebKit (Safari)", 1280, 900],
  ["webkit", "WebKit auf dem Handy (iPhone)", 390, 844],
];

const messen = () => {
  const sichtbar = (e) => {
    const r = e.getBoundingClientRect();
    if (r.width <= 0 || r.height <= 0) return false;
    const st = getComputedStyle(e);
    return st.visibility !== "hidden" && st.display !== "none";
  };
  const alle = [...document.querySelectorAll("body *")].filter(sichtbar);
  const breite = document.documentElement.clientWidth;
  return {
    elemente: alle.length,
    inhalt: (document.body.innerText || "").trim().length,
    ueber: Math.max(0, Math.round(document.documentElement.scrollWidth - breite)),
    schuld: alle.filter((e) => {
      const r = e.getBoundingClientRect();
      return r.right > breite + 2 && r.width <= breite * 1.5;
    }).slice(0, 2).map((e) => `${e.tagName}.${(typeof e.className === "string" ? e.className : "").split(" ")[0]}`),
    bedienbar: alle.filter((e) =>
      ["A", "BUTTON", "INPUT", "SELECT", "TEXTAREA"].includes(e.tagName)).length,
  };
};

let seitenGesamt = 0, elementeGesamt = 0;
let maschinenGelaufen = 0;
const nichtNachgesehen = [];

for (const [motor, wie, breite, hoehe] of MASCHINEN) {
  let browser;
  try {
    browser = await pw[motor].launch();
  } catch (f) {
    /* DER DRITTE AUSGANG. Eine Maschine, die nicht startet, ist nicht
       "in Ordnung" -- sie ist nicht nachgesehen. Das muss dastehen und
       nicht in einem gruenen Haken verschwinden. */
    nichtNachgesehen.push(`${wie}: ${String(f?.message || f).slice(0, 80)}`);
    melde(`  ????  ${wie.padEnd(30)} NICHT NACHGESEHEN — ${String(f?.message || f).slice(0, 60)}`);
    continue;
  }
  maschinenGelaufen++;

  const kontext = await browser.newContext({ viewport: { width: breite, height: hoehe }, hasTouch: breite <= 860 });
  const seite = await kontext.newPage();
  const konsole = [];
  seite.on("console", (m) => { if (m.type() === "error") konsole.push(m.text().slice(0, 90)); });
  seite.on("pageerror", (e) => konsole.push("pageerror: " + String(e.message).slice(0, 90)));

  const details = [];
  let schlecht = 0;

  /* Erst einmal: Kommt man ueberhaupt hinein? */
  await seite.goto(BASIS + "/workspace/", { waitUntil: "domcontentloaded" });
  await seite.click('.rolle[data-rolle="admin"]');
  await seite.fill("#code", "CODE-DOGI-0001");
  await seite.click("button[type=submit]");
  let drin = true;
  try {
    await seite.waitForURL("**/start.html", { timeout: 25000 });
    /* DIE SEITE ERST FERTIG LADEN LASSEN, bevor der Rundgang beginnt.
       `waitForURL` wartet nur darauf, dass sich die ADRESSE aendert --
       start.html holt danach noch ihre Daten (/api/ich, /api/personen,
       /api/hinweise). Ging der Rundgang sofort weiter, brach das
       naechste `goto` diese laufenden Anfragen ab, und WebKit meldet
       einen Abbruch als "pageerror: … due to access control checks".
       Das sah nach einem Sicherheitsproblem in Safari aus und war der
       Abbruch durch die Pruefung selbst -- in Ruhe nachgemessen: null
       Ereignisse, alle 18 Kacheln da. Chromium und Firefox schweigen
       bei einem Abbruch, WebKit nicht; deshalb fiel es nur dort auf. */
    await seite.waitForLoadState("networkidle").catch(() => {});
    await seite.waitForTimeout(400);
  } catch {
    drin = false;
    details.push(`      ANMELDUNG GESCHEITERT (${konsole.slice(0, 2).join(" | ") || "ohne Konsolenfehler"})`);
    schlecht++;
  }

  if (drin) {
    for (const datei of SEITEN) {
      konsole.length = 0;
      await seite.goto(BASIS + "/workspace/" + datei, { waitUntil: "networkidle" });
      await seite.waitForTimeout(400);
      const r = await seite.evaluate(messen);
      seitenGesamt++;
      elementeGesamt += r.elemente;

      const m = [];
      if (r.inhalt < 40) m.push(`fast kein Inhalt (${r.inhalt})`);
      if (r.bedienbar < 3) m.push(`fast nichts bedienbar (${r.bedienbar})`);
      if (r.ueber > 0) m.push(`${r.ueber}px Ueberstand [${r.schuld.join(" | ")}]`);
      if (konsole.length) m.push(`Konsole: ${konsole.slice(0, 2).join(" | ")}`);
      if (m.length) { schlecht++; details.push(`      ${datei.padEnd(22)} ${m.join("; ")}`); }
    }
  }

  const gut = schlecht === 0;
  if (!gut) fehler++;
  melde(`  ${gut ? "ok  " : "FEHL"} ${wie.padEnd(30)} ${drin ? SEITEN.length : 0} Seiten`
    + (gut ? "" : `  — ${schlecht} beanstandet`));
  for (const z of details.slice(0, 8)) melde(z);

  await kontext.close();
  await browser.close();
}

console.log(`\n=== Umfang ===`);

/* ==== WAS NICHT STARTET, IST NICHT NACHGESEHEN (01.10.2026) ========

   Hier stand `ok(maschinenGelaufen === MASCHINEN.length, …)` — eine
   Maschine, die nicht startet, war damit ein Befund. Auf diesem
   Rechner startet WebKit nicht, und zwar aus einem Grund, der mit
   dem Haus nichts zu tun hat:

       PrintDeps.exe icuuc77.dll
       -> Eine Anwendungssteuerungsrichtlinie hat diese Datei
          blockiert.

   Windows (Smart App Control) laesst die unsignierte Bibliothek
   nicht laden. Die Datei ist da, 1,8 MB, am richtigen Ort. Die
   Pruefung war damit dauerhaft rot — und eine Warnung, die immer
   kommt, nimmt die echte mit.

   DAMIT DARAUS KEIN STILLER FREISPRUCH WIRD, haengen zwei Dinge
   daran: Mindestens ZWEI Maschinen muessen wirklich gemessen haben,
   sonst beweist der Lauf nichts. Und die Zahl der Seitenaufrufe
   wird aus den gelaufenen Maschinen abgeleitet statt gegen eine
   feste 3 geprueft. */
for (const z of nichtNachgesehen) {
  unklar(`${z}\n         Grund herausfinden: npx playwright install --force <maschine>`
    + `\n         oder  PrintDeps.exe <dll>  im Ordner winldd der Playwright-Ablage.`);
}
ok(maschinenGelaufen >= 2,
  `${maschinenGelaufen} von ${MASCHINEN.length} Maschinen wirklich gemessen`
  + (offen ? ` (${offen} nicht nachsehbar)` : ""));
ok(seitenGesamt >= SEITEN.length * maschinenGelaufen,
  `${seitenGesamt} Seitenaufrufe — ${SEITEN.length} Seiten x ${maschinenGelaufen} Maschinen`);
ok(elementeGesamt > 5000, `${elementeGesamt} Elemente vermessen`);

/* =======================================================================
   GEGENPROBE — findet die Messung in JEDER Maschine etwas?
   ======================================================================= */
console.log(`\n=== Gegenprobe (muss in jeder Maschine anschlagen) ===`);
for (const [motor, wie] of [["chromium", "Chromium"], ["firefox", "Firefox"], ["webkit", "WebKit"]]) {
  let browser;
  try { browser = await pw[motor].launch(); } catch { continue; }
  const kontext = await browser.newContext({ viewport: { width: 1280, height: 900 } });
  const seite = await kontext.newPage();
  const konsole = [];
  seite.on("pageerror", (e) => konsole.push(String(e.message).slice(0, 60)));
  await seite.goto(BASIS + "/workspace/", { waitUntil: "domcontentloaded" });
  await seite.click('.rolle[data-rolle="admin"]');
  await seite.fill("#code", "CODE-DOGI-0001");
  await seite.click("button[type=submit]");
  await seite.waitForURL("**/start.html", { timeout: 25000 });
  await seite.waitForTimeout(600);

  const vorher = await seite.evaluate(messen);
  ok(vorher.ueber === 0 && vorher.inhalt > 40,
    `${wie}: die Startseite ist unauffaellig (${vorher.ueber}px, ${vorher.inhalt} Zeichen)`);

  await seite.evaluate(() => {
    const k = document.createElement("div");
    k.style.cssText = "width:3000px;height:24px;background:#333";
    document.body.append(k);
  });
  await seite.waitForTimeout(220);
  const nachher = await seite.evaluate(messen);
  ok(nachher.ueber > 0, `${wie}: zu breites Element wird gefunden (${nachher.ueber}px)`);

  /* Und: Wird ein echter Skriptfehler gemeldet? */
  konsole.length = 0;
  await seite.evaluate(() => { setTimeout(() => { throw new Error("Absichtlicher Testfehler"); }, 0); });
  await seite.waitForTimeout(400);
  ok(konsole.some((z) => z.includes("Absichtlicher Testfehler")),
    `${wie}: ein Skriptfehler wird bemerkt (${konsole.slice(0, 1).join("") || "nichts"})`);

  await kontext.close();
  await browser.close();
}

console.log(`\n${fehler === 0 ? "ALLES IN ORDNUNG" : `${fehler} FEHLER`}`);
try { rmSync(ordner, { recursive: true, force: true }); } catch { /* egal */ }
/* Die drei Zahlen nebeneinander — wie in pruef-ports. „Nicht
   nachsehbar" verschwindet damit nicht, faerbt den Lauf aber auch
   nicht rot. */
console.log(`\n${fehler === 0 ? "BESTANDEN" : "FEHLGESCHLAGEN"}`
  + ` — ${fehler} Fehler, ${offen} nicht nachsehbar`);
process.exit(fehler ? 1 : 0);