@percy/core 1.29.4 → 1.29.5-beta.0

package/dist/api.js

@@ -74,6 +74,12 @@ export function createPercyServer(percy, port) {
       build: ((_percy$testing7 = percy.testing) === null || _percy$testing7 === void 0 ? void 0 : _percy$testing7.build) ?? percy.build,
       loglevel: percy.loglevel(),
       config: percy.config,
+      widths: {
+        // This is always needed even if width is passed
+        mobile: percy.deviceDetails ? percy.deviceDetails.map(d => d.width) : [],
+        // This will only be used if width is not passed in options
+        config: percy.config.snapshot.widths
+      },
       success: true,
       type: percy.client.tokenType()
     });
@@ -223,6 +229,16 @@ export function createPercyServer(percy, port) {
     } else if (cmd === 'version') {
       // the version command will update the api version header for testing
       percy.testing.version = body;
+    } else if (cmd === 'config') {
+      var _body$mobile;
+      percy.config.snapshot.widths = body.config;
+      percy.deviceDetails = (_body$mobile = body.mobile) === null || _body$mobile === void 0 ? void 0 : _body$mobile.map(w => {
+        return {
+          width: w
+        };
+      });
+      percy.config.snapshot.responsiveSnapshotCapture = !!body.responsive;
+      percy.config.percy.deferUploads = !!body.deferUploads;
     } else if (cmd === 'error' || cmd === 'disconnect') {
       var _percy$testing8;
       // the error or disconnect commands will cause specific endpoints to fail

package/dist/config.js

@@ -78,6 +78,10 @@ export const configSchema = {
       sync: {
         type: 'boolean'
       },
+      responsiveSnapshotCapture: {
+        type: 'boolean',
+        default: false
+      },
       testCase: {
         type: 'string'
       },
@@ -343,6 +347,9 @@ export const snapshotSchema = {
         sync: {
           $ref: '/config/snapshot#/properties/sync'
         },
+        responsiveSnapshotCapture: {
+          $ref: '/config/snapshot#/properties/responsiveSnapshotCapture'
+        },
         testCase: {
           $ref: '/config/snapshot#/properties/testCase'
         },
@@ -603,8 +610,21 @@ export const snapshotSchema = {
                 }
               },
               cookies: {
+                oneOf: [{
+                  type: 'string'
+                }, {
+                  type: 'array',
+                  items: {
+                    type: 'string'
+                  }
+                }]
+              },
+              userAgent: {
                 type: 'string'
               },
+              width: {
+                $ref: '/config/snapshot#/properties/widths/items'
+              },
               resources: {
                 type: 'array',
                 items: {
@@ -631,6 +651,11 @@ export const snapshotSchema = {
                 }
               }
             }
+          }, {
+            type: 'array',
+            items: {
+              $ref: '/snapshot#/$defs/dom/properties/domSnapshot/oneOf/1'
+            }
           }]
         }
       },

package/dist/discovery.js

