@percy/playwright 1.0.9 → 1.0.10-alpha.0

package/index.js

@@ -8,6 +8,110 @@ const CLIENT_INFO = `${sdkPkg.name}/${sdkPkg.version}`;
 const ENV_INFO = `${playwrightPkg.name}/${playwrightPkg.version}`;
 const log = utils.logger('playwright');
 
+// This function is executed in the browser context to handle dynamic resources.
+/* istanbul ignore next: browser-executed function difficult to instrument */
+const handleDynamicResources = async () => {
+  // Handle lazy-loaded images
+  document.querySelectorAll('img').forEach(img => {
+    const dataSrc = img.getAttribute('data-src');
+    if (dataSrc) {
+      try {
+        // Only allow http, https, data, or blob URLs
+        const url = new URL(dataSrc, window.location.origin);
+        if (
+          url.protocol === 'http:' ||
+          url.protocol === 'https:' ||
+          url.protocol === 'data:' ||
+          url.protocol === 'blob:'
+        ) {
+          img.src = url.href;
+        } else {
+          // Ignored unsafe data-src value
+        }
+      } catch (e) {
+        // If dataSrc is not a valid URL, ignore it
+      }
+    }
+  });
+
+  // Handle blob background images
+  const elements = Array.from(document.querySelectorAll('*'));
+  const promises = [];
+
+  for (const el of elements) {
+    const style = window.getComputedStyle(el);
+    const backgroundImage = style.getPropertyValue('background-image');
+
+    if (backgroundImage && backgroundImage.includes('blob:')) {
+      const blobUrlMatch = backgroundImage.match(/url\("?(blob:.+?)"?\)/);
+      if (blobUrlMatch && blobUrlMatch[1]) {
+        const blobUrl = blobUrlMatch[1];
+
+        /* eslint-disable-next-line no-undef */
+        const promise = fetch(blobUrl)
+          .then(res => res.blob())
+          .then(blob => new Promise((resolve, reject) => {
+            /* eslint-disable-next-line no-undef */
+            const reader = new FileReader();
+            reader.onloadend = () => {
+              el.style.backgroundImage = style.getPropertyValue('background-image').replace(blobUrl, reader.result);
+              resolve();
+            };
+            reader.onerror = reject;
+            reader.readAsDataURL(blob);
+          }))
+          .catch(err => {
+            log.warn(`Failed to process blob URL "${blobUrl}": ${err.message}`);
+            // Silently handle errors
+          });
+        promises.push(promise);
+      }
+    }
+  }
+  await Promise.all(promises);
+};
+
+// Processes a single cross-origin frame to capture its snapshot and resources.
+async function processFrame(page, frame, options, percyDOM) {
+  const frameUrl = frame.url();
+
+  // Execute pre-serialization transformations in the iframe
+  /* istanbul ignore next: browser-executed function call */
+  await frame.evaluate(handleDynamicResources);
+
+  /* istanbul ignore next: browser-executed iframe serialization */
+  const iframeSnapshot = await frame.evaluate((opts) => {
+    /* eslint-disable-next-line no-undef */
+    return PercyDOM.serialize(opts);
+  }, { ...options, enableJavascript: true });
+
+  // Create a new resource for the iframe's HTML
+  const iframeResource = {
+    url: frameUrl,
+    content: iframeSnapshot.html,
+    mimetype: 'text/html'
+  };
+
+  // Get the iframe's element data from the main page context
+  /* istanbul ignore next: browser-executed evaluation function */
+  const iframeData = await page.evaluate((fUrl) => {
+    const iframes = Array.from(document.querySelectorAll('iframe'));
+    const matchingIframe = iframes.find(iframe => iframe.src.startsWith(fUrl));
+    if (matchingIframe) {
+      return {
+        percyElementId: matchingIframe.getAttribute('data-percy-element-id')
+      };
+    }
+  }, frameUrl);
+
+  return {
+    iframeData,
+    iframeResource,
+    iframeSnapshot,
+    frameUrl
+  };
+}
+
 // Take a DOM snapshot and post it to the snapshot endpoint
 const percySnapshot = async function(page, name, options) {
   if (!page) throw new Error('A Playwright `page` object is required.');
@@ -16,7 +120,16 @@ const percySnapshot = async function(page, name, options) {
 
   try {
     // Inject the DOM serialization script
-    await page.evaluate(await utils.fetchPercyDOM());
+    const percyDOM = await utils.fetchPercyDOM();
+    await page.evaluate(percyDOM);
+
+    // Execute pre-serialization transformations on the main page
+    try {
+      /* istanbul ignore next: browser-executed function call */
+      await page.evaluate(handleDynamicResources);
+    } catch (error) {
+      // Silently handle any errors from handleDynamicResources to not disrupt snapshots
+    }
 
     // Serialize and capture the DOM
     /* istanbul ignore next: no instrumenting injected code */
@@ -25,6 +138,38 @@ const percySnapshot = async function(page, name, options) {
       return PercyDOM.serialize(options);
     }, options);
 
+    // Process CORS IFrames
+    const pageUrl = new URL(page.url());
+    const crossOriginFrames = page.frames()
+      .filter(frame => frame.url() !== 'about:blank' && new URL(frame.url()).origin !== pageUrl.origin);
+
+    // Inject Percy DOM into all cross-origin frames before processing them in parallel
+    await Promise.all(crossOriginFrames.map(frame => frame.evaluate(percyDOM)));
+
+    const processedFrames = await Promise.all(
+      crossOriginFrames.map(frame => processFrame(page, frame, options, percyDOM))
+    );
+
+    for (const { iframeData, iframeResource, iframeSnapshot, frameUrl } of processedFrames) {
+      // Add the iframe's own resources to the main snapshot
+      domSnapshot.resources.push(...iframeSnapshot.resources);
+      // Add the iframe HTML resource itself
+      domSnapshot.resources.push(iframeResource);
+
+      if (iframeData && iframeData.percyElementId) {
+        const regex = new RegExp(`(<iframe[^>]*data-percy-element-id=["']${iframeData.percyElementId}["'][^>]*>)`);
+        const match = domSnapshot.html.match(regex);
+
+        /* istanbul ignore next: iframe matching logic depends on DOM structure */
+        if (match) {
+          const iframeTag = match[1];
+          // Replace the original iframe tag with one that points to the new resource.
+          const newIframeTag = iframeTag.replace(/src="[^"]*"/i, `src="${frameUrl}"`);
+          domSnapshot.html = domSnapshot.html.replace(iframeTag, newIframeTag);
+        }
+      }
+    }
+
     domSnapshot.cookies = await page.context().cookies();
 
     // Post the DOM to the snapshot endpoint with snapshot options and other info

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@percy/playwright",
   "description": "Playwright client library for visual testing with Percy",
-  "version": "1.0.9",
+  "version": "1.0.10-alpha.0",
   "license": "MIT",
   "author": "Perceptual Inc.",
   "repository": "https://github.com/percy/percy-playwright",
@@ -29,7 +29,7 @@
   },
   "publishConfig": {
     "access": "public",
-    "tag": "latest"
+    "tag": "alpha"
   },
   "peerDependencies": {
     "playwright-core": ">=1"