@percy/playwright 1.0.9 → 1.0.10

package/index.js

@@ -8,6 +8,45 @@ const CLIENT_INFO = `${sdkPkg.name}/${sdkPkg.version}`;
 const ENV_INFO = `${playwrightPkg.name}/${playwrightPkg.version}`;
 const log = utils.logger('playwright');
 
+// Processes a single cross-origin frame to capture its snapshot and resources.
+async function processFrame(page, frame, options, percyDOM) {
+  const frameUrl = frame.url();
+
+  /* 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) => {
+    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 +55,8 @@ 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);
 
     // Serialize and capture the DOM
     /* istanbul ignore next: no instrumenting injected code */
@@ -25,6 +65,41 @@ const percySnapshot = async function(page, name, options) {
       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))
+    );
+
+    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",
   "license": "MIT",
   "author": "Perceptual Inc.",
   "repository": "https://github.com/percy/percy-playwright",