@percy/dom 1.31.5-beta.2 → 1.31.5

package/dist/bundle.js

@@ -7,7 +7,7 @@
     process.env.__PERCY_BROWSERIFIED__ = true;
 
     // Creates a resource object from an element's unique ID and data URL
-    function resourceFromDataURL$1(uid, dataURL) {
+    function resourceFromDataURL(uid, dataURL) {
       // split dataURL into desired parts
       let [data, content] = dataURL.split(',');
       let [, mimetype] = data.split(':');
@@ -142,8 +142,8 @@
       (_dom$querySelector = dom.querySelector('head')) === null || _dom$querySelector === void 0 || _dom$querySelector.prepend($base);
     }
 
-    // Recursively serializes iframe documents into srcdoc attributes (ASYNC).
-    async function serializeFrames({
+    // Recursively serializes iframe documents into srcdoc attributes.
+    function serializeFrames({
       dom,
       clone,
       warnings,
@@ -170,8 +170,8 @@
           // the frame has yet to load and wasn't built with js, it is unsafe to serialize
           if (!builtWithJs && !frame.contentWindow.performance.timing.loadEventEnd) continue;
 
-          // recersively serialize contents (AWAIT async call)
-          let serialized = await serializeDOM({
+          // recersively serialize contents
+          let serialized = serializeDOM({
             domTransformation: setBaseURI,
             dom: frame.contentDocument,
             enableJavaScript,
@@ -196,7 +196,7 @@
     }
 
     // Returns a mostly random uid.
-    function uid$1() {
+    function uid() {
       return `_${Math.random().toString(36).substr(2, 9)}`;
     }
     function markElement(domElement, disableShadowDOM, forceShadowAsLightDOM) {
@@ -204,7 +204,7 @@
       // Mark elements that are to be serialized later with a data attribute.
       if (['input', 'textarea', 'select', 'iframe', 'canvas', 'video', 'style'].includes((_domElement$tagName = domElement.tagName) === null || _domElement$tagName === void 0 ? void 0 : _domElement$tagName.toLowerCase())) {
         if (!domElement.getAttribute('data-percy-element-id')) {
-          domElement.setAttribute('data-percy-element-id', uid$1());
+          domElement.setAttribute('data-percy-element-id', uid());
         }
       }
 
@@ -215,7 +215,7 @@
           domElement.setAttribute('data-percy-shadow-host', '');
         }
         if (!domElement.getAttribute('data-percy-element-id')) {
-          domElement.setAttribute('data-percy-element-id', uid$1());
+          domElement.setAttribute('data-percy-element-id', uid());
         }
       }
     }
@@ -250,7 +250,7 @@
     }
     function createStyleResource(styleSheet) {
       const styles = Array.from(styleSheet.cssRules).map(cssRule => cssRule.cssText).join('\n');
-      let resource = resourceFromText(uid$1(), 'text/css', styles);
+      let resource = resourceFromText(uid(), 'text/css', styles);
       return resource;
     }
     function serializeCSSOM(ctx) {
@@ -416,7 +416,7 @@
           if (!dataUrl || dataUrl === 'data:,') continue;
 
           // create a resource for the canvas data
-          let resource = resourceFromDataURL$1(percyElementId, dataUrl);
+          let resource = resourceFromDataURL(percyElementId, dataUrl);
           resources.add(resource);
 
           // create and insert image element with the resource URL
@@ -467,7 +467,7 @@
           if (!dataUrl || dataUrl === 'data:,') continue;
 
           // create a resource from the serialized data url
-          let resource = resourceFromDataURL$1(videoId, dataUrl);
+          let resource = resourceFromDataURL(videoId, dataUrl);
           resources.add(resource);
 
           // use a data attribute to avoid making a real request
@@ -478,186 +478,137 @@
       }
     }
 
-    /* global fetch, FileReader */
-
-    // Helper: Generate unique ID for resources
-    function uid() {
-      return `_${Math.random().toString(36).substr(2, 9)}`;
-    }
-
-    // Helper: Create resource from data URL
-    function resourceFromDataURL(id, dataURL) {
-      let [data, content] = dataURL.split(',');
-      let [, mimetype] = data.split(':');
-      [mimetype] = mimetype.split(';');
-      let [, ext] = mimetype.split('/');
-      let path = `/__serialized__/${id}.${ext}`;
-      let url = new URL(path, document.URL).toString();
-      return {
-        url,
-        content,
-        mimetype
-      };
+    /* global XPathResult */
+    const PSEDUO_ELEMENT_MARKER_ATTR = 'data-percy-pseudo-element-id';
+    function markElementIfNeeded(element, markWithId) {
+      if (markWithId && !element.getAttribute(PSEDUO_ELEMENT_MARKER_ATTR)) {
+        element.setAttribute(PSEDUO_ELEMENT_MARKER_ATTR, uid());
+      }
     }
 
-    // Find all blob URLs in the DOM
-    function findAllBlobUrls(dom) {
-      const blobUrls = [];
-
-      // Find blob URLs in src attributes (img, video, audio, source, iframe)
-      const elementsWithSrc = dom.querySelectorAll('[src^="blob:"]');
-      for (const el of elementsWithSrc) {
-        if (!el.getAttribute('data-percy-element-id')) {
-          el.setAttribute('data-percy-element-id', uid());
+    /**
+     * Get all elements matching the pseudoClassEnabledElements configuration
+     * @param {Document} dom - The document to search
+     * @param {Object} config - Configuration with id, className, and xpath arrays
+     * @param {boolean} markWithId - Whether to mark elements with PSEDUO_ELEMENT_MARKER_ATTR
+     * @returns {Array} Array of elements found
+     */
+    function getElementsToProcess(ctx, config, markWithId = false) {
+      const {
+        dom
+      } = ctx;
+      const elements = [];
+      if (config.id && Array.isArray(config.id)) {
+        for (const id of config.id) {
+          const element = dom.getElementById(id);
+          if (!element) {
+            ctx.warnings.add(`No element found with ID: ${id} for pseudo-class serialization`);
+            continue;
+          }
+          markElementIfNeeded(element, markWithId);
+          elements.push(element);
         }
-        blobUrls.push({
-          element: el,
-          blobUrl: el.src,
-          property: 'src',
-          id: el.getAttribute('data-percy-element-id')
-        });
       }
 
-      // Find blob URLs in href attributes
-      // Skip stylesheet links as they're handled by serializeCSSOM
-      const elementsWithHref = dom.querySelectorAll('[href^="blob:"]');
-      for (const el of elementsWithHref) {
-        // Skip <link rel="stylesheet"> elements - they're handled by serializeCSSOM
-        if (el.tagName === 'LINK' && el.getAttribute('rel') === 'stylesheet') {
-          continue;
-        }
-        if (!el.getAttribute('data-percy-element-id')) {
-          el.setAttribute('data-percy-element-id', uid());
+      // Process only first match per class name
+      if (config.className && Array.isArray(config.className)) {
+        for (const className of config.className) {
+          const elementCollection = dom.getElementsByClassName(className);
+          if (!elementCollection.length) {
+            ctx.warnings.add(`No element found with class name: ${className} for pseudo-class serialization`);
+            continue;
+          }
+          const element = elementCollection[0];
+          markElementIfNeeded(element, markWithId);
+          elements.push(element);
         }
-        blobUrls.push({
-          element: el,
-          blobUrl: el.href,
-          property: 'href',
-          id: el.getAttribute('data-percy-element-id')
-        });
       }
-
-      // Find blob URLs in inline styles (background-image, etc.)
-      const allElements = dom.querySelectorAll('*');
-      for (const el of allElements) {
-        const inlineStyle = el.getAttribute('style');
-        if (inlineStyle && inlineStyle.includes('blob:')) {
-          const blobMatches = inlineStyle.match(/url\(["']?(blob:[^"')]+)["']?\)/g);
-          if (blobMatches) {
-            if (!el.getAttribute('data-percy-element-id')) {
-              el.setAttribute('data-percy-element-id', uid());
-            }
-            for (const match of blobMatches) {
-              const urlMatch = match.match(/url\(["']?(blob:[^"')]+)["']?\)/);
-              blobUrls.push({
-                element: el,
-                blobUrl: urlMatch[1],
-                property: 'style',
-                id: el.getAttribute('data-percy-element-id')
-              });
+      if (config.xpath && Array.isArray(config.xpath)) {
+        for (const xpathExpression of config.xpath) {
+          try {
+            const element = dom.evaluate(xpathExpression, dom, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
+            if (!element) {
+              ctx.warnings.add(`No element found for XPath: ${xpathExpression} for pseudo-class serialization`);
+              continue;
             }
+            markElementIfNeeded(element, markWithId);
+          } catch (err) {
+            console.warn(`Invalid XPath expression "${xpathExpression}". Error: ${err.message}`);
           }
         }
       }
-      return blobUrls;
+      return elements;
     }
 
-    // Convert blob URL to Percy resource (async)
-    async function convertBlobToResource(blobInfo) {
-      const {
-        element,
-        blobUrl,
-        property,
-        id
-      } = blobInfo;
-      try {
-        // Fetch the blob data
-        const response = await fetch(blobUrl);
-        const blob = await response.blob();
-
-        // Convert blob to data URL using FileReader
-        const dataUrl = await new Promise((resolve, reject) => {
-          /* eslint-disable-next-line no-undef */
-          const reader = new FileReader();
-          reader.onloadend = () => resolve(reader.result);
-          reader.onerror = reject;
-          reader.readAsDataURL(blob);
-        });
-
-        // Create Percy resource
-        const resource = resourceFromDataURL(id, dataUrl);
-
-        /* istanbul ignore else: property is always one of 'src', 'href', or 'style' */
-        if (property === 'src') {
-          element.removeAttribute('src');
-          element.setAttribute('data-percy-serialized-attribute-src', resource.url);
-        } else if (property === 'href') {
-          element.removeAttribute('href');
-          element.setAttribute('data-percy-serialized-attribute-href', resource.url);
-        } else if (property === 'style') {
-          const currentStyle = element.getAttribute('style');
-          const updatedStyle = currentStyle.replace(blobUrl, resource.url);
-          element.setAttribute('style', updatedStyle);
-        }
-        return resource;
-      } catch (err) {
-        throw new Error(`Failed to convert blob URL ${blobUrl}: ${err.message}`);
-      }
+    /**
+     * Mark pseudo-class enabled elements with data-percy-element-id before cloning
+     * This must be called before the DOM is cloned
+     * @param {Document} dom - The document to mark
+     * @param {Object} config - Configuration with id and xpath arrays
+     */
+    function markPseudoClassElements(ctx, config) {
+      if (!config) return;
+      getElementsToProcess(ctx, config, true);
     }
 
-    // Process lazy-loaded images (data-src to src)
-    function processLazyLoadedImages(dom) {
-      const lazyImages = dom.querySelectorAll('img[data-src], source[data-src]');
-      let processedCount = 0;
-      for (const el of lazyImages) {
-        const dataSrc = el.getAttribute('data-src');
-        if (dataSrc) {
-          try {
-            const url = new URL(dataSrc, window.location.origin);
-            if (['http:', 'https:', 'data:', 'blob:'].includes(url.protocol)) {
-              el.setAttribute('src', url.href);
-              processedCount++;
-            }
-          } catch (e) {
-            // Invalid URL, skip
-          }
-        }
+    /**
+     * Convert CSSStyleDeclaration to CSS text with !important declarations
+     * @param {CSSStyleDeclaration} styles - Computed style declaration
+     * @returns {string} CSS text
+     */
+    function stylesToCSSText(styles) {
+      const cssProperties = [];
+      for (let i = 0; i < styles.length; i++) {
+        const property = styles[i];
+        const value = styles.getPropertyValue(property);
+        cssProperties.push(`${property}: ${value} !important;`);
       }
-      return processedCount;
+      return cssProperties.join(' ');
     }
 
-    // Preprocess dynamic resources (async) - runs before cloning
-    async function preprocessDynamicResources(dom, resources, warnings) {
-      const processedResources = [];
-
-      // 1. Process lazy-loaded images
-      const lazyCount = processLazyLoadedImages(dom);
-      if (lazyCount > 0) {
-        console.debug(`Percy: Processed ${lazyCount} lazy-loaded images`);
+    /**
+     * Process pseudo-class elements and add percy-pseudo-class CSS
+     * @param {Object} ctx - Serialization context
+     */
+    function serializePseudoClasses(ctx) {
+      if (!ctx.pseudoClassEnabledElements) {
+        return;
+      }
+      const elements = ctx.dom.querySelectorAll(`[${PSEDUO_ELEMENT_MARKER_ATTR}]`);
+      if (elements.length === 0) {
+        return;
+      }
+      const cssRules = [];
+      for (const element of elements) {
+        const percyElementId = element.getAttribute(PSEDUO_ELEMENT_MARKER_ATTR);
+        const cloneElement = ctx.clone.querySelector(`[${PSEDUO_ELEMENT_MARKER_ATTR}="${percyElementId}"]`);
+        if (!cloneElement) {
+          ctx.warnings.add(`Element not found for pseudo-class serialization with percy-element-id: ${percyElementId}`);
+          continue;
+        }
+        try {
+          // Get all computed styles including pseudo-classes
+          const computedStyles = window.getComputedStyle(element);
+          const cssText = stylesToCSSText(computedStyles);
+          const selector = `[${PSEDUO_ELEMENT_MARKER_ATTR}="${percyElementId}"]`;
+          cssRules.push(`${selector} { ${cssText} }`);
+        } catch (err) {
+          console.warn('Could not get computed styles for element', element, err);
+        }
       }
 
-      // 2. Find all blob URLs
-      const blobUrls = findAllBlobUrls(dom);
-      if (blobUrls.length > 0) {
-        console.debug(`Percy: Found ${blobUrls.length} blob URLs to convert`);
-
-        // 3. Convert all blob URLs to resources (parallel)
-        const conversions = blobUrls.map(blobInfo => convertBlobToResource(blobInfo).then(resource => {
-          resources.add(resource);
-          processedResources.push(resource);
-          return resource;
-        }).catch(err => {
-          warnings.add(err.message);
-          console.warn(`Percy: ${err.message}`);
-          return null;
-        }));
-
-        // Wait for all conversions
-        await Promise.all(conversions);
-        const successCount = processedResources.length;
-        console.debug(`Percy: Successfully converted ${successCount}/${blobUrls.length} blob URLs`);
+      // Inject CSS into cloned document
+      if (cssRules.length > 0) {
+        const styleElement = ctx.dom.createElement('style');
+        styleElement.setAttribute('data-percy-pseudo-class-styles', 'true');
+        styleElement.textContent = cssRules.join('\n');
+        const head = ctx.clone.head || ctx.clone.querySelector('head');
+        if (head) {
+          head.appendChild(styleElement);
+        } else {
+          ctx.warnings.add('Could not inject pseudo-class styles: no <head> element found');
+        }
       }
-      return processedResources;
     }
 
     // Drop loading attribute. We do not scroll page in discovery stage but we want to make sure that
@@ -711,7 +662,7 @@
       if (base64String == null) return;
       if (!cache.has(base64String)) {
         // create a resource from the serialized data url
-        let resource = resourceFromText(uid$1(), mimetype, base64String);
+        let resource = resourceFromText(uid(), mimetype, base64String);
         resources.add(resource);
         cache.set(base64String, resource.url);
       }
@@ -931,9 +882,9 @@
       // include the doctype with the html string
       return doctype(ctx.dom) + html;
     }
-    async function serializeElements(ctx) {
+    function serializeElements(ctx) {
       serializeInputElements(ctx);
-      await serializeFrames(ctx); // AWAIT async iframe serialization
+      serializeFrames(ctx);
       serializeVideos(ctx);
       if (!ctx.enableJavaScript) {
         serializeCSSOM(ctx);
@@ -948,8 +899,7 @@
             // getHTML requires shadowRoot to be passed explicitly
             // to serialize the shadow elements properly
             ctx.shadowRootElements.push(cloneShadowHost.shadowRoot);
-            await serializeElements({
-              // AWAIT recursive call for shadow DOM
+            serializeElements({
               ...ctx,
               dom: shadowHost.shadowRoot,
               clone: cloneShadowHost.shadowRoot
@@ -977,8 +927,8 @@
       window.resizeCount = 0;
     }
 
-    // Serializes a document and returns the resulting DOM string (ASYNC).
-    async function serializeDOM(options) {
+    // Serializes a document and returns the resulting DOM string.
+    function serializeDOM(options) {
       var _ctx$clone$body;
       let {
         dom = document,
@@ -990,7 +940,8 @@
         reshuffleInvalidTags = options === null || options === void 0 ? void 0 : options.reshuffle_invalid_tags,
         ignoreCanvasSerializationErrors = options === null || options === void 0 ? void 0 : options.ignore_canvas_serialization_errors,
         ignoreStyleSheetSerializationErrors = options === null || options === void 0 ? void 0 : options.ignore_style_sheet_serialization_errors,
-        forceShadowAsLightDOM = options === null || options === void 0 ? void 0 : options.force_shadow_dom_as_light_dom
+        forceShadowAsLightDOM = options === null || options === void 0 ? void 0 : options.force_shadow_dom_as_light_dom,
+        pseudoClassEnabledElements = options === null || options === void 0 ? void 0 : options.pseudo_class_enabled_elements
       } = options || {};
 
       // keep certain records throughout serialization
@@ -1004,18 +955,16 @@
         disableShadowDOM,
         ignoreCanvasSerializationErrors,
         ignoreStyleSheetSerializationErrors,
-        forceShadowAsLightDOM
+        forceShadowAsLightDOM,
+        pseudoClassEnabledElements
       };
       ctx.dom = dom;
-
-      // STEP 1: Preprocess dynamic resources (async) - before cloning
-      await preprocessDynamicResources(ctx.dom, ctx.resources, ctx.warnings);
-
-      // STEP 2: Clone the DOM
+      markPseudoClassElements(ctx, pseudoClassEnabledElements);
       ctx.clone = cloneNodeAndShadow(ctx);
+      serializeElements(ctx);
 
-      // STEP 3: Serialize elements (AWAIT async call)
-      await serializeElements(ctx);
+      // STEP 4: Process pseudo-class enabled elements
+      serializePseudoClasses(ctx);
       if (domTransformation) {
         try {
           // eslint-disable-next-line no-eval

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@percy/dom",
-  "version": "1.31.5-beta.2",
+  "version": "1.31.5",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -9,7 +9,7 @@
   },
   "publishConfig": {
     "access": "public",
-    "tag": "beta"
+    "tag": "latest"
   },
   "main": "dist/bundle.js",
   "browser": "dist/bundle.js",
@@ -35,5 +35,5 @@
   "devDependencies": {
     "interactor.js": "^2.0.0-beta.10"
   },
-  "gitHead": "e1d5d3c9a2ffd7b4c3ee9d0afc1c30c442687417"
+  "gitHead": "835297c48a25843d8c719d6b476134c603721d13"
 }