@percy/core 1.27.6-alpha.0 → 1.27.6-beta.1

package/dist/config.js

@@ -59,6 +59,15 @@ export const configSchema = {
       scope: {
         type: 'string'
       },
+      scopeOptions: {
+        type: 'object',
+        additionalProperties: false,
+        properties: {
+          scroll: {
+            type: 'boolean'
+          }
+        }
+      },
       freezeAnimation: {
         // for backward compatibility
         type: 'boolean',
@@ -176,6 +185,10 @@ export const configSchema = {
       disableCache: {
         type: 'boolean'
       },
+      captureMockedServiceWorker: {
+        type: 'boolean',
+        default: false
+      },
       requestHeaders: {
         type: 'object',
         normalize: false,
@@ -292,6 +305,9 @@ export const snapshotSchema = {
         reshuffleInvalidTags: {
           $ref: '/config/snapshot#/properties/reshuffleInvalidTags'
         },
+        scopeOptions: {
+          $ref: '/config/snapshot#/properties/scopeOptions'
+        },
         discovery: {
           type: 'object',
           additionalProperties: false,
@@ -311,6 +327,9 @@ export const snapshotSchema = {
             disableCache: {
               $ref: '/config/discovery#/properties/disableCache'
             },
+            captureMockedServiceWorker: {
+              $ref: '/config/discovery#/properties/captureMockedServiceWorker'
+            },
             userAgent: {
               $ref: '/config/discovery#/properties/userAgent'
             },
@@ -319,6 +338,9 @@ export const snapshotSchema = {
             }
           }
         }
+      },
+      dependencies: {
+        scopeOptions: ['scope']
       }
     },
     exec: {
@@ -693,6 +715,10 @@ export const comparisonSchema = {
         cliScreenshotEndTime: {
           type: 'integer',
           default: 0
+        },
+        screenshotType: {
+          type: 'string',
+          default: 'singlepage'
         }
       }
     },

package/dist/discovery.js

@@ -32,6 +32,7 @@ function debugSnapshotOptions(snapshot) {
   debugProp(snapshot, 'deviceScaleFactor');
   debugProp(snapshot, 'waitForTimeout');
   debugProp(snapshot, 'waitForSelector');
+  debugProp(snapshot, 'scopeOptions.scroll');
   debugProp(snapshot, 'execute.afterNavigation');
   debugProp(snapshot, 'execute.beforeResize');
   debugProp(snapshot, 'execute.afterResize');
@@ -42,6 +43,7 @@ function debugSnapshotOptions(snapshot) {
   debugProp(snapshot, 'discovery.requestHeaders', JSON.stringify);
   debugProp(snapshot, 'discovery.authorization', JSON.stringify);
   debugProp(snapshot, 'discovery.disableCache');
+  debugProp(snapshot, 'discovery.captureMockedServiceWorker');
   debugProp(snapshot, 'discovery.userAgent');
   debugProp(snapshot, 'clientInfo');
   debugProp(snapshot, 'environmentInfo');
@@ -322,6 +324,7 @@ export function createDiscoveryQueue(percy) {
       requestHeaders: snapshot.discovery.requestHeaders,
       authorization: snapshot.discovery.authorization,
       userAgent: snapshot.discovery.userAgent,
+      captureMockedServiceWorker: snapshot.discovery.captureMockedServiceWorker,
       meta: snapshot.meta,
       // enable network inteception
       intercept: {

package/dist/network.js

@@ -1,20 +1,31 @@
 import { request as makeRequest } from '@percy/client/utils';
 import logger from '@percy/logger';
 import mime from 'mime-types';
-import { createResource, hostnameMatches, normalizeURL, waitFor } from './utils.js';
+import { DefaultMap, createResource, hostnameMatches, normalizeURL, waitFor } from './utils.js';
 const MAX_RESOURCE_SIZE = 25 * 1024 ** 2; // 25MB
 const ALLOWED_STATUSES = [200, 201, 301, 302, 304, 307, 308];
 const ALLOWED_RESOURCES = ['Document', 'Stylesheet', 'Image', 'Media', 'Font', 'Other'];
 const ABORTED_MESSAGE = 'Request was aborted by browser';
 
+// RequestLifeCycleHandler handles life cycle of a requestId
+// Ideal flow:          requestWillBeSent -> requestPaused -> responseReceived -> loadingFinished / loadingFailed
+// ServiceWorker flow:  requestWillBeSent -> responseReceived -> loadingFinished / loadingFailed
+class RequestLifeCycleHandler {
+  constructor() {
+    this.resolveRequestWillBeSent = null;
+    this.resolveResponseReceived = null;
+    this.requestWillBeSent = new Promise(resolve => this.resolveRequestWillBeSent = resolve);
+    this.responseReceived = new Promise(resolve => this.resolveResponseReceived = resolve);
+  }
+}
 // The Interceptor class creates common handlers for dealing with intercepting asset requests
 // for a given page using various devtools protocol events and commands.
 export class Network {
   static TIMEOUT = undefined;
   log = logger('core:discovery');
+  #requestsLifeCycleHandler = new DefaultMap(() => new RequestLifeCycleHandler());
   #pending = new Map();
   #requests = new Map();
-  #intercepts = new Map();
   #authentications = new Set();
   #aborted = new Set();
   constructor(page, options) {
@@ -22,6 +33,7 @@ export class Network {
     this.timeout = options.networkIdleTimeout ?? 100;
     this.authorization = options.authorization;
     this.requestHeaders = options.requestHeaders ?? {};
+    this.captureMockedServiceWorker = options.captureMockedServiceWorker ?? false;
     this.userAgent = options.userAgent ??
     // by default, emulate a non-headless browser
     page.session.browser.version.userAgent.replace('Headless', '');
@@ -36,7 +48,7 @@ export class Network {
     session.on('Network.loadingFinished', this._handleLoadingFinished);
     session.on('Network.loadingFailed', this._handleLoadingFailed);
     let commands = [session.send('Network.enable'), session.send('Network.setBypassServiceWorker', {
-      bypass: true
+      bypass: !this.captureMockedServiceWorker
     }), session.send('Network.setCacheDisabled', {
       cacheDisabled: true
     }), session.send('Network.setUserAgentOverride', {
@@ -114,7 +126,6 @@ export class Network {
     this.#authentications.delete(interceptId);
     if (!keepPending) {
       this.#pending.delete(requestId);
-      this.#intercepts.delete(requestId);
     }
   }
 
@@ -153,23 +164,19 @@ export class Network {
       requestId: interceptId,
       resourceType
     } = event;
+
+    // wait for request to be sent
+    await this.#requestsLifeCycleHandler.get(requestId).requestWillBeSent;
     let pending = this.#pending.get(requestId);
     this.#pending.delete(requestId);
 
     // guard against redirects with the same requestId
-    if ((pending === null || pending === void 0 ? void 0 : pending.request.url) === event.request.url && pending.request.method === event.request.method) {
-      await this._handleRequest(session, {
-        ...pending,
-        resourceType,
-        interceptId
-      });
-    } else {
-      // track the session that intercepted the request
-      this.#intercepts.set(requestId, {
-        ...event,
-        session
-      });
-    }
+    // eslint-disable-next-line babel/no-unused-expressions
+    (pending === null || pending === void 0 ? void 0 : pending.request.url) === event.request.url && pending.request.method === event.request.method && (await this._handleRequest(session, {
+      ...pending,
+      resourceType,
+      interceptId
+    }));
   };
 
   // Called when a request will be sent. If the request has already been intercepted, handle it;
@@ -177,35 +184,32 @@ export class Network {
   _handleRequestWillBeSent = async event => {
     let {
       requestId,
-      request
+      request,
+      type
     } = event;
 
     // do not handle data urls
     if (request.url.startsWith('data:')) return;
     if (this.intercept) {
-      let intercept = this.#intercepts.get(requestId);
       this.#pending.set(requestId, event);
-      if (intercept) {
-        // handle the request with the session that intercepted it
-        let {
-          session,
-          requestId: interceptId,
-          resourceType
-        } = intercept;
-        await this._handleRequest(session, {
+      if (this.captureMockedServiceWorker) {
+        await this._handleRequest(undefined, {
           ...event,
-          resourceType,
-          interceptId
-        });
-        this.#intercepts.delete(requestId);
+          resourceType: type,
+          interceptId: requestId
+        }, true);
       }
     }
+    // release request
+    // note: we are releasing this, even if intercept is not set for network.js
+    // since, we want to process all-requests in-order doesn't matter if it should be intercepted or not
+    this.#requestsLifeCycleHandler.get(requestId).resolveRequestWillBeSent();
   };
 
   // Called when a pending request is paused. Handles associating redirected requests with
   // responses and calls this.onrequest with request info and callbacks to continue, respond,
   // or abort a request. One of the callbacks is required to be called and only one.
-  _handleRequest = async (session, event) => {
+  _handleRequest = async (session, event, serviceWorker = false) => {
     let {
       request,
       requestId,
@@ -226,16 +230,21 @@ export class Network {
     request.interceptId = interceptId;
     request.redirectChain = redirectChain;
     this.#requests.set(requestId, request);
-    await sendResponseResource(this, request, session);
+    if (!serviceWorker) {
+      await sendResponseResource(this, request, session);
+    }
   };
 
   // Called when a response has been received for a specific request. Associates the response with
   // the request data and adds a buffer method to fetch the response body when needed.
-  _handleResponseReceived = (session, event) => {
+  _handleResponseReceived = async (session, event) => {
     let {
       requestId,
       response
     } = event;
+    // await on requestWillBeSent
+    // no explicitly wait on requestWillBePaused as we implictly wait on it, since it manipulates the lifeCycle of request using Fetch module
+    await this.#requestsLifeCycleHandler.get(requestId).requestWillBeSent;
     let request = this.#requests.get(requestId);
     /* istanbul ignore if: race condition paranioa */
     if (!request) return;
@@ -246,12 +255,19 @@ export class Network {
       });
       return Buffer.from(result.body, result.base64Encoded ? 'base64' : 'utf-8');
     };
+    // release response
+    this.#requestsLifeCycleHandler.get(requestId).resolveResponseReceived();
   };
 
   // Called when a request streams events. These types of requests break asset discovery because
   // they never finish loading, so we untrack them to signal idle after the first event.
-  _handleEventSourceMessageReceived = event => {
-    let request = this.#requests.get(event.requestId);
+  _handleEventSourceMessageReceived = async event => {
+    let {
+      requestId
+    } = event;
+    // wait for request to be sent
+    await this.#requestsLifeCycleHandler.get(requestId).requestWillBeSent;
+    let request = this.#requests.get(requestId);
     /* istanbul ignore else: race condition paranioa */
     if (request) this._forgetRequest(request);
   };
@@ -259,7 +275,12 @@ export class Network {
   // Called when a request has finished loading which triggers the this.onrequestfinished
   // callback. The request should have an associated response and be finished with any redirects.
   _handleLoadingFinished = async event => {
-    let request = this.#requests.get(event.requestId);
+    let {
+      requestId
+    } = event;
+    // wait for upto 2 seconds or check if response has been sent
+    await this.#requestsLifeCycleHandler.get(requestId).responseReceived;
+    let request = this.#requests.get(requestId);
     /* istanbul ignore if: race condition paranioa */
     if (!request) return;
     await saveResponseResource(this, request);
@@ -267,7 +288,15 @@ export class Network {
   };
 
   // Called when a request has failed loading and triggers the this.onrequestfailed callback.
-  _handleLoadingFailed = event => {
+  _handleLoadingFailed = async event => {
+    let {
+      requestId
+    } = event;
+    // wait for request to be sent
+    // note: we are waiting on requestWillBeSent and NOT responseReceived
+    // since, requests can be cancelled in-flight without Network.responseReceived having been triggered
+    // and in any case, order of processing for responseReceived and loadingFailed does not matter, as response capturing is done in loadingFinished
+    await this.#requestsLifeCycleHandler.get(requestId).requestWillBeSent;
     let request = this.#requests.get(event.requestId);
     /* istanbul ignore if: race condition paranioa */
     if (!request) return;

package/dist/queue.js

@@ -324,10 +324,6 @@ async function* _until2(task, callback) {
         pending = _classPrivateFieldGet(this, _pending).size;
       // calculate the position within queued when not pending
       if (task && task.pending == null) queued = positionOf(_classPrivateFieldGet(this, _queued), task);
-      // calculate the position within pending when not stopping
-      // Commenting below line reason being currently if the task passed is found we will stop flushing
-      // rest of the tasks but ideally it should wait for flushing of all the tasks till the last dequeued task.
-      // if (!task?.stop && task?.pending != null) pending = positionOf(this.#pending, task);
       // call the callback and return true when not queued or pending
       let position = (queued ?? 0) + pending;
       callback === null || callback === void 0 ? void 0 : callback(position);

package/dist/server.js

@@ -157,6 +157,11 @@ export class Server extends http.Server {
     });
   }
 
+  // return host bind address - defaults to "::"
+  get host() {
+    return process.env.PERCY_SERVER_HOST || '::';
+  }
+
   // return the listening port or any default port
   get port() {
     var _super$address;
@@ -166,7 +171,11 @@ export class Server extends http.Server {
   // return a string representation of the server address
   address() {
     let port = this.port;
-    let host = 'http://localhost';
+    // we need to specifically map "::" to localhost on windows as even though we
+    // can listen to all interfaces using "::" we cant make a request on "::" as
+    // its an invalid ip address as per spec, but unix systems allow request to it and
+    // falls back to localhost
+    let host = `http://${this.host === '::' ? 'localhost' : this.host}`;
     return port ? `${host}:${port}` : host;
   }
 
@@ -175,7 +184,7 @@ export class Server extends http.Server {
     return new Promise((resolve, reject) => {
       let handle = err => off() && err ? reject(err) : resolve(this);
       let off = () => this.off('error', handle).off('listening', handle);
-      super.listen(port, handle).once('error', handle);
+      super.listen(port, this.host, handle).once('error', handle);
     });
   }
 

package/dist/snapshot.js

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

package/dist/utils.js

@@ -44,7 +44,8 @@ export function percyAutomateRequestHandler(req, percy) {
     ignoreRegionSelectors: (_percy$config$snapsho3 = percy.config.snapshot.ignoreRegions) === null || _percy$config$snapsho3 === void 0 ? void 0 : _percy$config$snapsho3.ignoreRegionSelectors,
     ignoreRegionXpaths: (_percy$config$snapsho4 = percy.config.snapshot.ignoreRegions) === null || _percy$config$snapsho4 === void 0 ? void 0 : _percy$config$snapsho4.ignoreRegionXpaths,
     considerRegionSelectors: (_percy$config$snapsho5 = percy.config.snapshot.considerRegions) === null || _percy$config$snapsho5 === void 0 ? void 0 : _percy$config$snapsho5.considerRegionSelectors,
-    considerRegionXpaths: (_percy$config$snapsho6 = percy.config.snapshot.considerRegions) === null || _percy$config$snapsho6 === void 0 ? void 0 : _percy$config$snapsho6.considerRegionXpaths
+    considerRegionXpaths: (_percy$config$snapsho6 = percy.config.snapshot.considerRegions) === null || _percy$config$snapsho6 === void 0 ? void 0 : _percy$config$snapsho6.considerRegionXpaths,
+    version: 'v2'
   }, camelCasedOptions], (path, prev, next) => {
     switch (path.map(k => k.toString()).join('.')) {
       case 'percyCSS':
@@ -324,4 +325,23 @@ export function serializeFunction(fn) {
     fnbody = fnbody.replace(/cov_.*?(;\n?|,)\s*/g, '');
   }
   return fnbody;
-}
+}
+
+// DefaultMap, which returns a default value for an uninitialized key
+// Similar to defaultDict in python
+export class DefaultMap extends Map {
+  constructor(getDefaultValue, ...mapConstructorArgs) {
+    super(...mapConstructorArgs);
+    if (typeof getDefaultValue !== 'function') {
+      throw new Error('getDefaultValue must be a function');
+    }
+    this.getDefaultValue = getDefaultValue;
+  }
+  get = key => {
+    if (!this.has(key)) {
+      this.set(key, this.getDefaultValue(key));
+    }
+    return super.get(key);
+  };
+}
+;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@percy/core",
-  "version": "1.27.6-alpha.0",
+  "version": "1.27.6-beta.1",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -9,7 +9,7 @@
   },
   "publishConfig": {
     "access": "public",
-    "tag": "alpha"
+    "tag": "beta"
   },
   "engines": {
     "node": ">=14"
@@ -43,11 +43,11 @@
     "test:types": "tsd"
   },
   "dependencies": {
-    "@percy/client": "1.27.6-alpha.0",
-    "@percy/config": "1.27.6-alpha.0",
-    "@percy/dom": "1.27.6-alpha.0",
-    "@percy/logger": "1.27.6-alpha.0",
-    "@percy/webdriver-utils": "1.27.6-alpha.0",
+    "@percy/client": "1.27.6-beta.1",
+    "@percy/config": "1.27.6-beta.1",
+    "@percy/dom": "1.27.6-beta.1",
+    "@percy/logger": "1.27.6-beta.1",
+    "@percy/webdriver-utils": "1.27.6-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": "415a083dc13e9453990b042a41d6676f6618df0c"
+  "gitHead": "1a3bf9e775769215ef590faa40502ce0ee0a6f78"
 }

package/types/index.d.ts

@@ -18,6 +18,11 @@ interface DiscoveryOptions {
   authorization?: AuthCredentials;
   allowedHostnames?: string[];
   disableCache?: boolean;
+  captureMockedServiceWorker?: boolean;
+}
+
+interface ScopeOptions {
+  scroll?: boolean;
 }
 
 interface DiscoveryLaunchOptions {
@@ -44,6 +49,7 @@ interface CommonSnapshotOptions {
   reshuffleInvalidTags?: boolean;
   devicePixelRatio?: number;
   scope?: string;
+  scopeOptions?: ScopeOptions;
 }
 
 export interface SnapshotOptions extends CommonSnapshotOptions {