@capillarytech/cap-ui-utils 3.1.0 → 3.1.2

package/e2e/utils/{elementUtil.ts → elementUtil.js}

@@ -1,28 +1,26 @@
-import { strict as assert } from "assert";
-
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const assert_1 = require("assert");
 class ElementUtils {
-    async hoverToReveal(element:WebdriverIO.Element){
+    async hoverToReveal(element) {
         await element.waitForDisplayed({ timeout: 60000 });
         await element.moveTo();
         await browser.execute((el) => {
-            ['mouseenter','mouseover','mousemove'].forEach((t) =>
-                el.dispatchEvent(new MouseEvent(t, { bubbles: true })));
+            ['mouseenter', 'mouseover', 'mousemove'].forEach((t) => el.dispatchEvent(new MouseEvent(t, { bubbles: true })));
         }, element);
         await browser.pause(400);
     }
-
-    async elementClick(element:WebdriverIO.Element){
-        await browser.pause(2000)
-        await element.waitForDisplayed({ timeout: 90000})
-        try{
-           await element.waitForClickable({ timeout: 60000, interval:1000, timeoutMsg:await element.getHTML(false)+" is still not clickable" })
-           await element.click()
+    async elementClick(element) {
+        await browser.pause(2000);
+        await element.waitForDisplayed({ timeout: 90000 });
+        try {
+            await element.waitForClickable({ timeout: 60000, interval: 1000, timeoutMsg: "element is still not clickable" });
+            await element.click();
         }
-        catch(error){
-           await this.forceClick(element)
+        catch (error) {
+            await this.forceClick(element);
         }
     }
-
     /**
      * Scrolls the element to viewport center and clicks it via a dispatched
      * pointer/mouse-event sequence — bypasses WDIO's isClickable coverage check.
@@ -30,31 +28,28 @@ class ElementUtils {
      * overlay (info banner, lingering popover) sits over its centre point, or
      * antd selects that open on mousedown rather than click.
      */
-    async forceClick(element:WebdriverIO.Element){
+    async forceClick(element) {
         const fresh = await this.waitForDisplayedStaleSafe(element, 90000);
-        await browser.execute((el: any) => {
+        await browser.execute((el) => {
             el.scrollIntoView({ block: "center", inline: "center" });
-            ['pointerdown','mousedown','pointerup','mouseup','click'].forEach((t) =>
-                el.dispatchEvent(new MouseEvent(t, { bubbles: true, cancelable: true, view: window })));
+            ['pointerdown', 'mousedown', 'pointerup', 'mouseup', 'click'].forEach((t) => el.dispatchEvent(new MouseEvent(t, { bubbles: true, cancelable: true, view: window })));
         }, fresh);
         await browser.pause(500);
     }
-
     /**
      * Re-fetches a fresh element from its original selector. A detached ("stale")
      * handle — left behind when React/antd re-renders the node — is replaced by a
      * live one. Falls back to the original reference for elements without a plain
      * string selector (e.g. chained/derived elements).
      */
-    private async refetch(element: WebdriverIO.Element): Promise<WebdriverIO.Element> {
+    async refetch(element) {
         // `.selector` on an un-awaited ChainablePromiseElement (e.g. a page getter
         // passed straight through, as every current caller does) resolves lazily —
         // reading it as a promise, not a sync property, prevents this from always
         // seeing a Promise object and silently skipping the re-query.
-        const selector = await (element as any)?.selector;
+        const selector = await (element === null || element === void 0 ? void 0 : element.selector);
         return typeof selector === "string" ? await $(selector) : element;
     }
-
     /**
      * waitForDisplayed that survives the target re-rendering mid-wait, returning
      * the live handle it last confirmed. WDIO's built-in waitForDisplayed polls
@@ -66,7 +61,7 @@ class ElementUtils {
      * get a fresh, currently-attached element instead of one that already went
      * stale during the wait.
      */
-    private async waitForDisplayedStaleSafe(element: WebdriverIO.Element, timeout: number = 90000): Promise<WebdriverIO.Element> {
+    async waitForDisplayedStaleSafe(element, timeout = 90000) {
         const start = Date.now();
         while (Date.now() - start < timeout) {
             const el = await this.refetch(element);
@@ -74,18 +69,20 @@ class ElementUtils {
             const outcome = await el
                 .waitForDisplayed({ timeout: remaining, interval: 500 })
                 .then(() => "displayed")
-                .catch((error) =>
-                    String((error as any)?.message ?? error).includes("stale element reference")
-                        ? "stale"
-                        : "timeout"
-                );
-            if (outcome === "displayed") return el;
-            if (outcome === "timeout") throw new Error("Element not displayed within timeout");
+                .catch((error) => {
+                var _a;
+                return String((_a = error === null || error === void 0 ? void 0 : error.message) !== null && _a !== void 0 ? _a : error).includes("stale element reference")
+                    ? "stale"
+                    : "timeout";
+            });
+            if (outcome === "displayed")
+                return el;
+            if (outcome === "timeout")
+                throw new Error("Element not displayed within timeout");
             await browser.pause(300); // stale → re-query and keep waiting
         }
         throw new Error("Element kept going stale while waiting for it to be displayed");
     }
-
     /**
      * Clicks an element, retrying against a freshly re-queried node whenever the
      * DOM re-renders mid-interaction and throws "stale element reference" (antd
@@ -93,7 +90,7 @@ class ElementUtils {
      * failure it falls back to a forced click. Throws only if nothing succeeds
      * within `timeout`.
      */
-    private async clickWithStaleRetry(element: WebdriverIO.Element, timeout: number = 40000): Promise<void> {
+    async clickWithStaleRetry(element, timeout = 40000) {
         const start = Date.now();
         // Uses promise .catch() rather than nested try/catch blocks: a genuine
         // failure still propagates cleanly to WDIO so the failure screenshot is
@@ -104,14 +101,17 @@ class ElementUtils {
                 .waitForClickable({ timeout: 10000, interval: 500 })
                 .then(() => el.click())
                 .then(() => "clicked")
-                .catch((error) =>
-                    String((error as any)?.message ?? error).includes("stale element reference")
-                        ? "stale"
-                        : "unclickable"
-                );
-            if (outcome === "clicked") return;
-            if (outcome === "unclickable") break;   // genuine (non-stale) failure → forced click
-            await browser.pause(500);               // stale → re-query and retry
+                .catch((error) => {
+                var _a;
+                return String((_a = error === null || error === void 0 ? void 0 : error.message) !== null && _a !== void 0 ? _a : error).includes("stale element reference")
+                    ? "stale"
+                    : "unclickable";
+            });
+            if (outcome === "clicked")
+                return;
+            if (outcome === "unclickable")
+                break; // genuine (non-stale) failure → forced click
+            await browser.pause(500); // stale → re-query and retry
         }
         // Single fallback: forceClick re-fetches and stale-waits internally, so
         // it survives the target still churning after the loop above gave up.
@@ -119,7 +119,6 @@ class ElementUtils {
         // real error to the test (and its screenshot).
         await this.forceClick(element);
     }
-
     /**
      * Expands an antd Collapse (accordion) left-nav section by its header label,
      * then confirms `confirmChild` became visible.
@@ -137,18 +136,16 @@ class ElementUtils {
      * User segments, …). `label` is the visible header text; `confirmChild` is any
      * element that only becomes visible once the section is expanded.
      */
-    async expandSideNavSection(label: string, confirmChild: WebdriverIO.Element, attempts = 3): Promise<void> {
+    async expandSideNavSection(label, confirmChild, attempts = 3) {
         // The header label may be a <span> (top-level sections) or a <div> (nested
         // sub-accordions like "Status"), so match any element by its text.
-        const header = await $(
-            `//div[@role="tab" and contains(@class,"ant-collapse-header")][.//*[normalize-space(text())="${label}"]]`
-        );
+        const header = await $(`//div[@role="tab" and contains(@class,"ant-collapse-header")][.//*[normalize-space(text())="${label}"]]`);
         await header.waitForDisplayed({ timeout: 60000 });
         for (let attempt = 1; attempt <= attempts; attempt++) {
             const expanded = (await header.getAttribute("aria-expanded")) === "true";
             if (!expanded) {
                 await header.waitForClickable({ timeout: 40000 });
-                await browser.execute((el: any) => el.click(), header);
+                await browser.execute((el) => el.click(), header);
                 console.log(`Expanded side-nav "${label}" (attempt ${attempt})`);
             }
             const visible = await confirmChild
@@ -162,7 +159,6 @@ class ElementUtils {
         }
         throw new Error(`Side-nav section "${label}" did not expand to reveal its content`);
     }
-
     /**
      * Opens a leaf item that lives inside a left-nav antd Collapse section:
      * expands the section (idempotent) via expandSideNavSection, then clicks the
@@ -172,8 +168,8 @@ class ElementUtils {
      * attempt. Use for the "expand section -> click child" pattern
      * (Library -> Charts, Data connectors -> Export schedules, User segments -> Status).
      */
-    async openSideNavItem(sectionLabel: string, leaf: WebdriverIO.Element, attempts = 3): Promise<void> {
-        let lastError: unknown;
+    async openSideNavItem(sectionLabel, leaf, attempts = 3) {
+        let lastError;
         for (let attempt = 1; attempt <= attempts; attempt++) {
             try {
                 await this.expandSideNavSection(sectionLabel, leaf);
@@ -181,7 +177,8 @@ class ElementUtils {
                 await leaf.click();
                 console.log(`Opened "${sectionLabel}" item on attempt ${attempt}`);
                 return;
-            } catch (error) {
+            }
+            catch (error) {
                 lastError = error;
                 console.log(`openSideNavItem "${sectionLabel}": attempt ${attempt}/${attempts} failed (${error}) — re-expanding`);
                 await browser.pause(2000);
@@ -189,28 +186,25 @@ class ElementUtils {
         }
         throw new Error(`openSideNavItem: could not open item under "${sectionLabel}" after ${attempts} attempts. Last error: ${lastError}`);
     }
-
-    async enterText(element:WebdriverIO.Element, textToEnter){
-            await browser.pause(1000)
-            // browser.execute('arguments[0].style.outline = "#f00 solid 4px";', element);
-            await element.waitForEnabled({ timeout: 40000, interval:1000, timeoutMsg:await element.getHTML(false)+" is still not editable" })
-            await element.setValue(textToEnter)
+    async enterText(element, textToEnter) {
+        await browser.pause(1000);
+        // browser.execute('arguments[0].style.outline = "#f00 solid 4px";', element);
+        await element.waitForEnabled({ timeout: 40000, interval: 1000, timeoutMsg: "element is still not editable" });
+        await element.setValue(textToEnter);
     }
-
     /**
      * Types text using addValue (key events). Use for React controlled inputs
      * where setValue does not update state.
      */
-    async typeText(element: WebdriverIO.Element, textToEnter: string) {
-      await browser.pause(1000);
-      await element.waitForEnabled({
-        timeout: 40000,
-        interval: 1000,
-        timeoutMsg: await element.getHTML(false) + " is still not editable"
-      });
-      await element.addValue(textToEnter);
-    }
-
+    async typeText(element, textToEnter) {
+        await browser.pause(1000);
+        await element.waitForEnabled({
+            timeout: 40000,
+            interval: 1000,
+            timeoutMsg: "element is still not editable"
+        });
+        await element.addValue(textToEnter);
+    }
     /**
      * Selects a date by clicking through the antd calendar UI instead of
      * typing into the input. Some DatePicker instances only accept a value
@@ -228,33 +222,29 @@ class ElementUtils {
      * (via the next/prev-month buttons) until the target month is showing,
      * then clicks the day cell there.
      */
-    async selectCalendarDate(dateInput: WebdriverIO.Element, targetDate: Date, label = "date field") {
+    async selectCalendarDate(dateInput, targetDate, label = "date field") {
         const isoDate = `${targetDate.getFullYear()}-${String(targetDate.getMonth() + 1).padStart(2, "0")}-${String(targetDate.getDate()).padStart(2, "0")}`;
         const expectedDisplay = targetDate.toLocaleDateString("en-US", { year: "numeric", month: "short", day: "numeric" });
-
         await this.retryStep(async () => {
             const input = await this.refetch(dateInput);
             await input.waitForClickable({ timeout: 40000 });
             await input.click();
-
             const panel = await $('//div[contains(@class,"ant-picker-dropdown") and not(contains(@class,"ant-picker-dropdown-hidden"))]');
             await panel.waitForDisplayed({ timeout: 10000 });
-
             let dayCell = await panel.$(`.//td[@title="${isoDate}"]`);
             const alreadyVisible = await dayCell.isDisplayed().catch(() => false);
-
             if (!alreadyVisible) {
                 const headerView = await panel.$(".ant-picker-header-view");
                 const nextBtn = await panel.$(".ant-picker-header-next-btn");
                 const prevBtn = await panel.$(".ant-picker-header-prev-btn");
                 const targetMonths = targetDate.getFullYear() * 12 + targetDate.getMonth();
-
                 for (let attempt = 0; attempt < 24; attempt++) {
                     const shownText = (await headerView.getText()).trim(); // e.g. "Jul 2026"
                     const shownDate = new Date(`1 ${shownText}`);
                     const shownMonths = shownDate.getFullYear() * 12 + shownDate.getMonth();
                     const diff = targetMonths - shownMonths;
-                    if (diff === 0) break;
+                    if (diff === 0)
+                        break;
                     if (attempt === 23) {
                         throw new Error(`${label}: could not navigate calendar to target month (stuck on "${shownText}")`);
                     }
@@ -263,12 +253,9 @@ class ElementUtils {
                 }
                 dayCell = await panel.$(`.//td[@title="${isoDate}"]`);
             }
-
             await dayCell.waitForClickable({ timeout: 10000 });
             await dayCell.click();
-
             await panel.waitForDisplayed({ timeout: 5000, reverse: true });
-
             const committed = await input.getValue();
             if (committed !== expectedDisplay) {
                 throw new Error(`${label} did not commit: expected "${expectedDisplay}", got "${committed}"`);
@@ -282,7 +269,6 @@ class ElementUtils {
             },
         });
     }
-
     /**
      * Writes via the native HTMLInputElement value setter, then dispatches an
      * `input` event. Bypasses React's `_valueTracker`, so React commits the
@@ -298,91 +284,79 @@ class ElementUtils {
      * (validation, commit-on-blur, etc). With an element, it first waits for the
      * field to be editable, then dispatches `change` + blur after `input`.
      */
-    async setReactInputValue(
-      target: string | WebdriverIO.Element,
-      value: string,
-      alsoDispatch: Array<"change" | "blur"> = [],
-    ) {
-      if (typeof target === "string") {
-        await browser.execute(
-          (sel: string, val: string, extras: string[]) => {
-            const input = document.querySelector(sel) as HTMLInputElement | null;
-            if (!input) {
-              throw new Error(`setReactInputValue: no element matches selector "${sel}"`);
+    async setReactInputValue(target, value, alsoDispatch = []) {
+        if (typeof target === "string") {
+            await browser.execute((sel, val, extras) => {
+                const input = document.querySelector(sel);
+                if (!input) {
+                    throw new Error(`setReactInputValue: no element matches selector "${sel}"`);
+                }
+                const setter = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, 'value').set;
+                setter.call(input, val);
+                input.dispatchEvent(new Event('input', { bubbles: true }));
+                for (const name of extras) {
+                    input.dispatchEvent(new Event(name, { bubbles: true }));
+                }
+            }, target, value, alsoDispatch);
+            return;
+        }
+        await browser.pause(1000);
+        await target.waitForEnabled({
+            timeout: 40000,
+            interval: 1000,
+            timeoutMsg: "element is still not editable"
+        });
+        await browser.execute((el, val) => {
+            const desc = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, "value");
+            if (desc && desc.set) {
+                desc.set.call(el, val);
             }
-            const setter = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, 'value')!.set!;
-            setter.call(input, val);
-            input.dispatchEvent(new Event('input', { bubbles: true }));
-            for (const name of extras) {
-              input.dispatchEvent(new Event(name, { bubbles: true }));
+            else {
+                el.value = val;
             }
-          },
-          target,
-          value,
-          alsoDispatch,
-        );
-        return;
-      }
-      await browser.pause(1000);
-      await target.waitForEnabled({
-        timeout: 40000,
-        interval: 1000,
-        timeoutMsg: await target.getHTML(false) + " is still not editable"
-      });
-      await browser.execute((el: any, val: string) => {
-        const desc = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, "value");
-        if (desc && desc.set) {
-          desc.set.call(el, val);
-        } else {
-          el.value = val;
+            el.dispatchEvent(new Event("input", { bubbles: true }));
+            el.dispatchEvent(new Event("change", { bubbles: true }));
+            el.blur();
+        }, target, value);
+    }
+    async switchToUrl(url) {
+        await browser.switchWindow(url);
+    }
+    async waitUntilDisplayed(element, awaitedText, timeout = 30000) {
+        try {
+            // First wait for element to be displayed
+            await element.waitForDisplayed({ timeout: timeout, timeoutMsg: `Element not displayed within ${timeout} ms` });
+            // Then wait for the correct text
+            await element.waitUntil(async function () {
+                const currentText = await this.getText();
+                console.log(`Waiting for text: '${awaitedText}', Current text: '${currentText}'`);
+                return currentText.includes(awaitedText) || currentText === awaitedText;
+            }, {
+                timeout,
+                timeoutMsg: `Unable to locate the awaited text: '${awaitedText}' within ${timeout} ms`
+            });
+        }
+        catch (error) {
+            console.log(`🔴 Error in waitUntilDisplayed: ${error}`);
+            throw error;
         }
-        el.dispatchEvent(new Event("input", { bubbles: true }));
-        el.dispatchEvent(new Event("change", { bubbles: true }));
-        el.blur();
-      }, target, value);
-    }
-
-   async switchToUrl(url: string){
-      await browser.switchWindow('url')
-     }
-
-   async waitUntilDisplayed(element:WebdriverIO.Element, awaitedText, timeout=30000){
-      try {
-        // First wait for element to be displayed
-        await element.waitForDisplayed({ timeout: timeout, timeoutMsg: `Element not displayed within ${timeout} ms` });
-        
-        // Then wait for the correct text
+    }
+    async waitUntilEnabled(element) {
         await element.waitUntil(async function () {
-           const currentText = await this.getText();
-           console.log(`Waiting for text: '${awaitedText}', Current text: '${currentText}'`);
-           return currentText.includes(awaitedText) || currentText === awaitedText;
+            return await element.isEnabled();
         }, {
-            timeout, 
-            timeoutMsg: `Unable to locate the awaited text: '${awaitedText}' within ${timeout} ms`
+            timeout: 90000,
+            timeoutMsg: 'Element not enabled'
         });
-      } catch (error) {
-        console.log(`🔴 Error in waitUntilDisplayed: ${error}`);
-        throw error;
-      }
-    }
-
-   async waitUntilEnabled(element:WebdriverIO.Element){
-      await element.waitUntil(async function () {
-         return await element.isEnabled();
-     }, {
-         timeout: 90000,
-         timeoutMsg: 'Element not enabled'
-     });
-     }
-    async checkElemetExistsAndElementClick(element:WebdriverIO.Element){
+    }
+    async checkElemetExistsAndElementClick(element) {
         await browser.pause(1000);
         let isDisplayed = await element.isDisplayed();
         if (isDisplayed) {
-         await element.waitForClickable({ timeout: 40000, interval:1000, timeoutMsg:await element.getHTML(false)+" is still not clickable" })
-         await element.click()
+            await element.waitForClickable({ timeout: 40000, interval: 1000, timeoutMsg: "element is still not clickable" });
+            await element.click();
         }
     }
-
     /**
      * Stale-safe variant of checkElemetExistsAndElementClick. Opt-in helper for
      * optional buttons that live inside a re-rendering container — e.g. the
@@ -391,7 +365,7 @@ class ElementUtils {
      * element reference". Kept as a separate method so the widely-used shared
      * helpers stay untouched and other modules are unaffected.
      */
-    async checkElementExistsAndClickStaleSafe(element:WebdriverIO.Element, appearTimeout: number = 3000){
+    async checkElementExistsAndClickStaleSafe(element, appearTimeout = 3000) {
         // Presence must be *waited* for, not sampled. A fixed pause + one
         // isDisplayed() snapshot loses the race against an antd modal's
         // mount + zoom transition: the helper returns "not there", the modal
@@ -405,10 +379,9 @@ class ElementUtils {
             .waitForDisplayed({ timeout: appearTimeout, interval: 250 })
             .then(() => true)
             .catch(() => false);
-        if (!appeared) return false;
-
+        if (!appeared)
+            return false;
         await this.clickWithStaleRetry(element, 40000);
-
         // Confirm the modal actually went away: if it is still up, everything
         // downstream is about to fail confusingly, so fail here instead.
         const dismissed = await (await this.refetch(element))
@@ -420,118 +393,104 @@ class ElementUtils {
         }
         return true;
     }
-
     /**
      * Use this when the element/input is optional (not mandatory).
      * Does not throw if the element is not displayed; only logs and skips entering text.
      */
-    async checkElemetExistsAndEnterText(element: WebdriverIO.Element, textToEnter: string) {
+    async checkElemetExistsAndEnterText(element, textToEnter) {
         const isDisplayed = await element.isDisplayed();
         if (isDisplayed) {
             await element.waitForEnabled({
                 timeout: 40000,
                 interval: 1000,
-                timeoutMsg: await element.getHTML(false) + " is still not editable"
+                timeoutMsg: "element is still not editable"
             });
             await element.setValue(textToEnter);
         }
     }
-
-    async isElementDisplayed(element:WebdriverIO.Element){
-        await browser.pause(1000)
+    async isElementDisplayed(element) {
+        await browser.pause(1000);
         let isDisplayed = await element.isDisplayed();
         return isDisplayed;
-     }
-     
-     async elementHover(element: WebdriverIO.Element) {
+    }
+    async elementHover(element) {
         try {
             // Pause for 2 seconds before starting (optional)
             await browser.pause(2000);
-    
             // Wait for the element to be displayed
             await element.waitForDisplayed({ timeout: 90000 });
-    
             // Wait for the element to be interactable/clickable (often ensures it's not obscured)
-            await element.waitForClickable({ 
-                timeout: 40000, 
-                interval: 1000, 
-                timeoutMsg: await element.getHTML(false) + " is still not interactable for hover"
+            await element.waitForClickable({
+                timeout: 40000,
+                interval: 1000,
+                timeoutMsg: "element is still not interactable for hover"
             });
-    
             // Perform the hover action
             await element.moveTo();
             console.log('Move to action performed');
-        } catch (error) {
+        }
+        catch (error) {
             throw new Error(error);
         }
     }
-        
     /**
      * Click the button only if it becomes clickable within the given timeout.
      * Uses a short timeout (default 1s) to avoid waiting when the button stays disabled (e.g. after validation failure).
      * Use during unmatched-braces checks: if Done/Save becomes clickable we click it; otherwise we skip and assert the error.
      */
-    async clickIfClickable(button: WebdriverIO.Element, timeoutMs = 1000) {
-      try {
-        await button.waitForClickable({ timeout: timeoutMs });
-      } catch (error) {
-        const message = error instanceof Error ? error.message : String(error);
-        if (/timeout|not clickable/i.test(message)) {
-          // Button stayed disabled within the timeout; caller will assert validation error.
-          return;
+    async clickIfClickable(button, timeoutMs = 1000) {
+        try {
+            await button.waitForClickable({ timeout: timeoutMs });
+        }
+        catch (error) {
+            const message = error instanceof Error ? error.message : String(error);
+            if (/timeout|not clickable/i.test(message)) {
+                // Button stayed disabled within the timeout; caller will assert validation error.
+                return;
+            }
+            throw error;
         }
-        throw error;
-      }
-
-      // waitForClickable succeeded — click errors propagate normally.
-      await button.click();
+        // waitForClickable succeeded — click errors propagate normally.
+        await button.click();
     }
-
     /**
      * Clear the input's current value then type new text.
      * Delegates the clear step to selectAllAndClear (select-all + Backspace) so
      * React-controlled inputs see the onChange event. Only calls setValue when
      * textToEnter is non-empty.
      */
-    async clearAndEnterText(element: WebdriverIO.Element, textToEnter: string) {
+    async clearAndEnterText(element, textToEnter) {
         await this.selectAllAndClear(element);
         if (textToEnter !== '') {
             await element.setValue(textToEnter);
         }
     }
-
     /**
      * Clear text by sending Backspace key N times (N = textToRemove.length).
      * If element is provided, focus it first (click) so backspaces apply to that field.
      * Use for clearing content in inputs/editors (e.g. unmatched-braces recovery in Viber, Email CodeMirror).
      */
-    async clearByBackspace(textToRemove: string, element?: WebdriverIO.Element) {
-      if (element) {
-        await element.waitForDisplayed({ timeout: 10000 });
-        await element.click();
-      }
-      const count = textToRemove.length;
-      for (let i = 0; i < count; i++) {
-        await browser.keys(["Backspace"]);
-      }
+    async clearByBackspace(textToRemove, element) {
+        if (element) {
+            await element.waitForDisplayed({ timeout: 10000 });
+            await element.click();
+        }
+        const count = textToRemove.length;
+        for (let i = 0; i < count; i++) {
+            await browser.keys(["Backspace"]);
+        }
     }
-
     /**
      * Wait for a spinner to appear (optional) then disappear.
      * Mirrors the pattern in deleteTemplate: catches if spinner never appears (loaded too fast),
      * then waits for it to vanish before proceeding.
      */
-    async waitForSpinnerCycle(
-      spinner: WebdriverIO.Element,
-      appearTimeoutMs = 5000,
-      disappearTimeoutMs = 180000
-    ) {
-      await spinner.waitForDisplayed({ timeout: appearTimeoutMs }).catch(() => {
-        console.log("Spinner did not appear — may have loaded too fast, proceeding");
-      });
-      await spinner.waitForDisplayed({ timeout: disappearTimeoutMs, reverse: true });
-    }
-
+    async waitForSpinnerCycle(spinner, appearTimeoutMs = 5000, disappearTimeoutMs = 180000) {
+        await spinner.waitForDisplayed({ timeout: appearTimeoutMs }).catch(() => {
+            console.log("Spinner did not appear — may have loaded too fast, proceeding");
+        });
+        await spinner.waitForDisplayed({ timeout: disappearTimeoutMs, reverse: true });
+    }
     /**
      * Best-effort loader "settle" for the blank-screen -> loader -> content
      * lifecycle. Waits (advisory) for a loader to APPEAR, then to DISAPPEAR, both
@@ -542,18 +501,14 @@ class ElementUtils {
      * hard guarantee should follow this with a positive element check (e.g.
      * waitForStableVisible on real content).
      */
-    async waitForLoaderSettle(
-      loader: WebdriverIO.Element,
-      { appearTimeoutMs = 20000, disappearTimeoutMs = 180000 } = {}
-    ) {
-      await loader
-        .waitForDisplayed({ timeout: appearTimeoutMs })
-        .catch(() => console.log(`Loader did not appear within ${appearTimeoutMs}ms — proceeding`));
-      await loader
-        .waitForDisplayed({ timeout: disappearTimeoutMs, reverse: true })
-        .catch(() => console.log(`Loader still present after ${disappearTimeoutMs}ms — proceeding (positive check gates)`));
-    }
-
+    async waitForLoaderSettle(loader, { appearTimeoutMs = 20000, disappearTimeoutMs = 180000 } = {}) {
+        await loader
+            .waitForDisplayed({ timeout: appearTimeoutMs })
+            .catch(() => console.log(`Loader did not appear within ${appearTimeoutMs}ms — proceeding`));
+        await loader
+            .waitForDisplayed({ timeout: disappearTimeoutMs, reverse: true })
+            .catch(() => console.log(`Loader still present after ${disappearTimeoutMs}ms — proceeding (positive check gates)`));
+    }
     /**
      * Reusable try-catch handler function for waiting and verifying elements
      */
@@ -561,66 +516,50 @@ class ElementUtils {
         try {
             await element.waitForDisplayed({ timeout });
             console.log(`${label} found in search results:`, name);
-        } catch (error) {
+        }
+        catch (error) {
             console.error(`${label} not found in search results:`, name);
             throw new Error(`${label} "${name}" not found in search results`);
         }
     }
-
     /**
      * Counts visible elements in a `$$` collection and asserts it equals `expected`.
      * antd v6 keeps duplicate hidden DOM nodes around, so plain `.length` isn't reliable.
      */
-    async assertVisibleCount(
-      elements: WebdriverIO.ElementArray,
-      expected: number,
-      label = "elements"
-    ) {
-      let visibleCount = 0;
-      for (const el of elements) {
-        if (await el.isDisplayed().catch(() => false)) visibleCount++;
-      }
-      assert.equal(
-        visibleCount,
-        expected,
-        `Expected ${expected} visible ${label} but found ${visibleCount}`
-      );
-      console.log(`🟢 Verified visible ${label} count = ${visibleCount}`);
-    }
-
+    async assertVisibleCount(elements, expected, label = "elements") {
+        let visibleCount = 0;
+        for (const el of elements) {
+            if (await el.isDisplayed().catch(() => false))
+                visibleCount++;
+        }
+        assert_1.strict.equal(visibleCount, expected, `Expected ${expected} visible ${label} but found ${visibleCount}`);
+        console.log(`🟢 Verified visible ${label} count = ${visibleCount}`);
+    }
     /**
      * Polls `$$(selector)` until one match is displayed, skipping hidden duplicates
      * (e.g. antd keeps inactive tab panes mounted in the DOM).
      */
-    async firstVisibleElement(selector: string, timeout = 90000): Promise<WebdriverIO.Element> {
-        let found: WebdriverIO.Element | undefined;
-        await browser.waitUntil(
-            async () => {
-                const elements = await $$(selector);
-                for (const element of elements) {
-                    if (await element.isDisplayed()) {
-                        found = element;
-                        return true;
-                    }
+    async firstVisibleElement(selector, timeout = 90000) {
+        let found;
+        await browser.waitUntil(async () => {
+            const elements = await $$(selector);
+            for (const element of elements) {
+                if (await element.isDisplayed()) {
+                    found = element;
+                    return true;
                 }
-                return false;
-            },
-            { timeout, timeoutMsg: `No visible element matched selector: ${selector}` }
-        );
-        return found as WebdriverIO.Element;
+            }
+            return false;
+        }, { timeout, timeoutMsg: `No visible element matched selector: ${selector}` });
+        return found;
     }
-
     /**
      * Races candidates and confirms the winner is stably displayed.
      * After a candidate wins the race, waits stableMs then re-checks.
      * If the winner disappeared, retries the full race with remaining timeout.
      * Only throws when the total timeout is exhausted.
      */
-    async waitForStableVisible(
-        candidates: WebdriverIO.Element[],
-        timeout: number,
-        stableMs: number = 5000,
-    ): Promise<WebdriverIO.Element> {
+    async waitForStableVisible(candidates, timeout, stableMs = 5000) {
         const deadline = Date.now() + timeout;
         while (true) {
             const remaining = deadline - Date.now();
@@ -631,14 +570,14 @@ class ElementUtils {
             for (const el of candidates) {
                 if (await el.isDisplayed()) {
                     await browser.pause(stableMs);
-                    if (await el.isDisplayed()) return el;
+                    if (await el.isDisplayed())
+                        return el;
                     console.log(`waitForStableVisible: candidate "${el.selector}" disappeared — retrying race`);
                     break;
                 }
             }
         }
     }
-
     /**
      * Retries an async step until it completes without throwing, up to `maxAttempts`
      * times (default 3). The flow only moves ahead once the step is acknowledged
@@ -649,24 +588,17 @@ class ElementUtils {
      * (e.g. refresh / re-trigger a search) before the next attempt. The last error is
      * only re-thrown after every attempt is exhausted.
      */
-    async retryStep<T>(
-        action: () => Promise<T>,
-        options: {
-            maxAttempts?: number;
-            delayMs?: number;
-            label?: string;
-            beforeRetry?: (attempt: number) => Promise<void>;
-        } = {}
-    ): Promise<T> {
+    async retryStep(action, options = {}) {
         const { maxAttempts = 3, delayMs = 3000, label = "step", beforeRetry } = options;
-        let lastError: unknown;
+        let lastError;
         for (let attempt = 1; attempt <= maxAttempts; attempt++) {
             try {
                 console.log(`[retry] Attempt ${attempt}/${maxAttempts} for: '${label}'`);
                 const result = await action();
                 console.log(`[retry] '${label}' acknowledged on attempt ${attempt}/${maxAttempts}`);
                 return result;
-            } catch (error) {
+            }
+            catch (error) {
                 lastError = error;
                 console.log(`[retry] '${label}' failed on attempt ${attempt}/${maxAttempts}: ${error}`);
                 if (attempt < maxAttempts) {
@@ -679,7 +611,6 @@ class ElementUtils {
         }
         throw new Error(`[retry] '${label}' failed after ${maxAttempts} attempts. Last error: ${lastError}`);
     }
-
     /**
      * Guards a step's precondition: the element that the PREVIOUS step is expected to
      * have produced must be present before the current step runs. If it is not displayed
@@ -688,36 +619,34 @@ class ElementUtils {
      * its result. Returns true when the precondition holds (use the return value inside
      * a retry's beforeRetry hook to decide whether re-confirmation is needed).
      */
-    async ensurePrecondition(element: WebdriverIO.Element, label: string, timeout = 15000): Promise<boolean> {
+    async ensurePrecondition(element, label, timeout = 15000) {
         try {
             await element.waitForDisplayed({ timeout, interval: 500 });
             console.log(`[precondition] OK — previous step output present: '${label}'`);
             return true;
-        } catch (error) {
-            throw new Error(
-                `[precondition] FAILED — expected output from the previous step is not present: '${label}'. ` +
-                `The current step will not run. Underlying: ${error}`
-            );
+        }
+        catch (error) {
+            throw new Error(`[precondition] FAILED — expected output from the previous step is not present: '${label}'. ` +
+                `The current step will not run. Underlying: ${error}`);
         }
     }
-
     /**
      * Selects all text in a React controlled input and clears it via Backspace,
      * triggering React's onChange. Use instead of clearValue() for React inputs.
      */
-    async selectAllAndClear(element: WebdriverIO.Element) {
+    async selectAllAndClear(element) {
         await element.waitForEnabled({ timeout: 40000, interval: 1000 });
-        await browser.execute((el: any) => el.select(), element);
+        await browser.execute((el) => el.select(), element);
         await browser.keys("Backspace");
     }
-
-    async clearByKeysAndType(element: WebdriverIO.Element, textToEnter: string) {
+    async clearByKeysAndType(element, textToEnter) {
         await element.waitForDisplayed({ timeout: 20000 });
         await element.waitForEnabled({ timeout: 40000, interval: 1000 });
         await element.click();
         for (let attempt = 0; attempt < 10; attempt++) {
             const current = await element.getValue();
-            if (!current) break;
+            if (!current)
+                break;
             await browser.keys("End");
             await browser.keys(new Array(current.length + 2).fill("Backspace"));
         }
@@ -725,7 +654,6 @@ class ElementUtils {
             await element.addValue(textToEnter);
         }
     }
-
     /**
      * Moves the cursor to the absolute end of the currently focused contenteditable element
      * (e.g. TinyMCE inline editor) using the DOM Selection API.
@@ -738,20 +666,20 @@ class ElementUtils {
      * Runs in the current WebDriver frame context — call from inside the BeFree iframe
      * after switchToIframe() so document refers to the iframe document.
      */
-    async moveCursorToEndOfContentEditable(): Promise<void> {
+    async moveCursorToEndOfContentEditable() {
         await browser.execute(() => {
-            const el = document.activeElement as HTMLElement;
-            if (!el || !el.isContentEditable) return;
+            const el = document.activeElement;
+            if (!el || !el.isContentEditable)
+                return;
             const range = document.createRange();
             const sel = window.getSelection();
-            if (!sel) return;
+            if (!sel)
+                return;
             range.selectNodeContents(el);
             range.collapse(false); // collapse to end
             sel.removeAllRanges();
             sel.addRange(range);
         });
     }
-
 }
-
-export default new ElementUtils()
+exports.default = new ElementUtils();