@percy/playwright 1.0.10-alpha.0 → 1.0.11-alpha.0

package/index.js

@@ -8,90 +8,18 @@ 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 */
+  // enableJavaScript: true prevents the standard iframe serialization logic from running.
+  // This is necessary because we're manually handling cross-origin iframe serialization here.
   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) => {
@@ -106,12 +34,141 @@ async function processFrame(page, frame, options, percyDOM) {
 
   return {
     iframeData,
-    iframeResource,
     iframeSnapshot,
     frameUrl
   };
 }
 
+async function captureSerializedDOM(page, options, percyDOM) {
+  /* istanbul ignore next: no instrumenting injected code */
+  let domSnapshot = await page.evaluate((options) => {
+    /* eslint-disable-next-line no-undef */
+    return PercyDOM.serialize(options);
+  }, options);
+
+  // Process CORS IFrames
+  // Note: Blob URL handling (data-src images, blob background images) is now handled
+  // in the CLI via async DOM serialization. See: percy/cli packages/dom/src/serialize-blob-urls.js
+  // This section only handles cross-origin iframe serialization and resource merging.
+  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))
+  );
+  domSnapshot.corsIframes = processedFrames;
+  domSnapshot.cookies = await page.context().cookies();
+  return domSnapshot;
+}
+
+async function changeViewportAndWait(page, width, height, resizeCount) {
+  try {
+    await page.setViewportSize({ width, height });
+  } catch (error) {
+    log.debug(`Resizing using setViewportSize failed for width ${width}`, error);
+    return;
+  }
+
+  try {
+    /* istanbul ignore next: no instrumenting injected code */
+    await page.waitForFunction((count) => window.resizeCount === count, resizeCount, { timeout: 1000 });
+  } catch (error) {
+    log.debug(`Timed out waiting for window resize event for width ${width}`, error);
+  }
+}
+
+function isResponsiveDOMCaptureValid(options) {
+  if (utils.percy?.config?.percy?.deferUploads) {
+    return false;
+  }
+  return (
+    options?.responsive_snapshot_capture ||
+    options?.responsiveSnapshotCapture ||
+    utils.percy?.config?.snapshot?.responsiveSnapshotCapture ||
+    false
+  );
+}
+
+async function captureResponsiveDOM(page, options, percyDOM) {
+  const domSnapshots = [];
+  /* istanbul ignore next: no instrumenting injected code */
+  const currentViewport = page.viewportSize() || await page.evaluate(() => ({
+    width: window.innerWidth,
+    height: window.innerHeight
+  }));
+  let currentWidth = currentViewport.width;
+  let currentHeight = currentViewport.height;
+  let lastWindowWidth = currentWidth;
+  let resizeCount = 0;
+
+  /* istanbul ignore next: no instrumenting injected code */
+  await page.evaluate(() => {
+    /* eslint-disable-next-line no-undef */
+    PercyDOM.waitForResize();
+  });
+
+  // Calculate default height for non-mobile widths
+  let defaultHeight = currentHeight;
+  if (process.env.PERCY_RESPONSIVE_CAPTURE_MIN_HEIGHT?.toLowerCase() === 'true') {
+    const minHeight = utils.percy?.config?.snapshot?.minHeight;
+    /* istanbul ignore next: no instrumenting injected code */
+    defaultHeight = await page.evaluate((minH) => window.outerHeight - window.innerHeight + minH, minHeight);
+  }
+
+  // Get width and height combinations
+  /* istanbul ignore next: CLI version compatibility check */
+  if (!utils.getResponsiveWidths) {
+    throw new Error('Update Percy CLI to the latest version to use responsiveSnapshotCapture');
+  }
+  const widthHeights = await utils.getResponsiveWidths(options.widths || []);
+
+  try {
+    for (let { width, height } of widthHeights) {
+      height = height || defaultHeight;
+      if (lastWindowWidth !== width) {
+        resizeCount++;
+        await changeViewportAndWait(page, width, height, resizeCount);
+        lastWindowWidth = width;
+      }
+
+      if (process.env.PERCY_RESPONSIVE_CAPTURE_RELOAD_PAGE?.toLowerCase() === 'true') {
+        await page.reload();
+        await page.evaluate(percyDOM);
+        /* istanbul ignore next: no instrumenting injected code */
+        await page.evaluate(() => {
+          /* eslint-disable-next-line no-undef */
+          PercyDOM.waitForResize();
+        });
+        resizeCount = 0; // Reset local counter to match window.resizeCount after reload
+      }
+
+      if (process.env.RESPONSIVE_CAPTURE_SLEEP_TIME) {
+        await new Promise(resolve => setTimeout(resolve, parseInt(process.env.RESPONSIVE_CAPTURE_SLEEP_TIME) * 1000));
+      }
+
+      let domSnapshot = await captureSerializedDOM(page, options, percyDOM);
+      domSnapshot.width = width;
+      domSnapshots.push(domSnapshot);
+    }
+  } finally {
+    await changeViewportAndWait(page, currentWidth, currentHeight, resizeCount + 1);
+  }
+  return domSnapshots;
+}
+
+async function captureDOM(page, options, percyDOM) {
+  const responsiveSnapshotCapture = isResponsiveDOMCaptureValid(options);
+  if (responsiveSnapshotCapture) {
+    return await captureResponsiveDOM(page, options, percyDOM);
+  } else {
+    return await captureSerializedDOM(page, options, percyDOM);
+  }
+}
+
 // 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.');
@@ -123,54 +180,7 @@ const percySnapshot = async function(page, name, options) {
     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 */
-    let domSnapshot = await page.evaluate((options) => {
-      /* eslint-disable-next-line no-undef */
-      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();
+    let domSnapshot = await captureDOM(page, options || {}, percyDOM);
 
     // Post the DOM to the snapshot endpoint with snapshot options and other info
     const response = await utils.postSnapshot({

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@percy/playwright",
   "description": "Playwright client library for visual testing with Percy",
-  "version": "1.0.10-alpha.0",
+  "version": "1.0.11-alpha.0",
   "license": "MIT",
   "author": "Perceptual Inc.",
   "repository": "https://github.com/percy/percy-playwright",