@percy/core 1.11.0 → 1.13.0

package/dist/network.js

@@ -3,11 +3,11 @@ import logger from '@percy/logger';
 import { request as makeRequest } from '@percy/client/utils';
 import { normalizeURL, hostnameMatches, createResource, waitFor } from './utils.js';
 const MAX_RESOURCE_SIZE = 15 * 1024 ** 2; // 15MB
-
 const ALLOWED_STATUSES = [200, 201, 301, 302, 304, 307, 308];
-const ALLOWED_RESOURCES = ['Document', 'Stylesheet', 'Image', 'Media', 'Font', 'Other']; // The Interceptor class creates common handlers for dealing with intercepting asset requests
-// for a given page using various devtools protocol events and commands.
+const ALLOWED_RESOURCES = ['Document', 'Stylesheet', 'Image', 'Media', 'Font', 'Other'];
 
+// 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 = 30000;
   log = logger('core:discovery');
@@ -15,18 +15,17 @@ export class Network {
   #requests = new Map();
   #intercepts = new Map();
   #authentications = new Set();
-
   constructor(page, options) {
     this.page = page;
     this.timeout = options.networkIdleTimeout ?? 100;
     this.authorization = options.authorization;
     this.requestHeaders = options.requestHeaders ?? {};
-    this.userAgent = options.userAgent ?? // by default, emulate a non-headless browser
+    this.userAgent = options.userAgent ??
+    // by default, emulate a non-headless browser
     page.session.browser.version.userAgent.replace('Headless', '');
     this.intercept = options.intercept;
     this.meta = options.meta;
   }
-
   watch(session) {
     session.on('Network.requestWillBeSent', this._handleRequestWillBeSent);
     session.on('Network.responseReceived', this._handleResponseReceived.bind(this, session));
@@ -42,7 +41,6 @@ export class Network {
     }), session.send('Network.setExtraHTTPHeaders', {
       headers: this.requestHeaders
     })];
-
     if (this.intercept && session.isDocument) {
       session.on('Fetch.requestPaused', this._handleRequestPaused.bind(this, session));
       session.on('Fetch.authRequired', this._handleAuthRequired.bind(this, session));
@@ -53,11 +51,10 @@ export class Network {
         }]
       }));
     }
-
     return Promise.all(commands);
-  } // Resolves after the timeout when there are no more in-flight requests.
-
+  }
 
+  // Resolves after the timeout when there are no more in-flight requests.
   async idle(filter = () => true, timeout = this.timeout) {
     let requests = [];
     this.log.debug(`Wait for ${timeout}ms idle`, this.meta);
@@ -65,44 +62,44 @@ export class Network {
       if (this.page.session.closedReason) {
         throw new Error(`Network error: ${this.page.session.closedReason}`);
       }
-
       requests = Array.from(this.#requests.values()).filter(filter);
       return requests.length === 0;
     }, {
       timeout: Network.TIMEOUT,
       idle: timeout
     }).catch(error => {
-      // throw a better timeout error
       if (error.message.startsWith('Timeout')) {
-        let msg = 'Timed out waiting for network requests to idle.';
-
-        if (this.log.shouldLog('debug')) {
-          msg += `\n\n  ${['Active requests:', ...requests.map(r => r.url)].join('\n  - ')}\n`;
-        }
-
-        throw new Error(msg);
+        this._throwTimeoutError('Timed out waiting for network requests to idle.', filter);
       } else {
         throw error;
       }
     });
-  } // Called when a request should be removed from various trackers
+  }
 
+  // Throw a better network timeout error
+  _throwTimeoutError(msg, filter = () => true) {
+    if (this.log.shouldLog('debug')) {
+      let reqs = Array.from(this.#requests.values()).filter(filter).map(r => r.url);
+      msg += `\n\n  ${['Active requests:', ...reqs].join('\n  - ')}\n`;
+    }
+    throw new Error(msg);
+  }
 
+  // Called when a request should be removed from various trackers
   _forgetRequest({
     requestId,
     interceptId
   }, keepPending) {
     this.#requests.delete(requestId);
     this.#authentications.delete(interceptId);
-
     if (!keepPending) {
       this.#pending.delete(requestId);
       this.#intercepts.delete(requestId);
     }
-  } // Called when a request requires authentication. Responds to the auth request with any
-  // provided authorization credentials.
-
+  }
 
