@capillarytech/cap-ui-utils 3.2.0-beta.1 → 3.2.0-beta.3

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,18 @@ 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/apiFailureLogger`** — logs every same-origin API response outside
+  2xx (response + request headers) and network-level request failures, with the
+  same wording as the WDIO CDP interceptor (`API <url> errored with status: ...`,
+  `Following request headers were sent for failed request`). Auto-attached by
+  `doLogin()`; also exported standalone as `attachApiFailureLogger(page, {baseUrl})`.
 - **`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/apiFailureLogger.js

@@ -0,0 +1,58 @@
+"use strict";
+/**
+ * Failed-API logger — Playwright port of the WDIO base-conf network interceptor
+ * (test/wdio.conf.ts `Network.responseReceived` block): every SAME-ORIGIN API
+ * response outside 2xx is logged with its response + request headers, and
+ * network-level request failures (refused/aborted/DNS) are logged too.
+ *
+ * The lines go to stdout, which supervisor.py captures and ships to Apitester —
+ * and they use the SAME wording as the WDIO interceptor so existing debugging
+ * habits and log greps keep working:
+ *
+ *   API <url> errored with status: <status> with following response headers:
+ *   { ...response headers... }
+ *   Following request headers were sent for failed request { ...request headers... }
+ *
+ * Auto-attached by doLogin() for every consumer (mirrors WDIO's always-on base
+ * conf). Idempotent per page. Logging must never fail the run.
+ */
+
+const attached = new WeakSet();
+
+function attachApiFailureLogger(page, opts = {}) {
+    if (!page || typeof page.on !== "function" || attached.has(page)) return;
+    attached.add(page);
+
+    // Same-origin filter — WDIO used cons['url'] (the intouch base URL).
+    const base = String(opts.baseUrl || process.env.INTOUCH_URL || "");
+
+    page.on("response", (response) => {
+        Promise.resolve()
+            .then(async () => {
+                const url = response.url();
+                if (base && !url.startsWith(base)) return;
+                const status = response.status();
+                if (status >= 200 && status <= 299) return;
+                const respHeaders = await response.allHeaders().catch(() => response.headers());
+                console.log(`API ${url} errored with status: ${status} with following response headers:`);
+                console.log(respHeaders);
+                console.log("Following request headers were sent for failed request", response.request().headers());
+            })
+            .catch(() => { /* logging must never fail the run */ });
+    });
+
+    page.on("requestfailed", (request) => {
+        try {
+            const url = request.url();
+            if (base && !url.startsWith(base)) return;
+            const failure = request.failure();
+            console.log(`API ${url} FAILED at network level: ${(failure && failure.errorText) || "unknown"} (method ${request.method()})`);
+            console.log("Following request headers were sent for failed request", request.headers());
+        } catch (e) { /* ignore */ }
+    });
+
+    console.log("----DONE SETTING UP NETWORK INTERCEPTOR TO LOG FAILED APIS----");
+}
+
+module.exports = { attachApiFailureLogger };
+module.exports.default = { attachApiFailureLogger };

package/e2e/playwright/index.js

@@ -9,10 +9,14 @@ 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");
+const apiFailureLogger_1 = require("./apiFailureLogger");
 
 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.attachApiFailureLogger = apiFailureLogger_1.attachApiFailureLogger;
 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/login.js

@@ -10,6 +10,8 @@
  *   import { doLogin } from '@capillarytech/cap-ui-utils/e2e/playwright/login';
  *   await doLogin(page, { url, username, password });
  */
+const { attachApiFailureLogger } = require("./apiFailureLogger");
+
 const MAX_LOGIN_ATTEMPTS = 3;
 
 function sel(page) {
@@ -28,6 +30,9 @@ function sel(page) {
 
 async function doLogin(page, opts, attempt = 0) {
     const { url, username, password } = opts;
+    // WDIO's base conf always logged failed same-origin API calls (CDP interceptor);
+    // wire the PW equivalent here so every consumer inherits it. Idempotent per page.
+    attachApiFailureLogger(page, { baseUrl: url });
     const s = sel(page);
     try {
         await page.goto(url, { waitUntil: "domcontentloaded" });

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.1",
+  "version": "3.2.0-beta.3",
   "publishConfig": {
     "access": "public"
   },