🚧 Implement before/afterMobile & move pixel ratio to their own tab

packages/core/src/config.js

@@ -186,6 +186,8 @@ export const snapshotSchema = {
  afterNavigation: { $ref: '/snapshot#/$defs/exec' },
  beforeResize: { $ref: '/snapshot#/$defs/exec' },
  afterResize: { $ref: '/snapshot#/$defs/exec' },
+ beforeMobile: { $ref: '/snapshot#/$defs/exec' },
+ afterMobile: { $ref: '/snapshot#/$defs/exec' },
  beforeSnapshot: { $ref: '/snapshot#/$defs/exec' }
  }
  }]

packages/core/src/page.js

@@ -35,14 +35,9 @@ export class Page {
  this.log.debug('Page closed', this.meta);
  }
 
- async reload() {
- await this.session.send('Page.reload');
- this.log.debug('Page reloaded', this.meta);
- }
-
  // Resize the page to the specified width and height
  async resize({ width, height, deviceScaleFactor = 1, mobile = false }) {
- this.log.debug(`Resize page to ${width}x${height} at ${deviceScaleFactor}x scale`);
+ this.log.debug(`Resize page to ${width}x${height} @${deviceScaleFactor}x`);
 
  await this.session.send('Emulation.setDeviceMetricsOverride', {
  deviceScaleFactor,

packages/core/src/snapshot.js

@@ -264,6 +264,8 @@ function debugSnapshotConfig(snapshot, showInfo) {
  debugProp(snapshot, 'execute.afterNavigation');
  debugProp(snapshot, 'execute.beforeResize');
  debugProp(snapshot, 'execute.afterResize');
+ debugProp(snapshot, 'execute.beforeMobile');
+ debugProp(snapshot, 'execute.afterMobile');
  debugProp(snapshot, 'execute.beforeSnapshot');
  debugProp(snapshot, 'discovery.allowedHostnames');
  debugProp(snapshot, 'discovery.disallowedHostnames');
@@ -324,7 +326,7 @@ function waitForDiscoveryNetworkIdle(page, options) {
 // Used to cache resources across core instances
 const RESOURCE_CACHE_KEY = Symbol('resource-cache');
 
-function* triggerResourceRequests(page, snapshot) {
+function* triggerResourceRequests(page, pixelRatioPage, snapshot) {
  // copy widths to prevent mutation later
  let widths = snapshot.widths.slice();
  let initialWidth = widths.shift();
@@ -347,19 +349,27 @@ function* triggerResourceRequests(page, snapshot) {
 
  // resize and set pixel ratio for higher density images
  if (snapshot.deviceScaleFactor !== 1) {
- yield waitForDiscoveryNetworkIdle(page, snapshot.discovery);
- yield page.evaluate(snapshot.execute?.beforeResize);
+ // yield waitForDiscoveryNetworkIdle(page, snapshot.discovery);
+ yield pixelRatioPage.goto(snapshot.url);
+
+ if (snapshot.execute) {
+ // when any execute options are provided, inject snapshot options
+ /* istanbul ignore next: cannot detect coverage of injected code */
+ yield page.eval((_, s) => (window.__PERCY__.snapshot = s), snapshot);
+ yield page.evaluate(snapshot.execute.afterNavigation);
+ }
 
- yield page.resize({
+ yield pixelRatioPage.evaluate(snapshot.execute?.beforeResize);
+ yield pixelRatioPage.resize({
  mobile: true,
  width: initialWidth,
  height: snapshot.minHeight,
  deviceScaleFactor: snapshot.deviceScaleFactor
  });
 
- yield page.reload();
- yield waitForDiscoveryNetworkIdle(page, snapshot.discovery);
- yield page.evaluate(snapshot.execute?.afterResize);
+ // revisit to ensure mobile assets are loaded
+ yield waitForDiscoveryNetworkIdle(pixelRatioPage, snapshot.discovery);
+ yield pixelRatioPage.evaluate(snapshot.execute?.afterResize);
  }
 
  // trigger resize events for other widths
@@ -371,19 +381,18 @@ function* triggerResourceRequests(page, snapshot) {
 
  // resize and set pixel ratio for higher density images
  if (snapshot.deviceScaleFactor !== 1) {
- yield waitForDiscoveryNetworkIdle(page, snapshot.discovery);
- yield page.evaluate(snapshot.execute?.beforeResize);
+ yield waitForDiscoveryNetworkIdle(pixelRatioPage, snapshot.discovery);
+ yield pixelRatioPage.evaluate(snapshot.execute?.beforeResize);
 
- yield page.resize({
+ yield pixelRatioPage.resize({
  width,
  mobile: true,
  height: snapshot.minHeight,
  deviceScaleFactor: snapshot.deviceScaleFactor
  });
 
- yield page.reload();
- } else {
- yield waitForDiscoveryNetworkIdle(page, snapshot.discovery);
+ yield pixelRatioPage.evaluate(snapshot.execute?.afterResize);
+ yield waitForDiscoveryNetworkIdle(pixelRatioPage, snapshot.discovery);
  }
  }
 }
@@ -409,7 +418,7 @@ export async function* discoverSnapshotResources(percy, snapshot, callback) {
  ));
 
  // open a new browser page
- let page = yield percy.browser.page({
+ let pageOptions = {
  enableJavaScript: snapshot.enableJavaScript ?? !snapshot.domSnapshot,
  networkIdleTimeout: snapshot.discovery.networkIdleTimeout,
  requestHeaders: snapshot.discovery.requestHeaders,
@@ -426,10 +435,14 @@ export async function* discoverSnapshotResources(percy, snapshot, callback) {
  getResource: u => resources.get(u) || cache.get(u),
  saveResource: r => resources.set(r.url, r) && cache.set(r.url, r)
  }
- });
+ };
+
+ let page = yield percy.browser.page(pageOptions);
+ // @TODO create this conditionally?
+ let pixelRatioPage = yield percy.browser.page(pageOptions);
 
  try {
- yield* triggerResourceRequests(page, snapshot);
+ yield* triggerResourceRequests(page, pixelRatioPage, snapshot);
 
  if (snapshot.domSnapshot) {
  // ensure discovery has finished and handle resources
@@ -454,8 +467,10 @@ export async function* discoverSnapshotResources(percy, snapshot, callback) {
 
  // page clean up
  await page.close();
+ await pixelRatioPage.close();
  } catch (error) {
  await page.close();
+ await pixelRatioPage.close();
  throw error;
  }
 }

packages/core/test/discovery.test.js

@@ -516,7 +516,7 @@ describe('Discovery', () => {
 
  expect(logger.stderr).toEqual(jasmine.arrayContaining([
  '[percy:core:page] Page created',
- '[percy:core:page] Resize page to 400x1024 at 1x scale',
+ '[percy:core:page] Resize page to 400x1024 @1x',
  '[percy:core:page] Navigate to: http://localhost:8000/',
  '[percy:core:discovery] Handling request: http://localhost:8000/',
  '[percy:core:discovery] - Serving root resource',
@@ -530,7 +530,7 @@ describe('Discovery', () => {
  '[percy:core:discovery] - mimetype: image/gif',
  '[percy:core:page] Page navigated',
  '[percy:core:network] Wait for 100ms idle',
- '[percy:core:page] Resize page to 1200x1024 at 1x scale',
+ '[percy:core:page] Resize page to 1200x1024 @1x',
  '[percy:core:network] Wait for 100ms idle',
  '[percy:core:page] Page closed'
  ]));

packages/core/test/snapshot.test.js

@@ -691,12 +691,24 @@ describe('Snapshot', () => {
  }
  });
 
+ await percy.snapshot({
+ name: 'mobile snapshot',
+ url: 'http://localhost:8000',
+ deviceScaleFactor: 2,
+ widths: [400, 800, 1200],
+ execute: {
+ beforeMobile: domtest('beforeMobile', () => window.devicePixelRatio),
+ afterMobile: domtest('afterMobile', () => window.devicePixelRatio)
+ }
+ });
+
  await percy.idle();
 
  expect(logger.stderr).toEqual([]);
  expect(logger.stdout).toEqual([
  '[percy] Snapshot taken: foo snapshot',
- '[percy] Snapshot taken: bar snapshot'
+ '[percy] Snapshot taken: bar snapshot',
+ '[percy] Snapshot taken: mobile snapshot'
  ]);
 
  expect(Buffer.from((