@capillarytech/cap-ui-utils 3.0.20 → 3.1.0

package/e2e/utils/expectUtil.ts

@@ -0,0 +1,19 @@
+
+import * as assert from 'assert'
+
+class AssertionUtil {
+
+    async assertValue(element:WebdriverIO.Element, textToBeValidated:string){
+        assert.strictEqual(await element.getText(),textToBeValidated);
+    }
+
+    async assertElementExistence(element:WebdriverIO.Element){
+        try {
+            assert.strictEqual(await element.isDisplayed(), true);
+        } catch (error) {
+            throw new Error(error)
+        }
+    }
+}
+
+export default new AssertionUtil()

package/e2e/utils/featureFlagUtil.ts

@@ -0,0 +1,30 @@
+/**
+ * Reads feature flags from window.capAuth.accessibleFeatures — the same source
+ * that Auth.hasFeatureAccess() uses in the app (cap-ui-utils/auth/hasFeatureAccess.js).
+ *
+ * Call loadFeatureFlags() once after the app has loaded (e.g. after openAudiencePage),
+ * then use hasFeatureAccess() anywhere in the test run.
+ */
+
+let _accessibleFeatures: string[] = [];
+
+async function loadFeatureFlags(): Promise<void> {
+  // window.capAuth.accessibleFeatures is populated async after the app boots.
+  // Wait until it's array-shaped (up to 30s) before caching — an empty array
+  // is a valid "no features enabled" state, not a sign it's still loading.
+  await browser.waitUntil(
+    async () => {
+      const features = await browser.execute(() => (window as any).capAuth?.accessibleFeatures);
+      return Array.isArray(features);
+    },
+    { timeout: 30000, interval: 1000, timeoutMsg: '[featureFlags] window.capAuth.accessibleFeatures never populated' }
+  );
+  _accessibleFeatures = await browser.execute(() => (window as any).capAuth?.accessibleFeatures || []);
+  console.log(`[featureFlags] loaded ${_accessibleFeatures.length} features`);
+}
+
+function hasFeatureAccess(feature: string): boolean {
+  return _accessibleFeatures.includes(feature);
+}
+
+export default { loadFeatureFlags, hasFeatureAccess };

package/e2e/utils/garudaDropdownUtil.ts

@@ -0,0 +1,60 @@
+class GarudaDropdownUtil {
+  treeOptionByText(
+    text: string,
+    index: number | 'last' = 1,
+    altText?: string
+  ): WebdriverIO.Element {
+    const textMatch = altText
+      ? `normalize-space()="${text}" or normalize-space()="${altText}"`
+      : `normalize-space()="${text}"`;
+    const position = index === 'last' ? 'last()' : index;
+    return $(
+      `(//span[contains(@class,"ant-select-tree-node-content-wrapper")][.//div[${textMatch}]])[${position}]`
+    );
+  }
+
+  unifiedOptionByText(text: string): WebdriverIO.Element {
+    return $(
+      `//div[contains(@class,"cap-unified-select-popup")]//div[.//div[text()="${text}"] and @role="treeitem"]`
+    );
+  }
+
+  listOptionByLabel(label: string, index: number = 1): WebdriverIO.Element {
+    return $(
+      `(//ul[@role="listbox"]//li[@role="option" and @label="${label}"])[${index}]`
+    );
+  }
+
+  selectOptionByText(text: string, index: number = 1): WebdriverIO.Element {
+    return $(
+      `(//div[contains(@class,"ant-select-item-option")][.//div[contains(@class,"ant-select-item-option-content")][normalize-space()="${text}"]])[${index}]`
+    );
+  }
+
+  treeOption(index: number | 'last' = 1): WebdriverIO.Element {
+    const position = index === 'last' ? 'last()' : index;
+    return $(
+      `(//span[contains(@class,"ant-select-tree-node-content-wrapper")][normalize-space(.)])[${position}]`
+    );
+  }
+
+  listOptionByLabelInPopup(ariaControlId: string, label: string): WebdriverIO.Element {
+    return $(
+      `//div[contains(@id,"${ariaControlId}")]//ul//li[@role="option" and @label="${label}"]`
+    );
+  }
+
+  menuItemByText(text: string, index: number = 1): WebdriverIO.Element {
+    return $(
+      `(//li[contains(@class,"ant-dropdown-menu-item")][.//span[normalize-space()="${text}"]])[${index}]`
+    );
+  }
+
+  unifiedSelectConfirmButton(): WebdriverIO.Element {
+    return $(
+      `//button[contains(@class,"cap-unified-select-confirm-button")]`
+    );
+  }
+}
+
+export default new GarudaDropdownUtil();

