DogFatherGitandClaude Opus 5
2f3b8630c7
Gestern Mittag gemessen: 39 `newContext`-Aufrufe nehmen ihre Breite
aus einer Variablen und setzen kein `hasTouch`. Ohne das meldet der
Browser `pointer: fine`, und KEINE Regel aus `@media (pointer:
coarse)` greift — dort stehen im ganzen Haus die 44-Pixel-
Beruehrziele, die ausgeblendeten Tastenkuerzel und die
eingeklappte Reiterleiste.
Was das anrichtet, war an pruef-breiten zu sehen: drei Befunde auf
320, 390 und 430 Pixeln, die mit dem Finger allesamt verschwanden —
Messfehler, keine Fehler.
37 DAVON HABEN IHN JETZT. Nur `hasTouch`, nicht `isMobile`: Gefragt
ist genau die eine Sache, um die es geht. `isMobile` waere eine
zweite Aenderung in derselben Zeile, und wenn danach etwas anders
aussieht, wuesste niemand, welche von beiden es war.
ZWEI BLEIBEN STEHEN, beide in pruef-grosscheck.mjs. Die Aenderung
dort waere ein Zweizeiler; sie zu pruefen hiesse, 206 Seiten ueber
vier Rollen laufen zu lassen, und das braucht Filipes Zusage. Eine
Aenderung, die ich nicht pruefen darf, liefere ich nicht aus.
Grundlinie in pruef-fingermass steht deshalb auf 2.
JEDE EINZELN NACHGELAUFEN — 37 Laeufe:
34 gruen, darunter pruef-handy 186, pruef-material 159,
pruef-start-ansicht 160, pruef-kalender 141, pruef-erwaehnung 129,
pruef-bewerbung-aufgaben 163, pruef-neue-seiten 109
3 mit Befunden, ALLE DREI VORBESTEHEND (Gegenprobe: alter Stand
derselben Datei, gleicher Lauf, gleiche Zahl):
pruef-browser 3 (WebKit startet auf diesem Rechner nicht)
pruef-chat-anhaenge 2
pruef-crew-wand-bild 3
EINE ZEITBOMBE GEFUNDEN UND ENTSCHAERFT
pruef-dabei-optik meldete „Haekchen: 0 -> 0" — aber nur, wenn vier
andere Pruefungen gleichzeitig liefen. Allein: „0 -> 1", gruen.
Dort stand `waitForTimeout(250)` mit der Begruendung „250 ms sind
reichlich ueber den 160" (der Dauer der Blende). Auf einem Rechner,
auf dem nebenher vier Browser messen, sind sie es nicht. Die
Pruefung war damit gruen, solange nichts anderes lief, und rot im
Gesamtlauf — also genau dann, wenn niemand sie einzeln nachstellen
kann.
Eine Wartezeit ist eine Annahme ueber den Rechner. Gewartet wird
jetzt auf das, worauf es ankommt: dass das Haekchen da ist. Laeuft
die Frist ab, faellt die Pruefung mit dem ECHTEN Wert um und nicht
mit einem Messfehler. Gegenprobe: unter derselben vierfachen Last,
die sie vorher rot gemacht hat, jetzt gruen.
UND DIE GRUNDLINIE WIEDER STRENG. Ich hatte sie kurz auf
„hoechstens" gestellt — damit haette ein Rueckgang stillschweigend
Platz fuer die naechste Suende gedeckt. Genau davor warnt der Kopf
derselben Datei bei der anderen Grundlinie, und ich habe es eine
Stunde spaeter selbst falsch gemacht.
Co-Authored-By: Claude Opus 5 <[email protected]>
492 lines
24 KiB
JavaScript
492 lines
24 KiB
JavaScript
/* Prueft die Formularzeilen auf allen Seiten.
|
||
|
||
Beanstandet am 01.09.2026: "das sieht scheisse aus, so verzogen".
|
||
Gemeint war die Zeile im Kalender -- "Art" schmal, "Beginn" breit,
|
||
"Dauer (Minuten)" zweizeilig umgebrochen, alle Felder auf
|
||
verschiedenen Hoehen.
|
||
|
||
Ursache war eine Regel, die nur fuer Kinder mit der Klasse .feld galt.
|
||
Der Kalender benutzt schlichte <div> ohne Klasse; die fielen hindurch,
|
||
bekamen von zwoelf Rasterspalten je EINE und wurden nur so breit, wie
|
||
ihr Inhalt sie zwang.
|
||
|
||
Geprueft wird deshalb nicht "sieht gut aus", sondern messbar:
|
||
* alle Eingabefelder einer Zeile gleich hoch
|
||
* ihre Unterkanten auf einer Linie (sonst haengt eines tiefer)
|
||
* kein Feld absurd schmal
|
||
* keine Beschriftung mehrzeilig */
|
||
import { mkdtempSync, rmSync } from "node:fs";
|
||
import { tmpdir } from "node:os";
|
||
import { join } from "node:path";
|
||
|
||
const ordner = mkdtempSync(join(tmpdir(), "ws-form-"));
|
||
process.env.WORKSPACE_DB = join(ordner, "workspace.db");
|
||
/* 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-formulare");
|
||
process.env.PORT = `${PORT}`;
|
||
process.env.SITE_ACCESS_SECRET = "lokaler-test";
|
||
process.env.SITE_ACCESS_CODE_DOGI = "DOGI-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-formulare");
|
||
await new Promise((r) => setTimeout(r, 700));
|
||
const BASIS = `http://127.0.0.1:${PORT}`;
|
||
setTimeout(() => { console.log("ABBRUCH"); process.exit(1); }, 250_000).unref?.();
|
||
|
||
let fehler = 0;
|
||
const ok = (b, t) => { console.log((b ? " ok " : " FEHL ") + t); if (!b) fehler++; };
|
||
|
||
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");
|
||
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 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");
|
||
d.prepare("INSERT INTO personen (name, rolle, code_hash, code_salt, code_n, aktiv, erstellt) VALUES (?,?,?,?,?,1,?)")
|
||
.run("Filipe", "admin", hash, salt, 32768, new Date().toISOString());
|
||
/* EIN CREATOR MUSS DA SEIN. Ohne ihn bauen profil.html und
|
||
startcheck.html ihr Formular gar nicht erst auf -- die Pruefung findet
|
||
dort null Felder und meldet "in Ordnung", ohne ein einziges angesehen
|
||
zu haben. Genau deshalb steht die Anzahl in der Bedingung. */
|
||
const salt2 = randomBytes(16).toString("hex");
|
||
const hash2 = scryptSync("CODE-ANNA-0001", salt2, 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("Tili", "creator", hash2, salt2, 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();
|
||
|
||
/* Seite, Knopf zum Aufklappen des Formulars. */
|
||
const FORMULARE = [
|
||
["kalender.html", "#neu-oeffnen"],
|
||
["aufgaben.html", "#neu-oeffnen"],
|
||
["personen.html", "#neu-oeffnen"],
|
||
["bereich.html?b=live", "#neu-oeffnen"],
|
||
["scouting.html", "#neu-oeffnen"],
|
||
];
|
||
|
||
for (const [breite, wie] of [[1280, "Computer"], [390, "Handy"]]) {
|
||
console.log(`\n=== ${wie} (${breite}px)`);
|
||
const kontext = await browser.newContext({ viewport: { width: breite, height: 1000 }, 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 [s, knopf] of FORMULARE) {
|
||
await seite.goto(BASIS + "/workspace/" + s, { waitUntil: "networkidle" });
|
||
await seite.waitForTimeout(700);
|
||
const da = await seite.locator(knopf).count();
|
||
if (!da) { console.log(` -- ${s}: kein Formularknopf`); continue; }
|
||
await seite.click(knopf).catch(() => {});
|
||
await seite.waitForTimeout(450);
|
||
|
||
const r = await seite.evaluate(() => {
|
||
const raster = document.querySelector(".neu__raster");
|
||
if (!raster) return null;
|
||
const felder = [...raster.children].filter((k) => k.offsetParent !== null);
|
||
const eingaben = felder
|
||
.map((f) => f.querySelector("input, select, textarea"))
|
||
.filter(Boolean)
|
||
.map((e) => e.getBoundingClientRect())
|
||
/* NUR WAS MAN WIRKLICH SIEHT (verschaerft 22.09.2026).
|
||
----------------------------------------------------------
|
||
Seit dem 21.09. steht im Aufgabenformular ein zugeklappter
|
||
Block ("Noch jemanden dazunehmen"). Sein erstes Eingabefeld
|
||
liegt in einem `hidden` fieldset und hat Hoehe und Breite 0 --
|
||
die Pruefung meldete es als "nicht buendig" und "zu schmal".
|
||
|
||
Ein Feld, das man nicht sieht, kann nicht schief stehen.
|
||
Diese Zeile misst die Buendigkeit dessen, was ein Mensch vor
|
||
sich hat -- und genau darum geht es. */
|
||
.filter((r2) => r2.width > 0 && r2.height > 0);
|
||
const schilder = felder
|
||
.map((f) => f.querySelector(".feld-schild"))
|
||
.filter(Boolean);
|
||
/* Mehrzeilige Beschriftung: tatsaechliche Hoehe gegen eine Zeile. */
|
||
const mehrzeilig = schilder.filter((s2) => {
|
||
const zeile = parseFloat(getComputedStyle(s2).lineHeight) || 16;
|
||
return s2.getBoundingClientRect().height > zeile * 1.6;
|
||
}).map((s2) => s2.textContent.trim());
|
||
return {
|
||
anzahl: eingaben.length,
|
||
hoehen: eingaben.map((e) => Math.round(e.height)),
|
||
/* Auf 3 px genau zusammengefasst: Unterkanten liegen durch
|
||
Teilpixel-Rundung selten exakt gleich, obwohl sie auf einer
|
||
Linie sitzen. Ein erster Anlauf meldete deshalb "3 Unterkanten"
|
||
bei drei Feldern derselben Reihe -- ein Messfehler, kein
|
||
Gestaltungsfehler. */
|
||
unterkanten: eingaben.map((e) => Math.round(e.bottom / 3) * 3),
|
||
breiten: eingaben.map((e) => Math.round(e.width)),
|
||
einzeln: felder.map((f) => { const e=f.querySelector("input, select, textarea"); if(!e) return null; const r2=e.getBoundingClientRect(); const fr=f.getBoundingClientRect(); return { id:e.id, tag:e.tagName, top:Math.round(r2.top), bottom:Math.round(r2.bottom), h:Math.round(r2.height), feldTop:Math.round(fr.top), feldH:Math.round(fr.height) }; }).filter(Boolean),
|
||
mehrzeilig,
|
||
};
|
||
});
|
||
|
||
if (!r || r.anzahl < 2) { console.log(` -- ${s}: kein Raster mit mehreren Feldern`); continue; }
|
||
|
||
const hoehenGleich = new Set(r.hoehen).size === 1;
|
||
/* Unterkanten auf einer Linie -- auf dem Handy stehen die Felder
|
||
untereinander, dort gilt das natuerlich nicht. */
|
||
const reihen = new Set(r.unterkanten).size;
|
||
const buendig = breite < 700 ? true : reihen <= Math.ceil(r.anzahl / 3);
|
||
const nichtWinzig = Math.min(...r.breiten) >= 90;
|
||
|
||
const gut = hoehenGleich && buendig && nichtWinzig && !r.mehrzeilig.length;
|
||
if (!gut) fehler++;
|
||
console.log(` ${gut ? "ok " : "FEHL"} ${String(s).padEnd(20)}`
|
||
+ `${r.anzahl} Felder Höhen=${[...new Set(r.hoehen)].join("/")} `
|
||
+ `Breiten=${Math.min(...r.breiten)}–${Math.max(...r.breiten)}`
|
||
+ (hoehenGleich ? "" : " UNGLEICH HOCH")
|
||
+ (buendig ? "" : ` NICHT BÜNDIG (Unterkanten ${r.unterkanten.join(",")})`)
|
||
+ (nichtWinzig ? "" : " ZU SCHMAL")
|
||
+ (r.mehrzeilig.length ? ` MEHRZEILIG: ${r.mehrzeilig.join(", ")}` : "")
|
||
+ (gut ? "" : " | " + r.einzeln.map((e) => `${e.id}(${e.tag}) Feld:${e.feldTop}+${e.feldH} Eingabe:${e.top}..${e.bottom}`).join(" ")));
|
||
}
|
||
await kontext.close();
|
||
}
|
||
|
||
/* =====================================================================
|
||
KEIN FELD OHNE GESTALTUNG (01.09.2026)
|
||
|
||
Der gemeldete Fehler: Das Feld "Ein Satz ueber dich" stand als grauer
|
||
Kasten in Monospace da, direkt neben gestalteten Feldern. Die Ursache
|
||
war ein Loch im Aufbau -- jede Seite gestaltete ihre Felder mit einem
|
||
EIGENEN Selektor (.gruppe textarea, .neu input, ...), und wer ein Feld
|
||
irgendwo anders hinsetzt, faellt durch alle Netze.
|
||
|
||
Ein Loch im Aufbau schliesst man nicht mit Hinsehen: Das naechste neue
|
||
Feld faellt an einer anderen Stelle durch. Diese Pruefung geht deshalb
|
||
ueber JEDES sichtbare Feld auf JEDER Seite und misst, was der Browser
|
||
tatsaechlich zeichnet.
|
||
|
||
Die Merkmale sind genau die, die im gemeldeten Fall fehlten:
|
||
RAHMEN ohne Rand ist ein Feld im dunklen Entwurf nicht zu sehen
|
||
ECKEN eckig heisst: der Browser hat gezeichnet, nicht wir
|
||
SCHRIFT <textarea> faellt ohne `font: inherit` auf Monospace
|
||
===================================================================== */
|
||
console.log("\n=== Kein Feld ohne Gestaltung");
|
||
{
|
||
const kontext = await browser.newContext({ viewport: { width: 1280, height: 1100 } });
|
||
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 });
|
||
|
||
let gesamt = 0;
|
||
for (const pfad of ["steckbrief.html", "profil.html", "aufgaben.html", "kalender.html",
|
||
"dateien.html", "bereich.html?b=live", "content.html",
|
||
"personen.html", "startcheck.html", "report.html"]) {
|
||
await seite.goto(BASIS + "/workspace/" + pfad, { waitUntil: "networkidle" });
|
||
await seite.waitForTimeout(900);
|
||
/* Zugeklappte Formulare aufmachen -- sonst pruefen wir genau die
|
||
Felder nicht, die selten jemand sieht und die deshalb ungestaltet
|
||
bleiben. */
|
||
for (const w of ["#neu-oeffnen", "#neu-auf", "#anlegen-auf"]) {
|
||
try { await seite.click(w, { timeout: 500 }); } catch { /* gibt es hier nicht */ }
|
||
}
|
||
await seite.waitForTimeout(400);
|
||
|
||
const r = await seite.evaluate(() => {
|
||
const felder = [...document.querySelectorAll(
|
||
'.inhalt input:not([type=file]):not([type=checkbox]):not([type=radio]), '
|
||
+ '.inhalt textarea, .inhalt select')]
|
||
/* NUR WAS MAN WIRKLICH SIEHT (verschaerft 22.09.2026).
|
||
----------------------------------------------------------
|
||
Hier stand nur `width > 0`. Seit dem 21.09. steht im
|
||
Aufgabenformular ein zugeklappter Block ("Noch jemanden
|
||
dazunehmen"); ein Feld darin hat Breite und Hoehe 0 und
|
||
keinen sichtbaren Platz -- die Pruefung meldete es trotzdem
|
||
als "nicht buendig" und "zu schmal".
|
||
|
||
Ein unsichtbares Feld kann nicht schief stehen. Gefragt wird
|
||
deshalb nach BEIDEN Massen und zusaetzlich danach, ob das
|
||
Element ueberhaupt im Bild haengt (`offsetParent`). */
|
||
.filter((e) => {
|
||
const r = e.getBoundingClientRect();
|
||
return r.width > 0 && r.height > 0 && e.offsetParent !== null;
|
||
});
|
||
const schlecht = [];
|
||
for (const e of felder) {
|
||
const st = getComputedStyle(e);
|
||
/* MANCHE FELDER HOLEN IHREN RAHMEN VOM UMSCHLAG, und das ist
|
||
richtig so: Bei den Kanaelen steht ein festes "@" vor dem Feld,
|
||
beide zusammen liegen in einem gemeinsamen Rahmen. Das Feld
|
||
selbst hat dort absichtlich keinen -- zwei Rahmen ineinander
|
||
saehen aus wie ein Fehler.
|
||
|
||
Der erste Anlauf dieser Pruefung meldete genau diese vier als
|
||
kaputt. Sie war damit eine Pruefung, die Richtiges anmahnt --
|
||
und die gewoehnt man sich ab zu lesen. Gemessen wird deshalb
|
||
der RAHMEN, der um das Feld herum tatsaechlich sichtbar ist,
|
||
egal ob er am Feld selbst oder am Umschlag haengt. */
|
||
const umschlag = e.parentElement;
|
||
const us = umschlag ? getComputedStyle(umschlag) : null;
|
||
const rahmenAmUmschlag = !!us && parseFloat(us.borderTopWidth) >= 1
|
||
&& parseFloat(us.borderTopLeftRadius) >= 4;
|
||
const grund = [];
|
||
if (!rahmenAmUmschlag) {
|
||
if (parseFloat(st.borderTopWidth) < 1) grund.push("kein Rand");
|
||
if (parseFloat(st.borderTopLeftRadius) < 4) grund.push("eckig");
|
||
if (parseFloat(st.paddingLeft) < 6) grund.push("keine Polsterung");
|
||
}
|
||
/* Die Schrift gilt IMMER -- ein Umschlag kann sie nicht liefern. */
|
||
if (/mono|courier/i.test(st.fontFamily)) grund.push("Monospace");
|
||
if (parseFloat(st.fontSize) < 12) grund.push("Schrift " + st.fontSize);
|
||
if (grund.length) schlecht.push((e.id || e.tagName) + " – " + grund.join(", "));
|
||
}
|
||
return { anzahl: felder.length, schlecht };
|
||
});
|
||
gesamt += r.anzahl;
|
||
/* DIE ANZAHL GEHOERT IN DIE BEDINGUNG, nicht nur in den Meldetext:
|
||
Eine Seite ohne gefundene Felder waere sonst "in Ordnung". */
|
||
const gut = r.anzahl > 0 && r.schlecht.length === 0;
|
||
if (!gut) fehler++;
|
||
console.log(` ${gut ? "ok " : "FEHL"} ${pfad.padEnd(22)}${r.anzahl} Felder`
|
||
+ (r.schlecht.length ? " -> " + r.schlecht.join(" | ")
|
||
: (r.anzahl ? "" : " KEIN FELD GEFUNDEN – die Pruefung hat nichts geprueft")));
|
||
}
|
||
ok(gesamt >= 40, `insgesamt ${gesamt} Felder gemessen`);
|
||
|
||
/* GEGENPROBE: Kann diese Pruefung ueberhaupt anschlagen? Ein Feld wird
|
||
absichtlich auf den Rohzustand des Browsers zurueckgesetzt -- sie MUSS
|
||
es melden. Ohne diesen Nachweis waere sie eine Pruefung, die immer
|
||
bestaetigt, und die bestaetigt nichts. */
|
||
await seite.goto(BASIS + "/workspace/steckbrief.html", { waitUntil: "networkidle" });
|
||
await seite.waitForTimeout(900);
|
||
const gegen = await seite.evaluate(() => {
|
||
const e = document.getElementById("sb-ueber");
|
||
const vorher = getComputedStyle(e);
|
||
const gut = parseFloat(vorher.borderTopLeftRadius) >= 4
|
||
&& !/mono|courier/i.test(vorher.fontFamily);
|
||
e.style.all = "revert";
|
||
const st = getComputedStyle(e);
|
||
return {
|
||
vorherGut: gut,
|
||
ecken: parseFloat(st.borderTopLeftRadius),
|
||
schrift: st.fontFamily,
|
||
erkannt: parseFloat(st.borderTopLeftRadius) < 4 || /mono|courier/i.test(st.fontFamily),
|
||
};
|
||
});
|
||
ok(gegen.vorherGut === true,
|
||
"das gemeldete Feld 'Ein Satz ueber dich' ist gestaltet (runde Ecken, keine Monospace)");
|
||
ok(gegen.erkannt === true,
|
||
`Gegenprobe: ein zurueckgesetztes Feld wird erkannt `
|
||
+ `(Ecken ${gegen.ecken}px, Schrift ${gegen.schrift})`);
|
||
|
||
await seite.goto(BASIS + "/workspace/steckbrief.html", { waitUntil: "networkidle" });
|
||
await seite.waitForTimeout(900);
|
||
await seite.screenshot({ path: "pruef-felder.png", fullPage: false });
|
||
await kontext.close();
|
||
}
|
||
|
||
/* =====================================================================
|
||
WAS AUFKLAPPT, MUSS AUCH PLATZ BEKOMMEN (22.09.2026)
|
||
=====================================================================
|
||
Filipe zum Bildschirmfoto: „wie scheisse sieht das aus, verbesser das
|
||
bitte." Zu sehen war das Aufgaben-Formular: „Anlegen" und
|
||
„Abbrechen" lagen mitten in der Personenliste.
|
||
|
||
WARUM DIE PRUEFUNG DARUEBER DAS NICHT FINDEN KONNTE: Sie oeffnet das
|
||
Formular und misst die Felder -- im zugeklappten Zustand. Der Fehler
|
||
entsteht erst beim AUFKLAPPEN. Ein Zustand, der nie hergestellt
|
||
wird, kann nicht gemessen werden; die Pruefung war gruen und hat
|
||
dabei nie hingesehen.
|
||
|
||
Gemessen war es dann eindeutig, bei 1280 px:
|
||
|
||
Zelle Zeilen Hoehe Inhalt
|
||
feld-verant 24px 44px 68 107
|
||
feld-mehrere 43px 44px 87 261 <-- 174 zu viel
|
||
|
||
Die Zelle steckte in einer festen 44-Pixel-Zeile. Was herauslaeuft,
|
||
belegt keinen Platz -- also legt es sich ueber das Naechste.
|
||
|
||
HIER WIRD NICHT DIESE EINE STELLE GEPRUEFT, sondern die Eigenschaft:
|
||
Jedes Element mit `aria-expanded` im Formular wird aufgeklappt, und
|
||
danach darf keine Rasterzelle mehr Inhalt haben, als sie hoch ist.
|
||
Damit faellt auch die naechste auf, die es noch gar nicht gibt.
|
||
===================================================================== */
|
||
console.log("\n=== Was aufklappt, bekommt auch Platz");
|
||
{
|
||
const kontext = await browser.newContext({ viewport: { width: 1280, height: 1000 } });
|
||
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.waitForTimeout(900);
|
||
|
||
let zellenGesamt = 0, aufgeklapptGesamt = 0;
|
||
const schlimm = [];
|
||
|
||
for (const [wohin, knopf] of FORMULARE) {
|
||
await seite.goto(`${BASIS}/workspace/${wohin}`, { waitUntil: "networkidle" });
|
||
await seite.waitForTimeout(900);
|
||
const auf = await seite.$(knopf);
|
||
if (!auf) continue;
|
||
await auf.click().catch(() => {});
|
||
await seite.waitForTimeout(700);
|
||
|
||
/* ALLES AUFKLAPPEN, was sich aufklappen laesst. */
|
||
const wieViele = await seite.evaluate(() => {
|
||
const f = document.querySelector(".neu__raster");
|
||
if (!f) return 0;
|
||
const knoepfe = [...f.querySelectorAll("[aria-expanded]")]
|
||
.filter((b) => b.offsetParent !== null);
|
||
for (const b of knoepfe) b.click();
|
||
return knoepfe.length;
|
||
});
|
||
await seite.waitForTimeout(600);
|
||
aufgeklapptGesamt += wieViele;
|
||
|
||
const befund = await seite.evaluate(() => {
|
||
const r = document.querySelector(".neu__raster");
|
||
if (!r) return { zellen: 0, zuEng: [] };
|
||
const zellen = [...r.children].filter((c) => !c.hidden && c.offsetParent !== null);
|
||
|
||
/* WIE TIEF REICHT DER INHALT WIRKLICH -- zwei Anlaeufe davor
|
||
waren falsch, und der zweite war der gefaehrlichere:
|
||
|
||
(1) `scrollHeight` der Zelle. Meldete elf Zellen als kaputt,
|
||
die alle in Ordnung sind: Der Hinweis unter einem Feld
|
||
haengt seit dem 17.09. ABSICHTLICH absolut unter der Zelle
|
||
(`top: 100%`). Er ragt hinaus, das ist seine Aufgabe. Eine
|
||
Warnung, die bei richtigem Verhalten anschlaegt, wird
|
||
abgeschaltet.
|
||
|
||
(2) Nur die DIREKTEN Kinder im Fluss. Das war gruen -- auch
|
||
mit dem echten Fehler. Nachgemessen mit
|
||
zurueckgenommener Behebung: immer noch gruen. Der Grund
|
||
ist das Raster selbst: Es staucht das Kind auf die feste
|
||
Zeilenhoehe, das Kind bleibt also brav in der Zelle. Was
|
||
herauslaeuft, ist der Inhalt DARIN. Eine Pruefung, die
|
||
nur eine Ebene tief sieht, sieht davon nichts.
|
||
|
||
Also in die Tiefe -- aber nicht blind: Teilbaeume unter
|
||
absolut gesetzten Elementen bleiben aussen vor (siehe 1), und
|
||
wer selbst scrollt (`overflow` nicht `visible`), darf Inhalt
|
||
unterhalb haben; das ist der Sinn eines Rollbereichs. */
|
||
const unten = (c) => {
|
||
const oben = c.getBoundingClientRect().top;
|
||
let tiefste = 0;
|
||
const geh = (el) => {
|
||
for (const k of el.children) {
|
||
const st = getComputedStyle(k);
|
||
if (st.position === "absolute" || st.position === "fixed") continue;
|
||
if (st.display === "none" || k.hidden) continue;
|
||
tiefste = Math.max(tiefste, k.getBoundingClientRect().bottom - oben);
|
||
if (st.overflow === "visible" && st.overflowY === "visible") geh(k);
|
||
}
|
||
};
|
||
geh(c);
|
||
return Math.round(tiefste);
|
||
};
|
||
const zuEng = zellen
|
||
/* 4 px Luft fuer Abrundungen im Rastermass. 174 px faellt
|
||
hier nicht durch. */
|
||
.filter((c) => unten(c) > Math.round(c.getBoundingClientRect().height) + 4)
|
||
.map((c) => `${c.id || "(ohne Kennung)"}: Inhalt reicht bis ${unten(c)} px, `
|
||
+ `Zelle ist ${Math.round(c.getBoundingClientRect().height)} px hoch`);
|
||
return { zellen: zellen.length, zuEng };
|
||
});
|
||
zellenGesamt += befund.zellen;
|
||
for (const z of befund.zuEng) schlimm.push(`${wohin} — ${z}`);
|
||
}
|
||
|
||
/* DIE ANZAHL GEHOERT IN DIE BEDINGUNG. Ohne sie waere „nichts laeuft
|
||
heraus" auch dann gruen, wenn gar nichts aufgeklappt wurde -- und
|
||
genau das war der Fehler der Pruefung darueber. */
|
||
ok(zellenGesamt > 10, `${zellenGesamt} Rasterzellen angesehen`);
|
||
ok(aufgeklapptGesamt > 0,
|
||
`${aufgeklapptGesamt} aufklappbare Bereiche wirklich geoeffnet`);
|
||
ok(schlimm.length === 0 && aufgeklapptGesamt > 0,
|
||
schlimm.length
|
||
? `${schlimm.length} Zelle(n) laufen aus ihrer Zeile heraus:\n `
|
||
+ schlimm.join("\n ")
|
||
: "keine Zelle laeuft aus ihrer Zeile heraus");
|
||
|
||
/* GEGENPROBE: Die Messung muss ein Herauslaufen auch SEHEN. Dafuer
|
||
wird eine Zelle kuenstlich eingeklemmt -- und danach wieder
|
||
freigegeben. Ohne diese Zeile waere „nichts laeuft heraus" die
|
||
Aussage einer Messung, von der niemand weiss, ob sie etwas
|
||
bemerken wuerde. */
|
||
/* Fuer die Gegenprobe zurueck auf ein Formular, das offen ist -- der
|
||
letzte Durchlauf oben kann auf einer Seite geendet haben, die gar
|
||
keines hat. Eine Gegenprobe, die mangels Gelegenheit ausfaellt,
|
||
ist keine. */
|
||
await seite.goto(`${BASIS}/workspace/aufgaben.html`, { waitUntil: "networkidle" });
|
||
await seite.waitForTimeout(900);
|
||
await seite.click("#neu-oeffnen").catch(() => {});
|
||
await seite.waitForTimeout(700);
|
||
|
||
const probe = await seite.evaluate(() => {
|
||
/* Dieselbe Rechnung wie oben -- sonst prueft die Gegenprobe eine
|
||
andere Messung als die, um die es geht. */
|
||
const unten = (c) => {
|
||
const oben = c.getBoundingClientRect().top;
|
||
let tiefste = 0;
|
||
const geh = (el) => {
|
||
for (const k of el.children) {
|
||
const st = getComputedStyle(k);
|
||
if (st.position === "absolute" || st.position === "fixed") continue;
|
||
if (st.display === "none" || k.hidden) continue;
|
||
tiefste = Math.max(tiefste, k.getBoundingClientRect().bottom - oben);
|
||
if (st.overflow === "visible" && st.overflowY === "visible") geh(k);
|
||
}
|
||
};
|
||
geh(c);
|
||
return Math.round(tiefste);
|
||
};
|
||
const r = document.querySelector(".neu__raster");
|
||
const c = r && [...r.children].find((x) => !x.hidden && x.offsetParent !== null && unten(x) > 40);
|
||
if (!c) return null;
|
||
const vorher = c.style.height;
|
||
c.style.height = "12px";
|
||
const erkannt = unten(c) > Math.round(c.getBoundingClientRect().height) + 4;
|
||
c.style.height = vorher;
|
||
const wiederGut = unten(c) <= Math.round(c.getBoundingClientRect().height) + 4;
|
||
return { erkannt, wiederGut };
|
||
});
|
||
ok(!!probe && probe.erkannt && probe.wiederGut,
|
||
probe ? "Gegenprobe: eine kuenstlich eingeklemmte Zelle wird erkannt"
|
||
: "KONNTE NICHT NACHSEHEN: keine Zelle fuer die Gegenprobe gefunden");
|
||
|
||
await kontext.close();
|
||
}
|
||
|
||
await browser.close();
|
||
try { rmSync(ordner, { recursive: true, force: true }); } catch { /* egal */ }
|
||
console.log(fehler ? `\n${fehler} Formular(e) fehlerhaft.` : "\nAlles in Ordnung.");
|
||
process.exit(fehler ? 1 : 0);
|