@syngrisi/wdio-sdk 2.6.1 → 3.1.0

package/README.md

@@ -256,6 +256,7 @@ macOS/Linux: `export SYNGRISI_LOG_LEVEL=debug`
 `ENV_POSTFIX` - will add to platform property, you can use this to set some unique platform name for particular
 environment
 `SYNGRISI_LOG_LEVEL` - logging level (`"trace" | "debug" | "info" | "warn" | "error"`)
+`SYNGRISI_DISABLE_DOM_DATA` - disable DOM data collection for RCA (`"true" | "false"`), default: `"true"`
 
 ## Documentation
 

package/dist/WDIODriver.js

@@ -209,6 +209,9 @@ class WDIODriver {
         if (!Buffer.isBuffer(imageBuffer))
             throw new Error('check - wrong imageBuffer');
         let opts = null;
+        // Check if DOM data should be skipped (via env var or option)
+        // Default: skipDomData is true (disabled) unless explicitly enabled via env var or params
+        const skipDomData = params?.skipDomData ?? (process.env.SYNGRISI_DISABLE_DOM_DATA !== 'false');
         try {
             opts = {
                 // ident:  ['name', 'viewport', 'browserName', 'os', 'app', 'branch'];
@@ -224,7 +227,8 @@ class WDIODriver {
                 browserVersion: this.params.test.browserVersion,
                 browserFullVersion: this.params.test.browserFullVersion,
                 hashCode: (0, node_crypto_1.createHash)('sha512').update(imageBuffer).digest('hex'),
-                domDump: domDump,
+                domDump: skipDomData ? undefined : domDump,
+                skipDomData: skipDomData || undefined,
             };
             (0, paramsGuard_1.paramsGuard)(opts, 'check, opts', core_api_1.CheckParamsSchema);
             // Remove autoAccept from params before sending to API (it's SDK-only)

package/dist/lib/getDomDump.js

@@ -1,78 +1,156 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getDomDump = getDomDump;
+/**
+ * Maximum depth for DOM tree traversal to prevent stack overflow
+ */
+const MAX_DEPTH = 15;
+/**
+ * Maximum text length to capture for each element
+ */
+const MAX_TEXT_LENGTH = 200;
+/**
+ * Tags to skip during DOM collection (non-visual elements)
+ */
+const SKIP_TAGS = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'META', 'LINK', 'HEAD', 'SVG', 'PATH'];
+/**
+ * CSS properties to capture for RCA analysis
+ */
+const STYLES_TO_CAPTURE = [
+    // Display & Visibility
+    'display', 'visibility', 'opacity',
+    // Position
+    'position', 'top', 'right', 'bottom', 'left',
+    // Dimensions
+    'width', 'height', 'min-width', 'min-height', 'max-width', 'max-height',
+    // Box Model
+    'margin', 'margin-top', 'margin-right', 'margin-bottom', 'margin-left',
+    'padding', 'padding-top', 'padding-right', 'padding-bottom', 'padding-left',
+    'border', 'border-width', 'border-style', 'border-color',
+    'border-radius',
+    // Colors
+    'background-color', 'color',
+    // Typography
+    'font-family', 'font-size', 'font-weight', 'line-height', 'text-align',
+    'text-decoration', 'text-transform', 'letter-spacing',
+    // Layout
+    'overflow', 'overflow-x', 'overflow-y',
+    'z-index',
+    'transform',
+    // Flexbox
+    'flex', 'flex-direction', 'flex-wrap', 'justify-content', 'align-items', 'align-content', 'gap',
+    // Grid
+    'grid-template-columns', 'grid-template-rows', 'grid-gap',
+    // Box Shadow
+    'box-shadow',
+];
+/**
+ * Check if element is visible (has dimensions and not hidden)
+ */
 function isVisible(el) {
-    while (el) {
-        // @ts-ignore
-        if (el === document) {
-            return true;
-        }
-        const style = window.getComputedStyle(el, null);
-        if (!el || !style) {
-            return false;
-        }
-        if (style.display === 'none' || style.visibility === 'hidden' || +style.opacity === 0) {
-            return false;
-        }
-        if ((style.display === 'block' || style.display === 'inline-block') &&
-            style.height === '0px' && style.overflow === 'hidden') {
-            return false;
-        }
-        return style.position === 'fixed' || isVisible(el.parentNode);
+    const style = window.getComputedStyle(el);
+    if (style.display === 'none' ||
+        style.visibility === 'hidden' ||
+        parseFloat(style.opacity) === 0) {
+        return false;
     }
-    return false;
+    const rect = el.getBoundingClientRect();
+    return rect.width > 0 && rect.height > 0;
 }
-function getDomPath(el) {
-    const stack = [];
-    while (el.parentNode !== null) {
-        let sibCount = 0;
-        let sibIndex = 0;
-        for (let i = 0; i < el.parentNode.childNodes.length; i++) {
-            const sib = el.parentNode.childNodes[i];
-            if (sib.nodeName === el.nodeName) {
-                if (sib === el) {
-                    sibIndex = sibCount;
-                }
-                sibCount++;
-            }
-        }
-        if (el.hasAttribute('id') && el.id !== '') {
-            stack.unshift(`${el.nodeName.toLowerCase()}#${el.id}`);
+/**
+ * Extract relevant attributes from element
+ * Skips most data-* attributes to reduce payload size
+ */
+function getAttributes(el) {
+    const attrs = {};
+    for (const attr of Array.from(el.attributes)) {
+        // Include data-testid but skip other data-* attributes
+        if (!attr.name.startsWith('data-') || attr.name === 'data-testid') {
+            attrs[attr.name] = attr.value;
         }
-        else if (sibCount > 1) {
-            stack.unshift(`${el.nodeName.toLowerCase()}:eq(${sibIndex})`);
+    }
+    return attrs;
+}
+/**
+ * Extract computed styles that affect visual appearance
+ */
+function getComputedStyles(el) {
+    const computed = window.getComputedStyle(el);
+    const styles = {};
+    for (const prop of STYLES_TO_CAPTURE) {
+        const value = computed.getPropertyValue(prop);
+        // Skip default/empty values to reduce payload
+        if (value && value !== 'initial' && value !== 'none' && value !== 'normal' && value !== 'auto' && value !== '0px' && value !== 'rgba(0, 0, 0, 0)') {
+            // Convert kebab-case to camelCase for consistency
+            const camelProp = prop.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase());
+            styles[camelProp] = value;
         }
-        else {
-            stack.unshift(el.nodeName.toLowerCase());
+    }
+    return styles;
+}
+/**
+ * Get direct text content (not from children)
+ */
+function getDirectText(el) {
+    let text = '';
+    for (const child of Array.from(el.childNodes)) {
+        if (child.nodeType === Node.TEXT_NODE) {
+            text += child.textContent?.trim() || '';
         }
-        el = el.parentNode;
     }
-    return stack.slice(1);
+    // Truncate long text
+    const trimmed = text.trim();
+    if (!trimmed)
+        return undefined;
+    return trimmed.length > MAX_TEXT_LENGTH ? trimmed.substring(0, MAX_TEXT_LENGTH) + '...' : trimmed;
 }
-function dumpElement(el) {
+/**
+ * Recursively collect DOM node and its children
+ */
+function collectNode(el, depth = 0) {
+    // Limit depth to prevent stack overflow
+    if (depth > MAX_DEPTH)
+        return null;
+    // Skip invisible elements
+    if (!isVisible(el))
+        return null;
+    // Skip non-visual elements
+    if (SKIP_TAGS.includes(el.tagName))
+        return null;
     const rect = el.getBoundingClientRect();
+    // Collect children
+    const children = [];
+    for (const child of Array.from(el.children)) {
+        const childNode = collectNode(child, depth + 1);
+        if (childNode) {
+            children.push(childNode);
+        }
+    }
     return {
-        tag: el.tagName,
-        id: el.id,
-        top: rect.top,
-        right: rect.right,
-        bottom: rect.bottom,
-        left: rect.left,
-        width: rect.width,
-        height: rect.height,
-        domPath: getDomPath(el),
+        tagName: el.tagName.toLowerCase(),
+        attributes: getAttributes(el),
+        rect: {
+            x: Math.round(rect.x),
+            y: Math.round(rect.y),
+            width: Math.round(rect.width),
+            height: Math.round(rect.height),
+        },
+        computedStyles: getComputedStyles(el),
+        children,
+        text: getDirectText(el),
     };
 }
 /**
+ * Collects DOM tree with computed styles for RCA (Root Cause Analysis)
+ * This function runs in browser context via WebdriverIO
+ *
+ * @param done - Callback function for WebdriverIO async compatibility
+ * @returns Serialized DomNode tree as JSON string
  * @hidden - hidden for typedoc
  */
 function getDomDump(done) {
-    const elements = Array.from(document.body.getElementsByTagName('*')).filter((x) => isVisible(x));
-    const dumpElements = [];
-    for (const el of elements) {
-        dumpElements.push(dumpElement(el));
-    }
-    const result = JSON.stringify(dumpElements, null, '\t');
+    const root = collectNode(document.body);
+    const result = JSON.stringify(root);
     done(result);
     return result;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@syngrisi/wdio-sdk",
-  "version": "2.6.1",
+  "version": "3.1.0",
   "description": "Syngrisi WebdriverIO SDK",
   "main": "dist/WDIODriver.js",
   "types": "dist/WDIODriver.d.ts",
@@ -38,7 +38,7 @@
   },
   "homepage": "https://github.com/syngrisi/syngrisi/tree/main/packages/wdio-sdk#readme",
   "dependencies": {
-    "@syngrisi/core-api": "^2.6.1",
+    "@syngrisi/core-api": "^3.1.0",
     "@wdio/globals": "^9.17.0",
     "@wdio/types": "^9.20.0",
     "form-data": "^4.0.5",
@@ -59,5 +59,5 @@
     "typescript": "^5.9.3",
     "vitest": "^4.0.15"
   },
-  "gitHead": "9c8a083ab2e6026962576cf481847a17e69469bd"
+  "gitHead": "f88990c7fc709ffd5007f45c31535f1edb5fafb4"
 }