/* 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 ` + `\n oder PrintDeps.exe 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);