@nodefony/devkit 10.0.0-beta.2 → 10.0.0-beta.4

package/skills/nodefony-browser/scripts/inspect.mjs

@@ -24,11 +24,13 @@
  * `@env` NF_BROWSER_PASSWORD mot de passe associé
  * `@env` NF_BROWSER_ACTIONS séquence d'interactions AVANT mesure, séparées par `|` —
  *                        `verbe:cible[=valeur]` : clic (défaut), double, droit, survol,
- *                        saisir, touche, voir, defiler, attendre. Un écran qui se déplie
+ *                        saisir, choisir, touche, voir, defiler, attendre. Un écran qui se déplie
  *                        au clic n'existe pas tant qu'on ne l'a pas ouvert.
  * `@env` NF_BROWSER_FULLPAGE 1 = capture la page ENTIÈRE (défaut : la fenêtre)
  * `@env` NF_BROWSER_PROBES sélecteurs CSS à sonder, séparés par des virgules (`libellé=sélecteur`)
  * `@env` NF_BROWSER_WIDTHS largeurs de la famille responsive (défaut 360,768,1280)
+ * `@env` NF_BROWSER_VIEWPORT écran mesuré : mobile, mobile-court, tablette, bureau (défaut), large, tres-large, ou LARGEURxHAUTEUR — sous 600 px, émulé en téléphone (tactile, densité 2)
+ * `@env` NF_BROWSER_PRIMARY sélecteur de l'action principale pour la famille pli (défaut : le plus grand bouton de validation visible)
  * `@env` NF_BROWSER_SEUIL_LOURD bytes au-delà desquels une ressource est « lourde » (défaut 512000)
  * `@env` NF_BROWSER_SEUIL_LENT millisecondes au-delà desquelles une réponse est « lente » (défaut 1000)
  * `@requires` conteneur du profil `browser` démarré · serveur joignable depuis le conteneur
@@ -42,6 +44,7 @@ import { open, goTo, LOGIN, OUTPUT } from "./lib/browser.mjs";
 import { sourceWcag } from "./lib/wcag.mjs";
 import {
   FAMILIES,
+  captureSlug,
   parseActions,
   parseFamilies,
   parseProbes,
@@ -72,6 +75,7 @@ const EXPECT = process.argv[3] ?? process.env.NF_BROWSER_EXPECT ?? "";
  * | `droit`    | clic droit — ouvre un menu contextuel applicatif          |
  * | `survol`   | survol : révèle une infobulle, un menu déroulant          |
  * | `saisir`   | remplit un champ (`saisir:Nom=mon-app`)                   |
+ * | `choisir`  | choisit une option d'une liste (`choisir:Habillage=dots`) |
  * | `touche`   | frappe une touche (`touche:Enter`, `touche:Escape`)       |
  * | `voir`     | amène dans la vue SANS cliquer                            |
  * | `defiler`  | fait défiler de N pixels (`defiler:600`), page ou conteneur |
@@ -285,7 +289,28 @@ for (const { verb, target, value } of ACTIONS) {
       break;
     }
   }
