@percy/webdriver-utils 1.27.0-alpha.0 → 1.27.0-beta.1

package/dist/driver.js

@@ -3,16 +3,23 @@ import Cache from './util/cache.js';
 const {
   request
 } = utils;
+const log = utils.logger('webdriver-utils:driver');
 export default class Driver {
-  constructor(sessionId, executorUrl) {
+  constructor(sessionId, executorUrl, passedCapabilities) {
     this.sessionId = sessionId;
     this.executorUrl = executorUrl.includes('@') ? `https://${executorUrl.split('@')[1]}` : executorUrl;
+    this.passedCapabilities = passedCapabilities;
   }
   async getCapabilites() {
     return await Cache.withCache(Cache.caps, this.sessionId, async () => {
-      const baseUrl = `${this.executorUrl}/session/${this.sessionId}`;
-      const caps = JSON.parse((await request(baseUrl)).body);
-      return caps.value;
+      try {
+        const baseUrl = `${this.executorUrl}/session/${this.sessionId}`;
+        const caps = JSON.parse((await request(baseUrl)).body);
+        return caps.value;
+      } catch (err) {
+        log.warn(`Falling back to legacy protocol, Error: ${err.message}`);
+        return this.passedCapabilities;
+      }
     });
   }
   async getWindowSize() {
@@ -26,6 +33,11 @@ export default class Driver {
     if (!command.constructor === Object || !(Object.keys(command).length === 2 && Object.keys(command).includes('script') && Object.keys(command).includes('args'))) {
       throw new Error('Please pass command as {script: "", args: []}');
     }
+    // browser_executor is custom BS executor script, if there is anything extra it breaks
+    // percy_automate_script is an anchor comment to identify percy automate scripts
+    if (!command.script.includes('browserstack_executor')) {
+      command.script = `/* percy_automate_script */ \n ${command.script}`;
+    }
     const options = {
       method: 'POST',
       headers: {

package/dist/index.js

@@ -11,7 +11,8 @@ export default class WebdriverUtils {
     snapshotName,
     clientInfo,
     environmentInfo,
-    options = {}
+    options = {},
+    buildInfo = {}
   }) {
     this.sessionId = sessionId;
     this.commandExecutorUrl = commandExecutorUrl;
@@ -26,11 +27,19 @@ export default class WebdriverUtils {
     this.options = camelCasedOptions;
     this.clientInfo = clientInfo;
     this.environmentInfo = environmentInfo;
+    this.buildInfo = buildInfo;
   }
   async automateScreenshot() {
-    this.log.info('Starting automate screenshot');
-    const automate = ProviderResolver.resolve(this.sessionId, this.commandExecutorUrl, this.capabilities, this.sessionCapabilites, this.clientInfo, this.environmentInfo, this.options);
-    await automate.createDriver();
-    return await automate.screenshot(this.snapshotName, this.options);
+    try {
+      this.log.info(`[${this.snapshotName}] : Starting automate screenshot ...`);
+      const automate = ProviderResolver.resolve(this.sessionId, this.commandExecutorUrl, this.capabilities, this.sessionCapabilites, this.clientInfo, this.environmentInfo, this.options, this.buildInfo);
+      this.log.debug(`[${this.snapshotName}] : Resolved provider ...`);
+      await automate.createDriver();
+      this.log.debug(`[${this.snapshotName}] : Created driver ...`);
+      return await automate.screenshot(this.snapshotName, this.options);
+    } catch (e) {
+      this.log.error(`[${this.snapshotName}] : Error - ${e.message}`);
+      this.log.error(`[${this.snapshotName}] : Error Log - ${e.toString()}`);
+    }
   }
 }

package/dist/metadata/desktopMetaData.js

@@ -1,29 +1,37 @@
+import Cache from '../util/cache.js';
 export default class DesktopMetaData {
   constructor(driver, opts) {
     this.driver = driver;
     this.capabilities = opts;
   }
+  device() {
+    return false;
+  }
   browserName() {
-    return this.capabilities.browserName.toLowerCase();
+    var _this$capabilities, _this$capabilities$br;
+    return (_this$capabilities = this.capabilities) === null || _this$capabilities === void 0 ? void 0 : (_this$capabilities$br = _this$capabilities.browserName) === null || _this$capabilities$br === void 0 ? void 0 : _this$capabilities$br.toLowerCase();
   }
   browserVersion() {
-    return this.capabilities.browserVersion.split('.')[0];
+    var _this$capabilities2, _this$capabilities2$b;
+    return (_this$capabilities2 = this.capabilities) === null || _this$capabilities2 === void 0 ? void 0 : (_this$capabilities2$b = _this$capabilities2.browserVersion) === null || _this$capabilities2$b === void 0 ? void 0 : _this$capabilities2$b.split('.')[0];
   }
   osName() {
-    let osName = this.capabilities.os;
-    if (osName) return osName.toLowerCase();
-    osName = this.capabilities.platform;
+    var _this$capabilities3, _osName, _this$capabilities4;
+    let osName = (_this$capabilities3 = this.capabilities) === null || _this$capabilities3 === void 0 ? void 0 : _this$capabilities3.os;
+    if (osName) return (_osName = osName) === null || _osName === void 0 ? void 0 : _osName.toLowerCase();
+    osName = (_this$capabilities4 = this.capabilities) === null || _this$capabilities4 === void 0 ? void 0 : _this$capabilities4.platform;
     return osName;
   }
 
   // showing major version
   osVersion() {
-    return this.capabilities.osVersion.toLowerCase();
+    var _this$capabilities5, _this$capabilities5$o;
+    return (_this$capabilities5 = this.capabilities) === null || _this$capabilities5 === void 0 ? void 0 : (_this$capabilities5$o = _this$capabilities5.osVersion) === null || _this$capabilities5$o === void 0 ? void 0 : _this$capabilities5$o.toLowerCase();
   }
 
   // combination of browserName + browserVersion + osVersion + osName
   deviceName() {
-    return this.browserName() + '_' + this.browserVersion() + '_' + this.osVersion() + '_' + this.osName();
+    return this.osName() + '_' + this.osVersion() + '_' + this.browserName() + '_' + this.browserVersion();
   }
   orientation() {
     return 'landscape';
@@ -39,18 +47,22 @@ export default class DesktopMetaData {
     };
   }
   async screenResolution() {
-    const data = await this.driver.executeScript({
-      script: 'return [window.screen.width.toString(), window.screen.height.toString()];',
-      args: []
+    return await Cache.withCache(Cache.resolution, this.driver.sessionId, async () => {
+      const data = await this.driver.executeScript({
+        script: 'return [(window.screen.width * window.devicePixelRatio).toString(), (window.screen.height * window.devicePixelRatio).toString()];',
+        args: []
+      });
+      const screenInfo = data.value;
+      return `${screenInfo[0]} x ${screenInfo[1]}`;
     });
-    const screenInfo = data.value;
-    return `${screenInfo[0]} x ${screenInfo[1]}`;
   }
   async devicePixelRatio() {
-    const devicePixelRatio = await this.driver.executeScript({
-      script: 'return window.devicePixelRatio;',
-      args: []
+    return await Cache.withCache(Cache.dpr, this.driver.sessionId, async () => {
+      const devicePixelRatio = await this.driver.executeScript({
+        script: 'return window.devicePixelRatio;',
+        args: []
+      });
+      return devicePixelRatio.value;
     });
-    return devicePixelRatio.value;
   }
 }

package/dist/metadata/metaDataResolver.js

@@ -2,9 +2,10 @@ import DesktopMetaData from './desktopMetaData.js';
 import MobileMetaData from './mobileMetaData.js';
 export default class MetaDataResolver {
   static resolve(driver, capabilities, opts) {
+    var _capabilities$platfor, _capabilities$device, _capabilities$device$;
     if (!driver) throw new Error('Please pass a Driver object');
     const platform = opts.platformName || opts.platform;
-    if (['ios', 'android'].includes(platform.toLowerCase())) {
+    if (['ios', 'android'].includes(platform.toLowerCase()) || ['ios', 'android'].includes(capabilities === null || capabilities === void 0 ? void 0 : (_capabilities$platfor = capabilities.platformName) === null || _capabilities$platfor === void 0 ? void 0 : _capabilities$platfor.toLowerCase()) || ['ipad', 'iphone'].includes(capabilities === null || capabilities === void 0 ? void 0 : (_capabilities$device = capabilities.device) === null || _capabilities$device === void 0 ? void 0 : (_capabilities$device$ = _capabilities$device.toString()) === null || _capabilities$device$ === void 0 ? void 0 : _capabilities$device$.toLowerCase())) {
       return new MobileMetaData(driver, capabilities);
     } else {
       return new DesktopMetaData(driver, capabilities);

package/dist/metadata/mobileMetaData.js

@@ -1,34 +1,44 @@
+import Cache from '../util/cache.js';
+// Todo: Implement a base metadata for the common functions.
 export default class MobileMetaData {
   constructor(driver, opts) {
     this.driver = driver;
     this.capabilities = opts;
   }
+  device() {
+    return true;
+  }
   browserName() {
-    return this.capabilities.browserName.toLowerCase();
+    var _this$capabilities, _this$capabilities$br;
+    return (_this$capabilities = this.capabilities) === null || _this$capabilities === void 0 ? void 0 : (_this$capabilities$br = _this$capabilities.browserName) === null || _this$capabilities$br === void 0 ? void 0 : _this$capabilities$br.toLowerCase();
   }
   browserVersion() {
-    var _this$capabilities$br;
-    const bsVersion = (_this$capabilities$br = this.capabilities.browserVersion) === null || _this$capabilities$br === void 0 ? void 0 : _this$capabilities$br.split('.');
+    var _this$capabilities$br2, _this$capabilities2, _this$capabilities2$v;
+    const bsVersion = (_this$capabilities$br2 = this.capabilities.browserVersion) === null || _this$capabilities$br2 === void 0 ? void 0 : _this$capabilities$br2.split('.');
     if ((bsVersion === null || bsVersion === void 0 ? void 0 : bsVersion.length) > 0) {
       return bsVersion[0];
     }
-    return this.capabilities.version.split('.')[0];
+    return (_this$capabilities2 = this.capabilities) === null || _this$capabilities2 === void 0 ? void 0 : (_this$capabilities2$v = _this$capabilities2.version) === null || _this$capabilities2$v === void 0 ? void 0 : _this$capabilities2$v.split('.')[0];
   }
   osName() {
-    let osName = this.capabilities.os.toLowerCase();
+    var _this$capabilities3, _this$capabilities3$o;
+    let osName = (_this$capabilities3 = this.capabilities) === null || _this$capabilities3 === void 0 ? void 0 : (_this$capabilities3$o = _this$capabilities3.os) === null || _this$capabilities3$o === void 0 ? void 0 : _this$capabilities3$o.toLowerCase();
     if (osName === 'mac' && this.browserName() === 'iphone') {
       osName = 'ios';
     }
     return osName;
   }
   osVersion() {
-    return this.capabilities.osVersion.split('.')[0];
+    var _this$capabilities4, _this$capabilities4$o;
+    return (_this$capabilities4 = this.capabilities) === null || _this$capabilities4 === void 0 ? void 0 : (_this$capabilities4$o = _this$capabilities4.osVersion) === null || _this$capabilities4$o === void 0 ? void 0 : _this$capabilities4$o.split('.')[0];
   }
   deviceName() {
-    return this.capabilities.deviceName.split('-')[0];
+    var _this$capabilities5, _this$capabilities5$d;
+    return (_this$capabilities5 = this.capabilities) === null || _this$capabilities5 === void 0 ? void 0 : (_this$capabilities5$d = _this$capabilities5.deviceName) === null || _this$capabilities5$d === void 0 ? void 0 : _this$capabilities5$d.split('-')[0];
   }
   orientation() {
-    return this.capabilities.orientation;
+    var _this$capabilities6;
+    return (_this$capabilities6 = this.capabilities) === null || _this$capabilities6 === void 0 ? void 0 : _this$capabilities6.orientation;
   }
   async windowSize() {
     const dpr = await this.devicePixelRatio();
@@ -40,11 +50,23 @@ export default class MobileMetaData {
       height
     };
   }
+  async screenResolution() {
+    return await Cache.withCache(Cache.resolution, this.driver.sessionId, async () => {
+      const data = await this.driver.executeScript({
+        script: 'return [parseInt(window.screen.width * window.devicePixelRatio).toString(), parseInt(window.screen.height * window.devicePixelRatio).toString()];',
+        args: []
+      });
+      const screenInfo = data.value;
+      return `${screenInfo[0]} x ${screenInfo[1]}`;
+    });
+  }
   async devicePixelRatio() {
-    const devicePixelRatio = await this.driver.executeScript({
-      script: 'return window.devicePixelRatio;',
-      args: []
+    return await Cache.withCache(Cache.dpr, this.driver.sessionId, async () => {
+      const devicePixelRatio = await this.driver.executeScript({
+        script: 'return window.devicePixelRatio;',
+        args: []
+      });
+      return devicePixelRatio.value;
     });
-    return devicePixelRatio.value;
   }
 }

package/dist/metadata/normalizeData.js

@@ -0,0 +1,34 @@
+export default class NormalizeData {
+  osRollUp(os) {
+    if (os.toLowerCase().startsWith('win')) {
+      return 'Windows';
+    } else if (os.toLowerCase().startsWith('mac')) {
+      return 'OS X';
+    } else if (os.toLowerCase().includes('iphone') || os.toLowerCase().startsWith('ios')) {
+      return 'iOS';
+    } else if (os.toLowerCase().startsWith('android')) {
+      return 'Android';
+    }
+    return os;
+  }
+  browserRollUp(browserName, device) {
+    if (device) {
+      if (browserName !== null && browserName !== void 0 && browserName.toLowerCase().includes('chrome')) {
+        return 'chrome';
+      } else if (browserName !== null && browserName !== void 0 && browserName.toLowerCase().includes('iphone') || browserName !== null && browserName !== void 0 && browserName.toLowerCase().includes('ipad')) {
+        return 'safari';
+      }
+    }
+    return browserName;
+  }
+
+  // Responses for browser version differ for devices and desktops from capabilities
+  // Differenences in selenium and appium responses causes inconsistency
+  // So to tackle for devices on UI we will show device names else browser versions
+  browserVersionOrDeviceNameRollup(browserVersion, deviceName, device) {
+    if (device) {
+      return deviceName;
+    }
+    return browserVersion === null || browserVersion === void 0 ? void 0 : browserVersion.split('.')[0];
+  }
+}

package/dist/providers/automateProvider.js

@@ -2,14 +2,16 @@ import utils from '@percy/sdk-utils';
 import GenericProvider from './genericProvider.js';
 import Cache from '../util/cache.js';
 import Tile from '../util/tile.js';
+import NormalizeData from '../metadata/normalizeData.js';
 const log = utils.logger('webdriver-utils:automateProvider');
 const {
   TimeIt
 } = utils;
 export default class AutomateProvider extends GenericProvider {
-  constructor(sessionId, commandExecutorUrl, capabilities, sessionCapabilites, clientInfo, environmentInfo, options) {
-    super(sessionId, commandExecutorUrl, capabilities, sessionCapabilites, clientInfo, environmentInfo, options);
+  constructor(sessionId, commandExecutorUrl, capabilities, sessionCapabilites, clientInfo, environmentInfo, options, buildInfo) {
+    super(sessionId, commandExecutorUrl, capabilities, sessionCapabilites, clientInfo, environmentInfo, options, buildInfo);
     this._markedPercy = false;
+    this.automateResults = null;
   }
   static supports(commandExecutorUrl) {
     return commandExecutorUrl.includes(process.env.AA_DOMAIN || 'browserstack');
@@ -18,18 +20,30 @@ export default class AutomateProvider extends GenericProvider {
     ignoreRegionXpaths = [],
     ignoreRegionSelectors = [],
     ignoreRegionElements = [],
-    customIgnoreRegions = []
+    customIgnoreRegions = [],
+    considerRegionXpaths = [],
+    considerRegionSelectors = [],
+    considerRegionElements = [],
+    customConsiderRegions = []
   }) {
     let response = null;
     let error;
+    log.debug(`[${name}] : Preparing to capture screenshots on automate ...`);
     try {
-      let result = await this.percyScreenshotBegin(name);
-      this.setDebugUrl(result);
+      log.debug(`[${name}] : Marking automate session as percy ...`);
+      const result = await this.percyScreenshotBegin(name);
+      this.automateResults = JSON.parse(result.value);
+      log.debug(`[${name}] : Fetching the debug url ...`);
+      this.setDebugUrl();
       response = await super.screenshot(name, {
         ignoreRegionXpaths,
         ignoreRegionSelectors,
         ignoreRegionElements,
-        customIgnoreRegions
+        customIgnoreRegions,
+        considerRegionXpaths,
+        considerRegionSelectors,
+        considerRegionElements,
+        customConsiderRegions
       });
     } catch (e) {
       error = e;
@@ -45,15 +59,15 @@ export default class AutomateProvider extends GenericProvider {
       try {
         let result = await this.browserstackExecutor('percyScreenshot', {
           name,
-          percyBuildId: process.env.PERCY_BUILD_ID,
-          percyBuildUrl: process.env.PERCY_BUILD_URL,
+          percyBuildId: this.buildInfo.id,
+          percyBuildUrl: this.buildInfo.url,
           state: 'begin'
         });
         this._markedPercy = result.success;
         return result;
       } catch (e) {
-        log.debug(`[${name}] Could not mark Automate session as percy`);
-        log.error(`[${name}] error: ${e.toString()}`);
+        log.debug(`[${name}] : Could not mark Automate session as percy`);
+        log.error(`[${name}] : error: ${e.toString()}`);
         return null;
       }
     });
@@ -69,21 +83,20 @@ export default class AutomateProvider extends GenericProvider {
           state: 'end'
         });
       } catch (e) {
-        log.debug(`[${name}] Could not mark Automate session as percy`);
+        log.debug(`[${name}] : Could not execute percyScreenshot command for Automate`);
+        log.error(e);
       }
     });
   }
-  async getTiles(fullscreen) {
+  async getTiles(headerHeight, footerHeight, fullscreen) {
     if (!this.driver) throw new Error('Driver is null, please initialize driver with createDriver().');
+    log.debug('Starting actual screenshotting phase');
     const response = await TimeIt.run('percyScreenshot:screenshot', async () => {
       return await this.browserstackExecutor('percyScreenshot', {
         state: 'screenshot',
-        percyBuildId: process.env.PERCY_BUILD_ID,
+        percyBuildId: this.buildInfo.id,
         screenshotType: 'singlepage',
-        scaleFactor: await this.driver.executeScript({
-          script: 'return window.devicePixelRatio;',
-          args: []
-        }),
+        scaleFactor: await this.metaData.devicePixelRatio(),
         options: this.options
       });
     });
@@ -93,12 +106,13 @@ export default class AutomateProvider extends GenericProvider {
     }
     const tiles = [];
     const tileResponse = JSON.parse(responseValue.result);
+    log.debug('Tiles captured successfully');
     for (let tileData of tileResponse.sha) {
       tiles.push(new Tile({
         statusBarHeight: 0,
         navBarHeight: 0,
-        headerHeight: 0,
-        footerHeight: 0,
+        headerHeight,
+        footerHeight,
         fullscreen,
         sha: tileData.split('-')[0] // drop build id
       }));
@@ -126,8 +140,43 @@ export default class AutomateProvider extends GenericProvider {
   async setDebugUrl() {
     if (!this.driver) throw new Error('Driver is null, please initialize driver with createDriver().');
     this.debugUrl = await Cache.withCache(Cache.bstackSessionDetails, this.driver.sessionId, async () => {
-      const sessionDetails = await this.browserstackExecutor('getSessionDetails');
-      return JSON.parse(sessionDetails.value).browser_url;
+      return `https://automate.browserstack.com/builds/${this.automateResults.buildHash}/sessions/${this.automateResults.sessionHash}`;
     });
   }
+  async getTag() {
+    var _automateCaps$os_vers, _ref;
+    if (!this.driver) throw new Error('Driver is null, please initialize driver with createDriver().');
+    if (!this.automateResults) throw new Error('Comparison tag details not available');
+    const automateCaps = this.automateResults.capabilities;
+    const normalizeTags = new NormalizeData();
+    let deviceName = this.automateResults.deviceName;
+    const osName = normalizeTags.osRollUp(automateCaps.os);
+    const osVersion = (_automateCaps$os_vers = automateCaps.os_version) === null || _automateCaps$os_vers === void 0 ? void 0 : _automateCaps$os_vers.split('.')[0];
+    const browserName = normalizeTags.browserRollUp(automateCaps.browserName, this.metaData.device());
+    const browserVersion = normalizeTags.browserVersionOrDeviceNameRollup(automateCaps.browserVersion, deviceName, this.metaData.device());
+    if (!this.metaData.device()) {
+      deviceName = `${osName}_${osVersion}_${browserName}_${browserVersion}`;
+    }
+    let {
+      width,
+      height
+    } = await this.metaData.windowSize();
+    const resolution = await this.metaData.screenResolution();
+    const orientation = (_ref = this.metaData.orientation() || automateCaps.deviceOrientation) === null || _ref === void 0 ? void 0 : _ref.toLowerCase();
+
+    // for android window size only constitutes of browser viewport, hence adding nav / status / url bar heights
+    [this.header, this.footer] = await this.getHeaderFooter(deviceName, osVersion, browserName);
+    height = this.metaData.device() && (osName === null || osName === void 0 ? void 0 : osName.toLowerCase()) === 'android' ? height + this.header + this.footer : height;
+    return {
+      name: deviceName,
+      osName,
+      osVersion,
+      width,
+      height,
+      orientation,
+      browserName,
+      browserVersion,
+      resolution
+    };
+  }
 }

package/dist/providers/genericProvider.js

@@ -2,12 +2,17 @@ import utils from '@percy/sdk-utils';
 import MetaDataResolver from '../metadata/metaDataResolver.js';
 import Tile from '../util/tile.js';
 import Driver from '../driver.js';
+import Cache from '../util/cache.js';
+const {
+  request
+} = utils;
+const DEVICES_CONFIG_URL = 'https://storage.googleapis.com/percy-utils/devices.json';
 const log = utils.logger('webdriver-utils:genericProvider');
 export default class GenericProvider {
   clientInfo = new Set();
   environmentInfo = new Set();
   options = {};
-  constructor(sessionId, commandExecutorUrl, capabilities, sessionCapabilites, clientInfo, environmentInfo, options) {
+  constructor(sessionId, commandExecutorUrl, capabilities, sessionCapabilites, clientInfo, environmentInfo, options, buildInfo) {
     this.sessionId = sessionId;
     this.commandExecutorUrl = commandExecutorUrl;
     this.capabilities = capabilities;
@@ -15,13 +20,46 @@ export default class GenericProvider {
     this.addClientInfo(clientInfo);
     this.addEnvironmentInfo(environmentInfo);
     this.options = options;
+    this.buildInfo = buildInfo;
     this.driver = null;
     this.metaData = null;
     this.debugUrl = null;
+    this.header = 0;
+    this.footer = 0;
+  }
+  addDefaultOptions() {
+    this.options.freezeAnimation = this.options.freezeAnimation || false;
+  }
+  defaultPercyCSS() {
+    return `*, *::before, *::after {
+      -moz-transition: none !important;
+      transition: none !important;
+      -moz-animation: none !important;
+      animation: none !important;
+      animation-duration: 0 !important;
+      caret-color: transparent !important;
+      content-visibility: visible !important;
+    }
+    html{
+      scrollbar-width: auto !important;
+    }
+    svg {
+      shape-rendering: geometricPrecision !important;
+    }
+    scrollbar, scrollcorner, scrollbar thumb, scrollbar scrollbarbutton {
+      pointer-events: none !important;
+      -moz-appearance: none !important;
+      display: none !important;
+    }
+    video::-webkit-media-controls {
+      display: none !important;
+    }`;
   }
   async createDriver() {
-    this.driver = new Driver(this.sessionId, this.commandExecutorUrl);
+    this.driver = new Driver(this.sessionId, this.commandExecutorUrl, this.capabilities);
+    log.debug(`Passed capabilities -> ${JSON.stringify(this.capabilities)}`);
     const caps = await this.driver.getCapabilites();
+    log.debug(`Fetched capabilities -> ${JSON.stringify(caps)}`);
     this.metaData = await MetaDataResolver.resolve(this.driver, caps, this.capabilities);
   }
   static supports(_commandExecutorUrl) {
@@ -59,26 +97,39 @@ export default class GenericProvider {
     ignoreRegionXpaths = [],
     ignoreRegionSelectors = [],
     ignoreRegionElements = [],
-    customIgnoreRegions = []
+    customIgnoreRegions = [],
+    considerRegionXpaths = [],
+    considerRegionSelectors = [],
+    considerRegionElements = [],
+    customConsiderRegions = []
   }) {
     let fullscreen = false;
-    const percyCSS = this.options.percyCSS || '';
+    this.addDefaultOptions();
+    const percyCSS = (this.defaultPercyCSS() + (this.options.percyCSS || '')).split('\n').join('');
+    log.debug(`[${name}] : Applying the percyCSS - ${this.options.percyCSS}`);
     await this.addPercyCSS(percyCSS);
+    log.debug('Fetching comparisong tag ...');
     const tag = await this.getTag();
-    const tiles = await this.getTiles(fullscreen);
-    const ignoreRegions = await this.findIgnoredRegions(ignoreRegionXpaths, ignoreRegionSelectors, ignoreRegionElements, customIgnoreRegions);
+    log.debug(`[${name}] : Tag ${JSON.stringify(tag)}`);
+    const tiles = await this.getTiles(this.header, this.footer, fullscreen);
+    log.debug(`[${name}] : Tiles ${JSON.stringify(tiles)}`);
+    const ignoreRegions = await this.findRegions(ignoreRegionXpaths, ignoreRegionSelectors, ignoreRegionElements, customIgnoreRegions);
+    const considerRegions = await this.findRegions(considerRegionXpaths, considerRegionSelectors, considerRegionElements, customConsiderRegions);
     await this.setDebugUrl();
+    log.debug(`[${name}] : Debug url ${this.debugUrl}`);
     await this.removePercyCSS();
-    log.debug(`${name} : Tag ${JSON.stringify(tag)}`);
-    log.debug(`${name} : Tiles ${JSON.stringify(tiles)}`);
-    log.debug(`${name} : Debug url ${this.debugUrl}`);
     return {
       name,
       tag,
       tiles: tiles.tiles,
       // TODO: Fetch this one for bs automate, check appium sdk
       externalDebugUrl: this.debugUrl,
-      ignoredElementsData: ignoreRegions,
+      ignoredElementsData: {
+        ignoreElementsData: ignoreRegions
+      },
+      consideredElementsData: {
+        considerElementsData: considerRegions
+      },
       environmentInfo: [...this.environmentInfo].join('; '),
       clientInfo: [...this.clientInfo].join(' '),
       domInfoSha: tiles.domInfoSha
@@ -90,31 +141,34 @@ export default class GenericProvider {
     // execute script and return dom content
     return 'dummyValue';
   }
-  async getTiles(fullscreen) {
+  async getTiles(headerHeight, footerHeight, fullscreen) {
     if (!this.driver) throw new Error('Driver is null, please initialize driver with createDriver().');
     const base64content = await this.driver.takeScreenshot();
+    log.debug('Tiles captured successfully');
     return {
       tiles: [new Tile({
         content: base64content,
-        // TODO: Need to add method to fetch these attr
         statusBarHeight: 0,
         navBarHeight: 0,
-        headerHeight: 0,
-        footerHeight: 0,
+        headerHeight,
+        footerHeight,
         fullscreen
       })],
-      // TODO: Add Generic support sha for contextual diff
+      // TODO: Add Generic support sha for contextual diff for non-automate
       domInfoSha: await this.getDomContent()
     };
   }
   async getTag() {
     if (!this.driver) throw new Error('Driver is null, please initialize driver with createDriver().');
-    const {
+    let {
       width,
       height
     } = await this.metaData.windowSize();
     const resolution = await this.metaData.screenResolution();
     const orientation = this.metaData.orientation();
+    [this.header, this.footer] = await this.getHeaderFooter();
+    // for android window size only constitutes of browser viewport, hence adding nav / status / url bar heights
+    height = this.metaData.osName() === 'android' ? height + this.header + this.footer : height;
     return {
       name: this.metaData.deviceName(),
       osName: this.metaData.osName(),
@@ -128,20 +182,18 @@ export default class GenericProvider {
     };
   }
 
-  // TODO: Add Debugging Url
+  // TODO: Add Debugging Url for non-automate
   async setDebugUrl() {
     this.debugUrl = 'https://localhost/v1';
   }
-  async findIgnoredRegions(ignoreRegionXpaths, ignoreRegionSelectors, ignoreRegionElements, customIgnoreRegions) {
-    const ignoreElementXpaths = await this.getIgnoreRegionsBy('xpath', ignoreRegionXpaths);
-    const ignoreElementSelectors = await this.getIgnoreRegionsBy('css selector', ignoreRegionSelectors);
-    const ignoreElements = await this.getIgnoreRegionsByElement(ignoreRegionElements);
-    const ignoreElementCustom = await this.getCustomIgnoreRegions(customIgnoreRegions);
-    return {
-      ignoreElementsData: [...ignoreElementXpaths, ...ignoreElementSelectors, ...ignoreElements, ...ignoreElementCustom]
-    };
+  async findRegions(xpaths, selectors, elements, customLocations) {
+    const xpathRegions = await this.getSeleniumRegionsBy('xpath', xpaths);
+    const selectorRegions = await this.getSeleniumRegionsBy('css selector', selectors);
+    const elementRegions = await this.getSeleniumRegionsByElement(elements);
+    const customRegions = await this.getSeleniumRegionsByLocation(customLocations);
+    return [...xpathRegions, ...selectorRegions, ...elementRegions, ...customRegions];
   }
-  async ignoreElementObject(selector, elementId) {
+  async getRegionObject(selector, elementId) {
     const scaleFactor = parseInt(await this.metaData.devicePixelRatio());
     const rect = await this.driver.rect(elementId);
     const location = {
@@ -164,37 +216,37 @@ export default class GenericProvider {
     };
     return jsonObject;
   }
-  async getIgnoreRegionsBy(findBy, elements) {
-    const ignoredElementsArray = [];
+  async getSeleniumRegionsBy(findBy, elements) {
+    const regionsArray = [];
     for (const idx in elements) {
       try {
         const element = await this.driver.findElement(findBy, elements[idx]);
         const selector = `${findBy}: ${elements[idx]}`;
-        const ignoredRegion = await this.ignoreElementObject(selector, element[Object.keys(element)[0]]);
-        ignoredElementsArray.push(ignoredRegion);
+        const region = await this.getRegionObject(selector, element[Object.keys(element)[0]]);
+        regionsArray.push(region);
       } catch (e) {
         log.warn(`Selenium Element with ${findBy}: ${elements[idx]} not found. Ignoring this ${findBy}.`);
         log.error(e.toString());
       }
     }
-    return ignoredElementsArray;
+    return regionsArray;
   }
-  async getIgnoreRegionsByElement(elements) {
-    const ignoredElementsArray = [];
+  async getSeleniumRegionsByElement(elements) {
+    const regionsArray = [];
     for (let index = 0; index < elements.length; index++) {
       try {
         const selector = `element: ${index}`;
-        const ignoredRegion = await this.ignoreElementObject(selector, elements[index]);
-        ignoredElementsArray.push(ignoredRegion);
+        const region = await this.getRegionObject(selector, elements[index]);
+        regionsArray.push(region);
       } catch (e) {
         log.warn(`Correct Web Element not passed at index ${index}.`);
         log.debug(e.toString());
       }
     }
-    return ignoredElementsArray;
+    return regionsArray;
   }
-  async getCustomIgnoreRegions(customLocations) {
-    const ignoredElementsArray = [];
+  async getSeleniumRegionsByLocation(customLocations) {
+    const elementsArray = [];
     const {
       width,
       height
@@ -203,8 +255,8 @@ export default class GenericProvider {
       const customLocation = customLocations[index];
       const invalid = customLocation.top >= height || customLocation.bottom > height || customLocation.left >= width || customLocation.right > width;
       if (!invalid) {
-        const selector = `custom ignore region ${index}`;
-        const ignoredRegion = {
+        const selector = `custom region ${index}`;
+        const region = {
           selector,
           coOrdinates: {
             top: customLocation.top,
@@ -213,11 +265,19 @@ export default class GenericProvider {
             right: customLocation.right
           }
         };
-        ignoredElementsArray.push(ignoredRegion);
+        elementsArray.push(region);
       } else {
         log.warn(`Values passed in custom ignored region at index: ${index} is not valid`);
       }
     }
-    return ignoredElementsArray;
+    return elementsArray;
+  }
+  async getHeaderFooter(deviceName, osVersion, browserName) {
+    // passing 0 as key, since across different pages and tests, this config will remain same
+    const devicesConfig = await Cache.withCache(Cache.devicesConfig, 0, async () => {
+      return (await request(DEVICES_CONFIG_URL)).body;
+    });
+    let deviceKey = `${deviceName}-${osVersion}`;
+    return devicesConfig[deviceKey] ? devicesConfig[deviceKey][browserName] ? [devicesConfig[deviceKey][browserName].header, devicesConfig[deviceKey][browserName].footer] : [0, 0] : [0, 0];
   }
 }

package/dist/providers/providerResolver.js

@@ -1,9 +1,9 @@
 import GenericProvider from './genericProvider.js';
 import AutomateProvider from './automateProvider.js';
 export default class ProviderResolver {
-  static resolve(sessionId, commandExecutorUrl, capabilities, sessionCapabilities, clientInfo, environmentInfo, options) {
+  static resolve(sessionId, commandExecutorUrl, capabilities, sessionCapabilities, clientInfo, environmentInfo, options, buildInfo) {
     // We can safely do [0] because GenericProvider is catch all
     const Klass = [AutomateProvider, GenericProvider].filter(x => x.supports(commandExecutorUrl))[0];
-    return new Klass(sessionId, commandExecutorUrl, capabilities, sessionCapabilities, clientInfo, environmentInfo, options);
+    return new Klass(sessionId, commandExecutorUrl, capabilities, sessionCapabilities, clientInfo, environmentInfo, options, buildInfo);
   }
 }

package/dist/util/cache.js

@@ -9,6 +9,9 @@ export default class Cache {
   static caps = 'caps';
   static bstackSessionDetails = 'bstackSessionDetails';
   static systemBars = 'systemBars';
+  static devicesConfig = 'devicesConfig';
+  static dpr = 'dpr';
+  static resolution = 'resolution';
 
   // maintainance
   static lastTime = Date.now();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@percy/webdriver-utils",
-  "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"
@@ -29,8 +29,8 @@
     "test:coverage": "yarn test --coverage"
   },
   "dependencies": {
-    "@percy/config": "1.27.0-alpha.0",
-    "@percy/sdk-utils": "1.27.0-alpha.0"
+    "@percy/config": "1.27.0-beta.1",
+    "@percy/sdk-utils": "1.27.0-beta.1"
   },
-  "gitHead": "16f2c87641d844c6af6c3e198f6aff1c08ee0ec1"
+  "gitHead": "40cdf9c38613ccaf5e3707cd2cd2d2778ffbd5dd"
 }

package/dist/util/timing.js

@@ -1,47 +0,0 @@
-import validations from './validations.js';
-const {
-  Undefined
-} = validations;
-export default class TimeIt {
-  static data = {};
-  static enabled = process.env.PERCY_METRICS === 'true';
-  static async run(store, func) {
-    if (!this.enabled) return await func();
-    const t1 = Date.now();
-    try {
-      return await func();
-    } finally {
-      if (Undefined(this.data[store])) this.data[store] = [];
-      this.data[store].push(Date.now() - t1);
-    }
-  }
-  static min(store) {
-    return Math.min(...this.data[store]);
-  }
-  static max(store) {
-    return Math.max(...this.data[store]);
-  }
-  static avg(store) {
-    const vals = this.data[store];
-    return vals.reduce((a, b) => a + b, 0) / vals.length;
-  }
-  static summary({
-    includeVals
-  } = {}) {
-    const agg = {};
-    for (const key of Object.keys(this.data)) {
-      agg[key] = {
-        min: this.min(key),
-        max: this.max(key),
-        avg: this.avg(key),
-        count: this.data[key].length
-      };
-      if (includeVals) agg[key].vals = this.data[key];
-    }
-    return agg;
-  }
-  static reset() {
-    this.data = {};
-  }
-}
-;

package/dist/util/validations.js

@@ -1,7 +0,0 @@
-function Undefined(obj) {
-  return obj === undefined;
-}
-export { Undefined };
-
-// export the namespace by default
-export * as default from './validations.js';