package/e2e/utils/htmlEditorUtil.ts

@@ -0,0 +1,56 @@
+/**
+ * Helpers for the antd v6 contenteditable HTML editor.
+ * After bulk HTML injection, the caret remains outside the `<body>` tag, causing label
+ * insertions at the wrong position. `placeCaretInsideBody` locates the `<body>` position
+ * across text nodes and updates the Selection range correctly.
+ *
+ * Caller passes the WDIO editor element (defined as a page selector), so this util
+ * does not own selector strings.
+ */
+
+export async function placeCaretInsideBody(
+  editor: WebdriverIO.Element,
+): Promise<boolean> {
+  return browser.execute((node: HTMLElement) => {
+    if (!node) return false;
+
+    const walker = document.createTreeWalker(node, NodeFilter.SHOW_TEXT);
+    const nodes: Text[] = [];
+    const starts: number[] = [];
+    let combined = '';
+    for (let n = walker.nextNode(); n; n = walker.nextNode()) {
+      const t = n as Text;
+      starts.push(combined.length);
+      combined += t.nodeValue || '';
+      nodes.push(t);
+    }
+    if (!nodes.length) return false;
+
+    const open = combined.match(/<\s*body\b[^>]*>/i);
+    if (!open || open.index === undefined) return false;
+
+    let idx = open.index + open[0].length;
+    while (idx < combined.length && /\s/.test(combined.charAt(idx))) idx++;
+
+    let nodeIdx = 0;
+    for (let i = 0; i < nodes.length; i++) {
+      const end = starts[i] + (nodes[i].nodeValue || '').length;
+      if (idx <= end) { nodeIdx = i; break; }
+      nodeIdx = i;
+    }
+    const target = nodes[nodeIdx];
+    const offset = Math.max(0, Math.min(idx - starts[nodeIdx], (target.nodeValue || '').length));
+
+    node.focus();
+    const range = document.createRange();
+    range.setStart(target, offset);
+    range.collapse(true);
+    const selection = window.getSelection();
+    if (!selection) return false;
+    selection.removeAllRanges();
+    selection.addRange(range);
+    return true;
+  }, editor as any);
+}
+
+export default { placeCaretInsideBody };

package/e2e/utils/logCollectorUtil.ts

