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

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@capillarytech/cap-ui-utils",
-  "version": "3.2.0-beta.0",
+  "version": "3.2.0-beta.1",
   "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 }
   }
 }