@capillarytech/cap-ui-utils 3.2.0-beta.0 → 3.2.0-beta.2

package/e2e/README.md

@@ -36,7 +36,7 @@ Only helpers that are **self-contained and free of per-repo test data**:
 | Misc infra | `utils/debugModeUtil`, `utils/featureFlagUtil`, `utils/automationBypassUtil`, `utils/deletionRegistry`, `utils/htmlEditorUtil`, `utils/virtualListUtil`, `utils/unmatchedBracesUtil`, `utils/uploaders/*` |
 | Services | `services/lockService`, `services/locks/*` |
 | Config | `constants/common` (waits, log markers, `maxLoginAttempts`) |
-| Playwright (phase 2) | `playwright/reporter`, `playwright/config`, `playwright/login`, `playwright/waits` |
+| Playwright (phase 2) | `playwright/reporter`, `playwright/config`, `playwright/login`, `playwright/waits`, `playwright/logCollector` |
 
 ## Playwright toolkit (phase 2 — coexistence)
 
@@ -57,6 +57,13 @@ import { waitForApi } from '@capillarytech/cap-ui-utils/e2e/playwright/waits';
 - **`playwright/reporter`** — emits `reports/html-reports/master-report.html` (same
   path/shape the WDIO reporter produced) so `supervisor.py`'s `generateReport()` →
   Apitester pipeline is unchanged. Referenced by path via `require.resolve`.
+  Retries are de-duplicated (last attempt wins → WDIO test-count parity), failure
+  screenshots are inlined into the report (parity with WDIO's `logScreenshot` on
+  error), and each test's FINAL result is POSTed to the in-pod log_collector via
+  `playwright/logCollector` — the same per-test feed WDIO's `afterTest` sent.
+- **`playwright/logCollector`** — per-test POST to `http://127.0.0.1:4000/logger`
+  with the exact WDIO payload (`status` / `time` / `validataionMessage` / `total`,
+  keyed runId → suite → test). Non-fatal on any failure; honours `skipLogCollector`.
 - **`playwright/config`** — `createPlaywrightConfig()` wires the reporter, selects the
   suite via `SUITE` → `@<suite>` grep (mirrors `wdio --suite`), and sets pod-friendly
   defaults (headless chromium, trace/screenshot on failure, retries).

package/e2e/playwright/debugRecorder.js