-  locator ??= page.locator(target).first();
+  // Aucun candidat visible À CET INSTANT ne dit pas que la cible est un
+  // sélecteur : juste après un clic qui navigue, la page suivante n'est pas
+  // encore rendue. On attend donc le texte OU le sélecteur — et le texte seul
+  // quand la cible n'est pas du CSS valide. Trancher sur l'instant faisait
+  // chercher une balise `<FreeOTP>` une fois sur trois.
+  if (locator === null) {
+    // Une navigation en vol détruirait le contexte de l'évaluation ci-dessous.
+    await page.waitForLoadState("domcontentloaded").catch(() => {});
+    const isCss = await page
+      .evaluate((s) => {
+        try {
+          document.querySelector(s);
+          return true;
+        } catch {
+          return false;
+        }
+      }, target)
+      .catch(() => false);
+    locator = isCss
+      ? candidates.or(page.locator(target)).first()
+      : candidates.first();
+  }
   try {
     await locator.waitFor({ timeout: 15000 });
     if (verb === "clic") await locator.click();
@@ -293,7 +318,13 @@ for (const { verb, target, value } of ACTIONS) {
     else if (verb === "droit") await locator.click({ button: "right" });
     else if (verb === "survol") await locator.hover();
     else if (verb === "saisir") await locator.fill(value);
-    else if (verb === "touche") await locator.press(value || "Enter");
+    // `choisir` : la cible peut être le `<label>` qui ENVELOPPE la liste —
+    // Playwright reporte alors le choix sur son contrôle. La valeur est celle
+    // de l'option (`value`), sinon son libellé.
+    else if (verb === "choisir") {
+      const chosen = await locator.selectOption(value);
+      if (chosen.length === 0) throw new Error(`option « ${value} » absente`);
+    } else if (verb === "touche") await locator.press(value || "Enter");
     else if (verb === "voir") await locator.scrollIntoViewIfNeeded();
     // `attendre` : le `waitFor` ci-dessus EST l'action.
   } catch {
@@ -758,7 +789,7 @@ if (active.has("reseau")) {
   const slowThreshold = Number(process.env.NF_BROWSER_SEUIL_LENT ?? 1000);
   const items = await Promise.all(
     finishedRequests.map(async (rq) => {
-      let bytes = null;
+      let bytes;
       try {
         // `sizes()` rend la taille RÉELLEMENT transférée ; l'en-tête
         // content-length manque sur les réponses en flux.
@@ -835,8 +866,93 @@ if (active.has("stockage")) {
   delete measured.stockageWeb;
 }
 
+// ── Famille pli — les proportions, sur l'écran DEMANDÉ ──────────────────────
+// Deux questions qu'aucune autre famille ne pose : faut-il défiler pour AGIR
+// (l'action principale est-elle au-dessus du bas de l'écran ?), et quelle place
+// le bloc qui la porte prend-il dans l'écran ? Le défilement seul ne tranche
+// pas : un pied de page sous le pli est normal, un bouton sous le pli ne l'est
+// pas. Mesurée AVANT la famille responsive, qui redimensionne la fenêtre.
+if (active.has("pli")) {
+  const primarySelector = process.env.NF_BROWSER_PRIMARY ?? "";
+  measured.pli = await page.evaluate((selector) => {
+    const visible = (el) => {
+      const r = el.getBoundingClientRect();
+      const st = getComputedStyle(el);
+      return r.width > 0 && r.height > 0 && st.visibility !== "hidden";
+    };
+    let primary = null;
+    if (selector) {
+      primary = [...document.querySelectorAll(selector)].find(visible) ?? null;
+    } else {
+      // Le plus GRAND bouton de validation visible : un bouton « retour » est
+      // aussi de type submit, mais jamais le plus large.
+      let best = 0;
+      for (const el of document.querySelectorAll(
+        'button[type="submit"], input[type="submit"], button:not([type])',
+      )) {
+        if (!visible(el)) continue;
+        const r = el.getBoundingClientRect();
+        if (r.width * r.height > best) {
+          best = r.width * r.height;
+          primary = el;
+        }
+      }
+    }
+    const doc = document.scrollingElement ?? document.documentElement;
+    const view = { width: innerWidth, height: innerHeight };
+    const out = {
+      view: `${view.width}×${view.height}`,
+      pageHeight: doc.scrollHeight,
+      scrollPx: Math.max(0, doc.scrollHeight - view.height),
+      overflowXPx: Math.max(0, doc.scrollWidth - view.width),
+    };
+    if (primary === null) {
+      return {
+        ...out,
+        verdict: "ALERTE",
+        reason: "aucune action principale trouvée (NF_BROWSER_PRIMARY)",
+      };
+    }
+    const r = primary.getBoundingClientRect();
+    const bottom = Math.round(r.bottom + scrollY);
+    // Le BLOC principal : le plus grand ancêtre de l'action qui reste plus
+    // étroit que l'écran — une carte, une colonne de formulaire.
+    let frame = null;
+    for (
+      let el = primary.parentElement;
+      el && el !== document.body;
+      el = el.parentElement
+    ) {
+      const fr = el.getBoundingClientRect();
+      if (fr.width < view.width * 0.96) frame = el;
+    }
+    const fr = frame?.getBoundingClientRect();
+    const label = (primary.innerText || primary.value || "")
+      .trim()
+      .slice(0, 40);
+    const marginPx = view.height - bottom;
+    return {
+      ...out,
+      primary: { label, bottom, marginPx },
+      frame: fr
+        ? {
+            size: `${Math.round(fr.width)}×${Math.round(fr.height)}`,
+            widthShare: Math.round((fr.width / view.width) * 100),
+            heightShare: Math.round((fr.height / view.height) * 100),
+          }
+        : null,
+      verdict: marginPx < 0 || out.overflowXPx > 0 ? "ALERTE" : "OK",
+      ...(marginPx < 0
+        ? { reason: `défiler ${-marginPx} px pour atteindre « ${label} »` }
+        : out.overflowXPx > 0
+          ? { reason: `la page déborde de ${out.overflowXPx} px en largeur` }
+          : {}),
+    };
+  }, primarySelector);
+}
+
 // ── Capture — AVANT la famille responsive, qui déforme le viewport ──────────
-const slug = PAGE.replace(/\//g, "-").replace(/^-/, "") || "racine";
+const slug = captureSlug(PAGE);
 const shot = path.join(OUTPUT, `${slug}-${stamp}.png`);
 // `NF_BROWSER_FULLPAGE=1` : la page ENTIÈRE, pas la fenêtre. Un formulaire long
 // (ou une page qu'on vient de déplier) a l'essentiel SOUS la ligne de flottaison
@@ -905,6 +1021,8 @@ console.log(
       // Le navigateur qui a produit ces chiffres — un Chrome de système et le
       // Chromium du pilote n'ont pas la même version.
       browserName: decor.browserUsed,
+      // L'écran mesuré : une proportion sans son écran ne conclut rien.
+      viewport: `${decor.VIEWPORT.name}${decor.VIEWPORT.mobile ? " (téléphone)" : ""}`,
       ...measured,
       consoleErrors,
       uncaughtErrors,

package/skills/nodefony-browser/scripts/lib/browser.mjs

@@ -12,6 +12,7 @@
  * `@env` NF_BROWSER_LOGIN chemin du formulaire de connexion — REQUIS dès qu'un identifiant est donné, aucun défaut n'est deviné
  * `@env` NF_BROWSER_USER identifiant ; sans lui, aucune authentification n'est tentée
  * `@env` NF_BROWSER_PASSWORD mot de passe associé
+ * `@env` NF_BROWSER_WHOAMI chemin qui répond 2xx à une session authentifiée, et 401/403 ou un 2xx portant `{ user: null }` sinon — prouve une session reprise (défaut `/nodefony/security/api/auth/me` ; vide = aucune reprise)
  * `@env` NF_BROWSER_ENGINE navigateur imposé (chromium, chrome, msedge) ; sans lui, le premier qui répond
  * `@env` NF_BROWSER_COLOR_SCHEME schéma de couleurs émulé (light, dark, no-preference) ; sans lui, celui du navigateur
  * `@env` NF_BROWSER_STORAGE entrées de stockage local posées AVANT chargement (`clé=valeur`, séparées par des virgules)
@@ -22,8 +23,10 @@ import {
   environmentDefaults,
   authStateName,
   browserOrder,
+  sessionVerdict,
   parseColorScheme,
   parseStorage,
+  parseViewport,
 } from "./probes.mjs";
 
 /**
@@ -61,12 +64,38 @@ try {
  * en croyant que l'application est en panne.
  */
 const IN_CONTAINER = existsSync("/.dockerenv");
+/**
+ * La racine de l'application, pour ancrer `tmp/browser/` — par le sous-chemin
+ * léger du cœur (`nodefony/project-root`), et SEULEMENT hors conteneur :
+ * là-bas les sondes sont copiées seules, sans `nodefony`, et la sortie est le
+ * volume `/output`. Paquet introuvable → `null`, sortie relative au dossier
+ * courant.
+ */
+const APP_ROOT = IN_CONTAINER
+  ? null
+  : await import("nodefony/project-root").then(
+      (m) => m.findProjectRoot(process.cwd()),
+      () => null,
+    );
 const { base: baseUrl, out: OUT } = environmentDefaults({
   inContainer: IN_CONTAINER,
+  root: APP_ROOT,
   base: process.env.NF_BROWSER_BASE,
   out: process.env.NF_BROWSER_OUT,
 });
 
+/**
+ * L'écran mesuré (`NF_BROWSER_VIEWPORT`) — `bureau` (1 440 × 900) par défaut.
+ * Un nom inconnu est REFUSÉ (code 64) : mesurer sur un autre écran que celui
+ * demandé ferait conclure sur une page qu'on n'a pas regardée.
+ */
+const viewport = parseViewport(process.env.NF_BROWSER_VIEWPORT);
+if ("error" in viewport) {
+  console.error(`NF_BROWSER_VIEWPORT : ${viewport.error}`);
+  process.exit(64); // EX_USAGE
+}
+export const VIEWPORT = viewport;
+
 /** Où atterrissent captures et état d'authentification. */
 export const OUTPUT = OUT;
 export const BASE = baseUrl;
@@ -103,6 +132,15 @@ if (USER && !LOGIN) {
   process.exit(64); // EX_USAGE
 }
 
+/**
+ * Le point qui PROUVE qu'une session reprise est vivante : 2xx avec un `user`,
+ * `{ user: null }` (ou 401/403) sinon. Défaut : celui de `@nodefony/security`, présent dans toute
+ * application qui l'installe. Chaîne VIDE = rien pour prouver, donc aucune
+ * session n'est reprise — la sonde se connecte à chaque lancement.
+ */
+export const WHOAMI =
+  process.env.NF_BROWSER_WHOAMI ?? "/nodefony/security/api/auth/me";
+
 /**
  * L'état d'authentification, SAUVEGARDÉ puis réutilisé d'une sonde à l'autre.
  *
@@ -111,12 +149,15 @@ if (USER && !LOGIN) {
  * Sans lui, chaque inspection rejoue le parcours de connexion — quelques
  * secondes perdues et une occasion d'échec de plus à chaque exécution.
  *
- * Son nom porte l'IDENTIFIANT (cf {@link authStateName}) : un état est la session
+ * Son nom porte l'IDENTIFIANT et l'ORIGINE (cf {@link authStateName}) : un état est la session
  * de quelqu'un, et le réutiliser pour un autre compte fait mesurer une identité
  * qu'on n'a pas demandée. Effet de bord bienvenu — deux comptes gardent chacun
  * leur session, donc aucun des deux ne se reconnecte à cause de l'autre.
  */
-const STATE = path.join(OUT, authStateName(process.env.NF_BROWSER_USER));
+const STATE = path.join(
+  OUT,
+  authStateName(process.env.NF_BROWSER_USER, baseUrl),
+);
 // Créé AVANT la première écriture : en local, le dossier n'existe pas encore,
 // et l'échec ne surviendrait qu'à la sauvegarde — après la connexion, donc
 // après avoir fait croire que tout allait bien.
@@ -141,6 +182,8 @@ mkdirSync(OUT, { recursive: true });
 const { schema: COLOR_SCHEME, invalid: invalidScheme } = parseColorScheme(
   process.env.NF_BROWSER_COLOR_SCHEME,
 );
+/** Schéma de couleurs demandé, `null` sans demande — l'audit le pose aussi au moteur. */
+export { COLOR_SCHEME };
 if (invalidScheme) {
   console.error(
     `NF_BROWSER_COLOR_SCHEME inconnu : « ${invalidScheme} ».\n` +
@@ -201,7 +244,13 @@ export async function open() {
   }
   const options = {
     ignoreHTTPSErrors: true, // certificat de développement auto-signé
-    viewport: { width: 1440, height: 900 },
+    viewport: { width: VIEWPORT.width, height: VIEWPORT.height },
+    // Un écran de téléphone se dit TACTILE et dense : des pages en dépendent
+    // (`pointer: coarse`, `hover: none`), et une fenêtre étroite seule ne
+    // l'annoncerait pas.
+    ...(VIEWPORT.mobile
+      ? { isMobile: true, hasTouch: true, deviceScaleFactor: 2 }
+      : {}),
     ...(COLOR_SCHEME ? { colorScheme: COLOR_SCHEME } : {}),
   };
   let reuse = Boolean(USER) && existsSync(STATE);
@@ -220,6 +269,22 @@ export async function open() {
       reuse = false;
     }
   }
+  if (reuse && ctx) {
+    const why = await staleSessionReason(ctx);
+    if (why !== null) {
+      // Un contexte NEUF plutôt que des cookies effacés : le stockage local
+      // peut avoir mémorisé un identifiant, et le jeton anti-CSRF est lié à la
+      // session morte. La reprise se DIT — rejouée en silence, elle cacherait
+      // qu'il y avait quelque chose à rejouer.
+      console.error(
+        `Session reprise ${why} — l'état est jeté et le parcours de connexion est rejoué.`,
+      );
+      await ctx.close();
+      rmSync(STATE, { force: true });
+      ctx = null;
+      reuse = false;
+    }
+  }
   if (!ctx) ctx = await browser.newContext(options);
   if (STORAGE.length > 0) {
     // AVANT tout script de la page, et à CHAQUE navigation : une application
@@ -231,8 +296,7 @@ export async function open() {
     // prime sur ce qu'une session précédente avait laissé.
     await ctx.addInitScript((entries) => {
       try {
-        for (const { cle: key, valeur: value } of entries)
-          localStorage.setItem(key, value);
+        for (const { key, value } of entries) localStorage.setItem(key, value);
       } catch {
         // Stockage refusé (mode privé, origine opaque) : la sonde continue —
         // le thème sera celui par défaut, et la mesure le DIRA (champ `theme`).
@@ -242,6 +306,39 @@ export async function open() {
   return { browser, ctx, page: await ctx.newPage(), reuse };
 }
 
+/**
+ * Prouve qu'une session reprise est vivante, AVANT toute navigation.
+ *
+ * Sans cette preuve, la sonde ne constatait une session morte que si la page
+ * renvoyait vers le formulaire de connexion — ce qu'une page PUBLIQUE ne fait
+ * jamais : elle mesurait alors en anonyme, sans le dire.
+ *
+ * @param ctx - le contexte ouvert sur l'état repris (ses cookies servent la requête).
+ * @returns `null` si la session est prouvée vivante, sinon la raison de la jeter.
+ */
+async function staleSessionReason(ctx) {
+  if (WHOAMI === "") return "non prouvable (NF_BROWSER_WHOAMI vide)";
+  let status;
+  let body;
+  try {
+    const answer = await ctx.request.get(`${BASE}${WHOAMI}`, {
+      failOnStatusCode: false,
+      maxRedirects: 0,
+      timeout: 10000,
+    });
+    status = answer.status();
+    // Le corps dit l'anonymat quand le statut ne le dit pas (`{ user: null }`).
+    body = await answer.json().catch(() => undefined);
+  } catch (e) {
+    return `non prouvable (${WHOAMI} injoignable : ${String(e).split("\n")[0].slice(0, 120)})`;
+  }
+  const verdict = sessionVerdict(status, body);
+  if (verdict === "alive") return null;
+  return verdict === "dead"
+    ? `PÉRIMÉE (${WHOAMI} → ${status}${status < 300 ? ", user: null" : ""})`
+    : `non prouvable (${WHOAMI} → ${status}, attendu 2xx, ou 401/403 — NF_BROWSER_WHOAMI)`;
+}
+
 /**
  * Connexion par le formulaire, en deux temps (identifiant, puis mot de passe).
  *
@@ -301,7 +398,16 @@ export async function signIn(page, ctx) {
   }
   await pw.fill(PASSWORD, { timeout: 15000 });
   await pw.press("Enter");
-  await page.waitForURL((u) => !u.pathname.endsWith(LOGIN), { timeout: 20000 });
+  // Connexion aboutie = on a quitté l'écran de connexion, OU le formulaire a
+  // disparu. Le second cas est celui d'un fournisseur d'identité (OpenID
+  // Connect) : la page demandée renvoie chez lui, et il RAMÈNE sur cette même
+  // page — l'URL finit donc comme elle a commencé, et attendre de la quitter
+  // expirait sur une connexion réussie. Un mot de passe refusé laisse le champ
+  // en place : les deux attentes expirent, comme avant.
+  await Promise.any([
+    page.waitForURL((u) => !u.pathname.endsWith(LOGIN), { timeout: 20000 }),
+    pw.waitFor({ state: "detached", timeout: 20000 }),
+  ]);
   await ctx.storageState({ path: STATE });
 }