@percy/core 1.28.1 → 1.28.2-beta.1

package/dist/config.js

@@ -199,6 +199,9 @@ export const configSchema = {
         type: 'boolean',
         default: false
       },
+      captureSrcset: {
+        type: 'boolean'
+      },
       requestHeaders: {
         type: 'object',
         normalize: false,
@@ -346,6 +349,9 @@ export const snapshotSchema = {
             captureMockedServiceWorker: {
               $ref: '/config/discovery#/properties/captureMockedServiceWorker'
             },
+            captureSrcset: {
+              $ref: '/config/discovery#/properties/captureSrcset'
+            },
             userAgent: {
               $ref: '/config/discovery#/properties/userAgent'
             },

package/dist/discovery.js

@@ -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
@@ -345,7 +367,8 @@ export function createDiscoveryQueue(percy) {
     try {
       yield* captureSnapshotResources(page, snapshot, {
         captureWidths: !snapshot.domSnapshot && percy.deferUploads,
-        capture: callback
+        capture: callback,
+        captureForDevices: percy.deviceDetails || []
       });
     } finally {
       // always close the page when done

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/snapshot.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@percy/core",
-  "version": "1.28.1",
+  "version": "1.28.2-beta.1",
   "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.28.1",
-    "@percy/config": "1.28.1",
-    "@percy/dom": "1.28.1",
-    "@percy/logger": "1.28.1",
-    "@percy/webdriver-utils": "1.28.1",
+    "@percy/client": "1.28.2-beta.1",
+    "@percy/config": "1.28.2-beta.1",
+    "@percy/dom": "1.28.2-beta.1",
+    "@percy/logger": "1.28.2-beta.1",
+    "@percy/webdriver-utils": "1.28.2-beta.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": "f3b0fad3c511fe9eea44eef939195a9d0310216b"
+  "gitHead": "c4d0637366dbc28eeda234f93d44424d9c565f49"
 }

package/types/index.d.ts

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