@@ -0,0 +1,167 @@
+"use strict";
+/**
+ * Playwright FULL_DEBUG_MODE recorders — phase-2 parity with the WDIO debug bundle.
+ *
+ * Reproduces, engine-natively, the two artifact sets the WDIO
+ * screenshotRecorderUtil + requestRecorderService produce, at the SAME paths so
+ * the zip-compare tooling is unchanged:
+ *
+ *   reports/debug/screenshots/<module>/<test>/NNN_click.png  (+ steps.json)
+ *   reports/debug/request-payloads/<module>/<test>.json
+ *
+ * Gated by the shared debugMode util (FULL_DEBUG_MODE=true [+ optional
+ * DEBUG_MODULES]); a no-op otherwise, so zero overhead when off.
+ *
+ *   import { installDebugRecorders } from '@capillarytech/cap-ui-utils/e2e/playwright/debugRecorder';
+ *   const rec = await installDebugRecorders(page, { module, testTitle, baseURL });
+ *   ... run test ...
+ *   await rec.flush();   // in fixture teardown
+ *
+ * Notes on WDIO parity:
+ * - screenshots: WDIO captured after every `click` command; we hook real DOM
+ *   clicks (capture phase) so programmatic PW clicks count too, then settle +
+ *   full-page screenshot, dropping byte-identical duplicates (same as WDIO).
+ * - request payloads: WDIO recorded POST/PATCH/PUT/DELETE to the app host via CDP;
+ *   we use page.on('request') (no CDP needed). Initiator JS stack isn't available
+ *   via the PW request API, so `initiator` is null (only field that differs).
+ */
+const fs = require("fs");
+const path = require("path");
+const debugMode = require("../utils/debugModeUtil").default;
+
+const RECORDED_METHODS = ["POST", "PATCH", "PUT", "DELETE"];
+const SETTLE_MS = Number(process.env.FULL_DEBUG_SCREENSHOT_DELAY_MS) || 500;
+const CAPTURE_TIMEOUT_MS = Number(process.env.FULL_DEBUG_SCREENSHOT_TIMEOUT_MS) || 8000;
+
+function safeName(s) {
+  // Drop the leading suite tag (e.g. "@smoke ") so the folder matches the WDIO
+  // it()-title naming (smoke_garudaUI_analytics_KPI_visibility).
+  return String(s || "unknown_test").replace(/^@\w+\s+/, "").replace(/[^\w.-]+/g, "_");
+}
+function hostOf(u) {
+  try { return new URL(u).host; } catch (_) { return ""; }
+}
+
+class PwDebugRecorder {
+  constructor(page, opts = {}) {
+    this.page = page;
+    this.enabled = debugMode.isCaptureEnabled();
+    this.module = opts.module || process.env.module || "unknown";
+    this.testTitle = safeName(opts.testTitle);
+    this.baseHost = hostOf(opts.baseURL || process.env.INTOUCH_URL || "");
+    this.requests = [];
+    this.steps = [];
+    this.counter = 0;
+    this.lastImage = null;
+    this.chain = Promise.resolve();
+    const root = path.join(process.cwd(), "reports", "debug");
+    this.ssDir = path.join(root, "screenshots", this.module, this.testTitle);
+    this.rpDir = path.join(root, "request-payloads", this.module);
+  }
+
+  async install() {
+    if (!this.enabled) return this;
+
+    // --- request payloads (POST/PATCH/PUT/DELETE to the app host) ---
+    this.page.on("request", (req) => {
+      try {
+        const method = req.method();
+        if (!RECORDED_METHODS.includes(method)) return;
+        const url = req.url();
+        if (this.baseHost && !url.includes(this.baseHost)) return;
+        this.requests.push({
+          method,
+          url,
+          timestamp: new Date().toISOString(),
+          postData: req.postData() || null,
+          headers: req.headers(),
+          resourceType: req.resourceType(),
+          initiator: null, // JS initiator stack not exposed by the PW request API
+        });
+      } catch (_) { /* never let recording break the run */ }
+    });
+
+    // --- screenshot after every click ---
+    await this.page.exposeFunction("__capOnClick", (info) => {
+      // Serialize captures so rapid clicks don't overlap screenshots.
+      this.chain = this.chain.then(() => this._capture(info)).catch(() => {});
+    });
+    const inject = () => {
+      // eslint-disable-next-line no-undef
+      if (window.__capClickHooked) return;
+      // eslint-disable-next-line no-undef
+      window.__capClickHooked = true;
+      // eslint-disable-next-line no-undef
+      document.addEventListener(
+        "click",
+        (e) => {
+          try {
+            const t = e.target;
+            // eslint-disable-next-line no-undef
+            window.__capOnClick &&
+              window.__capOnClick({
+                tag: t && t.tagName,
+                text: ((t && t.innerText) || "").trim().slice(0, 40),
+              });
+          } catch (_) { /* ignore */ }
+        },
+        true // capture phase — fires even if a handler stops propagation
+      );
+    };
+    await this.page.addInitScript(inject);          // future navigations / SPA reloads
+    await this.page.evaluate(inject).catch(() => {}); // the already-loaded document
+    return this;
+  }
+
+  async _capture(info) {
+    const clickTime = new Date().toISOString();
+    await this.page.waitForTimeout(SETTLE_MS).catch(() => {}); // let the click settle (WDIO parity)
+    let buf;
+    try {
+      buf = await this.page.screenshot({ fullPage: true, timeout: CAPTURE_TIMEOUT_MS });
+    } catch (_) {
+      return; // a mid-navigation screenshot can fail; never block the run
+    }
+    if (this.lastImage && buf.equals(this.lastImage)) return; // drop byte-identical duplicate
+    this.lastImage = buf;
+    this.counter += 1;
+    const file = String(this.counter).padStart(3, "0") + "_click.png";
+    try {
+      fs.mkdirSync(this.ssDir, { recursive: true });
+      fs.writeFileSync(path.join(this.ssDir, file), buf);
+      this.steps.push({ step: this.counter, file, command: "click", clickTime, target: (info && info.tag) || null });
+    } catch (_) { /* ignore */ }
+  }
+
+  /** Drain pending screenshots, then write steps.json + the request-payloads file. */
+  async flush() {
+    if (!this.enabled) return;
+    await this.chain.catch(() => {});
+    try {
+      if (this.steps.length) {
+        fs.mkdirSync(this.ssDir, { recursive: true });
+        fs.writeFileSync(path.join(this.ssDir, "steps.json"), JSON.stringify(this.steps, null, 2));
+      }
+    } catch (_) { /* ignore */ }
+    try {
+      fs.mkdirSync(this.rpDir, { recursive: true });
+      const payload = {
+        test: this.testTitle,
+        module: this.module,
+        recordedAt: new Date().toISOString(),
+        requestCount: this.requests.length,
+        requests: this.requests,
+      };
+      fs.writeFileSync(path.join(this.rpDir, this.testTitle + ".json"), JSON.stringify(payload, null, 2));
+    } catch (_) { /* ignore */ }
+  }
+}
+
+async function installDebugRecorders(page, opts = {}) {
+  const rec = new PwDebugRecorder(page, opts);
+  await rec.install();
+  return rec;
+}
+
+module.exports = { installDebugRecorders, PwDebugRecorder };
+module.exports.default = { installDebugRecorders };

