/* Misst die einzelnen Teile der Kopfleiste auf dem Handy -- damit eine Reparatur an der richtigen Stelle ansetzt und nicht geraten wird. SIE PRUEFT SEIT DEM 01.09.2026 AUCH, statt nur zu messen. Vorher war sie ein reines Messwerkzeug: Sie druckte Zahlen und endete IMMER mit Exitcode 0. Damit stand sie als "pruef-..." im Ordner der Pruefungen, lief bei jedem Gesamtlauf mit, meldete "in Ordnung" -- und konnte gar nicht fehlschlagen. Aufgefallen ist das erst, als der Gesamtlauf die ANZAHL der Einzelpruefungen mitzaehlte: Diese Datei kam auf null. Eine Pruefung, die immer bestaetigt, bestaetigt nichts. Die beiden Zahlen, um die es geht, wurden laengst gemessen -- sie werden jetzt auch beurteilt: UEBERSTAND muss 0 sein (waagerechtes Scrollen ist auf einem Handy der schlimmste Fehler) ABMELDEN ERREICHBAR muss wahr sein -- es ist der einzige Weg wieder heraus; liegt er ausserhalb des Bildes, sitzt man fest. Die Messwerte werden weiterhin gedruckt: Sie sagen bei einem Fehlschlag sofort, WELCHES Teil zu breit ist. */ import { mkdtempSync, rmSync } from "node:fs"; import { tmpdir } from "node:os"; import { join } from "node:path"; const ordner = mkdtempSync(join(tmpdir(), "ws-messen-")); process.env.WORKSPACE_DB = join(ordner, "pruef.sqlite"); /* DER PORT MUSS MEINER SEIN (nachgeruestet 19.09.2026). Ohne diese Zeile startet der eigene Server bei belegtem Port STILL nicht -- und alles Folgende misst gegen einen fremden Stand. Das ist der dritte Ausgang: belegt ist etwas anderes als kaputt. */ const PORT = await eigenerPort(import.meta, "pruef-kopf-messen"); process.env.PORT = `${PORT}`; process.env.SITE_ACCESS_SECRET = "lokaler-test"; process.env.SITE_ACCESS_CODE_DOGI = "DOGI-TEST-1"; process.env.SITE_ACCESS_CODE_VANVAN = "VANVAN-TEST-1"; 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 }); }; import { notbremse } from "./helfer-notbremse.mjs"; import { eigenerPort } from "./helfer-port.mjs"; 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-kopf-messen"); await new Promise((r) => setTimeout(r, 700)); const BASIS = `http://127.0.0.1:${PORT}`; let fehler = 0; let geprueft = 0; setTimeout(() => { console.log("ABBRUCH"); process.exit(1); }, 120_000).unref?.(); await fetch(BASIS + "/workspace/api/anmelden", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ rolle: "admin", code: "x" }) }).catch(() => {}); const { DatabaseSync } = await import("node:sqlite"); const { scryptSync, randomBytes } = await import("node:crypto"); const d = new DatabaseSync(process.env.WORKSPACE_DB); const salt = randomBytes(16).toString("hex"); const hash = scryptSync("CODE-DOGI-0001", salt, 64, { N: 32768, r: 8, p: 1, maxmem: 96 * 1024 * 1024 }).toString("hex"); /* Bewusst ein langer Name -- kurze Namen wuerden den Fehler verstecken. */ d.prepare("INSERT INTO personen (name, rolle, code_hash, code_salt, code_n, aktiv, erstellt) VALUES (?,?,?,?,?,1,?)") .run("Filipe Fernandes Ribeiro", "admin", hash, salt, 32768, new Date().toISOString()); d.close(); const { chromium } = await import( "file:///C:/Users/qciga/Documents/Obelix/Analyse/node_modules/playwright/index.mjs"); const browser = await chromium.launch(); /** Warten, bis die Kopfleiste FERTIG ist -- und zwar auf Stabilitaet, * nicht auf einen Inhalt. * * ZWEI FEHLVERSUCHE, beide lehrreich: * * `waitForTimeout(300)` mass einen Zwischenstand -- kopf.js haengt * Teile erst nach der Antwort von `/api/ich` ein und hat ein Netz, das * nach 1200 ms nachholt. Die Gegenprobe blieb dadurch gruen, obwohl * der Fehler wieder eingebaut war. * * Der zweite Versuch wartete darauf, dass `#wer` Text hat. Das war * SOFORT wahr: Im HTML steht dort `…` als Platzhalter. Eine Bedingung, * die von Anfang an erfuellt ist, wartet auf nichts -- derselbe Fehler * wie ein `every()` auf einem leeren Feld. * * Jetzt wird gewartet, bis sich die Zahl der Teile zweimal * hintereinander nicht mehr aendert. Das braucht keine Kenntnis * darueber, WIE VIELE Teile richtig sind -- und bleibt richtig, wenn * morgen ein Knopf dazukommt. */ async function leisteFertig(seite, frist = 9000) { /* ERST AB HIER ZAEHLT "STABIL" -- dritter und letzter Fehlversuch. Ohne diese Zeile war die Leiste nach 0 ms und nach 500 ms gleich gross und galt damit als fertig. "Stabil" hiess dann nur "es ist noch nichts passiert": Das Netz in kopf.js greift erst bei 1200 ms, und teilen.html holt `/api/ich` nicht selbst. Die 1500 sind keine geratene Zahl, sondern die 1200 aus kopf.js plus Luft. Aendert sich sie dort, gehoert sie hier nachgezogen -- deshalb steht sie nicht nackt da, sondern mit ihrer Herkunft. */ await seite.waitForTimeout(1500); const bis = Date.now() + frist; let vorher = -1; while (Date.now() < bis) { const n = await seite.evaluate( () => document.querySelector(".kopfleiste__rechts")?.children.length ?? -1); if (n > 0 && n === vorher) return n; vorher = n; await seite.waitForTimeout(500); } return vorher; } /* WELCHE SEITEN (17.09.2026). Bis heute wurde NUR uebersicht.html gemessen -- und genau deshalb blieb der Fehler unsichtbar, ueber den Filipe gestolpert ist: Der Teilen-Knopf war doppelt so hoch wie seine Nachbarn, aber nur auf den drei Seiten, die bereich.css laden. uebersicht.html gehoert nicht dazu. Eine Kopfleiste, die auf einer Seite gemessen wird, ist auf einer Seite gemessen. Die Leiste steht auf allen. Deshalb jetzt: die Kontrollseite von frueher PLUS die zwei, die zusaetzliche Gestaltungsdateien laden -- dort entstehen Konflikte, nirgends sonst. */ /* DREI KAMEN AM 23.09.2026 DAZU. Auf ihnen wanderte die Kopfleiste beim Scrollen aus dem Bild, auf den drei darueber nicht -- der Unterschied war ein Farbton, den kopf.js erst nach dem Laden setzt. Wer nur die alten drei misst, sieht so etwas nie. aufgaben.html und wissen.html tragen einen Ton, chat.html ebenso; entwicklung.html steht als Gegenprobe dabei (kein Ton) -- sonst hiesse "alle kleben" nur, dass die Regel fuer den einen Fall stimmt. */ const SEITEN = ["uebersicht.html", "teilen.html", "bewerben.html", "aufgaben.html", "wissen.html", "entwicklung.html"]; /* UND EINE BREITE ANSICHT (17.09.2026). Filipes Bildschirmfoto war KEIN Handy -- die Leiste war rund 1366 px breit. Unterhalb von 720 px versteckt gate.css das Wort "Teilen" und laesst nur das Zeichen stehen; der Knopf bleibt dort klein, auch mit einer falschen Anordnung. Eine Pruefung, die nur Handybreiten misst, waere also gruen gewesen und blind fuer genau den gemeldeten Fall. Die drei schmalen Breiten bleiben: Dort ist der Platz knapp, und dort ist die Leiste im September schon einmal zerbrochen. */ for (const breite of [320, 390, 430, 1366]) { const kontext = await browser.newContext({ viewport: { width: breite, height: 844 }, hasTouch: breite <= 860 }); const seite = await kontext.newPage(); 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: 15000 }); for (const wo of SEITEN) { await seite.goto(BASIS + "/workspace/" + wo, { waitUntil: "networkidle" }); /* WARTEN AUF EINE BEDINGUNG, NICHT AUF EINE ZAHL (17.09.2026). Hier stand `waitForTimeout(300)`, und das hat die Pruefung wertlos gemacht: kopf.js haengt Teile der Leiste erst ein, wenn `/api/ich` beantwortet ist -- und hat ein Netz, das nach 1200 ms nachholt, falls die Seite selbst nicht fragt. Nach 300 ms war die Leiste also halb leer, und gemessen wurde ein Zwischenstand. Bewiesen an der Gegenprobe: Der echte Fehler wurde absichtlich wieder eingebaut, und die Pruefung blieb GRUEN -- sie hatte den kaputten Knopf schlicht noch nicht gesehen. Eine Pruefung, die zu frueh hinsieht, bestaetigt nur, dass noch nichts da war. */ await leisteFertig(seite); /* ---- FAELLT EIN TEIL AUS DER REIHE? ---------------------------------- Das ist die Messung, die Filipes Beschwerde entspricht. Nicht "ist es 38 px hoch" -- eine feste Zahl waere die Rechnung von gestern und muesste bei jedem neuen Knopf nachgezogen werden. Sondern: Verhaelt sich EIN Teil anders als die anderen? Verglichen wird gegen den Mittelwert der Nachbarn. Der waechst mit, wenn die Leiste insgesamt groesser wird, und schlaegt an, sobald ein einzelnes Element ausbricht -- unabhaengig davon, welche Zahl gerade richtig ist. */ const reihe = await seite.evaluate(() => { const teile = [...(document.querySelector(".kopfleiste__rechts")?.children || [])] .map((e) => ({ was: (e.id || String(e.className).split(" ")[0] || e.tagName).slice(0, 24), hoehe: Math.round(e.getBoundingClientRect().height), })) .filter((x) => x.hoehe > 0); if (teile.length < 3) return { teile, schnitt: 0, ausreisser: [] }; const schnitt = teile.reduce((n, x) => n + x.hoehe, 0) / teile.length; return { teile, schnitt: Math.round(schnitt), ausreisser: teile.filter((x) => x.hoehe > schnitt * 1.6), }; }); /* ---- BLEIBT SIE BEIM SCROLLEN STEHEN? ------------------------------- Filipe, 23.09.2026: "die leiste soll immer da fest stehen bleiben auch wenn man runterscrollt, sonnst muss man immer wieder hoch scrollen um zurueck zu koennen oder so." Sie stand damals auf der Haelfte der Seiten -- und auf der anderen nicht. Im Quelltext war das nicht zu sehen: Beide Seiten laden dasselbe CSS, und die Regel, die es kaputt machte, greift erst, wenn kopf.js ein "data-ton" an den Body haengt. Der Unterschied entsteht also nach dem Laden. GEMESSEN WIRD DAS VERHALTEN, NICHT DIE EIGENSCHAFT. "position ist sticky" waere die leichtere Frage und die falsche: Eine klebende Leiste in einem Kasten, der selbst scrollt, hat auch position sticky -- und wandert trotzdem weg. Gefragt wird deshalb, wo die Leiste NACH dem Scrollen steht. Und nur dort, wo ueberhaupt gescrollt werden KANN: Auf einer kurzen Seite bewegt sich nichts, und "sie ist noch oben" waere dann kein Beweis, sondern eine Selbstverstaendlichkeit. Das ist der dritte Ausgang -- nicht gut, nicht schlecht, sondern nicht nachsehbar. */ const kleben = await seite.evaluate(async () => { const k = document.querySelector(".kopfleiste"); if (!k) return { fehlt: true }; const hoch = document.documentElement.scrollHeight - window.innerHeight; if (hoch < 120) return { zuKurz: true, hoch }; window.scrollTo(0, Math.min(600, hoch)); await new Promise((r) => setTimeout(r, 250)); const y = Math.round(k.getBoundingClientRect().top); const gescrollt = Math.round(window.scrollY); window.scrollTo(0, 0); await new Promise((r) => setTimeout(r, 150)); return { y, gescrollt, position: getComputedStyle(k).position }; }); if (kleben.fehlt) { geprueft++; fehler++; console.log(" FEHL " + breite + "px " + wo + ": gar keine Kopfleiste"); } else if (kleben.zuKurz) { console.log(" -- " + breite + "px " + wo + ": Seite zu kurz zum Scrollen (" + kleben.hoch + "px) -- nicht nachsehbar"); } else { geprueft++; /* Zwei Bildpunkte Spielraum: Unterpixel-Rundung beim Zoomen. */ const bleibt = kleben.y >= -2 && kleben.y <= 2; if (!bleibt) fehler++; console.log(" " + (bleibt ? "ok " : "FEHL") + " " + breite + "px " + wo + ": nach " + kleben.gescrollt + "px Scrollen steht die Leiste bei y=" + kleben.y + " (position: " + kleben.position + ")" + (bleibt ? "" : " -- sie wandert mit")); } geprueft++; if (reihe.ausreisser.length) { fehler++; console.log(` FEHL ${breite}px ${wo}: ${reihe.ausreisser .map((x) => `${x.was} ist ${x.hoehe}px`).join(", ")} ` + `-- die anderen im Schnitt ${reihe.schnitt}px`); for (const x of reihe.teile) console.log(` ${x.was.padEnd(24)} h=${x.hoehe}`); } else if (reihe.teile.length < 3) { console.log(` -- ${breite}px ${wo}: nur ${reihe.teile.length} Teile ` + "-- zu wenig zum Vergleichen"); } else { console.log(` ok ${breite}px ${wo}: ${reihe.teile.length} Teile, ` + `keines faellt aus der Reihe (Schnitt ${reihe.schnitt}px)`); } /* EIN BILD VON DER BREITEN ANSICHT. Die Zahlen sagen, DASS nichts aus der Reihe faellt; ob die Leiste gut AUSSIEHT, sagt nur ein Blick. Genau so ist dieser Fehler gemeldet worden -- mit einem Bildschirmfoto, nicht mit einer Messung. */ if (breite === 1366 && wo === "teilen.html") { await seite.screenshot({ path: "server/pruef-kopf-leiste.png", clip: { x: 0, y: 0, width: 1366, height: 120 } }); } } await seite.goto(BASIS + "/workspace/uebersicht.html", { waitUntil: "networkidle" }); await seite.waitForTimeout(300); const r = await seite.evaluate(() => { const k = document.querySelector(".kopfleiste"); const teil = (e) => ({ was: (e.tagName + "." + String(e.className).split(" ")[0]).slice(0, 34), breite: Math.round(e.getBoundingClientRect().width), rechts: Math.round(e.getBoundingClientRect().right), }); return { fenster: window.innerWidth, ueber: document.documentElement.scrollWidth - document.documentElement.clientWidth, kinder: [...k.children].map(teil), rechtsKinder: [...(k.querySelector(".kopfleiste__rechts")?.children || [])].map(teil), abmeldenSichtbar: (() => { const a = document.querySelector(".abmelden")?.getBoundingClientRect(); return a ? a.right <= window.innerWidth : null; })(), }; }); /* Erst beurteilen, dann drucken -- die Messwerte darunter sind die Begründung, falls es schiefgeht. */ geprueft++; const gut = r.ueber <= 0 && r.abmeldenSichtbar === true; if (!gut) fehler++; console.log(` ${gut ? "ok " : "FEHL"} ${breite}px: Überstand ${r.ueber}px, ` + `Abmelden erreichbar: ${r.abmeldenSichtbar}`); for (const t of r.kinder) console.log(` ${t.was.padEnd(34)} b=${String(t.breite).padStart(4)} rechts=${t.rechts}`); console.log(" darin:"); for (const t of r.rechtsKinder) console.log(` ${t.was.padEnd(32)} b=${String(t.breite).padStart(4)} rechts=${t.rechts}`); await kontext.close(); } await browser.close(); try { rmSync(ordner, { recursive: true, force: true }); } catch {} /* Die Anzahl gehoert in die BEDINGUNG, nicht nur in den Meldetext: Waere die Schleife nie gelaufen, waere "0 Fehler" sonst ein Erfolg. */ console.log(` ${geprueft} Breiten gemessen, ${fehler} beanstandet.`); if (!geprueft) { console.log(" FEHL keine einzige Breite gemessen"); fehler++; } console.log(fehler ? "NICHT in Ordnung." : "Alles in Ordnung."); process.exit(fehler ? 1 : 0);