+  // Called when a request requires authentication. Responds to the auth request with any
+  // provided authorization credentials.
   _handleAuthRequired = async (session, event) => {
     let {
       username,
@@ -112,14 +109,12 @@ export class Network {
       requestId
     } = event;
     let response = 'Default';
-
     if (this.#authentications.has(requestId)) {
       response = 'CancelAuth';
     } else if (username || password) {
       response = 'ProvideCredentials';
       this.#authentications.add(requestId);
     }
-
     await session.send('Fetch.continueWithAuth', {
       requestId: event.requestId,
       authChallengeResponse: {
@@ -128,9 +123,10 @@ export class Network {
         password
       }
     });
-  }; // Called when a request is made. The request is paused until it is fulfilled, continued, or
-  // aborted. If the request is already pending, handle it; otherwise set it to be intercepted.
+  };
 
+  // Called when a request is made. The request is paused until it is fulfilled, continued, or
+  // aborted. If the request is already pending, handle it; otherwise set it to be intercepted.
   _handleRequestPaused = async (session, event) => {
     let {
       networkId: requestId,
@@ -138,34 +134,37 @@ export class Network {
       resourceType
     } = event;
     let pending = this.#pending.get(requestId);
-    this.#pending.delete(requestId); // guard against redirects with the same 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,
+      await this._handleRequest(session, {
+        ...pending,
         resourceType,
         interceptId
       });
     } else {
       // track the session that intercepted the request
-      this.#intercepts.set(requestId, { ...event,
+      this.#intercepts.set(requestId, {
+        ...event,
         session
       });
     }
-  }; // Called when a request will be sent. If the request has already been intercepted, handle it;
-  // otherwise set it to be pending until it is paused.
+  };
 
+  // Called when a request will be sent. If the request has already been intercepted, handle it;
+  // otherwise set it to be pending until it is paused.
   _handleRequestWillBeSent = async event => {
     let {
       requestId,
       request
-    } = event; // do not handle data urls
+    } = 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 {
@@ -173,17 +172,19 @@ export class Network {
           requestId: interceptId,
           resourceType
         } = intercept;
-        await this._handleRequest(session, { ...event,
+        await this._handleRequest(session, {
+          ...event,
           resourceType,
           interceptId
         });
         this.#intercepts.delete(requestId);
       }
     }
-  }; // Called when a pending request is paused. Handles associating redirected requests with
+  };
+
+  // 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) => {
     let {
       request,
@@ -191,24 +192,25 @@ export class Network {
       interceptId,
       resourceType
     } = event;
-    let redirectChain = []; // if handling a redirected request, associate the response and add to its redirect chain
+    let redirectChain = [];
 
+    // if handling a redirected request, associate the response and add to its redirect chain
     if (event.redirectResponse && this.#requests.has(requestId)) {
       let req = this.#requests.get(requestId);
-      redirectChain = [...req.redirectChain, req]; // clean up interim requests
-
+      redirectChain = [...req.redirectChain, req];
+      // clean up interim requests
       this._forgetRequest(req, true);
     }
-
     request.type = resourceType;
     request.requestId = requestId;
     request.interceptId = interceptId;
     request.redirectChain = redirectChain;
     this.#requests.set(requestId, request);
     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.
+  };
 
+  // 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) => {
     let {
       requestId,
@@ -216,59 +218,58 @@ export class Network {
     } = event;
     let request = this.#requests.get(requestId);
     /* istanbul ignore if: race condition paranioa */
-
     if (!request) return;
     request.response = response;
-
     request.response.buffer = async () => {
       let result = await session.send('Network.getResponseBody', {
         requestId
       });
       return Buffer.from(result.body, result.base64Encoded ? 'base64' : 'utf-8');
     };
-  }; // 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.
+  };
 
+  // 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);
     /* istanbul ignore else: race condition paranioa */
-
     if (request) this._forgetRequest(request);
-  }; // 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.
+  };
 
+  // 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);
     /* istanbul ignore if: race condition paranioa */
-
     if (!request) return;
     await saveResponseResource(this, request);
-
     this._forgetRequest(request);
-  }; // Called when a request has failed loading and triggers the this.onrequestfailed callback.
+  };
 
