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

package/dist/driver.js

@@ -71,4 +71,29 @@ export default class Driver {
     const response = JSON.parse((await request(baseUrl, options)).body);
     return response.value;
   }
+  async findElementBoundingBox(using, value) {
+    if (using === 'xpath') {
+      return await this.findElementXpath(value);
+    } else if (using === 'css selector') {
+      return await this.findElementSelector(value);
+    }
+  }
+  async findElementXpath(xpath) {
+    xpath = xpath.replace(/'/g, '"');
+    const command = {
+      script: `return document.evaluate('${xpath}', document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue.getBoundingClientRect();`,
+      args: []
+    };
+    const response = await this.executeScript(command);
+    return response.value;
+  }
+  async findElementSelector(selector) {
+    selector = selector.replace('\\', '\\\\');
+    const command = {
+      script: `return document.querySelector('${selector}').getBoundingClientRect();`,
+      args: []
+    };
+    const response = await this.executeScript(command);
+    return response.value;
+  }
 }

package/dist/providers/automateProvider.js

@@ -100,16 +100,17 @@ export default class AutomateProvider extends GenericProvider {
       }
     });
   }
-  async getTiles(headerHeight, footerHeight, fullscreen) {
-    var _responseValue$metada;
+  async getTiles(fullscreen) {
+    var _this$options;
     if (!this.driver) throw new Error('Driver is null, please initialize driver with createDriver().');
     log.debug('Starting actual screenshotting phase');
     const dpr = await this.metaData.devicePixelRatio();
+    const screenshotType = (_this$options = this.options) !== null && _this$options !== void 0 && _this$options.fullPage ? 'fullpage' : 'singlepage';
     const response = await TimeIt.run('percyScreenshot:screenshot', async () => {
       return await this.browserstackExecutor('percyScreenshot', {
         state: 'screenshot',
         percyBuildId: this.buildInfo.id,
-        screenshotType: 'singlepage',
+        screenshotType: screenshotType,
         scaleFactor: dpr,
         options: this.options
       });
@@ -121,20 +122,19 @@ export default class AutomateProvider extends GenericProvider {
     const tiles = [];
     const tileResponse = JSON.parse(responseValue.result);
     log.debug('Tiles captured successfully');
-    const windowHeight = (responseValue === null || responseValue === void 0 ? void 0 : (_responseValue$metada = responseValue.metadata) === null || _responseValue$metada === void 0 ? void 0 : _responseValue$metada.window_height) || 0;
-    for (let tileData of tileResponse.sha) {
+    for (let tileData of tileResponse.tiles) {
       tiles.push(new Tile({
-        statusBarHeight: tileResponse.header_height || 0,
-        navBarHeight: tileResponse.footer_height || 0,
-        headerHeight,
-        footerHeight,
+        statusBarHeight: tileData.status_bar || 0,
+        navBarHeight: tileData.nav_bar || 0,
+        headerHeight: tileData.header_height || 0,
+        footerHeight: tileData.footer_height || 0,
         fullscreen,
-        sha: tileData.split('-')[0] // drop build id
+        sha: tileData.sha.split('-')[0] // drop build id
       }));
     }
 
     const metadata = {
-      windowHeight: Math.ceil(windowHeight * dpr)
+      screenshotType: screenshotType
     };
     return {
       tiles: tiles,

package/dist/providers/genericProvider.js

@@ -21,6 +21,12 @@ export default class GenericProvider {
     this.debugUrl = null;
     this.header = 0;
     this.footer = 0;
+    this.statusBarHeight = 0;
+    this.pageXShiftFactor = 0;
+    this.pageYShiftFactor = 0;
+    this.currentTag = null;
+    this.removeElementShiftFactor = 50000;
+    this.initialScrollLocation = null;
   }
   addDefaultOptions() {
     this.options.freezeAnimation = this.options.freezeAnimatedImage || this.options.freezeAnimation || false;
@@ -45,6 +51,29 @@ export default class GenericProvider {
       if (i) this.environmentInfo.add(i);
     }
   }
+  isIOS() {
+    var _this$currentTag;
+    return ((_this$currentTag = this.currentTag) === null || _this$currentTag === void 0 ? void 0 : _this$currentTag.osName) === 'iOS';
+  }
+  async getScrollDetails() {
+    return await this.driver.executeScript({
+      script: 'return [parseInt(window.scrollX), parseInt(window.scrollY)];',
+      args: []
+    });
+  }
+  async getInitialScrollLocation() {
+    if (this.initialScrollLocation) {
+      return this.initialScrollLocation;
+    }
+    this.initialScrollLocation = await this.getScrollDetails();
+    return this.initialScrollLocation;
+  }
+  async scrollToPosition(x, y) {
+    await this.driver.executeScript({
+      script: `window.scrollTo(${x}, ${y})`,
+      args: []
+    });
+  }
   async screenshot(name, {
     ignoreRegionXpaths = [],
     ignoreRegionSelectors = [],
@@ -61,8 +90,10 @@ export default class GenericProvider {
     log.debug('Fetching comparisong tag ...');
     const tag = await this.getTag();
     log.debug(`[${name}] : Tag ${JSON.stringify(tag)}`);
-    const tiles = await this.getTiles(this.header, this.footer, fullscreen);
+    const tiles = await this.getTiles(fullscreen);
     log.debug(`[${name}] : Tiles ${JSON.stringify(tiles)}`);
+    this.currentTag = tag;
+    this.statusBarHeight = tiles.tiles[0].statusBarHeight;
     const ignoreRegions = await this.findRegions(ignoreRegionXpaths, ignoreRegionSelectors, ignoreRegionElements, customIgnoreRegions);
     const considerRegions = await this.findRegions(considerRegionXpaths, considerRegionSelectors, considerRegionElements, customConsiderRegions);
     await this.setDebugUrl();
@@ -99,7 +130,7 @@ export default class GenericProvider {
     });
     ;
   }
-  async getTiles(headerHeight, footerHeight, fullscreen) {
+  async getTiles(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');
@@ -108,8 +139,8 @@ export default class GenericProvider {
         content: base64content,
         statusBarHeight: 0,
         navBarHeight: 0,
-        headerHeight,
-        footerHeight,
+        headerHeight: this.header,
+        footerHeight: this.footer,
         fullscreen
       })],
       // TODO: Add Generic support sha for contextual diff for non-automate
@@ -144,29 +175,73 @@ export default class GenericProvider {
   async setDebugUrl() {
     this.debugUrl = 'https://localhost/v1';
   }
+  async doTransformations() {
+    var _this$options;
+    const hideScrollbarStyle = `
+    /* Hide scrollbar for Chrome, Safari and Opera */
+    ::-webkit-scrollbar {
+      display: none !important;
+    }
+
+    /* Hide scrollbar for IE, Edge and Firefox */
+    body, html {
+      -ms-overflow-style: none !important;  /* IE and Edge */
+      scrollbar-width: none !important;  /* Firefox */
+    }`.replace(/\n/g, '');
+    const jsScript = `
+    const e = document.createElement('style');
+    e.setAttribute('class', 'poa-injected');
+    e.innerHTML = '${hideScrollbarStyle}'
+    document.head.appendChild(e);`;
+    await this.driver.executeScript({
+      script: jsScript,
+      args: []
+    });
+    if ((_this$options = this.options) !== null && _this$options !== void 0 && _this$options.fullPage || this.isIOS()) {
+      await this.getInitialScrollLocation();
+    }
+  }
+  async undoTransformations(data) {
+    const jsScript = `
+      const n = document.querySelectorAll('${data}');
+      n.forEach((e) => {e.remove()});`;
+    await this.driver.executeScript({
+      script: jsScript,
+      args: []
+    });
+  }
   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];
+    let isRegionPassed = [xpaths, selectors, elements, customLocations].some(regions => regions.length > 0);
+    if (isRegionPassed) {
+      await this.doTransformations();
+      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);
+      await this.undoTransformations('.poa-injected');
+      return [...xpathRegions, ...selectorRegions, ...elementRegions, ...customRegions];
+    } else {
+      return [];
+    }
   }
-  async getRegionObject(selector, elementId) {
-    const scaleFactor = parseInt(await this.metaData.devicePixelRatio());
-    const rect = await this.driver.rect(elementId);
-    const location = {
-      x: rect.x,
-      y: rect.y
-    };
-    const size = {
-      height: rect.height,
-      width: rect.width
-    };
+  async getRegionObjectFromBoundingBox(selector, element) {
+    var _this$options2;
+    const scaleFactor = await this.metaData.devicePixelRatio();
+    let scrollX = 0,
+      scrollY = 0;
+    if ((_this$options2 = this.options) !== null && _this$options2 !== void 0 && _this$options2.fullPage) {
+      scrollX = this.initialScrollLocation.value[0];
+      scrollY = this.initialScrollLocation.value[1];
+    }
+    let headerAdjustment = 0;
+    if (this.isIOS()) {
+      headerAdjustment = this.statusBarHeight;
+    }
     const coOrdinates = {
-      top: Math.floor(location.y * scaleFactor),
-      bottom: Math.ceil((location.y + size.height) * scaleFactor),
-      left: Math.floor(location.x * scaleFactor),
-      right: Math.ceil((location.x + size.width) * scaleFactor)
+      top: Math.floor((element.y + scrollY) * scaleFactor) + Math.floor(headerAdjustment),
+      bottom: Math.ceil((element.y + element.height + scrollY) * scaleFactor) + Math.ceil(headerAdjustment),
+      left: Math.floor((element.x + scrollX) * scaleFactor),
+      right: Math.ceil((element.x + element.width + scrollX) * scaleFactor)
     };
     const jsonObject = {
       selector,
@@ -178,9 +253,9 @@ export default class GenericProvider {
     const regionsArray = [];
     for (const idx in elements) {
       try {
-        const element = await this.driver.findElement(findBy, elements[idx]);
+        const boundingBoxRegion = await this.driver.findElementBoundingBox(findBy, elements[idx]);
         const selector = `${findBy}: ${elements[idx]}`;
-        const region = await this.getRegionObject(selector, element[Object.keys(element)[0]]);
+        const region = await this.getRegionObjectFromBoundingBox(selector, boundingBoxRegion);
         regionsArray.push(region);
       } catch (e) {
         log.warn(`Selenium Element with ${findBy}: ${elements[idx]} not found. Ignoring this ${findBy}.`);
@@ -189,6 +264,60 @@ export default class GenericProvider {
     }
     return regionsArray;
   }
+  async updatePageShiftFactor(location, scaleFactor, scrollFactors) {
+    var _this$options3;
+    if (this.isIOS() || this.currentTag.osName === 'OS X' && parseInt(this.currentTag.browserVersion) > 13 && this.currentTag.browserName.toLowerCase() === 'safari') {
+      this.pageYShiftFactor = this.statusBarHeight;
+    } else {
+      this.pageYShiftFactor = this.statusBarHeight - scrollFactors.value[1] * scaleFactor;
+    }
+    this.pageXShiftFactor = this.isIOS() ? 0 : -(scrollFactors.value[0] * scaleFactor);
+    if (this.isIOS() && !((_this$options3 = this.options) !== null && _this$options3 !== void 0 && _this$options3.fullPage)) {
+      if (scrollFactors.value[0] !== this.initialScrollLocation.value[0] || scrollFactors.value[1] !== this.initialScrollLocation.value[1]) {
+        this.pageXShiftFactor = -1 * this.removeElementShiftFactor;
+        this.pageYShiftFactor = -1 * this.removeElementShiftFactor;
+      } else if (location.y === 0) {
+        this.pageYShiftFactor += -(scrollFactors.value[1] * scaleFactor);
+      }
+    }
+  }
+  async getRegionObject(selector, elementId) {
+    var _this$options4;
+    const scaleFactor = await this.metaData.devicePixelRatio();
+    const rect = await this.driver.rect(elementId);
+    const location = {
+      x: rect.x,
+      y: rect.y
+    };
+    const size = {
+      height: rect.height,
+      width: rect.width
+    };
+    let scrollX = 0,
+      scrollY = 0;
+    const scrollFactors = await this.getScrollDetails();
+    if ((_this$options4 = this.options) !== null && _this$options4 !== void 0 && _this$options4.fullPage) {
+      scrollX = scrollFactors.value[0];
+      scrollY = scrollFactors.value[1];
+    }
+
+    // Update pageShiftFactor Element is not visible in viewport
+    // In case of iOS if the element is not visible in viewport it gives 0 for x-y coordinate.
+    // In case of iOS if the element is partially visible it gives negative x-y coordinate.
+    // Subtracting ScrollY/ScrollX ensures if the element is visible in viewport or not.
+    await this.updatePageShiftFactor(location, scaleFactor, scrollFactors);
+    const coOrdinates = {
+      top: Math.floor((location.y + scrollY) * scaleFactor) + Math.floor(this.pageYShiftFactor),
+      bottom: Math.ceil((location.y + size.height + scrollY) * scaleFactor) + Math.ceil(this.pageYShiftFactor),
+      left: Math.floor((location.x + scrollX) * scaleFactor) + Math.floor(this.pageXShiftFactor),
+      right: Math.ceil((location.x + size.width + scrollX) * scaleFactor) + Math.ceil(this.pageXShiftFactor)
+    };
+    const jsonObject = {
+      selector,
+      coOrdinates
+    };
+    return jsonObject;
+  }
   async getSeleniumRegionsByElement(elements) {
     const regionsArray = [];
     for (let index = 0; index < elements.length; index++) {
@@ -201,6 +330,9 @@ export default class GenericProvider {
         log.debug(e.toString());
       }
     }
+    if (this.isIOS()) {
+      await this.scrollToPosition(this.initialScrollLocation.value[0], this.initialScrollLocation.value[1]);
+    }
     return regionsArray;
   }
   async getSeleniumRegionsByLocation(customLocations) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@percy/webdriver-utils",
-  "version": "1.27.6-alpha.0",
+  "version": "1.27.6-beta.1",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -9,7 +9,7 @@
   },
   "publishConfig": {
     "access": "public",
-    "tag": "alpha"
+    "tag": "beta"
   },
   "engines": {
     "node": ">=14"
@@ -29,8 +29,8 @@
     "test:coverage": "yarn test --coverage"
   },
   "dependencies": {
-    "@percy/config": "1.27.6-alpha.0",
-    "@percy/sdk-utils": "1.27.6-alpha.0"
+    "@percy/config": "1.27.6-beta.1",
+    "@percy/sdk-utils": "1.27.6-beta.1"
   },
-  "gitHead": "415a083dc13e9453990b042a41d6676f6618df0c"
+  "gitHead": "1a3bf9e775769215ef590faa40502ce0ee0a6f78"
 }

package/dist/providers/capabilityManager.js

@@ -1,5 +0,0 @@
-export default class CapabilitiesManager {
-  constructor(capabilities) {
-    this.capabilities = capabilities;
-  }
-}

package/dist/util/capabilityValidator.js

@@ -1,72 +0,0 @@
-import fs from 'fs';
-import path from 'path';
-import { colors } from '@percy/logger/utils';
-import semver from 'semver';
-export default class CapabilitiesValidator {
-  constructor(automateCapabilities, sessionCapabilities) {
-    this.automateCapabilities = automateCapabilities;
-    this.sessionCapabilities = sessionCapabilities;
-  }
-  WARN_LOG_LEVEL = 'WARN';
-  ERROR_LOG_LEVEL = 'ERROR';
-  log(message, errorLevel = this.ERROR_LOG_LEVEL) {
-    if (errorLevel === this.WARN_LOG_LEVEL) {
-      console.warn(colors.yellow(message));
-    } else if (errorLevel === this.ERROR_LOG_LEVEL) {
-      console.error(colors.red(message));
-    }
-  }
-  existsInArray(array, value) {
-    if (!array || array.length === 0) return false;
-    return array.some(element => {
-      return element === value;
-    });
-  }
-  validateBrowserOSVersions() {
-    var _this$sessionCapabili, _this$sessionCapabili2;
-    const cwd = process.cwd();
-    const excludeBrowserData = JSON.parse(fs.readFileSync(path.join(cwd, 'packages/webdriver-utils/src/util/exclude_browsers.json')));
-    let {
-      os,
-      osVersion,
-      browserName,
-      browserVersion,
-      deviceName
-    } = this.automateCapabilities;
-    const platform = (_this$sessionCapabili = this.sessionCapabilities) === null || _this$sessionCapabili === void 0 ? void 0 : (_this$sessionCapabili2 = _this$sessionCapabili.platformName) === null || _this$sessionCapabili2 === void 0 ? void 0 : _this$sessionCapabili2.toLowerCase();
-    if (!os || !osVersion || !browserName || !browserVersion) {
-      this.log('OS/Browser Combination is not supported on Percy');
-      throw new Error('OS/Browser Combination is not supported on Percy');
-    }
-    const isMobile = ['ios', 'android'].includes(platform);
-    if (isMobile && !deviceName) {
-      this.log('Device capabilities are incorrect or not supported on Percy');
-      throw new Error('Device capabilities are incorrect or not supported on Percy');
-    }
-    if (excludeBrowserData !== null && excludeBrowserData !== void 0 && excludeBrowserData.os[os]) {
-      const osData = excludeBrowserData === null || excludeBrowserData === void 0 ? void 0 : excludeBrowserData.os[os];
-      if (osData !== null && osData !== void 0 && osData.os_versions) {
-        if (this.existsInArray(osData.os_versions, osVersion)) {
-          this.log(`${os} ${osVersion} is not supported on Percy`);
-          throw new Error(`${os} ${osVersion} is not supported on Percy`);
-        }
-      }
-      if (osData !== null && osData !== void 0 && osData.browsers) {
-        const browserData = osData === null || osData === void 0 ? void 0 : osData.browsers[browserName.toLowerCase()];
-        if (browserData && browserData.min_version === 'all') {
-          this.log(`${browserName} is not supported on Percy`);
-          throw new Error(`${browserName} is not supported on Percy`);
-        } else if (browserData && parseInt(browserVersion, 10) < parseInt(browserData.min_version, 10)) {
-          this.log(`${browserName}: ${browserVersion} is not supported on Percy`);
-          throw new Error(`${browserName}: ${browserVersion} is not supported on Percy`);
-        }
-      }
-      if (osData !== null && osData !== void 0 && osData.device_names) {
-        if (this.existsInArray(osData === null || osData === void 0 ? void 0 : osData.device_names, deviceName)) {
-          this.log(`${deviceName} is not supported on Percy`);
-          throw new Error(`${deviceName} is not supported in Percy`);
-        }
-      }
-    }
-  }
-}

package/dist/util/constants.js

@@ -1,7 +0,0 @@
-export const SELENIUM_TO_API_OS_MAPPING = {
-  MAC: 'OS X',
-  WIN8: 'Windows',
-  XP: 'Windows',
-  WINDOWS: 'Windows',
-  ANY: 'OS X'
-};