@percy/core 1.28.1-beta.1 → 1.28.2-alpha.1

package/dist/config.js

@@ -199,6 +199,9 @@ export const configSchema = {
         type: 'boolean',
         default: false
       },
+      captureSrcset: {
+        type: 'boolean'
+      },
       requestHeaders: {
         type: 'object',
         normalize: false,
@@ -252,6 +255,10 @@ export const configSchema = {
         type: 'integer',
         minimum: 1
       },
+      retry: {
+        type: 'boolean',
+        default: false
+      },
       launchOptions: {
         type: 'object',
         additionalProperties: false,
@@ -346,11 +353,17 @@ export const snapshotSchema = {
             captureMockedServiceWorker: {
               $ref: '/config/discovery#/properties/captureMockedServiceWorker'
             },
+            captureSrcset: {
+              $ref: '/config/discovery#/properties/captureSrcset'
+            },
             userAgent: {
               $ref: '/config/discovery#/properties/userAgent'
             },
             devicePixelRatio: {
               $ref: '/config/discovery#/properties/devicePixelRatio'
+            },
+            retry: {
+              $ref: '/config/discovery#/properties/retry'
             }
           }
         }

package/dist/discovery.js

@@ -1,6 +1,6 @@
 import logger from '@percy/logger';
 import Queue from './queue.js';
-import { normalizeURL, hostnameMatches, createResource, createRootResource, createPercyCSSResource, createLogResource, yieldAll, snapshotLogName } from './utils.js';
+import { normalizeURL, hostnameMatches, createResource, createRootResource, createPercyCSSResource, createLogResource, yieldAll, snapshotLogName, withRetries } from './utils.js';
 
 // Logs verbose debug logs detailing various snapshot options.
 function debugSnapshotOptions(snapshot) {
@@ -44,6 +44,7 @@ function debugSnapshotOptions(snapshot) {
   debugProp(snapshot, 'discovery.authorization', JSON.stringify);
   debugProp(snapshot, 'discovery.disableCache');
   debugProp(snapshot, 'discovery.captureMockedServiceWorker');
+  debugProp(snapshot, 'discovery.captureSrcset');
   debugProp(snapshot, 'discovery.userAgent');
   debugProp(snapshot, 'clientInfo');
   debugProp(snapshot, 'environmentInfo');
@@ -151,6 +152,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) {
+  const log = logger('core:discovery');
   let {
     discovery,
     additionalSnapshots = [],
@@ -160,7 +162,8 @@ async function* captureSnapshotResources(page, snapshot, options) {
     capture,
     captureWidths,
     deviceScaleFactor,
-    mobile
+    mobile,
+    captureForDevices
   } = options;
 
   // used to take snapshots and remove any discovered root resource
@@ -193,6 +196,14 @@ async function* captureSnapshotResources(page, snapshot, options) {
     yield page.evaluate(snapshot.execute.afterNavigation);
   }
 
+  // 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) {
+    await page.insertPercyDom();
+    yield page.eval('window.PercyDOM.loadAllSrcsetLinks()');
+  }
+
   // iterate over additional snapshots for proper DOM capturing
   for (let additionalSnapshot of [baseSnapshot, ...additionalSnapshots]) {
     let isBaseSnapshot = additionalSnapshot === baseSnapshot;
@@ -206,6 +217,21 @@ async function* captureSnapshotResources(page, snapshot, options) {
     } = snap;
     let [width] = widths;
 
+    // iterate over device to trigger reqeusts and capture other dpr width
+    if (captureForDevices) {
+      for (const device of captureForDevices) {
+        yield waitForDiscoveryNetworkIdle(page, discovery);
+        // We are not adding these widths and pixels ratios in loop below because we want to explicitly reload the page after resize which we dont do below
+        yield* captureSnapshotResources(page, {
+          ...snapshot,
+          widths: [device.width]
+        }, {
+          deviceScaleFactor: device.deviceScaleFactor,
+          mobile: true
+        });
+      }
+    }
+
     // iterate over widths to trigger reqeusts and capture other widths
     if (isBaseSnapshot || captureWidths) {
       for (let i = 0; i < widths.length - 1; i++) {
@@ -230,12 +256,8 @@ async function* captureSnapshotResources(page, snapshot, options) {
   }
 
   // recursively trigger resource requests for any alternate device pixel ratio
-  if (deviceScaleFactor !== discovery.devicePixelRatio) {
-    yield waitForDiscoveryNetworkIdle(page, discovery);
-    yield* captureSnapshotResources(page, snapshot, {
-      deviceScaleFactor: discovery.devicePixelRatio,
-      mobile: true
-    });
+  if (discovery.devicePixelRatio) {
+    log.deprecated('discovery.devicePixelRatio is deprecated percy will now auto capture resource in all devicePixelRatio, Ignoring configuration');
   }
 
   // wait for final network idle when not capturing DOM
@@ -318,39 +340,49 @@ export function createDiscoveryQueue(percy) {
     /* istanbul ignore next: tested, but coverage is stripped */
     let assetDiscoveryPageEnableJS = snapshot.cliEnableJavaScript && !snapshot.domSnapshot || (snapshot.enableJavaScript ?? !snapshot.domSnapshot);
     percy.log.debug(`Asset discovery Browser Page enable JS: ${assetDiscoveryPageEnableJS}`);
-    // create a new browser page
-    let page = yield percy.browser.page({
-      enableJavaScript: assetDiscoveryPageEnableJS,
-      networkIdleTimeout: snapshot.discovery.networkIdleTimeout,
-      requestHeaders: snapshot.discovery.requestHeaders,
-      authorization: snapshot.discovery.authorization,
-      userAgent: snapshot.discovery.userAgent,
-      captureMockedServiceWorker: snapshot.discovery.captureMockedServiceWorker,
-      meta: snapshot.meta,
-      // enable network inteception
-      intercept: {
-        enableJavaScript: snapshot.enableJavaScript,
-        disableCache: snapshot.discovery.disableCache,
-        allowedHostnames: snapshot.discovery.allowedHostnames,
-        disallowedHostnames: snapshot.discovery.disallowedHostnames,
-        getResource: u => snapshot.resources.get(u) || cache.get(u),
-        saveResource: r => {
-          snapshot.resources.set(r.url, r);
-          if (!r.root) {
-            cache.set(r.url, r);
+    await withRetries(async function* () {
+      // create a new browser page
+      let page = yield percy.browser.page({
+        enableJavaScript: assetDiscoveryPageEnableJS,
+        networkIdleTimeout: snapshot.discovery.networkIdleTimeout,
+        requestHeaders: snapshot.discovery.requestHeaders,
+        authorization: snapshot.discovery.authorization,
+        userAgent: snapshot.discovery.userAgent,
+        captureMockedServiceWorker: snapshot.discovery.captureMockedServiceWorker,
+        meta: snapshot.meta,
+        // enable network inteception
+        intercept: {
+          enableJavaScript: snapshot.enableJavaScript,
+          disableCache: snapshot.discovery.disableCache,
+          allowedHostnames: snapshot.discovery.allowedHostnames,
+          disallowedHostnames: snapshot.discovery.disallowedHostnames,
+          getResource: u => snapshot.resources.get(u) || cache.get(u),
+          saveResource: r => {
+            snapshot.resources.set(r.url, r);
+            if (!r.root) {
+              cache.set(r.url, r);
+            }
           }
         }
+      });
+      try {
+        yield* captureSnapshotResources(page, snapshot, {
+          captureWidths: !snapshot.domSnapshot && percy.deferUploads,
+          capture: callback,
+          captureForDevices: percy.deviceDetails || []
+        });
+      } finally {
+        // always close the page when done
+        await page.close();
       }
+    }, {
+      count: snapshot.discovery.retry ? 3 : 1,
+      onRetry: () => {
+        percy.log.info(`Retrying snapshot: ${snapshotLogName(snapshot.name, snapshot.meta)}`, snapshot.meta);
+      },
+      signal: snapshot._ctrl.signal,
+      throwOn: ['AbortError']
     });
-    try {
-      yield* captureSnapshotResources(page, snapshot, {
-        captureWidths: !snapshot.domSnapshot && percy.deferUploads,
-        capture: callback
-      });
-    } finally {
-      // always close the page when done
-      await page.close();
-    }
   }).handle('error', ({
     name,
     meta

package/dist/network.js

@@ -28,6 +28,7 @@ export class Network {
   #requests = new Map();
   #authentications = new Set();
   #aborted = new Set();
+  #finishedUrls = new Set();
   constructor(page, options) {
     this.page = page;
     this.timeout = options.networkIdleTimeout ?? 100;
@@ -78,6 +79,12 @@ export class Network {
         throw new Error(`Network error: ${this.page.session.closedReason}`);
       }
       requests = Array.from(this.#requests.values()).filter(filter);
+      // remove requests which are finished at least once
+      // this happens when same request is made multiple times by browser in parallel and one of
+      // them gets stuck in pending state in browser [ need to debug why ]. So we dont receive
+      // loadingFinished event, causing it to show up in Active requests, but we can only store one
+      // response per url so as long as we have captured one, we dont care about other such requests
+      requests = requests.filter(req => !this.#finishedUrls.has(req.url));
       return requests.length === 0;
     }, {
       timeout: Network.TIMEOUT,
@@ -120,10 +127,12 @@ export class Network {
   // Called when a request should be removed from various trackers
   _forgetRequest({
     requestId,
-    interceptId
+    interceptId,
+    url
   }, keepPending) {
     this.#requests.delete(requestId);
     this.#authentications.delete(interceptId);
+    this.#finishedUrls.add(url);
     if (!keepPending) {
       this.#pending.delete(requestId);
     }

package/dist/page.js

@@ -131,6 +131,16 @@ export class Page {
     });
     for (let script of scripts) await this.eval(script);
   }
+  async insertPercyDom() {
+    // inject @percy/dom for serialization by evaluating the file contents which adds a global
+    // PercyDOM object that we can later check against
+    /* istanbul ignore next: no instrumenting injected code */
+    if (await this.eval(() => !window.PercyDOM)) {
+      this.log.debug('Inject @percy/dom', this.meta);
+      let script = await fs.promises.readFile(PERCY_DOM, 'utf-8');
+      await this.eval(new Function(script)); /* eslint-disable-line no-new-func */
+    }
+  }
 
   // Takes a snapshot after waiting for any timeout, waiting for any selector, executing any
   // scripts, and waiting for the network idle. Returns all other provided snapshot options along
@@ -171,15 +181,7 @@ export class Page {
 
     // wait for any final network activity before capturing the dom snapshot
     await this.network.idle();
-
-    // inject @percy/dom for serialization by evaluating the file contents which adds a global
-    // PercyDOM object that we can later check against
-    /* istanbul ignore next: no instrumenting injected code */
-    if (await this.eval(() => !window.PercyDOM)) {
-      this.log.debug('Inject @percy/dom', this.meta);
-      let script = await fs.promises.readFile(PERCY_DOM, 'utf-8');
-      await this.eval(new Function(script)); /* eslint-disable-line no-new-func */
-    }
+    await this.insertPercyDom();
 
     // serialize and capture a DOM snapshot
     this.log.debug('Serialize DOM', this.meta);

package/dist/percy.js

@@ -145,12 +145,14 @@ export class Percy {
     if (this.readyState != null) return;
     this.readyState = 0;
     try {
+      var _this$build;
       // start the snapshots queue immediately when not delayed or deferred
       if (!this.delayUploads && !this.deferUploads) yield this.#snapshots.start();
       // do not start the discovery queue when not needed
       if (!this.skipDiscovery) yield this.#discovery.start();
       // start a local API server for SDK communication
       if (this.server) yield this.server.listen();
+      if (this.projectType === 'web') this.deviceDetails = yield this.client.getDeviceDetails((_this$build = this.build) === null || _this$build === void 0 ? void 0 : _this$build.id);
       const snapshotType = this.projectType === 'web' ? 'snapshot' : 'comparison';
       this.syncQueue = new WaitForJob(snapshotType, this);
       // log and mark this instance as started
@@ -258,10 +260,10 @@ export class Percy {
   // snapshots. Once asset discovery has completed for the provided snapshots, the queued task will
   // resolve and an upload task will be queued separately.
   snapshot(options, snapshotPromise = {}) {
-    var _this$build;
+    var _this$build2;
     if (this.readyState !== 1) {
       throw new Error('Not running');
-    } else if ((_this$build = this.build) !== null && _this$build !== void 0 && _this$build.error) {
+    } else if ((_this$build2 = this.build) !== null && _this$build2 !== void 0 && _this$build2.error) {
       throw new Error(this.build.error);
     } else if (Array.isArray(options)) {
       return yieldAll(options.map(o => this.yield.snapshot(o, snapshotPromise)));

package/dist/queue.js

@@ -122,9 +122,15 @@ export class Queue {
 
     // call or set up other handlers
     let exists = this.cancel(item);
+    task.ctrl = new AbortController();
+    // duplicate abortion controller on task, so it can can be used in further
+    // generators and can be cancelled internally
+    // TODO fix this for non object item usecase
+    if (typeof item === 'object' && !Array.isArray(item) && item !== null) {
+      item._ctrl = task.ctrl;
+    }
     task.item = item = _classPrivateFieldGet(this, _handlers).push ? _classPrivateFieldGet(this, _handlers).push(item, exists) : item;
     task.handler = () => _classPrivateFieldGet(this, _handlers).task ? _classPrivateFieldGet(this, _handlers).task(item, ...args) : item;
-    task.ctrl = new AbortController();
 
     // queue this task & maybe dequeue the next task
     _classPrivateFieldGet(this, _queued).add(task);

package/dist/snapshot.js

@@ -128,7 +128,9 @@ function getSnapshotOptions(options, {
       authorization: config.discovery.authorization,
       disableCache: config.discovery.disableCache,
       captureMockedServiceWorker: config.discovery.captureMockedServiceWorker,
-      userAgent: config.discovery.userAgent
+      captureSrcset: config.discovery.captureSrcset,
+      userAgent: config.discovery.userAgent,
+      retry: config.discovery.retry
     }
   }, options], (path, prev, next) => {
     var _next, _next2;

package/dist/utils.js

@@ -328,6 +328,29 @@ export function serializeFunction(fn) {
   }
   return fnbody;
 }
+export async function withRetries(fn, {
+  count,
+  onRetry,
+  signal,
+  throwOn
+}) {
+  count || (count = 1); // default a single try
+  let run = 0;
+  while (true) {
+    run += 1;
+    try {
+      return await generatePromise(fn, signal);
+    } catch (e) {
+      // if this error should not be retried on, we want to skip errors
+      let throwError = throwOn === null || throwOn === void 0 ? void 0 : throwOn.includes(e.name);
+      if (!throwError && run < count) {
+        await (onRetry === null || onRetry === void 0 ? void 0 : onRetry());
+        continue;
+      }
+      throw e;
+    }
+  }
+}
 export function snapshotLogName(name, meta) {
   var _meta$snapshot;
   if (meta !== null && meta !== void 0 && (_meta$snapshot = meta.snapshot) !== null && _meta$snapshot !== void 0 && _meta$snapshot.testCase) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@percy/core",
-  "version": "1.28.1-beta.1",
+  "version": "1.28.2-alpha.1",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -9,7 +9,7 @@
   },
   "publishConfig": {
     "access": "public",
-    "tag": "beta"
+    "tag": "alpha"
   },
   "engines": {
     "node": ">=14"
@@ -43,11 +43,11 @@
     "test:types": "tsd"
   },
   "dependencies": {
-    "@percy/client": "1.28.1-beta.1",
-    "@percy/config": "1.28.1-beta.1",
-    "@percy/dom": "1.28.1-beta.1",
-    "@percy/logger": "1.28.1-beta.1",
-    "@percy/webdriver-utils": "1.28.1-beta.1",
+    "@percy/client": "1.28.2-alpha.1",
+    "@percy/config": "1.28.2-alpha.1",
+    "@percy/dom": "1.28.2-alpha.1",
+    "@percy/logger": "1.28.2-alpha.1",
+    "@percy/webdriver-utils": "1.28.2-alpha.1",
     "content-disposition": "^0.5.4",
     "cross-spawn": "^7.0.3",
     "extract-zip": "^2.0.1",
@@ -58,5 +58,5 @@
     "rimraf": "^3.0.2",
     "ws": "^8.0.0"
   },
-  "gitHead": "d423bf3f6b26eaba752470121cafb2ad03317b4d"
+  "gitHead": "7aa1309dad35bbae9b4114620b6d338dfc964bc6"
 }

package/types/index.d.ts

@@ -19,6 +19,7 @@ interface DiscoveryOptions {
   allowedHostnames?: string[];
   disableCache?: boolean;
   captureMockedServiceWorker?: boolean;
+  captureSrcset?: boolean;
 }
 
 interface ScopeOptions {