+  // Called when a request has failed loading and triggers the this.onrequestfailed callback.
   _handleLoadingFailed = event => {
     let request = this.#requests.get(event.requestId);
     /* istanbul ignore if: race condition paranioa */
+    if (!request) return;
 
-    if (!request) return; // do not log generic messages since the real error was likely logged elsewhere
-
+    // do not log generic messages since the real error was likely logged elsewhere
     if (event.errorText !== 'net::ERR_FAILED') {
       let message = `Request failed for ${request.url}: ${event.errorText}`;
-      this.log.debug(message, { ...this.meta,
+      this.log.debug(message, {
+        ...this.meta,
         url: request.url
       });
     }
-
     this._forgetRequest(request);
   };
-} // Returns the normalized origin URL of a request
+}
 
+// Returns the normalized origin URL of a request
 function originURL(request) {
   return normalizeURL((request.redirectChain[0] || request).url);
-} // Send a response for a given request, responding with cached resources when able
-
+}
 
+// Send a response for a given request, responding with cached resources when able
 async function sendResponseResource(network, request, session) {
   let {
     disallowedHostnames,
@@ -276,14 +277,13 @@ async function sendResponseResource(network, request, session) {
   } = network.intercept;
   let log = network.log;
   let url = originURL(request);
-  let meta = { ...network.meta,
+  let meta = {
+    ...network.meta,
     url
   };
-
   try {
     let resource = network.intercept.getResource(url);
     network.log.debug(`Handling request: ${url}`, meta);
-
     if (!(resource !== null && resource !== void 0 && resource.root) && hostnameMatches(disallowedHostnames, url)) {
       log.debug('- Skipping disallowed hostname', meta);
       await session.send('Fetch.failRequest', {
@@ -307,24 +307,25 @@ async function sendResponseResource(network, request, session) {
       });
     }
   } catch (error) {
+    /* istanbul ignore next: too hard to test (create race condition) */
+    if (session.closing && error.message.includes('close')) return;
     log.debug(`Encountered an error handling request: ${url}`, meta);
     log.debug(error);
-    /* istanbul ignore next: catch race condition */
 
+    /* istanbul ignore next: catch race condition */
     await session.send('Fetch.failRequest', {
       requestId: request.interceptId,
       errorReason: 'Failed'
     }).catch(e => log.debug(e, meta));
   }
-} // Make a new request with Node based on a network request
-
+}
 
+// Make a new request with Node based on a network request
 function makeDirectRequest(network, request) {
   var _network$authorizatio;
-
-  let headers = { ...request.headers
+  let headers = {
+    ...request.headers
   };
-
   if ((_network$authorizatio = network.authorization) !== null && _network$authorizatio !== void 0 && _network$authorizatio.username) {
     // include basic authorization username and password
     let {
@@ -334,14 +335,13 @@ function makeDirectRequest(network, request) {
     let token = Buffer.from([username, password || ''].join(':')).toString('base64');
     headers.Authorization = `Basic ${token}`;
   }
-
   return makeRequest(request.url, {
     buffer: true,
     headers
   });
-} // Save a resource from a request, skipping it if specific paramters are not met
-
+}
 
+// Save a resource from a request, skipping it if specific paramters are not met
 async function saveResponseResource(network, request) {
   let {
     disableCache,
@@ -351,18 +351,18 @@ async function saveResponseResource(network, request) {
   let log = network.log;
   let url = originURL(request);
   let response = request.response;
-  let meta = { ...network.meta,
+  let meta = {
+    ...network.meta,
     url
   };
   let resource = network.intercept.getResource(url);
-
   if (!resource || !resource.root && disableCache) {
     try {
       log.debug(`Processing resource: ${url}`, meta);
       let shouldCapture = response && hostnameMatches(allowedHostnames, url);
       let body = shouldCapture && (await response.buffer());
-      /* istanbul ignore if: first check is a sanity check */
 
+      /* istanbul ignore if: first check is a sanity check */
       if (!response) {
         return log.debug('- Skipping no response', meta);
       } else if (!shouldCapture) {
@@ -376,15 +376,15 @@ async function saveResponseResource(network, request) {
       } else if (!enableJavaScript && !ALLOWED_RESOURCES.includes(request.type)) {
         return log.debug(`- Skipping disallowed resource type [${request.type}]`, meta);
       }
+      let mimeType =
+      // ensure the mimetype is correct for text/plain responses
+      response.mimeType === 'text/plain' && mime.lookup(response.url) || response.mimeType;
 
-      let mimeType = // ensure the mimetype is correct for text/plain responses
-      response.mimeType === 'text/plain' && mime.lookup(response.url) || response.mimeType; // font responses from the browser may not be properly encoded, so request them directly
-
+      // font responses from the browser may not be properly encoded, so request them directly
       if (mimeType !== null && mimeType !== void 0 && mimeType.includes('font')) {
         log.debug('- Requesting asset directly');
         body = await makeDirectRequest(network, request);
       }
-
       resource = createResource(url, body, mimeType, {
         status: response.status,
         // 'Network.responseReceived' returns headers split by newlines, however
@@ -400,10 +400,8 @@ async function saveResponseResource(network, request) {
       log.debug(error);
     }
   }
-
   if (resource) {
     network.intercept.saveResource(resource);
   }
 }
-
 export default Network;

package/dist/page.js

@@ -6,7 +6,6 @@ import { hostname, waitFor, waitForTimeout as sleep, serializeFunction } from '.
 export class Page {
   static TIMEOUT = 30000;
   log = logger('core:page');
-
   constructor(session, options) {
     this.session = session;
     this.browser = session.browser;
@@ -18,15 +17,15 @@ export class Page {
     session.on('Runtime.executionContextsCleared', this._handleExecutionContextsCleared);
     session.send('Runtime.enable').catch(session._handleClosedError);
     this.log.debug('Page created');
-  } // Close the page
-
+  }
 
+  // Close the page
   async close() {
     await this.session.close();
     this.log.debug('Page closed', this.meta);
-  } // Resize the page to the specified width and height
-
+  }
 
+  // Resize the page to the specified width and height
   async resize({
     width,
     height,
@@ -40,45 +39,42 @@ export class Page {
       height,
       width
     });
-  } // Go to a URL and wait for navigation to occur
-
+  }
 
+  // Go to a URL and wait for navigation to occur
   async goto(url, {
     waitUntil = 'load'
   } = {}) {
     this.log.debug(`Navigate to: ${url}`, this.meta);
-
     let navigate = async () => {
       // set cookies before navigation so we can default the domain to this hostname
       if (this.session.browser.cookies.length) {
         let defaultDomain = hostname(url);
         await this.session.send('Network.setCookies', {
           // spread is used to make a shallow copy of the cookie
-          cookies: this.session.browser.cookies.map(({ ...cookie
+          cookies: this.session.browser.cookies.map(({
+            ...cookie
           }) => {
             if (!cookie.url) cookie.domain || (cookie.domain = defaultDomain);
             return cookie;
           })
         });
-      } // handle navigation errors
-
+      }
 
+      // handle navigation errors
       let res = await this.session.send('Page.navigate', {
         url
       });
       if (res.errorText) throw new Error(res.errorText);
     };
-
-    let handlers = [// wait until navigation and the correct lifecycle
+    let handlers = [
+    // wait until navigation and the correct lifecycle
     ['Page.frameNavigated', e => this.session.targetId === e.frame.id], ['Page.lifecycleEvent', e => this.session.targetId === e.frameId && e.name === waitUntil]].map(([name, cond]) => {
       let handler = e => cond(e) && (handler.finished = true) && handler.off();
-
       handler.off = () => this.session.off(name, handler);
-
       this.session.on(name, handler);
       return handler;
     });
-
     try {
       // trigger navigation and poll for handlers to have finished
       await Promise.all([navigate(), waitFor(() => {
@@ -86,18 +82,23 @@ export class Page {
         return handlers.every(handler => handler.finished);
       }, Page.TIMEOUT)]);
     } catch (error) {
-      // remove handlers and modify the error message
+      // remove any unused handlers
       for (let handler of handlers) handler.off();
 
-      throw Object.assign(error, {
-        message: `Navigation failed: ${error.message}`
-      });
-    }
+      // assign context to unknown errors
+      if (!error.message.startsWith('Timeout')) {
+        throw Object.assign(error, {
+          message: `Navigation failed: ${error.message}`
+        });
+      }
 
+      // throw a network error to show active requests
+      this.network._throwTimeoutError(`Navigation failed: Timed out waiting for the page ${waitUntil} event`);
+    }
     this.log.debug('Page navigated', this.meta);
-  } // Evaluate JS functions within the page's execution context
-
+  }
 
+  // Evaluate JS functions within the page's execution context
   async eval(fn, ...args) {
     let {
       result,
@@ -112,29 +113,27 @@ export class Page {
       awaitPromise: true,
       userGesture: true
     });
-
     if (exceptionDetails) {
       throw exceptionDetails.exception.description;
     } else {
       return result.value;
     }
-  } // Evaluate one or more scripts in succession
-
+  }
 
+  // Evaluate one or more scripts in succession
   async evaluate(scripts) {
     var _scripts;
-
     if (!((_scripts = scripts && (scripts = [].concat(scripts))) !== null && _scripts !== void 0 && _scripts.length)) return;
-    this.log.debug('Evaluate JavaScript', { ...this.meta,
+    this.log.debug('Evaluate JavaScript', {
+      ...this.meta,
       scripts
     });
-
     for (let script of scripts) await this.eval(script);
-  } // Takes a snapshot after waiting for any timeout, waiting for any selector, executing any
+  }
+
+  // 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.
-
-
   async snapshot({
     waitForTimeout,
     waitForSelector,
@@ -146,42 +145,42 @@ export class Page {
       width,
       enableJavaScript
     } = snapshot;
-    this.log.debug(`Taking snapshot: ${name}${width ? ` @${width}px` : ''}`, this.meta); // wait for any specified timeout
+    this.log.debug(`Taking snapshot: ${name}${width ? ` @${width}px` : ''}`, this.meta);
 
+    // wait for any specified timeout
     if (waitForTimeout) {
       this.log.debug(`Wait for ${waitForTimeout}ms timeout`, this.meta);
       await sleep(waitForTimeout);
-    } // wait for any specified selector
-
+    }
 
+    // wait for any specified selector
     if (waitForSelector) {
       this.log.debug(`Wait for selector: ${waitForSelector}`, this.meta);
       await this.eval(`await waitForSelector(${JSON.stringify(waitForSelector)}, ${Page.TIMEOUT})`);
-    } // execute any javascript
-
+    }
 
+    // execute any javascript
     if (execute) {
       let execBefore = typeof execute === 'object' && !Array.isArray(execute);
       await this.evaluate(execBefore ? execute.beforeSnapshot : execute);
-    } // wait for any final network activity before capturing the dom snapshot
+    }
 
+    // wait for any final network activity before capturing the dom snapshot
+    await this.network.idle();
 
-    await this.network.idle(); // inject @percy/dom for serialization by evaluating the file contents which adds a global
+    // 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 */
-    } // serialize and capture a DOM snapshot
-
+      await this.eval(new Function(script)); /* eslint-disable-line no-new-func */
+    }
 
+    // serialize and capture a DOM snapshot
     this.log.debug('Serialize DOM', this.meta);
-    /* istanbul ignore next: no instrumenting injected code */
 
+    /* istanbul ignore next: no instrumenting injected code */
     let capture = await this.eval((_, options) => ({
       /* eslint-disable-next-line no-undef */
       domSnapshot: PercyDOM.serialize(options),
@@ -189,19 +188,18 @@ export class Page {
     }), {
       enableJavaScript
     });
-    return { ...snapshot,
+    return {
+      ...snapshot,
       ...capture
     };
-  } // Initialize newly attached pages and iframes with page options
-
+  }
 
+  // Initialize newly attached pages and iframes with page options
   _handleAttachedToTarget = event => {
     let session = !event ? this.session : this.session.children.get(event.sessionId);
     /* istanbul ignore if: sanity check */
-
     if (!session) return;
     let commands = [this.network.watch(session)];
-
     if (session.isDocument) {
       session.on('Target.attachedToTarget', this._handleAttachedToTarget);
       commands.push(session.send('Page.enable'), session.send('Page.setLifecycleEventsEnabled', {
@@ -216,14 +214,15 @@ export class Page {
         flatten: true
       }));
     }
-
     return Promise.all(commands).catch(session._handleClosedError);
-  }; // Keep track of the page's execution context id
+  };
 
+  // Keep track of the page's execution context id
   _handleExecutionContextCreated = event => {
     if (this.session.targetId === event.context.auxData.frameId) {
-      this.contextId = event.context.id; // inject global percy config as soon as possible
+      this.contextId = event.context.id;
 
+      // inject global percy config as soon as possible
       this.eval(`window.__PERCY__ = ${JSON.stringify({
         config: this.browser.percy.config
       })};`).catch(this.session._handleClosedError);