browsertime 14.14.0 → 14.17.0

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # Browsertime changelog (we do [semantic versioning](https://semver.org))
 
+## 14.17.0 - 2022-01-23
+### Added
+* New Select command [#1696](https://github.com/sitespeedio/browsertime/pull/1696):
+  * `select.selectByIdValue(selectId, value)`
+  * `select.selectByNameAndValue(selectName, value)`
+  * `select.selectByIdAndIndex(selectId, index)`
+  * `select.selectByNameAndIndex(selectName, index)`
+  * `select.deselectById(selectId)`
+  * `select.getValuesById(selectId)`
+  * `select.getSelectedValueById(selectId)`
+
+* New click by name command `click.byName(name)` [#1697](https://github.com/sitespeedio/browsertime/pull/1697).
+
+
+##  14.16.0 - 2022-01-14
+### Added 
+* Upgraded Geckodriver downloader that downloads a pre-built Geckodriver on Raspberry Pis.
+
+## 14.15.0 - 2022-01-12
+### Added
+* Added so you can append a String to Firefox User Agent [#1694](https://github.com/sitespeedio/browsertime/pull/1694), thank you [Henrik Skupin](https://github.com/whimboo) for pointing me in the right direction. With [#1695](https://github.com/sitespeedio/browsertime/pull/1695) we now have `--appendToUserAgent` that works in Chrome/Edge and Firefox.
+## 14.14.1 - 2022-01-12
+### Fixed
+* Updated Chromedriver library that pickup already installed driver on Raspberry Pis. This makes it easier to run tests on an Android device from a Raspberry Pi.
 ## 14.14.0 - 2022-01-10
 ### Added
 * Add support for [Humble](https://calendar.perfplanet.com/2021/introducing-humble-the-raspberry-pi-wifi-network-link-conditioner/) as connectivity engine for mobile phone testing. Make sure to setup Humble on a Raspberry Pi 4 and the choose engine with `--connectivity.engine humble` and set the URL to your instance `--connectivity.humble.url http://raspberrypi.local:3000`. Added in [#1691](https://github.com/sitespeedio/browsertime/pull/1691).

package/browsertime/visualmetrics.py

@@ -89,6 +89,7 @@ def video_to_frames(
         if os.path.isfile(video):
             video = os.path.realpath(video)
             logging.info("Processing frames from video " + video + " to " + directory)
+            is_mobile = find_recording_platform(video)
             if os.path.isdir(directory):
                 shutil.rmtree(directory, True)
             if not os.path.isdir(directory):
@@ -103,13 +104,15 @@ def video_to_frames(
                     viewport_retries,
                     viewport_min_height,
                     viewport_min_width,
+                    is_mobile,
                 )
                 gc.collect()
                 if extract_frames(video, directory, full_resolution, viewport):
                     client_viewport = None
                     if find_viewport and options.notification:
                         client_viewport = find_image_viewport(
-                            os.path.join(directory, "video-000000.png")
+                            os.path.join(directory, "video-000000.png"),
+                            is_mobile
                         )
                     if multiple and orange_file is not None:
                         directories = split_videos(directory, orange_file)
@@ -122,12 +125,12 @@ def video_to_frames(
                             remove_orange_frames(dir, orange_file)
                         find_first_frame(dir, white_file)
                         blank_first_frame(dir)
-                        find_render_start(dir, orange_file, gray_file, cropped)
+                        find_render_start(dir, orange_file, gray_file, cropped, is_mobile)
                         find_last_frame(dir, white_file)
                         adjust_frame_times(dir)
                         if timeline_file is not None and not multiple:
                             synchronize_to_timeline(dir, timeline_file)
-                        eliminate_duplicate_frames(dir, cropped)
+                        eliminate_duplicate_frames(dir, cropped, is_mobile)
                         eliminate_similar_frames(dir)
                         # See if we are limiting the number of frames to keep
                         # (before processing them to save processing time)
@@ -202,6 +205,33 @@ def extract_frames(video, directory, full_resolution, viewport):
     return ret
 
 
+def find_recording_platform(video):
+    """Find the platform that this video was recorded on.
+
+    We can make use of a field called `com.android.version` to
+    determine if we've recorded on mobile or not.
+    """
+    command = ["ffprobe", video]
+    logging.debug(command)
+
+    lines = []
+    if sys.version_info > (3, 0):
+        proc = subprocess.Popen(command, stderr=subprocess.PIPE, encoding="UTF-8")
+    else:
+        proc = subprocess.Popen(command, stderr=subprocess.PIPE)
+
+    while proc.poll() is None:
+        lines.extend(iter(proc.stderr.readline, ""))
+
+    is_mobile = False
+    matcher = re.compile(".*com\.android\.version.*")
+    for line in lines:
+        if matcher.search(line):
+            is_mobile = True
+
+    return is_mobile
+
+
 def split_videos(directory, orange_file):
     """Split multiple videos on orange frame separators"""
     logging.debug("Splitting video on orange frames (this may take a while)...")
@@ -291,7 +321,7 @@ def remove_orange_frames(directory, orange_file):
                 break
 
 
-def find_image_viewport(file):
+def find_image_viewport(file, is_mobile):
     logging.debug("Finding the viewport for %s", file)
     try:
         from PIL import Image
@@ -357,6 +387,12 @@ def find_image_viewport(file):
             "height": (bottom - top),
         }
 
+        if is_mobile:
+            # On mobile we need to ignore the top ~10 pixels because
+            # there is a visible progress bar there on some browsers.
+            viewport["y"] += 10
+            viewport["height"] -= 10
+
     except Exception:
         viewport = None
 
@@ -371,6 +407,7 @@ def find_video_viewport(
     viewport_retries,
     viewport_min_height,
     viewport_min_width,
+    is_mobile,
 ):
     logging.debug("Finding Video Viewport...")
     viewport = None
@@ -463,7 +500,7 @@ def find_video_viewport(
                     }
 
                 elif find_viewport:
-                    viewport = find_image_viewport(frame)
+                    viewport = find_image_viewport(frame, is_mobile)
                 else:
                     viewport = {"x": 0, "y": 0, "width": width, "height": height}
 
@@ -629,7 +666,7 @@ def find_last_frame(directory, white_file):
         logging.exception("Error finding last frame")
 
 
-def find_render_start(directory, orange_file, gray_file, cropped):
+def find_render_start(directory, orange_file, gray_file, cropped, is_mobile):
     logging.debug("Finding Render Start...")
     try:
         if (
@@ -680,13 +717,19 @@ def find_render_start(directory, orange_file, gray_file, cropped):
                     top += client_viewport["y"]
                 elif cropped:
                     # The image was already cropped, so only cutout the bottom
-                    # to get rid of the network request/etc. information
+                    # to get rid of the network request/etc. information for
+                    # desktop videos, and nothing extra on mobile.
                     top = 0
                     left = 0
                     width = im_width
-                    height = im_height - bottom_margin
+
+                    if is_mobile:
+                        height = im_height
+                    else:
+                        height = im_height - bottom_margin
 
                 crop = "{0:d}x{1:d}+{2:d}+{3:d}".format(width, height, left, top)
+
                 for i in range(1, count):
                     if frames_match(first, files[i], 10, 0, crop, mask):
                         logging.debug("Removing pre-render frame %s", files[i])
@@ -705,7 +748,7 @@ def find_render_start(directory, orange_file, gray_file, cropped):
         logging.exception("Error getting render start")
 
 
-def eliminate_duplicate_frames(directory, cropped):
+def eliminate_duplicate_frames(directory, cropped, is_mobile):
     logging.debug("Eliminating Duplicate Frames...")
     global client_viewport
     try:
@@ -745,11 +788,16 @@ def eliminate_duplicate_frames(directory, cropped):
                 top += client_viewport["y"]
             elif cropped:
                 # The image was already cropped, so only cutout the bottom
-                # to get rid of the network request/etc. information
+                # to get rid of the network request/etc. information for
+                # desktop videos, and nothing extra on mobile.
                 top = 0
                 left = 0
                 width = im_width
-                height = im_height - bottom_margin
+
+                if is_mobile:
+                    height = im_height
+                else:
+                    height = im_height - bottom_margin
 
             crop = "{0:d}x{1:d}+{2:d}+{3:d}".format(width, height, left, top)
             logging.debug("Viewport cropping set to " + crop)

package/lib/chrome/webdriver/chromium.js

@@ -105,13 +105,15 @@ class Chromium {
       await this.cdpClient.setupCPUThrottling(this.chrome.CPUThrottlingRate);
     }
 
-    if (this.chrome.appendToUserAgent) {
+    if (this.chrome.appendToUserAgent || this.options.appendToUserAgent) {
       const currentUserAgent = await runner.runScript(
         'return navigator.userAgent;',
         'GET_USER_AGENT'
       );
       await this.cdpClient.setUserAgent(
-        currentUserAgent + ' ' + this.chrome.appendToUserAgent
+        currentUserAgent +
+          ' ' +
+          (this.chrome.appendToUserAgent || this.options.appendToUserAgent)
       );
     } else if (this.chrome.mobileEmulation && this.options.userAgent) {
       // Hack to set user agent for mobile emulation

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

@@ -212,6 +212,23 @@ class Click {
     }
   }
 
+  /**
+   * Click on element located by the name, Uses document.querySelector.
+   * @param {string} name the name of the element
+   * @returns {Promise} Promise object represents when the element has been clicked
+   * @throws Will throw an error if the element is not found
+   */
+  async byName(name) {
+    try {
+      const script = `document.querySelector("[name='${name}']").click()`;
+      await this.browser.runScript(script, 'CUSTOM');
+    } catch (e) {
+      log.error('Could not find element by name %s', name);
+      log.verbose(e);
+      throw Error('Could not find element by name ' + name);
+    }
+  }
+
   /**
    * Click on link located by the ID attribute. Uses document.getElementById() to find the element. And wait for page complete check to finish.
    * @param {string} id

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

@@ -0,0 +1,155 @@
+'use strict';
+
+const log = require('intel').getLogger('browsertime.command.select');
+
+class Select {
+  constructor(browser) {
+    this.browser = browser;
+  }
+
+  /**
+   * Select value of a select by the selects id
+   * @param {string} selectId The id of the select
+   * @param {string} value The value of the option you want to set
+   * @returns {Promise} Promise object represents when the option has been
+   * set to the element
+   * @throws Will throw an error if the select is not found
+   */
+  async selectByIdAndValue(selectId, value) {
+    try {
+      const script = `const select = document.getElementById('${selectId}'); select.value = '${value}'; select.dispatchEvent(new Event('change'));`;
+      await this.browser.runScript(script, 'CUSTOM');
+    } catch (e) {
+      log.error('Could not select value for select with id %s', selectId);
+      log.verbose(e);
+      throw Error(`Could not select value for select with id ${selectId}`);
+    }
+  }
+
+  /**
+   * Select value of a select by the selects name
+   * @param {string} selectName The name of the select
+   * @param {string} value The value of the option you want to set
+   * @returns {Promise} Promise object represents when the option has been
+   * set to the element
+   * @throws Will throw an error if the select is not found
+   */
+  async selectByNameAndValue(selectName, value) {
+    try {
+      const script = `const select = document.querySelector("select[name='${selectName}']"); select.value = '${value}'; select.dispatchEvent(new Event('change'));`;
+      await this.browser.runScript(script, 'CUSTOM');
+    } catch (e) {
+      log.error('Could not select value for select with name %s', selectName);
+      log.verbose(e);
+      throw Error(`Could not select value for select with name ${selectName}`);
+    }
+  }
+
+  /**
+   * Select value of a select index and  by the selects id
+   * @param {string} selectId The id of the select
+   * @param {number} index the index of the option you want to set
+   * @returns {Promise} Promise object represents when the option has been
+   * set to the element
+   * @throws Will throw an error if the select is not found
+   */
+  async selectByIdAndIndex(selectId, index) {
+    try {
+      const script = `const select = document.getElementById('${selectId}'); select.selectedIndex = ${index};select.dispatchEvent(new Event('change'));`;
+      const value = await this.browser.runScript(script, 'CUSTOM');
+      return value;
+    } catch (e) {
+      log.error(
+        'Could not select value for select with id %s by index',
+        selectId
+      );
+      log.verbose(e);
+      throw Error(`Could not select value for select with id ${selectId}`);
+    }
+  }
+
+  /**
+   * Select value of a select index and by the selects name
+   * @param {string} selectName - the name of the select
+   * @param {number} index - the index of the option you want to set
+   * @returns {Promise} Promise object represents when the option has been
+   * set to the element
+   * @throws Will throw an error if the select is not found
+   */
+  async selectByNameAndIndex(selectName, index) {
+    try {
+      const script = `const select = document.querySelector("select[name='${selectName}']"); select.selectedIndex = ${index};select.dispatchEvent(new Event('change'));`;
+      const value = await this.browser.runScript(script, 'CUSTOM');
+      return value;
+    } catch (e) {
+      log.error(
+        'Could not select value for select with name %s by index',
+        selectName
+      );
+      log.verbose(e);
+      throw Error(`Could not select value for select name ${selectName}`);
+    }
+  }
+
+  /**
+   * Deselect all options in a select.
+   * @param {string} selectId
+   * @returns {Promise} Promise object represents when options been deselected
+   * @throws Will throw an error if the select is not found
+   */
+  async deselectById(selectId) {
+    try {
+      const script = `const select = document.getElementById('${selectId}'); select.selectedIndex = -1;select.dispatchEvent(new Event('change'));`;
+      const value = await this.browser.runScript(script, 'CUSTOM');
+      return value;
+    } catch (e) {
+      log.error('Could not deleselect by select id %s', selectId);
+      log.verbose(e);
+      throw Error(`Could not deleselect by select id  ${selectId}`);
+    }
+  }
+
+  /**
+   * Get all option values in a select.
+   * @param {string} selectId - the id of the select.
+   * @returns {Promise} Promise object tha will return an array with the values of the select
+   * @throws Will throw an error if the select is not found
+   */
+  async getValuesById(selectId) {
+    const script = `const select = document.getElementById('${selectId}');
+    const values = [];
+    for (let option of select.options) {
+      values.push(option.value);
+    }
+    return values;
+    `;
+
+    try {
+      const value = await this.browser.runScript(script, 'CUSTOM');
+      return value;
+    } catch (e) {
+      log.error('Could not get select options for id %s', selectId);
+      log.verbose(e);
+      throw Error(`Could not get select options for id ${selectId}`);
+    }
+  }
+
+  /**
+   * Get the selected option value in a select.
+   * @param {select} selectId the id of the select.
+   * @returns {Promise} Promise object tha will return the value of the selected option.
+   * @throws Will throw an error if the select is not found.
+   */
+  async getSelectedValueById(selectId) {
+    try {
+      const script = `const select = document.getElementById('${selectId}'); return select.options[select.selectedIndex].value;`;
+      const value = await this.browser.runScript(script, 'CUSTOM');
+      return value;
+    } catch (e) {
+      log.error('Could not select value for select with id %s', selectId);
+      log.verbose(e);
+      throw Error(`Could not select value for select with id ${selectId}`);
+    }
+  }
+}
+module.exports = Select;

package/lib/core/engine/iteration.js

@@ -21,6 +21,7 @@ const Set = require('./command/set.js');
 const Cache = require('./command/cache.js');
 const Meta = require('./command/meta.js');
 const StopWatch = require('./command/stopWatch.js');
+const Select = require('./command/select.js');
 const AndroidCommand = require('./command/android.js');
 const ChromeDevToolsProtocol = require('./command/chromeDevToolsProtocol.js');
 const { addConnectivity, removeConnectivity } = require('../../connectivity');
@@ -172,7 +173,8 @@ class Iteration {
           singleClick: new SingleClick(browser, this.pageCompleteCheck),
           doubleClick: new DoubleClick(browser, this.pageCompleteCheck),
           clickAndHold: new ClickAndHold(browser)
-        }
+        },
+        select: new Select(browser)
       };
 
       // Safari can't load data:text URLs at startup, so you can either choose

package/lib/firefox/webdriver/firefox.js

@@ -55,7 +55,21 @@ class Firefox {
   /**
    * Before the first iteration of your tests start.
    */
-  async beforeStartIteration() {}
+  async beforeStartIteration(runner) {
+    if (
+      this.firefoxConfig.appendToUserAgent ||
+      this.options.appendToUserAgent
+    ) {
+      const currentUserAgent = await runner.runScript(
+        'return navigator.userAgent;',
+        'GET_USER_AGENT'
+      );
+      let script = `Services.prefs.setStringPref('general.useragent.override', '${currentUserAgent} ${
+        this.firefoxConfig.appendToUserAgent || this.options.appendToUserAgent
+      }');`;
+      return runner.runPrivilegedScript(script, 'SET_USER_AGENT');
+    }
+  }
 
   /**
    * Before each URL/test runs.

package/lib/support/cli.js

@@ -361,6 +361,11 @@ module.exports.parseCommandLine = function parseCommandLine() {
       group: 'firefox'
     })
 
+    .option('firefox.appendToUserAgent', {
+      type: 'string',
+      describe: 'Append to the user agent.',
+      group: 'firefox'
+    })
     .option('firefox.nightly', {
       describe:
         'Use Firefox Nightly. Works on OS X. For Linux you need to set the binary path.',
@@ -977,7 +982,7 @@ module.exports.parseCommandLine = function parseCommandLine() {
       type: 'array',
       default: [0, 10, 90, 99, 100],
       describe:
-        'The percentile values within the data browsertime will calculate and report.'
+        'The percentile values within the data browsertime will calculate and report. This argument uses Yargs arrays and you you to set them correctly it is recommended to use a configuraration file instead.'
     })
     .option('decimals', {
       type: 'number',
@@ -1019,6 +1024,10 @@ module.exports.parseCommandLine = function parseCommandLine() {
     .option('userAgent', {
       describe: 'Override user agent'
     })
+    .option('appendToUserAgent', {
+      describe:
+        'Append a String to the user agent. Works in Chrome/Edge and Firefox.'
+    })
     .option('silent', {
       alias: 'q',
       type: 'count',

package/package.json

@@ -1,12 +1,12 @@
 {
   "description": "Browsertime",
-  "version": "14.14.0",
+  "version": "14.17.0",
   "bin": "./bin/browsertime.js",
   "dependencies": {
     "@sitespeed.io/throttle": "3.0.0",
     "@devicefarmer/adbkit": "2.11.3",
     "btoa": "1.2.1",
-    "@sitespeed.io/chromedriver": "97.0.4692-71",
+    "@sitespeed.io/chromedriver": "97.0.4692-7b",
     "chrome-har": "0.12.0",
     "chrome-remote-interface": "0.31.0",
     "dayjs": "1.10.7",
@@ -24,7 +24,7 @@
     "lodash.set": "4.3.2",
     "selenium-webdriver": "4.1.0",
     "@sitespeed.io/edgedriver": "95.0.1020-30",
-    "@sitespeed.io/geckodriver": "0.29.1-2",
+    "@sitespeed.io/geckodriver": "0.29.1-3",
     "@sitespeed.io/tracium": "0.3.3",
     "speedline-core": "1.4.3",
     "@cypress/xvfb": "1.2.4",