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

package/dist/driver.js

@@ -1,6 +1,5 @@
 import utils from '@percy/sdk-utils';
 import Cache from './util/cache.js';
-import httpsAgent from './util/utils.js';
 const {
   request
 } = utils;
@@ -11,14 +10,20 @@ export default class Driver {
     this.executorUrl = executorUrl.includes('@') ? `https://${executorUrl.split('@')[1]}` : executorUrl;
     this.passedCapabilities = passedCapabilities;
   }
+  static requestPostOptions(command) {
+    return {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json;charset=utf-8'
+      },
+      body: JSON.stringify(command)
+    };
+  }
   async getCapabilites() {
     return await Cache.withCache(Cache.caps, this.sessionId, async () => {
       try {
-        const options = {
-          agent: httpsAgent()
-        };
         const baseUrl = `${this.executorUrl}/session/${this.sessionId}`;
-        const caps = JSON.parse((await request(baseUrl, options)).body);
+        const caps = JSON.parse((await request(baseUrl)).body);
         return caps.value;
       } catch (err) {
         log.warn(`Falling back to legacy protocol, Error: ${err.message}`);
@@ -27,11 +32,8 @@ export default class Driver {
     });
   }
   async getWindowSize() {
-    const options = {
-      agent: httpsAgent()
-    };
     const baseUrl = `${this.executorUrl}/session/${this.sessionId}/window/current/size`;
-    const windowSize = JSON.parse((await request(baseUrl, options)).body);
+    const windowSize = JSON.parse((await request(baseUrl)).body);
     return windowSize;
   }
 
@@ -45,48 +47,53 @@ export default class Driver {
     if (!command.script.includes('browserstack_executor')) {
       command.script = `/* percy_automate_script */ \n ${command.script}`;
     }
-    const options = {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/json;charset=utf-8'
-      },
-      agent: httpsAgent(),
-      body: JSON.stringify(command)
-    };
+    const options = Driver.requestPostOptions(command);
     const baseUrl = `${this.executorUrl}/session/${this.sessionId}/execute/sync`;
     const response = JSON.parse((await request(baseUrl, options)).body);
     return response;
   }
   async takeScreenshot() {
-    const options = {
-      agent: httpsAgent()
-    };
     const baseUrl = `${this.executorUrl}/session/${this.sessionId}/screenshot`;
-    const screenShot = JSON.parse((await request(baseUrl, options)).body);
+    const screenShot = JSON.parse((await request(baseUrl)).body);
     return screenShot.value;
   }
   async rect(elementId) {
-    const options = {
-      agent: httpsAgent()
-    };
     const baseUrl = `${this.executorUrl}/session/${this.sessionId}/element/${elementId}/rect`;
-    const response = JSON.parse((await request(baseUrl, options)).body);
+    const response = JSON.parse((await request(baseUrl)).body);
     return response.value;
   }
   async findElement(using, value) {
-    const options = {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/json;charset=utf-8'
-      },
-      agent: httpsAgent(),
-      body: JSON.stringify({
-        using,
-        value
-      })
-    };
+    const options = Driver.requestPostOptions({
+      using,
+      value
+    });
     const baseUrl = `${this.executorUrl}/session/${this.sessionId}/element`;
     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/index.js

@@ -23,6 +23,7 @@ export default class WebdriverUtils {
       const comparisonData = await automate.screenshot(snapshotName, options);
       comparisonData.metadata.cliScreenshotStartTime = startTime;
       comparisonData.metadata.cliScreenshotEndTime = Date.now();
+      log.debug(`[${snapshotName}] : Comparison Data: ${JSON.stringify(comparisonData)}`);
       return comparisonData;
     } catch (e) {
       log.error(`[${snapshotName}] : Error - ${e.message}`);

package/dist/metadata/desktopMetaData.js

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

package/dist/providers/automateProvider.js

@@ -47,8 +47,7 @@ export default class AutomateProvider extends GenericProvider {
       error = e;
       throw e;
     } finally {
-      var _response, _response$body;
-      await this.percyScreenshotEnd(name, (_response = response) === null || _response === void 0 ? void 0 : (_response$body = _response.body) === null || _response$body === void 0 ? void 0 : _response$body.link, `${error}`);
+      await this.percyScreenshotEnd(name, error);
     }
     return response;
   }
@@ -61,23 +60,38 @@ export default class AutomateProvider extends GenericProvider {
           percyBuildUrl: this.buildInfo.url,
           state: 'begin'
         });
