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

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,14 @@ 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);
+    this.log.info('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('Resolved provider ...');
     await automate.createDriver();
+    this.log.debug('Created driver ...');
     return await automate.screenshot(this.snapshotName, this.options);
   }
 }

package/dist/metadata/desktopMetaData.js

@@ -23,7 +23,7 @@ export default class DesktopMetaData {
 
   // 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';
@@ -40,7 +40,7 @@ export default class DesktopMetaData {
   }
   async screenResolution() {
     const data = await this.driver.executeScript({
-      script: 'return [window.screen.width.toString(), window.screen.height.toString()];',
+      script: 'return [(window.screen.width * window.devicePixelRatio).toString(), (window.screen.height * window.devicePixelRatio).toString()];',
       args: []
     });
     const screenInfo = data.value;

package/dist/metadata/mobileMetaData.js

@@ -40,6 +40,14 @@ export default class MobileMetaData {
       height
     };
   }
+  async screenResolution() {
+    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]}`;
+  }
   async devicePixelRatio() {
     const devicePixelRatio = await this.driver.executeScript({
       script: 'return window.devicePixelRatio;',

package/dist/providers/automateProvider.js

@@ -7,8 +7,8 @@ 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;
   }
   static supports(commandExecutorUrl) {
@@ -22,8 +22,11 @@ export default class AutomateProvider extends GenericProvider {
   }) {
     let response = null;
     let error;
+    log.info('Preparing to capture screenshots on automate ...');
     try {
+      log.debug('Marking automate session as percy ...');
       let result = await this.percyScreenshotBegin(name);
+      log.debug('Fetching the debug url ...');
       this.setDebugUrl(result);
       response = await super.screenshot(name, {
         ignoreRegionXpaths,
@@ -45,8 +48,8 @@ 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;
@@ -69,16 +72,18 @@ 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.info('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;',
@@ -93,12 +98,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
       }));

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);
+    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) {
@@ -62,16 +100,19 @@ export default class GenericProvider {
     customIgnoreRegions = []
   }) {
     let fullscreen = false;
-    const percyCSS = this.options.percyCSS || '';
+    this.addDefaultOptions();
+    const percyCSS = (this.defaultPercyCSS() + (this.options.percyCSS || '')).split('\n').join('');
+    log.debug(`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);
-    await this.setDebugUrl();
-    await this.removePercyCSS();
     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.findIgnoredRegions(ignoreRegionXpaths, ignoreRegionSelectors, ignoreRegionElements, customIgnoreRegions);
+    await this.setDebugUrl();
     log.debug(`${name} : Debug url ${this.debugUrl}`);
+    await this.removePercyCSS();
     return {
       name,
       tag,
@@ -90,31 +131,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,7 +172,7 @@ export default class GenericProvider {
     };
   }
 
-  // TODO: Add Debugging Url
+  // TODO: Add Debugging Url for non-automate
   async setDebugUrl() {
     this.debugUrl = 'https://localhost/v1';
   }
@@ -220,4 +264,13 @@ export default class GenericProvider {
     }
     return ignoredElementsArray;
   }
+  async getHeaderFooter() {
+    // 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 = `${this.metaData.deviceName()}-${this.metaData.osVersion()}`;
+    let browserName = this.capabilities.browserName;
+    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,7 @@ export default class Cache {
   static caps = 'caps';
   static bstackSessionDetails = 'bstackSessionDetails';
   static systemBars = 'systemBars';
+  static devicesConfig = 'devicesConfig';
 
   // 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.0",
   "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.0",
+    "@percy/sdk-utils": "1.27.0-beta.0"
   },
-  "gitHead": "16f2c87641d844c6af6c3e198f6aff1c08ee0ec1"
+  "gitHead": "2bc16314f51dddcc1cda459e7aa4b7b2db85f00a"
 }