@@ -0,0 +1,52 @@
+import supertest from 'supertest'
+import commands from "@rpii/wdio-commands"
+
+class LogCollectorUtil {
+
+    callCount=0;
+
+    async collectLogs(runId, test, error, duration, passed, skipped = false){
+    this.callCount += 1;
+    let validationMessage
+    let status
+
+    if(passed){
+        status='passed'
+        validationMessage = ''
+    } else if(skipped){
+        status='skipped'
+        validationMessage = ''
+    } else {
+        commands.logScreenshot("Exception logged: "+error)
+        status='failed'
+        if(error===undefined){
+            validationMessage='cannot capture error'
+        } else {
+            validationMessage=error.toString().replace(/[\u001b\u009b][[()#;?]*(?:[0-9]{1,4}(?:;[0-9]{0,4})*)?[0-9A-ORZcf-nqry=><]/g, '');
+        }
+    }
+            // this.recordBrowserLogs()
+            const baseUrl = 'http://127.0.0.1:4000'
+            const request = supertest(baseUrl)
+            let exeTime = duration / 1000
+            let message ={[runId]: {[test.parent]: {[test.title]: {"status": status, 
+            "time": exeTime.toString(), "validataionMessage": validationMessage,
+            "total": this.callCount}}}}  
+            const messagePayload ={"result" : message}
+            const response = await request.
+            post('/logger')
+            .send(messagePayload)
+            console.log('API Response',response.body);
+            console.log('Message', message)
+        }
+
+    async recordBrowserLogs(){
+        const logTypes = Promise.resolve(browser.getLogs('browser')).then(function(data){return data})
+        logTypes.then(data=>(JSON.stringify(data.filter(function getObj(logs) {
+        if(logs['level']==='SEVERE' || logs['level']==='ERROR'){
+        commands.logMessage((logs['level']+": "+JSON.stringify(logs)))}
+        })))
+    );
+  }    
+}
+export default new LogCollectorUtil()

package/e2e/utils/mockResponse.ts

@@ -0,0 +1,24 @@
+export const beamerApiResp =  {
+    "activateAutoRefresh": true,
+    "autoRefreshTimeout": 12000000,
+    "defaultSelectorColor": "#50ac44",
+    "enableAutoRefresh": true,
+    "enableFaviconNotification": false,
+    "enableSoundNotification": false,
+    "enableUpdatesListener": true,
+    "enabled": false,
+    "filterByUrl": true,
+    "headerColor": "#50ac44",
+    "lastPostBoostedBackgroundColor": "#0099ff",
+    "lastPostBoostedTextColor": "#ffffff",
+    "logoUrl": "https://static.getbeamer.com/vnosnxuz35404/logo_small_5457.png",
+    "notificationColor": "#ff5a5f",
+    "pushNotificationsPrompt": "We'd like update you about upcoming feature releases",
+    "pushNotificationsPromptAccept": "Allow",
+    "pushNotificationsPromptEnabled": false,
+    "pushNotificationsPromptRefuse": "No, thanks",
+    "pushNotificationsPromptType": "popup",
+    "showLinkInSnippet": false,
+    "topDomain": "capillarytech.com",
+    "updatesDelay": 300000
+}

package/e2e/utils/reportUploader.ts

@@ -0,0 +1,172 @@
+import * as fs from 'fs';
+import * as path from 'path';
+import { execFile, execFileSync } from 'child_process';
+import { promisify } from 'util';
+import { Uploader } from './uploaders/uploader';
+import { FileServiceUploader } from './uploaders/fileServiceUploader';
+
+const execFileAsync = promisify(execFile);
+
+/**
+ * Zips the recorded debug artifacts (request payloads + screenshots) into a
+ * single .zip and uploads it via a pluggable Uploader (Capillary File Service
+ * now; swap backends by changing one line in getUploader()).
+ *
+ * Always uploads when debug capture is on (the service that calls this is only
+ * registered when FULL_DEBUG_MODE is enabled).
+ */
+class ReportUploader {
+    private debugDir = path.join(process.cwd(), 'reports', 'debug');
+    // Upper bound for the whole upload step; on expiry we log and let the run end.
+    private uploadTimeoutMs = Number(process.env.UPLOAD_TIMEOUT_MS) || 90000;
+
+    private getUploader(): Uploader {
+        return new FileServiceUploader();
+    }
+
+    /** Remove prior-run artifacts so each archive contains only the current run. */
+    clearPreviousArtifacts(): void {
+        try {
+            if (fs.existsSync(this.debugDir)) {
+                fs.rmSync(this.debugDir, { recursive: true, force: true });
+                console.log('[reportUploader] cleared previous debug artifacts');
+            }
+        } catch (err) {
+            console.log(`[reportUploader] failed to clear previous artifacts: ${err}`);
+        }
+    }
+
+    async archiveAndUpload(): Promise<void> {
+        try {
+            if (!fs.existsSync(this.debugDir) || fs.readdirSync(this.debugDir).length === 0) {
+                console.log('[reportUploader] no debug artifacts recorded — nothing to upload');
+                return;
+            }
+
+            // Bundle run metadata + a snapshot of the automation code so a later
+            // diff can tell whether a payload change came from the lib upgrade or
+            // from the tests themselves.
+            this.writeMetaAndCode();
+
+            const archivePath = await this.createArchive();
+            console.log(`[reportUploader] created archive ${archivePath}`);
+
+            const uploader = this.getUploader();
+            if (!uploader.isConfigured()) {
+                console.log(`[reportUploader] upload skipped — missing config: ${uploader.missingConfigMessage()}. Archive kept locally at ${archivePath}`);
+                return;
+            }
+
+            // Belt-and-suspenders: even with the uploader's own network timeout,
+            // never let the upload block the run's onComplete hook (a hung upload
+            // would keep the pod alive forever). On timeout we log and move on so
+            // the pod terminates exactly as it did before this feature existed.
+            const location = await this.withTimeout(
+                uploader.upload(archivePath, path.basename(archivePath)),
+                this.uploadTimeoutMs,
+                'upload',
+            );
+            console.log(`[reportUploader] uploaded request payloads to ${uploader.name}: ${location}`);
+        } catch (err) {
+            console.log(`[reportUploader] archive/upload failed (continuing so the run can exit): ${err}`);
+        }
+    }
+
+    /** Reject after ms so a stuck upload can never block process shutdown. */
+    private withTimeout<T>(promise: Promise<T>, ms: number, label: string): Promise<T> {
+        let timer: NodeJS.Timeout;
+        const timeout = new Promise<never>((_, reject) => {
+            timer = setTimeout(() => reject(new Error(`${label} timed out after ${ms}ms`)), ms);
+            // Don't let this timer itself keep the event loop alive.
+            timer.unref?.();
+        });
+        return Promise.race([promise, timeout]).finally(() => clearTimeout(timer)) as Promise<T>;
+    }
+
+    /** Run a git command and return its trimmed stdout, or '' on failure. */
+    private git(args: string[]): string {
+        try {
+            return execFileSync('git', args, { cwd: process.cwd() }).toString().trim();
+        } catch {
+            return '';
+        }
+    }
+
+    /**
+     * Write debug/meta.json (run identity + git state) and copy the automation
+     * code for this module into debug/code/. The compare tool reads these to
+     * flag when two archives were produced from different code, so payload diffs
+     * aren't misattributed to the UI library upgrade.
+     */
+    private writeMetaAndCode(): void {
+        try {
+            const moduleName = process.env.module || 'all';
+            const commit = this.git(['rev-parse', 'HEAD']);
+            const branch = this.git(['rev-parse', '--abbrev-ref', 'HEAD']);
+            const dirty = this.git(['status', '--porcelain']).length > 0;
+
+            const meta = {
+                cluster: process.env.cluster || 'unknown-cluster',
+                module: moduleName,
+                testType: this.getTestType(),
+                recordedAt: new Date().toISOString(),
+                git: { commit, branch, dirty },
+            };
+            fs.writeFileSync(
+                path.join(this.debugDir, 'meta.json'),
+                JSON.stringify(meta, null, 2),
+            );
+
+            // Snapshot only this module's automation code (small); never the whole
+            // src/ tree (~110M). Page objects + specs are enough to explain a diff.
+            const codeDir = path.join(this.debugDir, 'code');
+            const sources = [
+                path.join('test', moduleName),
+                path.join('src', 'pages', moduleName),
+            ];
+            for (const rel of sources) {
+                const abs = path.join(process.cwd(), rel);
+                if (!fs.existsSync(abs)) continue;
+                const dest = path.join(codeDir, rel);
+                fs.mkdirSync(path.dirname(dest), { recursive: true });
+                fs.cpSync(abs, dest, { recursive: true });
+            }
+        } catch (err) {
+            console.log(`[reportUploader] failed to write meta/code snapshot: ${err}`);
+        }
+    }
+
+    /** Resolve the test type (suite) from the `--suite <name>` CLI flag. */
+    private getTestType(): string {
+        const argv = process.argv;
+        const idx = argv.findIndex((a) => a === '--suite');
+        if (idx !== -1 && argv[idx + 1]) return argv[idx + 1];
+        const inline = argv.find((a) => a.startsWith('--suite='));
+        if (inline) return inline.split('=')[1];
+        return 'all';
+    }
+
+    private async createArchive(): Promise<string> {
+        const cluster = process.env.cluster || 'unknown-cluster';
+        const moduleName = process.env.module || 'all';
+        const testType = this.getTestType();
+
+        // date = YYYY-MM-DD, time = HH-MM-SS (UTC, from ISO timestamp)
+        const [datePart, timePartRaw] = new Date().toISOString().split('T');
+        const timePart = timePartRaw.split('.')[0].replace(/:/g, '-');
+
+        const archiveName = `wdio-ui-${cluster}_${moduleName}_${testType}_${datePart}_${timePart}.zip`;
+        const archivePath = path.join(process.cwd(), 'reports', archiveName);
+
+        // Run zip from the parent dir so the archive contains the debug/ folder
+        // with relative paths, not absolute ones.
+        await execFileAsync(
+            'zip',
+            ['-r', '-q', archivePath, path.basename(this.debugDir)],
+            { cwd: path.dirname(this.debugDir) },
+        );
+        return archivePath;
+    }
+}
+
+export default new ReportUploader();

package/e2e/utils/requestRecorderUtil.ts

@@ -0,0 +1,178 @@
+import fs from 'fs';
+import path from 'path';
+import debugMode from './debugModeUtil';
+
+/**
+ * Records request payloads (POST / PATCH / DELETE) sent from the UI during a
+ * test run and saves them to JSON files under reports/debug/request-payloads/.
+ *
+ * Off by default; enabled only when FULL_DEBUG_MODE=true. When off, every
+ * method is a no-op so there is zero overhead.
+ *
+ * One JSON file is written per test, containing an array of all the
+ * POST / PATCH / DELETE requests captured while that test was running.
+ */
+
+interface InitiatorFrame {
+    functionName: string;
+    url: string;
+    line: number;
+}
+
+interface RequestInitiator {
+    // 'script' (a JS handler fired it), 'parser', 'preflight', 'other', ...
+    type: string;
+    // Top JS call frames that triggered the request — i.e. which handler fired it.
+    stack: InitiatorFrame[];
+}
+
+interface RecordedRequest {
+    requestId: string;
+    method: string;
+    url: string;
+    timestamp: string;
+    postData: string | null;
+    headers: Record<string, string>;
+    // Which app code initiated the request (from CDP initiator).
+    initiator: RequestInitiator | null;
+}
+
+const RECORDED_METHODS = ['POST', 'PATCH', 'DELETE', 'PUT'];
+// How many call frames to keep — enough to identify the handler without bloat.
+const MAX_INITIATOR_FRAMES = 3;
+
+class RequestRecorder {
+    // Off by default; record only when capture is enabled for this module
+    // (FULL_DEBUG_MODE=true and, if DEBUG_MODULES is set, module is listed).
+    private enabled = debugMode.isCaptureEnabled();
+    private outputDir = path.join(process.cwd(), 'reports', 'debug', 'request-payloads');
+    private currentTestTitle = '';
+    private buffer: RecordedRequest[] = [];
+    private seenRequestIds = new Set<string>();
+
+    isEnabled(): boolean {
+        return this.enabled;
+    }
+
+    /** Reset the buffer and remember the test we are currently recording for. */
+    startTest(testTitle: string): void {
+        if (!this.enabled) return;
+        this.currentTestTitle = testTitle || 'unknown_test';
+        this.buffer = [];
+        this.seenRequestIds.clear();
+    }
+
+    /**
+     * Capture a single request from a CDP Network.requestWillBeSent event.
+     * Only POST / PATCH / DELETE requests matching baseUrl are recorded.
+     * Large request bodies are fetched via Network.getRequestPostData when
+     * the event payload does not inline them.
+     */
+    async record(params: any, baseUrl: string): Promise<void> {
+        if (!this.enabled) return;
+        try {
+            const request = params?.request;
+            if (!request) return;
+
+            const method = (request.method || '').toUpperCase();
+            if (!RECORDED_METHODS.includes(method)) return;
+            if (baseUrl && !String(request.url).startsWith(baseUrl)) return;
+
+            // CDP can emit requestWillBeSent more than once per request; dedupe by id.
+            const requestId = String(params.requestId);
+            if (this.seenRequestIds.has(requestId)) return;
+            this.seenRequestIds.add(requestId);
+
+            const entry: RecordedRequest = {
+                requestId,
+                method,
+                url: request.url,
+                timestamp: new Date().toISOString(),
+                postData: request.postData ?? null,
+                headers: request.headers ?? {},
+                initiator: this.extractInitiator(params?.initiator),
+            };
+            // Preserve ordering: push synchronously, backfill body if needed.
+            this.buffer.push(entry);
+
+            if (entry.postData == null && request.hasPostData) {
+                try {
+                    const res: any = await browser.cdp('Network', 'getRequestPostData', {
+                        requestId: params.requestId,
+                    });
+                    entry.postData = res?.postData ?? null;
+                } catch (err) {
+                    console.log(`[requestRecorder] could not fetch post data: ${err}`);
+                }
+            }
+        } catch (err) {
+            console.log(`[requestRecorder] failed to record request: ${err}`);
+        }
+    }
+
+    /**
+     * Reduce a CDP initiator to a compact, comparable shape: the request type
+     * and the top few JS call frames (the handler that fired the request).
+     * CDP line/column numbers are 0-based, so +1 for human-readable lines.
+     */
+    private extractInitiator(initiator: any): RequestInitiator | null {
+        if (!initiator) return null;
+        const frames: InitiatorFrame[] = [];
+        const callFrames = initiator?.stack?.callFrames;
+        if (Array.isArray(callFrames)) {
+            for (const f of callFrames.slice(0, MAX_INITIATOR_FRAMES)) {
+                frames.push({
+                    functionName: f?.functionName || '(anonymous)',
+                    url: f?.url || '',
+                    line: typeof f?.lineNumber === 'number' ? f.lineNumber + 1 : -1,
+                });
+            }
+        } else if (initiator.url) {
+            // parser-initiated requests carry url/lineNumber directly.
+            frames.push({
+                functionName: '',
+                url: initiator.url,
+                line: typeof initiator.lineNumber === 'number' ? initiator.lineNumber + 1 : -1,
+            });
+        }
+        return { type: initiator.type || 'other', stack: frames };
+    }
+
+    /** Write the buffered requests for the current test to a JSON file. */
+    flushTest(): void {
+        if (!this.enabled) return;
+        try {
+            if (this.buffer.length === 0) return;
+
+            const moduleName = process.env.module || 'unknown_module';
+            const dir = path.join(this.outputDir, moduleName);
+            fs.mkdirSync(dir, { recursive: true });
+
+            const safeTitle = this.currentTestTitle
+                .replace(/[^a-zA-Z0-9_-]+/g, '_')
+                .slice(0, 120);
+            // Stable filename (no timestamp) so the same test maps to the same
+            // path across runs/zips — enables zip-to-zip payload diffing.
+            const fileName = `${safeTitle}.json`;
+
+            const payload = {
+                test: this.currentTestTitle,
+                module: moduleName,
+                recordedAt: new Date().toISOString(),
+                requestCount: this.buffer.length,
+                requests: this.buffer,
+            };
+
+            fs.writeFileSync(path.join(dir, fileName), JSON.stringify(payload, null, 2));
+            console.log(`[requestRecorder] saved ${this.buffer.length} request(s) to ${path.join(dir, fileName)}`);
+        } catch (err) {
+            console.log(`[requestRecorder] failed to write payload file: ${err}`);
+        } finally {
+            this.buffer = [];
+            this.seenRequestIds.clear();
+            this.currentTestTitle = '';
+        }
+    }
+}
+
+export default new RequestRecorder();