+        // Selenium Hub, set status error Code to 13 if an error is thrown
+        // Handling error with Selenium dialect is != W3C
+        if ((result === null || result === void 0 ? void 0 : result.status) === 13) throw new Error((result === null || result === void 0 ? void 0 : result.value) || 'Got invalid error response');
         this._markedPercy = result.success;
         return result;
       } catch (e) {
+        var _e$response, _JSON$parse, _e$response2;
         log.debug(`[${name}] : Could not mark Automate session as percy`);
         log.error(`[${name}] : error: ${e.toString()}`);
-        return null;
+        /**
+         * - Handling Error when dialect is W3C
+         * ERROR response format from SeleniumHUB `{
+         * sessionId: ...,
+         * status: 13,
+         * value: { error: '', message: ''}
+         * }
+         */
+        const errResponse = (e === null || e === void 0 ? void 0 : (_e$response = e.response) === null || _e$response === void 0 ? void 0 : _e$response.body) && ((_JSON$parse = JSON.parse(e === null || e === void 0 ? void 0 : (_e$response2 = e.response) === null || _e$response2 === void 0 ? void 0 : _e$response2.body)) === null || _JSON$parse === void 0 ? void 0 : _JSON$parse.value) || {};
+        const errMessage = (errResponse === null || errResponse === void 0 ? void 0 : errResponse.message) || (errResponse === null || errResponse === void 0 ? void 0 : errResponse.error) || (e === null || e === void 0 ? void 0 : e.message) || (e === null || e === void 0 ? void 0 : e.error) || (e === null || e === void 0 ? void 0 : e.value) || e.toString();
+        throw new Error(errMessage);
       }
     });
   }
