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

package/dist/api.js

@@ -4,9 +4,7 @@ import { createRequire } from 'module';
 import logger from '@percy/logger';
 import { normalize } from '@percy/config/utils';
 import { getPackageJSON, Server, percyAutomateRequestHandler } from './utils.js';
-// TODO Remove below esline disable once we publish webdriver-util
-import WebdriverUtils from '@percy/webdriver-utils'; // eslint-disable-line import/no-extraneous-dependencies
-
+import WebdriverUtils from '@percy/webdriver-utils';
 // need require.resolve until import.meta.resolve can be transpiled
 export const PERCY_DOM = createRequire(import.meta.url).resolve('@percy/dom');
 
@@ -140,7 +138,7 @@ export function createPercyServer(percy, port) {
   .route('post', '/percy/flush', async (req, res) => res.json(200, {
     success: await percy.flush(req.body).then(() => true)
   })).route('post', '/percy/automateScreenshot', async (req, res) => {
-    req = percyAutomateRequestHandler(req);
+    req = percyAutomateRequestHandler(req, percy.build);
     res.json(200, {
       success: await percy.upload(await new WebdriverUtils(req.body).automateScreenshot()).then(() => true)
     });

package/dist/config.js

@@ -541,6 +541,39 @@ export const snapshotSchema = {
     }
   }
 };
+const regionsSchema = {
+  type: 'array',
+  items: {
+    type: 'object',
+    additionalProperties: false,
+    properties: {
+      selector: {
+        type: 'string'
+      },
+      coOrdinates: {
+        type: 'object',
+        properties: {
+          top: {
+            type: 'integer',
+            minimum: 0
+          },
+          left: {
+            type: 'integer',
+            minimum: 0
+          },
+          bottom: {
+            type: 'integer',
+            minimum: 0
+          },
+          right: {
+            type: 'integer',
+            minimum: 0
+          }
+        }
+      }
+    }
+  }
+};
 
 // Comparison upload options
 export const comparisonSchema = {
@@ -639,39 +672,15 @@ export const comparisonSchema = {
       additionalProperties: false,
       required: ['ignoreElementsData'],
       properties: {
-        ignoreElementsData: {
-          type: 'array',
-          items: {
-            type: 'object',
-            additionalProperties: false,
-            properties: {
-              selector: {
-                type: 'string'
-              },
-              coOrdinates: {
-                type: 'object',
-                properties: {
-                  top: {
-                    type: 'integer',
-                    minimum: 0
-                  },
-                  left: {
-                    type: 'integer',
-                    minimum: 0
-                  },
-                  bottom: {
-                    type: 'integer',
-                    minimum: 0
-                  },
-                  right: {
-                    type: 'integer',
-                    minimum: 0
-                  }
-                }
-              }
-            }
-          }
-        }
+        ignoreElementsData: regionsSchema
+      }
+    },
+    consideredElementsData: {
+      type: 'object',
+      additionalProperties: false,
+      required: ['considerElementsData'],
+      properties: {
+        considerElementsData: regionsSchema
       }
     }
   }

package/dist/network.js

@@ -5,16 +5,18 @@ import { normalizeURL, hostnameMatches, createResource, waitFor } from './utils.
 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';
 
 // 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;
+  static TIMEOUT = undefined;
   log = logger('core:discovery');
   #pending = new Map();
   #requests = new Map();
   #intercepts = new Map();
   #authentications = new Set();
+  #aborted = new Set();
   constructor(page, options) {
     this.page = page;
     this.timeout = options.networkIdleTimeout ?? 100;
@@ -25,6 +27,7 @@ export class Network {
     page.session.browser.version.userAgent.replace('Headless', '');
     this.intercept = options.intercept;
     this.meta = options.meta;
+    this._initializeNetworkIdleWaitTimeout();
   }
   watch(session) {
     session.on('Network.requestWillBeSent', this._handleRequestWillBeSent);
@@ -76,6 +79,23 @@ export class Network {
     });
   }
 
+  // Validates that requestId is still valid as sometimes request gets cancelled and we have already executed
+  // _forgetRequest for the same, but we still attempt to make a call for it and it fails
+  // with Protocol error (Fetch.failRequest): Invalid InterceptionId.
+  async send(session, method, params) {
+    /* istanbul ignore else: currently all send have requestId */
+    if (params.requestId) {
+      /* istanbul ignore if: race condition, very hard to mock this */
+      if (this.isAborted(params.requestId)) {
+        throw new Error(ABORTED_MESSAGE);
+      }
+    }
+    return await session.send(method, params);
+  }
+  isAborted(requestId) {
+    return this.#aborted.has(requestId);
+  }
+
   // Throw a better network timeout error
   _throwTimeoutError(msg, filter = () => true) {
     if (this.log.shouldLog('debug')) {
@@ -115,7 +135,7 @@ export class Network {
       response = 'ProvideCredentials';
       this.#authentications.add(requestId);
     }
-    await session.send('Fetch.continueWithAuth', {
+    await this.send(session, 'Fetch.continueWithAuth', {
       requestId: event.requestId,
       authChallengeResponse: {
         response,
@@ -221,7 +241,7 @@ export class Network {
     if (!request) return;
     request.response = response;
     request.response.buffer = async () => {
-      let result = await session.send('Network.getResponseBody', {
+      let result = await this.send(session, 'Network.getResponseBody', {
         requestId
       });
       return Buffer.from(result.body, result.base64Encoded ? 'base64' : 'utf-8');
@@ -252,8 +272,18 @@ export class Network {
     /* istanbul ignore if: race condition paranioa */
     if (!request) return;
 
-    // do not log generic messages since the real error was likely logged elsewhere
-    if (event.errorText !== 'net::ERR_FAILED') {
+    // If request was aborted, keep track of it as we need to cancel any in process callbacks for
+    // such a request to avoid Invalid InterceptionId errors
+    // Note: 404s also show up under ERR_ABORTED and not ERR_FAILED
+    if (event.errorText === 'net::ERR_ABORTED') {
+      let message = `Request aborted for ${request.url}: ${event.errorText}`;
+      this.log.debug(message, {
+        ...this.meta,
+        url: request.url
+      });
+      this.#aborted.add(request.requestId);
+    } else if (event.errorText !== 'net::ERR_FAILED') {
+      // do not log generic messages since the real error was likely logged elsewhere
       let message = `Request failed for ${request.url}: ${event.errorText}`;
       this.log.debug(message, {
         ...this.meta,
@@ -262,6 +292,13 @@ export class Network {
     }
     this._forgetRequest(request);
   };
+  _initializeNetworkIdleWaitTimeout() {
+    if (Network.TIMEOUT) return;
+    Network.TIMEOUT = parseInt(process.env.PERCY_NETWORK_IDLE_WAIT_TIMEOUT) || 30000;
+    if (Network.TIMEOUT > 60000) {
+      this.log.warn('Setting PERCY_NETWORK_IDLE_WAIT_TIMEOUT over 60000ms is not recommended. ' + 'If your page needs more than 60000ms to idle due to CPU/Network load, ' + 'its recommended to increase CI resources where this cli is running.');
+    }
+  }
 }
 
 // Returns the normalized origin URL of a request
@@ -281,18 +318,19 @@ async function sendResponseResource(network, request, session) {
     ...network.meta,
     url
   };
+  let send = (method, params) => network.send(session, method, params);
   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', {
+      await send('Fetch.failRequest', {
         requestId: request.interceptId,
         errorReason: 'Aborted'
       });
     } else if (resource && (resource.root || resource.provided || !disableCache)) {
       log.debug(resource.root ? '- Serving root resource' : '- Resource cache hit', meta);
-      await session.send('Fetch.fulfillRequest', {
+      await send('Fetch.fulfillRequest', {
         requestId: request.interceptId,
         responseCode: resource.status || 200,
         body: Buffer.from(resource.content).toString('base64'),
@@ -302,18 +340,35 @@ async function sendResponseResource(network, request, session) {
         }))
       });
     } else {
-      await session.send('Fetch.continueRequest', {
+      await send('Fetch.continueRequest', {
         requestId: request.interceptId
       });
     }
   } catch (error) {
     /* istanbul ignore next: too hard to test (create race condition) */
     if (session.closing && error.message.includes('close')) return;
+
+    // if failure is due to an already aborted request, ignore it
+    // due to race condition we might get aborted event later and see a `Invalid InterceptionId`
+    // error before, in which case we should wait for a tick and check again
+    // Note: its not a necessity that we would get aborted callback in a tick, its just that if we
+    // already have it then we can safely ignore this error
+    // Its very hard to test it as this function should be called and request should get cancelled before
+    if (error.message === ABORTED_MESSAGE || error.message.includes('Invalid InterceptionId')) {
+      // defer this to the end of queue to make sure that any incoming aborted messages were
+      // handled and network.#aborted is updated
+      await new Promise((res, _) => process.nextTick(res));
+      /* istanbul ignore else: too hard to create race where abortion event is delayed */
+      if (network.isAborted(request.requestId)) {
+        log.debug(`Ignoring further steps for ${url} as request was aborted by the browser.`);
+        return;
+      }
+    }
     log.debug(`Encountered an error handling request: ${url}`, meta);
     log.debug(error);
 
     /* istanbul ignore next: catch race condition */
-    await session.send('Fetch.failRequest', {
+    await send('Fetch.failRequest', {
       requestId: request.interceptId,
       errorReason: 'Failed'
     }).catch(e => log.debug(e, meta));
@@ -376,12 +431,16 @@ async function saveResponseResource(network, request) {
       } else if (!enableJavaScript && !ALLOWED_RESOURCES.includes(request.type)) {
         return log.debug(`- Skipping disallowed resource type [${request.type}]`, meta);
       }
+      let detectedMime = mime.lookup(response.url);
       let mimeType =
       // ensure the mimetype is correct for text/plain responses
-      response.mimeType === 'text/plain' && mime.lookup(response.url) || response.mimeType;
+      response.mimeType === 'text/plain' && detectedMime || response.mimeType;
 
-      // font responses from the browser may not be properly encoded, so request them directly
-      if (mimeType !== null && mimeType !== void 0 && mimeType.includes('font')) {
+      // if we detect a font mime, we dont want to override it as different browsers may behave
+      // differently for incorrect mimetype in font response, but we want to treat it as a
+      // font anyway as font responses from the browser may not be properly encoded,
+      // so request them directly.
+      if (mimeType !== null && mimeType !== void 0 && mimeType.includes('font') || detectedMime && detectedMime.includes('font')) {
         log.debug('- Requesting asset directly');
         body = await makeDirectRequest(network, request);
       }

package/dist/page.js

@@ -4,7 +4,7 @@ import Network from './network.js';
 import { PERCY_DOM } from './api.js';
 import { hostname, waitFor, waitForTimeout as sleep, serializeFunction } from './utils.js';
 export class Page {
-  static TIMEOUT = 30000;
+  static TIMEOUT = undefined;
   log = logger('core:page');
   constructor(session, options) {
     this.session = session;
@@ -12,6 +12,7 @@ export class Page {
     this.enableJavaScript = options.enableJavaScript ?? true;
     this.network = new Network(this, options);
     this.meta = options.meta;
+    this._initializeLoadTimeout();
     session.on('Runtime.executionContextCreated', this._handleExecutionContextCreated);
     session.on('Runtime.executionContextDestroyed', this._handleExecutionContextDestroyed);
     session.on('Runtime.executionContextsCleared', this._handleExecutionContextsCleared);
@@ -241,5 +242,12 @@ export class Page {
   _handleExecutionContextsCleared = () => {
     this.contextId = null;
   };
+  _initializeLoadTimeout() {
+    if (Page.TIMEOUT) return;
+    Page.TIMEOUT = parseInt(process.env.PERCY_PAGE_LOAD_TIMEOUT) || 30000;
+    if (Page.TIMEOUT > 60000) {
+      this.log.warn('Setting PERCY_PAGE_LOAD_TIMEOUT over 60000ms is not recommended. ' + 'If your page needs more than 60000ms to load due to CPU/Network load, ' + 'its recommended to increase CI resources where this cli is running.');
+    }
+  }
 }
 export default Page;

package/dist/snapshot.js

@@ -78,7 +78,7 @@ function mapSnapshotOptions(snapshots, context) {
   // assign additional options to included snaphots
   snapshotMatches(snap, include, exclude) ? Object.assign(snap, opts) : snap), snap => getSnapshotOptions(snap, context));
 
-  // reduce snapshots with overrides
+  // reduce snapshots with options
   return snapshots.reduce((acc, snapshot) => {
     var _snapshot;
     // transform snapshot URL shorthand into an object
@@ -417,7 +417,7 @@ export function createSnapshotsQueue(percy) {
   })
   // handle possible build errors returned by the API
   .handle('error', (snapshot, error) => {
-    var _error$response;
+    var _error$response, _error$response2, _error$response2$body;
     let result = {
       ...snapshot,
       error
@@ -437,6 +437,14 @@ export function createSnapshotsQueue(percy) {
       build.failed = true;
       queue.close(true);
     }
+    let errors = (_error$response2 = error.response) === null || _error$response2 === void 0 ? void 0 : (_error$response2$body = _error$response2.body) === null || _error$response2$body === void 0 ? void 0 : _error$response2$body.errors;
+    let duplicate = (errors === null || errors === void 0 ? void 0 : errors.length) > 1 && errors[1].detail.includes('must be unique');
+    if (duplicate) {
+      if (process.env.PERCY_IGNORE_DUPLICATES !== 'true') {
+        percy.log.warn(`Ignored duplicate snapshot. ${errors[1].detail}`);
+      }
+      return result;
+    }
     percy.log.error(`Encountered an error uploading snapshot: ${name}`, meta);
     percy.log.error(error, meta);
     return result;

package/dist/utils.js

@@ -20,7 +20,7 @@ export function normalizeURL(url) {
 }
 
 // Returns the body for automateScreenshot in structure
-export function percyAutomateRequestHandler(req) {
+export function percyAutomateRequestHandler(req, buildInfo) {
   if (req.body.client_info) {
     req.body.clientInfo = req.body.client_info;
   }
@@ -30,6 +30,7 @@ export function percyAutomateRequestHandler(req) {
   if (!req.body.options) {
     req.body.options = {};
   }
+  req.body.buildInfo = buildInfo;
   return req;
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@percy/core",
-  "version": "1.27.0-alpha.0",
+  "version": "1.27.0-beta.1",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -9,7 +9,7 @@
   },
   "publishConfig": {
     "access": "public",
-    "tag": "alpha"
+    "tag": "beta"
   },
   "engines": {
     "node": ">=14"
@@ -24,7 +24,10 @@
   "types": "./types/index.d.ts",
   "type": "module",
   "exports": {
-    ".": "./dist/index.js",
+    ".": {
+      "types": "./types/index.d.ts",
+      "default": "./dist/index.js"
+    },
     "./utils": "./dist/utils.js",
     "./config": "./dist/config.js",
     "./install": "./dist/install.js",
@@ -40,10 +43,11 @@
     "test:types": "tsd"
   },
   "dependencies": {
-    "@percy/client": "1.27.0-alpha.0",
-    "@percy/config": "1.27.0-alpha.0",
-    "@percy/dom": "1.27.0-alpha.0",
-    "@percy/logger": "1.27.0-alpha.0",
+    "@percy/client": "1.27.0-beta.1",
+    "@percy/config": "1.27.0-beta.1",
+    "@percy/dom": "1.27.0-beta.1",
+    "@percy/logger": "1.27.0-beta.1",
+    "@percy/webdriver-utils": "1.27.0-beta.1",
     "content-disposition": "^0.5.4",
     "cross-spawn": "^7.0.3",
     "extract-zip": "^2.0.1",
@@ -54,5 +58,5 @@
     "rimraf": "^3.0.2",
     "ws": "^8.0.0"
   },
-  "gitHead": "16f2c87641d844c6af6c3e198f6aff1c08ee0ec1"
+  "gitHead": "40cdf9c38613ccaf5e3707cd2cd2d2778ffbd5dd"
 }

package/dist/work.js

@@ -1,30 +0,0 @@
-const webdriver = require('selenium-webdriver');
-const remote = require('selenium-webdriver/remote');
-export default class PoaDriver {
-  sessionId = '';
-  commandExecutorUrl = '';
-  capabilities = {};
-  driver = null;
-  constructor(sessionId, commandExecutorUrl, capabilities) {
-    this.sessionId = sessionId;
-    this.commandExecutorUrl = commandExecutorUrl;
-    this.capabilities = capabilities;
-    this.createDriver();
-    this.localScreenshot();
-  }
-  createDriver() {
-    this.driver = new webdriver.Remote({
-      sessionId: this.sessionId,
-      commandExecutor: new remote.SeleniumWebDriverError(this.commandExecutorUrl),
-      desiredCapabilities: this.capabilities
-    });
-  }
-  localScreenshot() {
-    console.log(this.driver);
-    this.driver.takeScreenshot().then(function (image, err) {
-      require('fs').writeFile('./out1234.png', image, 'base64', function (err) {
-        console.log(err);
-      });
-    });
-  }
-}