Added support for capturing asset in multiple dpr and width combination

packages/client/src/client.js

@@ -217,6 +217,18 @@ export class PercyClient {
     return this.get(`job_status?sync=true&type=${type}&id=${ids.join()}`);
   }
 
+  // Returns device details enabled on project associated with given token
+  async getDeviceDetails(buildId) {
+    try {
+      let url = 'device-details';
+      if (buildId) url += `?build_id=${buildId}`;
+      const { data } = await this.get(url);
+      return data;
+    } catch (e) {
+      return [];
+    }
+  }
+
   // Retrieves project builds optionally filtered. Requires a read access token.
   async getBuilds(project, filters = {}) {
     validateProjectPath(project);

packages/client/test/client.test.js

@@ -353,6 +353,20 @@ describe('PercyClient', () => {
     });
   });
 
+  describe('#getDeviceDetails()', () => {
+    it('in case of error return []', async () => {
+      api.reply('/device-details', () => [500]);
+      await expectAsync(client.getDeviceDetails()).toBeResolvedTo([]);
+    });
+
+    it('gets device details', async () => {
+      api.reply('/device-details', () => [200, { data: '<<device-data-without-build-id>>' }]);
+      api.reply('/device-details?build_id=123', () => [200, { data: '<<device-data-with-build-id>>' }]);
+      await expectAsync(client.getDeviceDetails()).toBeResolvedTo('<<device-data-without-build-id>>');
+      await expectAsync(client.getDeviceDetails(123)).toBeResolvedTo('<<device-data-with-build-id>>');
+    });
+  });
+
   describe('#getBuilds()', () => {
     it('throws when missing a project path', async () => {
       await expectAsync(client.getBuilds())

packages/client/test/helpers.js

@@ -139,6 +139,12 @@ export const api = {
     '/snapshots/4567?sync=true&response_format=sync-cli': () => [201, {
       name: 'test snapshot',
       diff_ratio: 0
+    }],
+    '/device-details?build_id=123': () => [201, {
+      data: []
+    }],
+    '/device-details': () => [201, {
+      data: []
     }]
   },
 

packages/core/src/config.js

@@ -190,6 +190,10 @@ export const configSchema = {
         type: 'boolean',
         default: false
       },
+      captureSrcset: {
+        type: 'boolean',
+        default: false
+      },
       requestHeaders: {
         type: 'object',
         normalize: false,
@@ -276,6 +280,7 @@ export const snapshotSchema = {
             authorization: { $ref: '/config/discovery#/properties/authorization' },
             disableCache: { $ref: '/config/discovery#/properties/disableCache' },
             captureMockedServiceWorker: { $ref: '/config/discovery#/properties/captureMockedServiceWorker' },
+            captureSrcset: { $ref: '/config/discovery#/properties/captureSrcset' },
             userAgent: { $ref: '/config/discovery#/properties/userAgent' },
             devicePixelRatio: { $ref: '/config/discovery#/properties/devicePixelRatio' }
           }

packages/core/src/discovery.js

@@ -55,6 +55,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');
@@ -141,7 +142,7 @@ function processSnapshotResources({ domSnapshot, resources, ...snapshot }) {
 // the page and calling any provided execute options.
 async function* captureSnapshotResources(page, snapshot, options) {
   let { discovery, additionalSnapshots = [], ...baseSnapshot } = snapshot;
-  let { capture, captureWidths, deviceScaleFactor, mobile } = options;
+  let { capture, captureWidths, deviceScaleFactor, mobile, captureResponsiveDom } = options;
 
   // used to take snapshots and remove any discovered root resource
   let takeSnapshot = async (options, width) => {
@@ -171,6 +172,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;
@@ -189,6 +198,16 @@ async function* captureSnapshotResources(page, snapshot, options) {
       }
     }
 
+    if (captureResponsiveDom) {
+      for (const device of captureResponsiveDom) {
+        yield waitForDiscoveryNetworkIdle(page, discovery);
+        yield* captureSnapshotResources(page, { ...snapshot, widths: [device.width] }, {
+          deviceScaleFactor: device.deviceScaleFactor,
+          mobile: true
+        });
+      }
+    }
+
     if (capture && !snapshot.domSnapshot) {
       // capture this snapshot and update the base snapshot after capture
       let captured = yield takeSnapshot(snap, width);
@@ -203,13 +222,10 @@ 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) {
+    const log = logger('core:discovery');
+    log.warn('discovery.devicePixelRatio is deprecated percy will now auto capture resource in all devicePixelRatio, Ignoring configuration');
+    discovery.devicePixelRatio = null;
   }
 
   // wait for final network idle when not capturing DOM
@@ -308,7 +324,8 @@ export function createDiscoveryQueue(percy) {
       try {
         yield* captureSnapshotResources(page, snapshot, {
           captureWidths: !snapshot.domSnapshot && percy.deferUploads,
-          capture: callback
+          capture: callback,
+          captureResponsiveDom: percy.deviceDetails || []
         });
       } finally {
         // always close the page when done

packages/core/src/page.js

@@ -132,6 +132,17 @@ 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
   // with the captured URL and DOM snapshot.
@@ -165,14 +176,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);

packages/core/src/percy.js

@@ -157,6 +157,7 @@ export class Percy {
       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?.id);
       const snapshotType = this.projectType === 'web' ? 'snapshot' : 'comparison';
       this.syncQueue = new WaitForJob(snapshotType, this);
       // log and mark this instance as started

packages/core/src/snapshot.js

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