-  async percyScreenshotEnd(name, percyScreenshotUrl, statusMessage = null) {
+  async percyScreenshotEnd(name, error) {
     return await TimeIt.run('percyScreenshotEnd', async () => {
       try {
+        var _this$buildInfo;
         await this.browserstackExecutor('percyScreenshot', {
           name,
-          percyScreenshotUrl,
-          status: percyScreenshotUrl ? 'success' : 'failure',
-          statusMessage,
+          percyScreenshotUrl: (_this$buildInfo = this.buildInfo) === null || _this$buildInfo === void 0 ? void 0 : _this$buildInfo.url,
+          status: error ? 'failure' : 'success',
+          statusMessage: error ? `${error}` : '',
           state: 'end'
         });
       } catch (e) {
@@ -168,10 +182,6 @@ export default class AutomateProvider extends GenericProvider {
     } = 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,

package/dist/providers/genericProvider.js

@@ -2,12 +2,6 @@ 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';
-import httpsAgent from '../util/utils.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();
@@ -27,6 +21,14 @@ 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.initialScrollFactor = {
+      value: [0, 0]
+    };
   }
   addDefaultOptions() {
     this.options.freezeAnimation = this.options.freezeAnimatedImage || this.options.freezeAnimation || false;
@@ -51,6 +53,22 @@ export default class GenericProvider {
       if (i) this.environmentInfo.add(i);
     }
   }
+  async getInitialPosition() {
+    if (this.currentTag.osName === 'iOS') {
+      this.initialScrollFactor = await this.driver.executeScript({
+        script: 'return [parseInt(window.scrollX), parseInt(window.scrollY)];',
+        args: []
+      });
+    }
+  }
+  async scrollToInitialPosition(x, y) {
+    if (this.currentTag.osName === 'iOS') {
+      await this.driver.executeScript({
+        script: `window.scrollTo(${x}, ${y})`,
+        args: []
+      });
+    }
+  }
   async screenshot(name, {
     ignoreRegionXpaths = [],
     ignoreRegionSelectors = [],
@@ -69,6 +87,8 @@ export default class GenericProvider {
     log.debug(`[${name}] : Tag ${JSON.stringify(tag)}`);
     const tiles = await this.getTiles(this.header, this.footer, 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();
@@ -133,9 +153,6 @@ export default class GenericProvider {
     } = 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(),
@@ -153,29 +170,62 @@ export default class GenericProvider {
   async setDebugUrl() {
     this.debugUrl = 'https://localhost/v1';
   }
+  async doTransformations() {
+    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: []
+    });
+  }
+  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) {
+    const scaleFactor = await this.metaData.devicePixelRatio();
+    let headerAdjustment = 0;
+    if (this.currentTag.osName === 'iOS') {
+      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 * scaleFactor) + Math.floor(headerAdjustment),
+      bottom: Math.ceil((element.y + element.height) * scaleFactor) + Math.ceil(headerAdjustment),
+      left: Math.floor(element.x * scaleFactor),
+      right: Math.ceil((element.x + element.width) * scaleFactor)
     };
     const jsonObject = {
       selector,
@@ -187,9 +237,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}.`);
@@ -198,8 +248,57 @@ export default class GenericProvider {
     }
     return regionsArray;
   }
+  async updatePageShiftFactor(location, scaleFactor) {
+    const scrollFactors = await this.driver.executeScript({
+      script: 'return [parseInt(window.scrollX), parseInt(window.scrollY)];',
+      args: []
+    });
+    if (this.currentTag.osName === 'iOS' || 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.currentTag.osName === 'iOS' ? 0 : -(scrollFactors.value[0] * scaleFactor);
+    if (this.currentTag.osName === 'iOS') {
+      if (scrollFactors.value[0] !== this.initialScrollFactor.value[0] || scrollFactors.value[1] !== this.initialScrollFactor.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) {
+    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
+    };
+    // 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);
+    const coOrdinates = {
+      top: Math.floor(location.y * scaleFactor) + Math.floor(this.pageYShiftFactor),
+      bottom: Math.ceil((location.y + size.height) * scaleFactor) + Math.ceil(this.pageYShiftFactor),
+      left: Math.floor(location.x * scaleFactor) + Math.floor(this.pageXShiftFactor),
+      right: Math.ceil((location.x + size.width) * scaleFactor) + Math.ceil(this.pageXShiftFactor)
+    };
+    const jsonObject = {
+      selector,
+      coOrdinates
+    };
+    return jsonObject;
+  }
   async getSeleniumRegionsByElement(elements) {
     const regionsArray = [];
+    await this.getInitialPosition();
     for (let index = 0; index < elements.length; index++) {
       try {
         const selector = `element: ${index}`;
@@ -210,6 +309,7 @@ export default class GenericProvider {
         log.debug(e.toString());
       }
     }
+    await this.scrollToInitialPosition(this.initialScrollFactor.value[0], this.initialScrollFactor.value[1]);
     return regionsArray;
   }
   async getSeleniumRegionsByLocation(customLocations) {
@@ -239,12 +339,4 @@ export default class GenericProvider {
     }
     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, httpsAgent())).body;
-    });
-    let deviceKey = `${deviceName}-${osVersion}`;
-    return devicesConfig[deviceKey] ? devicesConfig[deviceKey][browserName] ? [devicesConfig[deviceKey][browserName].header, devicesConfig[deviceKey][browserName].footer] : [0, 0] : [0, 0];
-  }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@percy/webdriver-utils",
-  "version": "1.27.5-alpha.0",
+  "version": "1.27.5-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.5-alpha.0",
-    "@percy/sdk-utils": "1.27.5-alpha.0"
+    "@percy/config": "1.27.5-beta.1",
+    "@percy/sdk-utils": "1.27.5-beta.1"
   },
-  "gitHead": "8ecc32db25f708a01192b8454d0fdf9c051f48a0"
+  "gitHead": "f5924b050d0c04f8ac63d610af291b32f51565f8"
 }

package/dist/util/utils.js

@@ -1,8 +0,0 @@
-import https from 'https';
-export function httpsAgent() {
-  return new https.Agent({
-    minVersion: 'TLSv1.2',
-    maxVersion: 'TLSv1.2'
-  });
-}
-export default httpsAgent;