tracereports 0.3.0 → 0.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tracereports",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "TraceReports client for JavaScript/TypeScript: Playwright Test reporter and fixtures, Selenium WebDriver helpers and a client for any runner.",
   "keywords": [
     "testing",

package/src/index.js

@@ -22,12 +22,13 @@ import fs from "node:fs";
 import path from "node:path";
 import { detectBranch, detectCommit } from "./context.js";
 import { env } from "./env.js";
+import { screenshotAllowed } from "./mask.js";
 import { Recorder, newSessionDir } from "./offline.js";
 import { Mirror } from "./mirror.js";
 import { Sender } from "./transport.js";
 import { downloadBinary } from "./binary.js";
 
-export const VERSION = "0.3.0";
+export const VERSION = "0.4.0";
 const STATUSES = new Set(["INFO", "PASS", "FAIL", "WARNING", "SKIP"]);
 const truthy = (v) => ["1", "true", "yes"].includes(String(v || "").toLowerCase());
 
@@ -369,7 +370,8 @@ export class TraceTest {
    * base64 (Selenium `driver.takeScreenshot()`).
    */
   screenshot(image, message = "", status = "INFO") {
-    if (!this.active || !image) return;
+    // TRACEREPORTS_SCREENSHOTS=off|failures: la captura no se envía (ver mask.js)
+    if (!this.active || !image || !screenshotAllowed(status)) return;
     const data = typeof image === "string" ? Buffer.from(image, "base64") : Buffer.from(image);
     const boundary = `----tracereports${Math.random().toString(16).slice(2)}`;
     const part = (name, value) => `--${boundary}\r\nContent-Disposition: form-data; name="${name}"\r\n\r\n${value}\r\n`;

package/src/mask.js

@@ -0,0 +1,107 @@
+// Capturas sin datos sensibles: se tapan antes de capturar.
+//
+// - TRACEREPORTS_SCREENSHOT_MASK: selectores CSS a tapar (un grupo CSS: "input[name=rut], .tarjeta").
+// - Siempre se tapan input[type=password] y los elementos con el atributo data-tracereports-mask;
+//   TRACEREPORTS_SCREENSHOT_MASK_DEFAULTS=off lo desactiva.
+// - TRACEREPORTS_SCREENSHOTS: all (por defecto), failures (solo la captura de un paso FAIL) u off
+//   (ninguna). El servidor aplica la misma política por su cuenta.
+//
+// Playwright usa su opción nativa `mask`. Selenium no la tiene: se ponen recuadros del mismo color
+// sobre los elementos, se captura y se quitan, también si la captura falla, así el DOM queda igual.
+// Sin dependencias: lo importan index.js, playwright.js y selenium.js.
+
+import { env } from "./env.js";
+
+/** Lo que se tapa siempre (salvo TRACEREPORTS_SCREENSHOT_MASK_DEFAULTS=off). */
+export const DEFAULT_MASK = "input[type=password], [data-tracereports-mask]";
+/** Color de los recuadros: el mismo que usa Playwright por defecto. */
+export const MASK_COLOR = "#FF00FF";
+
+const OVERLAY_ATTR = "data-tracereports-mask-overlay";
+
+/** Nombre del attachment de Playwright con la captura al fallar ya tapada (la toman los fixtures). */
+export const MASKED_SHOT = "tracereports-screenshot";
+
+/** El grupo de selectores CSS a tapar ("" = nada). */
+export function maskSelector() {
+  const parts = [];
+  if (!["off", "0", "false", "no"].includes(String(env("SCREENSHOT_MASK_DEFAULTS") ?? "").trim().toLowerCase())) {
+    parts.push(DEFAULT_MASK);
+  }
+  const extra = String(env("SCREENSHOT_MASK") ?? "").trim().replace(/^,+|,+$/g, "").trim();
+  if (extra) parts.push(extra);
+  return parts.join(", ");
+}
+
+/** TRACEREPORTS_SCREENSHOTS: all, failures u off (un valor desconocido cuenta como all). */
+export function screenshotsPolicy() {
+  const v = String(env("SCREENSHOTS") ?? "").trim().toLowerCase();
+  return v === "failures" || v === "off" ? v : "all";
+}
+
+/** Si la política deja enviar una captura de un paso con este estado. */
+export function screenshotAllowed(status) {
+  const policy = screenshotsPolicy();
+  if (policy === "off") return false;
+  return policy === "all" || String(status).toUpperCase() === "FAIL";
+}
+
+/** `page.screenshot()` de Playwright con los elementos sensibles tapados (opción `mask`). */
+export function playwrightScreenshot(page, options = {}) {
+  const selector = maskSelector();
+  const opts = { ...options };
+  if (selector) {
+    opts.mask ??= [page.locator(selector)];
+    opts.maskColor ??= MASK_COLOR;
+  }
+  return page.screenshot(opts);
+}
+
+// Recuadros fijos sobre cada elemento visible del selector (la captura de Selenium es del viewport).
+const COVER_JS = `
+const [sel, color, attr] = arguments;
+let n = 0;
+for (const el of document.querySelectorAll(sel)) {
+  const r = el.getBoundingClientRect();
+  if (!r.width || !r.height) continue;
+  const d = document.createElement("div");
+  d.setAttribute(attr, "");
+  d.style.cssText = "position:fixed;left:" + r.left + "px;top:" + r.top + "px;width:" + r.width + "px;height:" + r.height + "px;" +
+    "background:" + color + ";z-index:2147483647;pointer-events:none;margin:0;padding:0;border:0";
+  document.documentElement.appendChild(d);
+  n++;
+}
+return n;
+`;
+
+const UNCOVER_JS = `for (const d of document.querySelectorAll("[" + arguments[0] + "]")) d.remove();`;
+
+/**
+ * Captura de Selenium (base64, lo que acepta `t.screenshot`) con los elementos sensibles tapados, o
+ * null si el navegador ya no responde. Los recuadros se quitan siempre; si no se pueden poner (un
+ * selector inválido) no se captura: mejor sin captura que sin máscara.
+ */
+export async function seleniumScreenshot(driver) {
+  const selector = maskSelector();
+  let covered = false;
+  try {
+    if (selector) {
+      try {
+        await driver.executeScript(COVER_JS, selector, MASK_COLOR, OVERLAY_ATTR);
+        covered = true;
+      } catch (err) {
+        console.warn(`tracereports: no se pudo tapar ${JSON.stringify(selector)} antes de la captura: ${err?.message ?? err}`);
+        return null;
+      }
+    }
+    return await driver.takeScreenshot();
+  } catch {
+    return null;
+  } finally {
+    if (covered) {
+      try {
+        await driver.executeScript(UNCOVER_JS, OVERLAY_ATTR);
+      } catch { /* el navegador ya no responde */ }
+    }
+  }
+}

package/src/mirror.js

@@ -17,7 +17,7 @@ export class Mirror {
     this.closed = false;
     this.disabled = false;
     this.active = 0;
-    fs.mkdirSync(directory, { recursive: true });
+    fs.mkdirSync(directory, { recursive: true, mode: 0o700 });
     this.locked(() => {
       const marker = path.join(directory, MARKER);
       if (fs.existsSync(marker) && JSON.parse(fs.readFileSync(marker)).raw_removed) throw new Error("la carpeta solo contiene el reporte; usa otra carpeta");
@@ -33,7 +33,7 @@ export class Mirror {
       const mapping = path.join(directory, "ids", `server-${runId}`);
       if (payload) {
         local = this.recorder.record("POST", "/api/v1/runs", JSON.stringify(payload), "application/json").run_id;
-        fs.writeFileSync(mapping, String(local), { flag: "wx" });
+        fs.writeFileSync(mapping, String(local), { flag: "wx", mode: 0o600 });
         m.mirror.runs.push({ local, server: runId });
         this.write(MARKER, m);
       } else {
@@ -52,7 +52,7 @@ export class Mirror {
   locked(fn) {
     const lock = path.join(this.directory, ".mirror-lock");
     for (let n = 0; ; n++) {
-      try { fs.mkdirSync(lock); break; } catch (err) {
+      try { fs.mkdirSync(lock, { mode: 0o700 }); break; } catch (err) {
         if (err.code !== "EEXIST") throw err;
         if (n >= 50) {
           let stale = false;
@@ -70,7 +70,7 @@ export class Mirror {
   write(name, value) {
     const dest = path.join(this.directory, name), tmp = `${dest}.${randomUUID()}.tmp`;
     try {
-      fs.writeFileSync(tmp, JSON.stringify(value));
+      fs.writeFileSync(tmp, JSON.stringify(value), { mode: 0o600 });
       try { fs.renameSync(tmp, dest); }
       catch (err) {
         // Windows can reject a replacement rename even while this process owns the lock.

package/src/offline.js

@@ -42,10 +42,11 @@ export class Recorder {
     this.nextId = 0;
     this.block = 0;
     this.tag = randomUUID().slice(0, 8);
-    fs.mkdirSync(path.join(directory, "bodies"), { recursive: true });
+    // la grabación lleva la evidencia sin redactar (eso lo hace el servidor): solo para el usuario
+    fs.mkdirSync(path.join(directory, "bodies"), { recursive: true, mode: 0o700 });
     try {
       fs.writeFileSync(path.join(directory, MARKER),
-        JSON.stringify({ format: "tracereports-offline", version: FORMAT_VERSION, id: randomUUID().replace(/-/g, "") }), { flag: "wx" });
+        JSON.stringify({ format: "tracereports-offline", version: FORMAT_VERSION, id: randomUUID().replace(/-/g, "") }), { flag: "wx", mode: 0o600 });
     } catch (err) {
       if (err.code !== "EEXIST") throw err; // otro proceso ya lo creó
     }
@@ -64,11 +65,11 @@ export class Recorder {
 
   reserveBlock() {
     const ids = path.join(this.directory, "ids");
-    fs.mkdirSync(ids, { recursive: true });
+    fs.mkdirSync(ids, { recursive: true, mode: 0o700 });
     for (let i = 0; i < 100; i++) {
       const block = randomInt(MIN_BLOCK, MAX_BLOCK);
       try {
-        fs.writeFileSync(path.join(ids, String(block)), "", { flag: "wx" });
+        fs.writeFileSync(path.join(ids, String(block)), "", { flag: "wx", mode: 0o600 });
         return block;
       } catch (err) {
         if (err.code !== "EEXIST") throw err; // ya es de otro grabador: se prueba otro
@@ -91,7 +92,7 @@ export class Recorder {
     if (parsed !== undefined) event.body = parsed;
     else {
       const name = `bodies/${process.pid}-${this.tag}-${this.seq}.bin`;
-      fs.writeFileSync(path.join(this.directory, name), body ?? "");
+      fs.writeFileSync(path.join(this.directory, name), body ?? "", { mode: 0o600 });
       event.body_file = name;
     }
     let res = {};
@@ -99,7 +100,7 @@ export class Recorder {
     else if (method === "POST" && apiPath.startsWith("/api/v1/runs/") && apiPath.endsWith("/tests")) res = { test_id: this.localId() };
     const id = res.run_id ?? res.test_id;
     if (id) event.local_id = id;
-    fs.appendFileSync(this.file, JSON.stringify(event) + "\n"); // síncrono: si el proceso muere, lo escrito queda
+    fs.appendFileSync(this.file, JSON.stringify(event) + "\n", { mode: 0o600 }); // síncrono: si el proceso muere, lo escrito queda
     this.stats.recorded++;
     return res;
   }

package/src/playwright.js

@@ -14,14 +14,18 @@
 //     navegador, no los logs del backend);
 //   - captura la consola: console.error, console.warn y los errores de JavaScript sin manejar
 //     (pestaña "Consola");
-//   - si el test falla: snapshot del DOM (recomendador de locators) y una captura si el proyecto
-//     no tiene `screenshot: "only-on-failure"`.
+//   - si el test falla: snapshot del DOM (recomendador de locators) y una captura con los datos
+//     sensibles tapados (ver mask.js); el reporter la sube en vez de la de `screenshot:
+//     "only-on-failure"`, que Playwright toma sin máscara.
 // Todo viaja como attachments del test; el reporter `tracereports/reporter` los sube.
 
 import { createRequire } from "node:module";
 import path from "node:path";
 import { pathToFileURL } from "node:url";
 import { domSnapshotInPage } from "./dom.js";
+import { MASKED_SHOT, playwrightScreenshot, screenshotsPolicy } from "./mask.js";
+
+export { MASKED_SHOT, playwrightScreenshot };
 
 // @playwright/test se carga desde el proyecto que corre los tests: así hay una sola copia aunque
 // este paquete esté instalado como enlace (npm install ../tracereports/client/js).
@@ -169,11 +173,11 @@ const fixtures = {
     if (testInfo.status !== testInfo.expectedStatus) {
       const snap = await captureDom(page);
       if (snap) await testInfo.attach("tracereports-dom", { body: JSON.stringify(snap), contentType: "application/json" });
-      const mode = testInfo.project.use?.screenshot;
-      const auto = mode === "on" || mode === "only-on-failure" || mode?.mode === "on" || mode?.mode === "only-on-failure";
-      if (!auto) {
+      // siempre la captura tapada: la automática de Playwright (screenshot: "only-on-failure") no se
+      // puede tapar, y el reporter la reemplaza por esta
+      if (screenshotsPolicy() !== "off") {
         try {
-          await testInfo.attach("Captura al fallar", { body: await page.screenshot({ timeout: 5000 }), contentType: "image/png" });
+          await testInfo.attach(MASKED_SHOT, { body: await playwrightScreenshot(page, { timeout: 5000 }), contentType: "image/png" });
         } catch { /* la página puede estar cerrada */ }
       }
     }

package/src/reporter.js

@@ -23,6 +23,7 @@ import fs from "node:fs";
 import path from "node:path";
 import { env } from "./env.js";
 import { TraceReports } from "./index.js";
+import { MASKED_SHOT, screenshotAllowed, screenshotsPolicy } from "./mask.js";
 
 const ANSI = /\u001b\[[0-9;]*m/g;
 const truthy = (v) => ["1", "true", "yes"].includes(String(v || "").toLowerCase());
@@ -131,17 +132,25 @@ export default class TraceReportsReporter {
       }));
       for (const l of [...steps, ...logs].sort((a, b) => a.timestamp - b.timestamp)) ct.log(l.status, l.message, l.timestamp);
 
+      // la captura automática de Playwright no viene tapada: si los fixtures dejaron la suya, va esa
+      const masked = result.attachments.some((a) => a.name === MASKED_SHOT);
+      // trace y video muestran la pantalla: siguen TRACEREPORTS_SCREENSHOTS
+      const policy = screenshotsPolicy();
+      const artifacts = policy === "all" || (policy === "failures" && unexpected);
       for (const att of result.attachments) {
+        if (att.name === "screenshot" && masked) continue;
+        const isImage = att.contentType?.startsWith("image/");
+        if (isImage && !screenshotAllowed(unexpected ? "FAIL" : "INFO")) continue;
         const body = att.body ?? (att.path && fs.existsSync(att.path) ? fs.readFileSync(att.path) : null);
         if (!body) continue;
         if (att.name === "tracereports-network") ct.network(JSON.parse(body.toString()));
         else if (att.name === "tracereports-dom") ct.dom(JSON.parse(body.toString()));
         else if (att.name === "tracereports-console") ct.console(JSON.parse(body.toString()));
-        else if (att.contentType?.startsWith("image/")) ct.screenshot(body, att.name === "screenshot" ? "Captura al fallar" : att.name,
+        else if (isImage) ct.screenshot(body, att.name === "screenshot" || att.name === MASKED_SHOT ? "Captura al fallar" : att.name,
           unexpected ? "FAIL" : "INFO");
         // trace: "on" / "retain-on-failure" / "on-first-retry"; video: lo mismo en use.video
-        else if (att.name === "trace" && att.contentType === "application/zip") ct.artifact("trace", body, `trace-${result.retry + 1}.zip`);
-        else if (att.contentType?.startsWith("video/")) ct.artifact("video", body, att.name === "video" ? `video-${result.retry + 1}` : att.name);
+        else if (att.name === "trace" && att.contentType === "application/zip") { if (artifacts) ct.artifact("trace", body, `trace-${result.retry + 1}.zip`); }
+        else if (att.contentType?.startsWith("video/")) { if (artifacts) ct.artifact("video", body, att.name === "video" ? `video-${result.retry + 1}` : att.name); }
       }
       const final = asExpected || skipped || result.retry >= test.retries;
       if (!final) {

package/src/selenium.js

@@ -25,6 +25,7 @@
 // página navegara puede no estar ya disponible; el resto de la llamada sí.
 
 import { DOM_SCRIPT } from "./dom.js";
+import { seleniumScreenshot } from "./mask.js";
 
 const LOG_PREFS = { performance: "ALL", browser: "ALL" };
 const BODY_TYPES = new Set(["xhr", "fetch"]);
@@ -39,15 +40,16 @@ export function seleniumOptions(options) {
   return options;
 }
 
-/** Captura de pantalla como base64 (lo que acepta `t.screenshot`), o null. */
+/**
+ * Captura de pantalla como base64 (lo que acepta `t.screenshot`) con los datos sensibles tapados
+ * (ver mask.js), o null.
+ */
 export async function screenshot(driver) {
-  try {
-    return await driver.takeScreenshot();
-  } catch {
-    return null;
-  }
+  return seleniumScreenshot(driver);
 }
 
+export { seleniumScreenshot };
+
 /** Snapshot de los elementos de la página, o null si el navegador ya no responde. */
 export async function captureDom(driver) {
   try {