package/e2e/playwright/index.js

@@ -9,10 +9,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const config_1 = require("./config");
 const login_1 = require("./login");
 const waits_1 = require("./waits");
+const logCollector_1 = require("./logCollector");
 
 exports.createPlaywrightConfig = config_1.createPlaywrightConfig;
 exports.doLogin = login_1.doLogin;
 exports.waitForApi = waits_1.waitForApi;
 exports.clickAndWaitForApi = waits_1.clickAndWaitForApi;
 exports.waitForApiIdle = waits_1.waitForApiIdle;
+exports.collectLogs = logCollector_1.collectLogs;
 exports.reporterPath = require.resolve("./reporter");

package/e2e/playwright/logCollector.js

@@ -0,0 +1,115 @@
+"use strict";
+/**
+ * Per-test log_collector feed — Playwright port of e2e/utils/logCollectorUtil.
+ *
+ * CONTRACT (owned by wdio-ui-automation + the in-pod log_collector daemon):
+ * one POST per executed test to http://127.0.0.1:4000/logger with EXACTLY the
+ * payload the WDIO util sends — Apitester reads these rows keyed by runId:
+ *
+ *   { "result": { [runId]: { [suiteName]: { [testTitle]: {
+ *       "status": "passed" | "failed" | "skipped",
+ *       "time": "<seconds, stringified>",
+ *       "validataionMessage": "<error text, ANSI-stripped>",  // typo IS the contract
+ *       "total": <running count of posted tests> } } } } }
+ *
+ * Behaviour parity with the WDIO util:
+ *  - passed/skipped -> empty validataionMessage
+ *  - failed with no error object -> "cannot capture error"
+ *  - error text stripped of ANSI escape sequences (same regex)
+ *  - 10s deadline; a POST failure NEVER fails the run (collector absent locally)
+ *  - skipLogCollector env short-circuits (pod semantics, avoids local noise)
+ *
+ * Zero-dependency (node http) so it adds nothing to any consumer's install graph.
+ */
+const http = require("http");
+
+const LOG_COLLECTOR_HOST = "127.0.0.1";
+const LOG_COLLECTOR_PORT = 4000;
+const LOG_COLLECTOR_PATH = "/logger";
+const DEADLINE_MS = 10000;
+
+// Same strip pattern as e2e/utils/logCollectorUtil.js
+const ANSI_RE = /[\u001b\u009b][[()#;?]*(?:[0-9]{1,4}(?:;[0-9]{0,4})*)?[0-9A-ORZcf-nqry=><]/g;
+
+let callCount = 0;
+
+function skipCollector() {
+    return ["1", "true", "yes"].includes(String(process.env.skipLogCollector || "").toLowerCase());
+}
+
+function post(payload) {
+    return new Promise((resolve, reject) => {
+        const body = JSON.stringify(payload);
+        const req = http.request(
+            {
+                host: LOG_COLLECTOR_HOST,
+                port: LOG_COLLECTOR_PORT,
+                path: LOG_COLLECTOR_PATH,
+                method: "POST",
+                headers: {
+                    "Content-Type": "application/json",
+                    "Content-Length": Buffer.byteLength(body),
+                },
+                timeout: DEADLINE_MS,
+            },
+            (res) => {
+                let data = "";
+                res.on("data", (c) => { data += c; });
+                res.on("end", () => {
+                    console.log("API Response", data);
+                    resolve(undefined);
+                });
+            }
+        );
+        req.on("timeout", () => req.destroy(new Error(`deadline of ${DEADLINE_MS}ms exceeded`)));
+        req.on("error", reject);
+        req.write(body);
+        req.end();
+    });
+}
+
+/**
+ * POST one test result. Mirrors logCollectorUtil.collectLogs(runId, test, error, ...).
+ * @param {string} runId          process.env.runId
+ * @param {string} suiteName      WDIO used test.parent (the describe title)
+ * @param {string} testTitle      the test title
+ * @param {"passed"|"failed"|"skipped"} status  final-attempt outcome
+ * @param {number} durationMs
+ * @param {string|undefined} errorMessage
+ */
+async function collectLogs(runId, suiteName, testTitle, status, durationMs, errorMessage) {
+    if (skipCollector()) return;
+    callCount += 1;
+
+    let validataionMessage = "";
+    if (status === "failed") {
+        validataionMessage = errorMessage == null
+            ? "cannot capture error"
+            : String(errorMessage).replace(ANSI_RE, "");
+    }
+
+    const exeTime = (durationMs || 0) / 1000;
+    const message = {
+        [runId]: {
+            [suiteName]: {
+                [testTitle]: {
+                    status,
+                    time: exeTime.toString(),
+                    validataionMessage,
+                    total: callCount,
+                },
+            },
+        },
+    };
+
+    try {
+        await post({ result: message });
+    } catch (err) {
+        // The in-pod collector can be slow or absent; never fail the test run.
+        console.log("logCollector POST failed (non-fatal):", err && err.message);
+    }
+    console.log("Message", JSON.stringify(message));
+}
+
+module.exports = { collectLogs };
+module.exports.default = { collectLogs };

package/e2e/playwright/reporter.js

@@ -14,6 +14,11 @@
  */
 const fs = require("fs");
 const path = require("path");
+const { collectLogs } = require("./logCollector");
+
+// Cap on inlined failure screenshots per test (base64 inflates ~4/3; the report
+// must stay POST-able to log_collector).
+const MAX_SHOT_BYTES_PER_TEST = 3 * 1024 * 1024;
 
 function esc(s) {
     return String(s == null ? "" : s)
@@ -35,7 +40,13 @@ class CapPlaywrightReporter {
         this.outputFile = options.outputFile ||
             path.resolve(process.cwd(), "reports", "html-reports", "master-report.html");
         this.title = options.title || "E2E Report (Playwright)";
-        this.results = [];
+        // Keyed by stable test identity so RETRIES don't inflate the count — the
+        // last attempt wins (final outcome). A flaky test that passes on retry
+        // counts as ONE passed. Critical for "same number of tests" parity with
+        // the WDIO suites (verified live: without this, 5 tests reported as 6).
+        this.byTest = new Map();
+        // In-flight log_collector POSTs — awaited in onEnd so none are lost.
+        this._pending = [];
         this.startedAt = Date.now();
     }
 
@@ -45,18 +56,65 @@ class CapPlaywrightReporter {
         this._module = process.env.module || process.env.E2E_MODULE || "";
     }
 
+    /** WDIO's collectLogs used test.parent (the describe title); nearest non-empty ancestor here. */
+    _suiteNameOf(test) {
+        for (let s = test.parent; s; s = s.parent) {
+            if (s.title) return s.title;
+        }
+        return this._module || "suite";
+    }
+
+    /** Inline failure screenshots (PW attachments) as data URIs, size-capped. */
+    _screenshotsOf(result) {
+        const shots = [];
+        let budget = MAX_SHOT_BYTES_PER_TEST;
+        for (const a of result.attachments || []) {
+            if (!a || a.contentType !== "image/png") continue;
+            if (!/screenshot/i.test(a.name || "")) continue;
+            try {
+                const buf = a.body || (a.path && fs.readFileSync(a.path));
+                if (!buf || buf.length > budget) continue;
+                budget -= buf.length;
+                shots.push(`data:image/png;base64,${Buffer.from(buf).toString("base64")}`);
+            } catch (e) { /* attachment unreadable — skip, never fail reporting */ }
+        }
+        return shots;
+    }
+
     onTestEnd(test, result) {
-        this.results.push({
-            title: (typeof test.titlePath === "function" ? test.titlePath() : [test.title])
-                .filter(Boolean).join(" › "),
-            status: result.status, // passed | failed | timedOut | skipped | interrupted
+        // titlePath is stable across retry attempts (test.id proved not to be).
+        const titleParts = (typeof test.titlePath === "function" ? test.titlePath() : [test.title])
+            .filter(Boolean);
+        const key = titleParts.join(" › ");
+        const status = result.status === "passed" ? "passed"
+            : result.status === "skipped" ? "skipped"
+            : "failed"; // failed | timedOut | interrupted
+        const errorMessage = result.error && (result.error.message || String(result.error));
+
+        // Last attempt wins (final outcome) — overwrites earlier retries.
+        this.byTest.set(key, {
+            title: key,
+            status: result.status,
             duration: result.duration,
             retry: result.retry,
-            error: result.error && (result.error.message || String(result.error)),
+            error: errorMessage,
+            screenshots: status === "failed" ? this._screenshotsOf(result) : [],
         });
+
+        // log_collector CONTRACT (same feed WDIO's afterTest sent): one POST per
+        // test, on its FINAL attempt only (a will-be-retried failure is not final).
+        const isFinal = status !== "failed" || result.retry >= ((test.retries != null ? test.retries : 0));
+        if (isFinal) {
+            const runId = process.env.runId || "NA";
+            this._pending.push(
+                collectLogs(runId, this._suiteNameOf(test), test.title, status, result.duration, errorMessage)
+                    .catch(() => { /* never fail the run on logging */ })
+            );
+        }
     }
 
-    onEnd(result) {
+    async onEnd(result) {
+        this.results = Array.from(this.byTest.values());
         const counts = { passed: 0, failed: 0, skipped: 0, flaky: 0 };
         for (const r of this.results) {
             if (r.status === "passed") counts.passed++;
@@ -78,6 +136,9 @@ class CapPlaywrightReporter {
         // Also echo a plain summary to stdout so it lands in the Apitester log.
         console.log(`[cap-pw-reporter] SUITE=${this._suite} module=${this._module} ` +
             `total=${total} passed=${counts.passed} failed=${counts.failed} skipped=${counts.skipped} overall=${overall}`);
+
+        // Flush per-test log_collector POSTs before the runner tears down.
+        await Promise.allSettled(this._pending);
     }
 
     _statusPill(status) {
@@ -96,7 +157,9 @@ class CapPlaywrightReporter {
         <td>${this._statusPill(r.status)}</td>
         <td class="title">${esc(r.title)}${r.retry ? ` <span class="retry">(retry ${r.retry})</span>` : ""}</td>
         <td class="dur">${fmtDuration(r.duration)}</td>
-        <td class="err">${r.error ? `<pre>${esc(r.error)}</pre>` : ""}</td>
+        <td class="err">${r.error ? `<pre>${esc(r.error)}</pre>` : ""}${
+            (r.screenshots || []).map((s) => `<img class="shot" src="${s}" alt="failure screenshot"/>`).join("")
+        }</td>
       </tr>`).join("");
 
         const overallColor = overall === "passed" ? "#1B7A1B" : "#B00020";
@@ -125,6 +188,7 @@ class CapPlaywrightReporter {
   .retry{color:#8a6d00;font-size:11px}
   tr.failed td.title{font-weight:600}
   pre{margin:0;white-space:pre-wrap;font-size:12px;color:#B00020;max-height:200px;overflow:auto}
+  img.shot{display:block;max-width:520px;margin-top:8px;border:1px solid #dde3ea;border-radius:4px}
   .foot{color:#889;font-size:12px;margin-top:14px}
 </style>
 </head>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@capillarytech/cap-ui-utils",
-  "version": "3.2.0-beta.0",
+  "version": "3.2.0-beta.2",
   "publishConfig": {
     "access": "public"
   },
@@ -30,20 +30,10 @@
     "nanoid": ">=3"
   },
   "peerDependenciesMeta": {
-    "webdriverio": {
-      "optional": true
-    },
-    "@rpii/wdio-commands": {
-      "optional": true
-    },
-    "axios": {
-      "optional": true
-    },
-    "supertest": {
-      "optional": true
-    },
-    "nanoid": {
-      "optional": true
-    }
+    "webdriverio": { "optional": true },
+    "@rpii/wdio-commands": { "optional": true },
+    "axios": { "optional": true },
+    "supertest": { "optional": true },
+    "nanoid": { "optional": true }
   }
 }