optimization

Author: Aaryan430

lib/core/utils/dq-element.js

@@ -1,4 +1,3 @@
-import getSelector from './get-selector';
 import getAncestry from './get-ancestry';
 import getXpath from './get-xpath';
 import getNodeFromTree from './get-node-from-tree';
@@ -7,30 +6,80 @@ import cache from '../base/cache';
 
 const CACHE_KEY = 'DqElm.RunOptions';
 
-function truncate(str, maxLength) {
-  maxLength = maxLength || 300;
+function getFullPathSelector(elm) {
+  if (elm.nodeName === 'BODY') {
+    return 'BODY';
+  }
+
+  if (cache.get('getFullPathSelector') === undefined) {
+    cache.set('getFullPathSelector', new WeakMap());
+  }
 
-  if (str.length > maxLength) {
-    var index = str.indexOf('>');
-    str = str.substring(0, index + 1);
+  // Check cache first
+  const sourceCache = cache.get('getFullPathSelector');
+  if (sourceCache.has(elm)) {
+    return sourceCache.get(elm);
   }
 
-  return str;
+  const element = elm;
+  const names = [];
+  while (elm.parentElement && elm.nodeName !== 'BODY') {
+    if (elm.id) {
+      names.unshift('#' + elm.getAttribute('id'));
+      break;
+    } else {
+      let c = 1,
+        e = elm;
+      for (; e.previousElementSibling; e = e.previousElementSibling, c++) {}
+      names.unshift(elm.nodeName + ':nth-child(' + c + ')');
+    }
+    elm = elm.parentElement;
+  }
+
+  const selector = names.join('>');
+  sourceCache.set(element, selector);
+  return selector;
 }
 
 function getSource(element) {
-  if (!element?.outerHTML) {
+  if (!element) {
     return '';
   }
-  var source = element.outerHTML;
-  if (!source && typeof window.XMLSerializer === 'function') {
-    source = new window.XMLSerializer().serializeToString(element);
+
+  // Initialize cache if needed
+  if (cache.get('getSourceEfficient') === undefined) {
+    cache.set('getSourceEfficient', new WeakMap());
+  }
+
+  // Check cache first
+  const sourceCache = cache.get('getSourceEfficient');
+  if (sourceCache.has(element)) {
+    return sourceCache.get(element);
   }
-  let htmlString = truncate(source || '');
-  // Remove unwanted attributes
-  const regex = /\s*data-percy-[^=]+="[^"]*"/g;
-  htmlString = htmlString.replace(regex, '');
-  return htmlString;
+
+  // Compute value if not cached
+  const tagName = element.nodeName?.toLowerCase();
+  if (!tagName) {
+    return '';
+  }
+
+  let result;
+  try {
+    const attributes = Array.from(element.attributes || [])
+      .filter(attr => !attr.name.startsWith('data-percy-'))
+      .map(attr => `${attr.name}="${attr.value}"`)
+      .join(' ');
+
+    result = attributes ? `<${tagName} ${attributes}>` : `<${tagName}>`;
+
+    // Store in cache
+    sourceCache.set(element, result);
+  } catch (e) {
+    // Handle potential errors (like accessing attributes on non-element nodes)
+    result = `<${tagName || 'unknown'}>`;
+  }
+
+  return result;
 }
 
 /**
@@ -94,7 +143,9 @@ DqElement.prototype = {
    * @return {String}
    */
   get selector() {
-    return this.spec.selector || [getSelector(this.element, this._options)];
+    return (
+      this.spec.selector || [getFullPathSelector(this.element, this._options)]
+    );
   },
 
   /**