@@ -53,6 +53,11 @@ function debugSnapshotOptions(snapshot) {
   debugProp(snapshot, 'clientInfo');
   debugProp(snapshot, 'environmentInfo');
   debugProp(snapshot, 'domSnapshot', Boolean);
+  if (Array.isArray(snapshot.domSnapshot)) {
+    debugProp(snapshot, 'domSnapshot.0.userAgent');
+  } else {
+    debugProp(snapshot, 'domSnapshot.userAgent');
+  }
   for (let added of snapshot.additionalSnapshots || []) {
     log.debug(`Additional snapshot: ${added.name}`, snapshot.meta);
     debugProp(added, 'waitForTimeout');
@@ -62,9 +67,21 @@ function debugSnapshotOptions(snapshot) {
 }
 
 // parse browser cookies in correct format if flag is enabled
-// it assumes that cookiesStr is string returned by document.cookie
-function parseCookies(cookiesStr) {
-  if (process.env.PERCY_DO_NOT_USE_CAPTURED_COOKIES === 'true' || !(typeof cookiesStr === 'string' && cookiesStr !== '')) return null;
+function parseCookies(cookies) {
+  if (process.env.PERCY_DO_NOT_USE_CAPTURED_COOKIES === 'true') return null;
+
+  // If cookies is collected via SDK
+  if (Array.isArray(cookies) && cookies.every(item => typeof item === 'object' && 'name' in item && 'value' in item)) {
+    // omit other fields reason sometimes expiry comes as actual date where we expect it to be double
+    return cookies.map(c => ({
+      name: c.name,
+      value: c.value,
+      secure: c.secure
+    }));
+  }
+  if (!(typeof cookies === 'string' && cookies !== '')) return null;
+  // it assumes that cookiesStr is string returned by document.cookie
+  const cookiesStr = cookies;
   return cookiesStr.split('; ').map(c => {
     const eqIdx = c.indexOf('=');
     const name = c.substring(0, eqIdx);
@@ -96,18 +113,34 @@ function parseDomResources({
   url,
   domSnapshot
 }) {
-  if (!domSnapshot) return new Map();
-  let isHTML = typeof domSnapshot === 'string';
-  let {
-    html,
-    resources = []
-  } = isHTML ? {
-    html: domSnapshot
-  } : domSnapshot;
-  let rootResource = createRootResource(url, html);
+  const map = new Map();
+  if (!domSnapshot) return map;
+  let allRootResources = new Set();
+  let allResources = new Set();
+  if (!Array.isArray(domSnapshot)) {
+    domSnapshot = [domSnapshot];
+  }
+  for (let dom of domSnapshot) {
+    let isHTML = typeof dom === 'string';
+    let {
+      html,
+      resources = []
+    } = isHTML ? {
+      html: dom
+    } : dom;
+    resources.forEach(r => allResources.add(r));
+    const attrs = dom.width ? {
+      widths: [dom.width]
+    } : {};
+    let rootResource = createRootResource(url, html, attrs);
+    allRootResources.add(rootResource);
+  }
+  allRootResources = Array.from(allRootResources);
+  map.set(allRootResources[0].url, allRootResources);
+  allResources = Array.from(allResources);
 
   // reduce the array of resources into a keyed map
-  return resources.reduce((map, {
+  return allResources.reduce((map, {
     url,
     content,
     mimetype
@@ -121,7 +154,19 @@ function parseDomResources({
     // key the resource by its url and return the map
     return map.set(resource.url, resource);
     // the initial map is created with at least a root resource
-  }, new Map([[rootResource.url, rootResource]]));
+  }, map);
+}
+function createAndApplyPercyCSS({
+  percyCSS,
+  roots
+}) {
+  let css = createPercyCSSResource(roots[0].url, percyCSS);
+
+  // replace root contents and associated properties
+  roots.forEach(root => {
+    Object.assign(root, createRootResource(root.url, root.content.replace(/(<\/body>)(?!.*\1)/is, `<link data-percy-specific-css rel="stylesheet" href="${css.pathname}"/>` + '$&')));
+  });
+  return css;
 }
 
 // Calls the provided callback with additional resources
@@ -135,17 +180,17 @@ function processSnapshotResources({
   resources = [...(((_resources = resources) === null || _resources === void 0 ? void 0 : _resources.values()) ?? [])];
 
   // find any root resource matching the provided dom snapshot
-  let rootContent = (domSnapshot === null || domSnapshot === void 0 ? void 0 : domSnapshot.html) ?? domSnapshot;
-  let root = resources.find(r => r.content === rootContent);
+  // since root resources are stored as array
+  let roots = resources.find(r => Array.isArray(r));
 
   // initialize root resources if needed
-  if (!root) {
+  if (!roots) {
     let domResources = parseDomResources({
       ...snapshot,
       domSnapshot
     });
     resources = [...domResources.values(), ...resources];
-    root = resources[0];
+    roots = resources.find(r => Array.isArray(r));
   }
 
   // inject Percy CSS
@@ -155,13 +200,16 @@ function processSnapshotResources({
     if (domSnapshotHints.includes('DOM elements found outside </body>')) {
       log.warn('DOM elements found outside </body>, percyCSS might not work');
     }
-    let css = createPercyCSSResource(root.url, snapshot.percyCSS);
-    resources.push(css);
-
-    // replace root contents and associated properties
-    Object.assign(root, createRootResource(root.url, root.content.replace(/(<\/body>)(?!.*\1)/is, `<link data-percy-specific-css rel="stylesheet" href="${css.pathname}"/>` + '$&')));
+    const percyCSSReource = createAndApplyPercyCSS({
+      percyCSS: snapshot.percyCSS,
+      roots
+    });
+    resources.push(percyCSSReource);
   }
 
+  // For multi dom root resources are stored as array
+  resources = resources.flat();
+
   // include associated snapshot logs matched by meta information
   resources.push(createLogResource(logger.query(log => {
     var _log$meta$snapshot, _log$meta$snapshot2;
@@ -182,7 +230,7 @@ function processSnapshotResources({
 // Triggers the capture of resource requests for a page by iterating over snapshot widths to resize
 // the page and calling any provided execute options.
 async function* captureSnapshotResources(page, snapshot, options) {
-  var _snapshot$domSnapshot;
+  var _snapshot$domSnapshot, _snapshot$domSnapshot2;
   const log = logger('core:discovery');
   let {
     discovery,
@@ -196,7 +244,8 @@ async function* captureSnapshotResources(page, snapshot, options) {
     mobile,
     captureForDevices
   } = options;
-  let cookies = parseCookies(snapshot === null || snapshot === void 0 || (_snapshot$domSnapshot = snapshot.domSnapshot) === null || _snapshot$domSnapshot === void 0 ? void 0 : _snapshot$domSnapshot.cookies);
+  let cookies = (snapshot === null || snapshot === void 0 || (_snapshot$domSnapshot = snapshot.domSnapshot) === null || _snapshot$domSnapshot === void 0 ? void 0 : _snapshot$domSnapshot.cookies) || (snapshot === null || snapshot === void 0 || (_snapshot$domSnapshot2 = snapshot.domSnapshot) === null || _snapshot$domSnapshot2 === void 0 || (_snapshot$domSnapshot2 = _snapshot$domSnapshot2[0]) === null || _snapshot$domSnapshot2 === void 0 ? void 0 : _snapshot$domSnapshot2.cookies);
+  cookies = parseCookies(cookies);
 
   // iterate over device to trigger reqeusts and capture other dpr width
   async function* captureResponsiveAssets() {
@@ -234,17 +283,21 @@ async function* captureSnapshotResources(page, snapshot, options) {
   ;
 
   // used to resize the using capture options
-  let resizePage = width => page.resize({
-    height: snapshot.minHeight,
-    deviceScaleFactor,
-    mobile,
-    width
-  });
+  let resizePage = width => {
+    page.network.intercept.currentWidth = width;
+    return page.resize({
+      height: snapshot.minHeight,
+      deviceScaleFactor,
+      mobile,
+      width
+    });
+  };
 
   // navigate to the url
   yield resizePage(snapshot.widths[0]);
   yield page.goto(snapshot.url, {
-    cookies
+    cookies,
+    forceReload: discovery.captureResponsiveAssetsEnabled
   });
 
   // wait for any specified timeout
@@ -268,7 +321,8 @@ async function* captureSnapshotResources(page, snapshot, options) {
   // Running before page idle since this will trigger many network calls
   // so need to run as early as possible. plus it is just reading urls from dom srcset
   // which will be already loaded after navigation complete
-  if (discovery.captureSrcset) {
+  // Don't run incase of responsiveSnapshotCapture since we are running discovery for all widths so images will get captured in all required widths
+  if (!snapshot.responsiveSnapshotCapture && discovery.captureSrcset) {
     await page.insertPercyDom();
     yield page.eval('window.PercyDOM.loadAllSrcsetLinks()');
   }
@@ -293,6 +347,12 @@ async function* captureSnapshotResources(page, snapshot, options) {
         yield page.evaluate(execute === null || execute === void 0 ? void 0 : execute.beforeResize);
         yield waitForDiscoveryNetworkIdle(page, discovery);
         yield resizePage(width = widths[i + 1]);
+        if (snapshot.responsiveSnapshotCapture) {
+          yield page.goto(snapshot.url, {
+            cookies,
+            forceReload: true
+          });
+        }
         yield page.evaluate(execute === null || execute === void 0 ? void 0 : execute.afterResize);
       }
     }
@@ -419,12 +479,20 @@ export function createDiscoveryQueue(percy) {
             disableCache: snapshot.discovery.disableCache,
             allowedHostnames: snapshot.discovery.allowedHostnames,
             disallowedHostnames: snapshot.discovery.disallowedHostnames,
-            getResource: u => snapshot.resources.get(u) || cache.get(u),
+            getResource: (u, width = null) => {
+              let resource = snapshot.resources.get(u) || cache.get(u);
+              if (resource && Array.isArray(resource) && resource[0].root) {
+                const rootResource = resource.find(r => {
+                  var _r$widths;
+                  return (_r$widths = r.widths) === null || _r$widths === void 0 ? void 0 : _r$widths.includes(width);
+                });
+                resource = rootResource || resource[0];
+              }
+              return resource;
+            },
             saveResource: r => {
               snapshot.resources.set(r.url, r);
-              if (!r.root) {
-                cache.set(r.url, r);
-              }
+              cache.set(r.url, r);
             }
           }
         });

package/dist/network.js

@@ -384,7 +384,7 @@ async function sendResponseResource(network, request, session) {
   };
   let send = (method, params) => network.send(session, method, params);
   try {
-    let resource = network.intercept.getResource(url);
+    let resource = network.intercept.getResource(url, network.intercept.currentWidth);
     network.log.debug(`Handling request: ${url}`, meta);
     if (!(resource !== null && resource !== void 0 && resource.root) && hostnameMatches(disallowedHostnames, url)) {
       log.debug('- Skipping disallowed hostname', meta);
@@ -532,7 +532,7 @@ async function saveResponseResource(network, request) {
       log.debug(error, meta);
     }
   }
-  if (resource) {
+  if (resource && !resource.root) {
     network.intercept.saveResource(resource);
   }
 }

package/dist/page.js

@@ -61,13 +61,21 @@ export class Page {
   // Go to a URL and wait for navigation to occur
   async goto(url, {
     waitUntil = 'load',
-    cookies
+    cookies,
+    forceReload,
+    skipCookies = false
   } = {}) {
     this.log.debug(`Navigate to: ${url}`, this.meta);
+    if (forceReload) {
+      this.log.debug('Navigating to blank page', this.meta);
+      await this.goto('about:blank', {
+        skipCookies: true
+      });
+    }
     let navigate = async () => {
       const userPassedCookie = this.session.browser.cookies;
       // set cookies before navigation so we can default the domain to this hostname
-      if (userPassedCookie.length || cookies) {
+      if (!skipCookies && (userPassedCookie.length || cookies)) {
         let defaultDomain = hostname(url);
         cookies = this.mergeCookies(userPassedCookie, cookies);
         await this.session.send('Network.setCookies', {

package/dist/utils.js

@@ -112,8 +112,9 @@ export function createResource(url, content, mimetype, attrs) {
 
 // Creates a root resource object with an additional `root: true` property. The URL is normalized
 // here as a convenience since root resources are usually created outside of asset discovery.
-export function createRootResource(url, content) {
+export function createRootResource(url, content, attrs = {}) {
   return createResource(normalizeURL(url), content, 'text/html', {
+    ...attrs,
     root: true
   });
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@percy/core",
-  "version": "1.29.4",
+  "version": "1.29.5-beta.0",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -9,7 +9,7 @@
   },
   "publishConfig": {
     "access": "public",
-    "tag": "latest"
+    "tag": "beta"
   },
   "engines": {
     "node": ">=14"
@@ -43,11 +43,11 @@
     "test:types": "tsd"
   },
   "dependencies": {
-    "@percy/client": "1.29.4",
-    "@percy/config": "1.29.4",
-    "@percy/dom": "1.29.4",
-    "@percy/logger": "1.29.4",
-    "@percy/webdriver-utils": "1.29.4",
+    "@percy/client": "1.29.5-beta.0",
+    "@percy/config": "1.29.5-beta.0",
+    "@percy/dom": "1.29.5-beta.0",
+    "@percy/logger": "1.29.5-beta.0",
+    "@percy/webdriver-utils": "1.29.5-beta.0",
     "content-disposition": "^0.5.4",
     "cross-spawn": "^7.0.3",
     "extract-zip": "^2.0.1",
@@ -60,5 +60,5 @@
     "ws": "^8.17.1",
     "yaml": "^2.4.1"
   },
-  "gitHead": "17468058cf55d75557451a81e82b0d6fd5c0e26b"
+  "gitHead": "1edb0e95570ca077e8ef931b53399c04d71a95bd"
 }