browsertime 14.4.0 → 14.7.0

package/CHANGELOG.md

@@ -1,8 +1,36 @@
 # Browsertime changelog (we do [semantic versioning](https://semver.org))
 
+
+## 14.7.0 - 2021-10-20
+### Added
+* Updated to Chromedriver 95. Added Chrome 95 in the Docker container.
+
+## 14.6.1 - 2021-10-18
+### Fixed
+* If loading the URL fails (we get an exception, the browser crashes etc) make sure we stop the video correctly so it can be used [#1657](https://github.com/sitespeedio/browsertime/pull/1657).
+
+
+## 14.6.0 - 2021-10-13
+### Added
+* Updated to Selenium 4.0.0 [#1655](https://github.com/sitespeedio/browsertime/pull/1655).
+* You can skip setting Browsertime default Firefox preferences with `--firefox.noDefaultPrefs`, thank you [Gregory Mierzwinski](https://github.com/gmierz) for PR [#1650](https://github.com/sitespeedio/browsertime/pull/1650).
+* You can skip setting Browsertime default Chrome options with `--chrome.noDefaultOptions`, fixed in [#1651](https://github.com/sitespeedio/browsertime/pull/1651).
+* Updated to Firefox 93 in the Docker container.
+
+### Fixed
+* Updated eslint and prettier dependencies [#1652](https://github.com/sitespeedio/browsertime/pull/1652).
+* Log Firefox preference and Chrome args on debug level [#1654](https://github.com/sitespeedio/browsertime/pull/1654)
+## 14.5.0 - 2021-09-30
+### Added
+* Added CSS selector support for mouse commands [#1645](https://github.com/sitespeedio/browsertime/pull/1645) 
+
+### Fixed
+* Internal refactoring of the mouse command [#1646](https://github.com/sitespeedio/browsertime/pull/1646) and [#1647](https://github.com/sitespeedio/browsertime/pull/1647).
+
 ## 14.4.0 - 2021-09-22
 ### Added
-* Updated to Chromedriver 94 and Chrome 94 in the Docker container [#1643](https://github.com/sitespeedio/browsertime/pull/1643).
+* Updated to Ch
+romedriver 94 and Chrome 94 in the Docker container [#1643](https://github.com/sitespeedio/browsertime/pull/1643).
 ## 14.3.0 - 2021-09-16
 ### Added
 * Update to Edgedriver 93. Update to Edge 93 in the Docker container [#1641](https://github.com/sitespeedio/browsertime/pull/1641).

package/bin/browsertime.js

@@ -11,7 +11,7 @@ const fs = require('fs');
 const path = require('path');
 const log = require('intel').getLogger('browsertime');
 const engineUtils = require('../lib/support/engineUtils');
-const AsyncFunction = Object.getPrototypeOf(async function() {}).constructor;
+const AsyncFunction = Object.getPrototypeOf(async function () {}).constructor;
 const delay = ms => new Promise(res => setTimeout(res, ms));
 
 async function parseUserScripts(scripts) {

package/lib/android/index.js

@@ -91,7 +91,7 @@ class Android {
     const transfer = await this.client.pull(this.id, sourcePath);
 
     return new Promise((resolve, reject) => {
-      transfer.on('end', function() {
+      transfer.on('end', function () {
         resolve();
       });
       transfer.on('error', reject);

package/lib/chrome/har.js

@@ -5,7 +5,7 @@ const perflogParser = require('chrome-har');
 const harBuilder = require('../support/har');
 const { Type } = require('selenium-webdriver').logging;
 
-module.exports = async function(
+module.exports = async function (
   runner,
   result,
   index,
@@ -38,9 +38,9 @@ module.exports = async function(
     await cdpClient.setResponseBodies(har);
   }
 
-  const versionInfo = (await cdpClient.send(
-    'Browser.getVersion'
-  )).product.split('/');
+  const versionInfo = (
+    await cdpClient.send('Browser.getVersion')
+  ).product.split('/');
   const info = {
     name: versionInfo[0],
     version: versionInfo[1]

package/lib/chrome/longTaskMetrics.js

@@ -2,7 +2,7 @@
 
 const get = require('lodash.get');
 
-module.exports = function(result, options) {
+module.exports = function (result, options) {
   let totalDurationFirstPaint = 0;
   let totalDurationFirstContentFulPaint = 0;
   let totalDurationAfterLoadEventEnd = 0;

package/lib/chrome/speedline.js

@@ -18,13 +18,13 @@ function pad(n) {
  * Use SpeedLine to analyse the Chrome trace log to get Visual Metrics.
  * Not as good as using a video but maybe usable in some cases.
  */
-module.exports = async function(trace, result, index) {
+module.exports = async function (trace, result, index) {
   try {
     const navStart = trace.traceEvents.filter(
       task =>
         task.cat === 'blink.user_timing' && task.name === 'navigationStart'
     );
-    navStart.sort(function(a, b) {
+    navStart.sort(function (a, b) {
       return a.ts - b.ts;
     });
     log.debug('Get Speedline result from the trace');

package/lib/chrome/webdriver/builder.js

@@ -14,7 +14,7 @@ let hasConfiguredChromeDriverService = false;
  * @param builder
  * @param {Object} options the options for a web driver.
  */
-module.exports.configureBuilder = function(builder, baseDir, options) {
+module.exports.configureBuilder = function (builder, baseDir, options) {
   const chromeConfig = options.chrome || {};
 
   if (!hasConfiguredChromeDriverService) {

package/lib/chrome/webdriver/setupChromiumOptions.js

@@ -5,7 +5,7 @@ const getViewPort = require('../../support/getViewPort');
 const util = require('../../support/util');
 const log = require('intel').getLogger('browsertime.chrome');
 
-module.exports = function(seleniumOptions, browserOptions, options, baseDir) {
+module.exports = function (seleniumOptions, browserOptions, options, baseDir) {
   // Fixing save password popup, only on Desktop
   if (!options.android) {
     seleniumOptions.setUserPreferences({
@@ -109,10 +109,15 @@ module.exports = function(seleniumOptions, browserOptions, options, baseDir) {
       '--remote-debugging-port=' + options.devToolsPort
     );
   } else {
-    seleniumOptions.addArguments(defaultChromeOptions);
+    if (!browserOptions.noDefaultOptions) {
+      seleniumOptions.addArguments(defaultChromeOptions);
+    } else {
+      log.info('Skip setting default options for Chrome');
+    }
   }
 
   if (browserOptions.args) {
+    log.debug('Set Chrome args %j', browserOptions.args);
     seleniumOptions.addArguments(browserOptions.args);
   }
 

package/lib/connectivity/trafficShapeParser.js

@@ -104,7 +104,7 @@ const legacyProfiles = {
 };
 
 module.exports = {
-  parseTrafficShapeConfig: function(options) {
+  parseTrafficShapeConfig: function (options) {
     if (options.connectivity && options.connectivity.profile === 'custom') {
       return {
         down: options.connectivity.down,
@@ -133,7 +133,7 @@ module.exports = {
       return null;
     }
   },
-  getProfiles: function() {
+  getProfiles: function () {
     return newProfiles;
   }
 };

package/lib/connectivity/tsProxy.js

@@ -14,7 +14,7 @@ const TS_PROXY_SCRIPT_PATH = path.join(
 );
 
 function getStartupCriteriaListener(resolve, reject) {
-  return function(data) {
+  return function (data) {
     const logLine = data.toString();
     if (logLine.startsWith('Started Socks5 proxy server on')) {
       log.debug('Started TSproxy');
@@ -65,12 +65,12 @@ class TSProxy {
     const tsProxyProcess = this.tsProxyProcess;
 
     if (this.logVerbose) {
-      tsProxyProcess.stderr.on('data', function(data) {
+      tsProxyProcess.stderr.on('data', function (data) {
         log.verbose(data.toString().trim());
       });
     }
 
-    return new Promise(function(resolve, reject) {
+    return new Promise(function (resolve, reject) {
       tsProxyProcess.stdout.on(
         'data',
         getStartupCriteriaListener(resolve, reject)

package/lib/core/engine/command/measure.js

@@ -96,6 +96,13 @@ class Measure {
     }
   }
 
+  async _stopVideo(url) {
+    if (this.recordVideo && !this.options.videoParams.debug) {
+      await this.video.stop(url);
+      this.videos.push(this.video);
+    }
+  }
+
   _error(message) {
     // If we already are measuring a page, associate the error woth that page
     if (this.areWeMeasuring === true) {
@@ -223,6 +230,9 @@ class Measure {
         this.numberOfMeasuredPages++;
         this.numberOfVisitedPages++;
         this.engineDelegate.failing(url);
+        // If we got an error we still should stop the video to make sure we can use it to
+        // try to understand what went wrong
+        await this._stopVideo(url);
         throw e;
       }
     } else {
@@ -261,14 +271,12 @@ class Measure {
     // we also need to add that to the meta data so that the correct folder is created
     if (this.result[this.numberOfMeasuredPages].alias) {
       if (this.options.urlMetaData) {
-        this.options.urlMetaData[url] = this.result[
-          this.numberOfMeasuredPages
-        ].alias;
+        this.options.urlMetaData[url] =
+          this.result[this.numberOfMeasuredPages].alias;
       } else {
         this.options.urlMetaData = {};
-        this.options.urlMetaData[url] = this.result[
-          this.numberOfMeasuredPages
-        ].alias;
+        this.options.urlMetaData[url] =
+          this.result[this.numberOfMeasuredPages].alias;
       }
     }
 
@@ -276,10 +284,8 @@ class Measure {
     await this.storageManager.createSubDataDir(
       path.join(pathToFolder(url, this.options))
     );
-    if (this.recordVideo && !this.options.videoParams.debug) {
-      await this.video.stop(url);
-      this.videos.push(this.video);
-    }
+    await this._stopVideo(url);
+
     const alias = this.options.urlMetaData
       ? this.options.urlMetaData[url]
       : undefined || this.result[this.numberOfMeasuredPages].alias;

package/lib/core/engine/command/mouse/clickAndHold.js

@@ -0,0 +1,146 @@
+'use strict';
+
+const log = require('intel').getLogger('browsertime.command.mouse');
+const webdriver = require('selenium-webdriver');
+
+class ClickAndHold {
+  constructor(browser) {
+    this.driver = browser.getDriver();
+    this.actions = this.driver.actions({ async: true });
+  }
+
+  /**
+   * Click and hold an element that matches a XPath selector.
+   * @param {string} xpath
+   * @returns {Promise} Promise object represents when mouse is pressed.
+   * @throws Will throw an error if the element is not found.
+   */
+  async byXpath(xpath) {
+    try {
+      const element = await this.driver.findElement(webdriver.By.xpath(xpath));
+      return this.actions.move({ origin: element }).press().perform();
+    } catch (e) {
+      log.error('Could not click and hold on element with xpath %s', xpath);
+      log.verbose(e);
+      throw Error('Could not click and hold on element with xpath ' + xpath);
+    }
+  }
+
+  /**
+   * Click and hold an element that matches a CSS selector.
+   * @param {string} selector
+   * @returns {Promise} Promise object represents when mouse is pressed.
+   * @throws Will throw an error if the element is not found.
+   */
+  async bySelector(selector) {
+    try {
+      const element = await this.driver.findElement(webdriver.By.css(selector));
+      return this.actions.move({ origin: element }).press().perform();
+    } catch (e) {
+      log.error(
+        'Could not click and hold on element with selector %s',
+        selector
+      );
+      log.verbose(e);
+      throw Error(
+        'Could not click and hold on element with selector ' + selector
+      );
+    }
+  }
+
+  /**
+   * Click and hold an element at the cursor's position.
+   * @returns {Promise} Promise object represents when mouse is pressed.
+   * @throws Will throw an error if action cannot be performed.
+   */
+  async atCursor() {
+    try {
+      return this.actions
+        .move({ origin: webdriver.Origin.POINTER })
+        .press()
+        .perform();
+    } catch (e) {
+      log.error('Could not click and hold at cursor');
+      log.verbose(e);
+      throw Error('Could not click and hold at cursor');
+    }
+  }
+
+  /**
+   * Click and hold an element at the given coordinates.
+   * @param {integer} xPos
+   * @param {integer} yPos
+   * @returns {Promise} Promise object represents when mouse is pressed.
+   * @throws Will throw an error if action cannot be performed.
+   */
+  async atPosition(xPos, yPos) {
+    try {
+      return this.actions
+        .move({ x: xPos, y: yPos, origin: webdriver.Origin.VIEWPORT })
+        .press()
+        .perform();
+    } catch (e) {
+      log.error('Could not click and hold at position (%d,%d)', xPos, yPos);
+      log.verbose(e);
+      throw Error(
+        'Could not click and hold at position (' + xPos + ',' + yPos + ')'
+      );
+    }
+  }
+
+  /**
+   * Release mouse on element that matches the specified Xpath.
+   * @param {string} xpath
+   * @returns {Promise} Promise object represents when mouse is released.
+   * @throws Will throw an error if action cannot be performed.
+   */
+  async releaseAtXpath(xpath) {
+    try {
+      const element = await this.driver.findElement(webdriver.By.xpath(xpath));
+      return this.actions.move({ origin: element }).release().perform();
+    } catch (e) {
+      log.error('Could not release on xpath %s', xpath);
+      log.verbose(e);
+      throw Error('Could not release on xpath ' + xpath);
+    }
+  }
+
+  /**
+   * Release mouse on element that matches the specified CSS selector.
+   * @param {string} selector
+   * @returns {Promise} Promise object represents when mouse is released.
+   * @throws Will throw an error if action cannot be performed.
+   */
+  async releaseAtSelector(selector) {
+    try {
+      const element = await this.driver.findElement(webdriver.By.css(selector));
+      return this.actions.move({ origin: element }).release().perform();
+    } catch (e) {
+      log.error('Could not release on selector %s', selector);
+      log.verbose(e);
+      throw Error('Could not release on selector ' + selector);
+    }
+  }
+
+  /**
+   * Release mouse at specified coordinates.
+   * @param {integer} xPos
+   * @param {integer} yPos
+   * @returns {Promise} Promise object represents when mouse is released.
+   * @throws Will throw an error if action cannot be performed.
+   */
+  async releaseAtPosition(xPos, yPos) {
+    try {
+      return this.actions
+        .move({ x: xPos, y: yPos, origin: webdriver.Origin.VIEWPORT })
+        .release()
+        .perform();
+    } catch (e) {
+      log.error('Could not release at position (%d,%d)', xPos, yPos);
+      log.verbose(e);
+      throw Error('Could not release at position (' + xPos + ',' + yPos + ')');
+    }
+  }
+}
+
+module.exports = ClickAndHold;

package/lib/core/engine/command/mouse/contextClick.js

@@ -0,0 +1,61 @@
+'use strict';
+
+const log = require('intel').getLogger('browsertime.command.mouse');
+const webdriver = require('selenium-webdriver');
+
+class ContextClick {
+  constructor(browser) {
+    this.driver = browser.getDriver();
+    this.actions = this.driver.actions({ async: true });
+  }
+
+  /**
+   * Perform ContextClick on an element that matches a XPath selector.
+   * @param {string} xpath
+   * @returns {Promise} Promise object represents when context click occurs.
+   * @throws Will throw an error if the element is not found
+   */
+  async byXpath(xpath) {
+    try {
+      const element = await this.driver.findElement(webdriver.By.xpath(xpath));
+      return this.actions.contextClick(element).perform();
+    } catch (e) {
+      log.error('Could not context click on element with xpath %s', xpath);
+      log.verbose(e);
+      throw Error('Could not context click on element with xpath ' + xpath);
+    }
+  }
+
+  /**
+   * Perform ContextClick on an element that matches a CSS selector.
+   * @param {string} css selector
+   * @returns {Promise} Promise object represents when context click occurs.
+   * @throws Will throw an error if the element is not found
+   */
+  async bySelector(selector) {
+    try {
+      const element = await this.driver.findElement(webdriver.By.css(selector));
+      return this.actions.contextClick(element).perform();
+    } catch (e) {
+      log.error('Could not context click on element with css %s', selector);
+      log.verbose(e);
+      throw Error('Could not context click on element with css ' + selector);
+    }
+  }
+
+  /**
+   * Perform ContextClick at the cursor's position.
+   * @returns {Promise} Promise object represents when context click occurs.
+   * @throws Will throw an error if context click cannot be performed.
+   */
+  async atCursor() {
+    try {
+      return this.actions.contextClick().perform();
+    } catch (e) {
+      log.error('Could not perform context click');
+      log.verbose(e);
+      throw Error('Could not perform context click');
+    }
+  }
+}
+module.exports = ContextClick;

package/lib/core/engine/command/mouse/doubleClick.js

@@ -0,0 +1,76 @@
+'use strict';
+
+const log = require('intel').getLogger('browsertime.command.mouse');
+const webdriver = require('selenium-webdriver');
+
+class DoubleClick {
+  constructor(browser, pageCompleteCheck) {
+    this.browser = browser;
+    this.actions = this.browser.getDriver().actions({ async: true });
+    this.pageCompleteCheck = pageCompleteCheck;
+  }
+
+  /**
+   * Perform mouse double click on an element matches a XPath selector.
+   * @param {string} xpath
+   * @returns {Promise} Promise object represents when the element has been double clicked.
+   * @throws Will throw an error if the element is not found.
+   */
+  async byXpath(xpath, options) {
+    try {
+      const element = await this.browser
+        .getDriver()
+        .findElement(webdriver.By.xpath(xpath));
+      await this.actions.doubleClick(element).perform();
+      if (options && 'wait' in options && options.wait === true) {
+        return this.browser.extraWait(this.pageCompleteCheck);
+      }
+    } catch (e) {
+      log.error('Could not double click on element with xpath %s', xpath);
+      log.verbose(e);
+      throw Error('Could not double click on element with xpath ' + xpath);
+    }
+  }
+
+  /**
+   * Perform mouse double click on an element matches a CSS selector.
+   * @param {string} selector
+   * @returns {Promise} Promise object represents when the element has been double clicked.
+   * @throws Will throw an error if the element is not found.
+   */
+  async bySelector(selector, options) {
+    try {
+      const element = await this.browser
+        .getDriver()
+        .findElement(webdriver.By.css(selector));
+      await this.actions.doubleClick(element).perform();
+      if (options && 'wait' in options && options.wait === true) {
+        return this.browser.extraWait(this.pageCompleteCheck);
+      }
+    } catch (e) {
+      log.error('Could not double click on element with xpath %s', selector);
+      log.verbose(e);
+      throw Error('Could not double click on element with xpath ' + selector);
+    }
+  }
+
+  /**
+   * Perform mouse double click at the cursor's position.
+   * @returns {Promise} Promise object represents when double click occurs.
+   * @throws Will throw an error if double click cannot be performed.
+   */
+  async atCursor(options) {
+    try {
+      await this.actions.doubleClick().perform();
+      if (options && 'wait' in options && options.wait === true) {
+        return this.browser.extraWait(this.pageCompleteCheck);
+      }
+    } catch (e) {
+      log.error('Could not perform double click');
+      log.verbose(e);
+      throw Error('Could not perform double click');
+    }
+  }
+}
+
+module.exports = DoubleClick;

package/lib/core/engine/command/mouse/index.js

@@ -0,0 +1,9 @@
+'use strict';
+
+module.exports = {
+  SingleClick: require('./singleClick'),
+  DoubleClick: require('./doubleClick'),
+  ClickAndHold: require('./clickAndHold'),
+  ContextClick: require('./contextClick'),
+  MouseMove: require('./mouseMove')
+};

package/lib/core/engine/command/mouse/mouseMove.js

@@ -0,0 +1,81 @@
+'use strict';
+
+const log = require('intel').getLogger('browsertime.command.mouse');
+const webdriver = require('selenium-webdriver');
+
+class MouseMove {
+  constructor(browser) {
+    this.driver = browser.getDriver();
+    this.actions = this.driver.actions({ async: true });
+  }
+
+  /**
+   * Move mouse to an element that matches a XPath selector.
+   * @param {string} xpath
+   * @returns {Promise} Promise object represents when the mouse has moved
+   * @throws Will throw an error if the element is not found
+   */
+  async byXpath(xpath) {
+    try {
+      const element = await this.driver.findElement(webdriver.By.xpath(xpath));
+      return this.actions.move({ origin: element }).perform();
+    } catch (e) {
+      log.error('Could not find element by xpath %s', xpath);
+      log.verbose(e);
+      throw Error('Could not find element by xpath ' + xpath);
+    }
+  }
+
+  /**
+   * Move mouse to an element that matches a CSS selector.
+   * @param {string} selector
+   * @returns {Promise} Promise object represents when the mouse has moved
+   * @throws Will throw an error if the element is not found
+   */
+  async bySelector(selector) {
+    try {
+      const element = await this.driver.findElement(webdriver.By.css(selector));
+      return this.actions.move({ origin: element }).perform();
+    } catch (e) {
+      log.error('Could not find element by selector %s', selector);
+      log.verbose(e);
+      throw Error('Could not find element by selector ' + selector);
+    }
+  }
+
+  /**
+   * Move mouse to a position
+   * @param {number} xPos, {number} yPos
+   * @returns {Promise} Promise object represents when the mouse has moved
+   * @throws Will throw an error if the element is not found
+   */
+  async toPosition(xPos, yPos) {
+    try {
+      return this.actions.move({ x: xPos, y: yPos }).perform();
+    } catch (e) {
+      log.error('Could not move mouse to position.');
+      log.verbose(e);
+      throw Error('Could not move mouse to position.');
+    }
+  }
+
+  /**
+   * Move mouse by an offset
+   * @param {number} xOffset, {number} yOffset
+   * @returns {Promise} Promise object represents when the mouse has moved
+   * @throws Will throw an error if the element is not found
+   */
+  async byOffset(xOffset, yOffset) {
+    try {
+      return this.actions
+        .move({ x: xOffset, y: yOffset, origin: webdriver.Origin.POINTER })
+        .perform();
+    } catch (e) {
+      log.error('Could not move mouse by offset');
+      log.verbose(e);
+      throw Error('Could not move mouse by offset');
+    }
+  }
+}
+
+module.exports = MouseMove;