browsertime 14.15.0 → 14.18.1

package/CHANGELOG.md

@@ -1,5 +1,37 @@
 # Browsertime changelog (we do [semantic versioning](https://semver.org))
 
+## 14.18.1 - 2022-01-24
+### Fixed
+* If loading a URL failed and we retry and we logged that as an info message, but you as a user only need to know if it fails after X retries. The log message now logs at debug level [#1701](https://github.com/sitespeedio/browsertime/pull/1701).
+* The summary log message `[2022-01-24 16:12:38] INFO: https://www.sitespeed.io 27 requests, TTFB: 962ms (σ917.00ms), firstPaint: 2.92s (σ3.07s), firstVisualChange: 2.94s (σ3.07s), FCP: 2.92s (σ3.07s), DOMContentLoaded: 3.22s (σ2.98s), LCP: 2.92s (σ3.07s), CLS: 0.0389 (σ0.03), TBT: 769ms (σ53.00ms), Load: 3.77s (σ3.12s), speedIndex: 2.96s (σ3.07s), visualComplete85: 2.95s (σ3.06s), lastVisualChange: 4.54s (σ3.30s) (21 runs)` that summaries all the runs used mean instead of median metric. That sucks when you do many runs and want to compare them. That is now fixed to show median number instead [#1700](https://github.com/sitespeedio/browsertime/pull/1700).
+
+## 14.18.0 - 2022-01-24
+### Added
+* Updated to Edge stable in the Docker container.
+
+### Fixed
+* A more safe way to get dockumentURI for Firefox. See PR [#1699](https://github.com/sitespeedio/browsertime/pull/1699) and bug [#1698](https://github.com/sitespeedio/browsertime/issues/1698).
+
+## 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).
+
+### Fixed
+* Remove the top 10 rows of the image to handle progress bars on some mobile browser recordings. Thank you [Gregory Mierzwinski](https://github.com/gmierz) for PR [#1687](https://github.com/sitespeedio/browsertime/pull/1687). 
+
+##  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.

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/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/core/seleniumRunner.js

@@ -222,9 +222,23 @@ class SeleniumRunner {
     // query parameters, order fragments, etc.  We don't want to change url itself 'cuz it can be
     // used for indexing collected data and it is possible that normalization could change a key.
     const normalizedURI = new URL(url).toString();
-    const startURI = new URL(
-      await driver.executeScript('return document.documentURI;')
-    ).toString();
+
+    // See  https://github.com/sitespeedio/browsertime/issues/1698
+    const retries = 5;
+    let documentURI;
+    for (var i = 0; i < retries; i++) {
+      documentURI = await driver.executeScript('return document.documentURI;');
+      if (documentURI != null) {
+        break;
+      }
+      await delay(1000);
+    }
+    let startURI;
+    try {
+      startURI = new URL(documentURI).toString();
+    } catch (e) {
+      log.error(`Failed to get documentURI ${documentURI}`, e);
+    }
     if (this.options.webdriverPageload) {
       const clearOrange = `(function() {
         const orange = document.getElementById('browsertime-orange');
@@ -297,7 +311,7 @@ class SeleniumRunner {
         } else {
           const waitTime = (this.options.retryWaitTime || 10000) * (i + 1);
           totalWaitTime += waitTime;
-          log.info(
+          log.debug(
             `URL ${url} failed to load, the ${
               this.options.browser
             } are still on ${startURI} , trying ${

package/lib/support/cli.js

@@ -982,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',

package/lib/support/util.js

@@ -16,7 +16,7 @@ module.exports = {
       } else return value;
     }
 
-    let formatted = `${name}: ${fmt(multiple ? metric.mean : metric)}`;
+    let formatted = `${name}: ${fmt(multiple ? metric.median : metric)}`;
     if (extras) {
       formatted += ` (σ${fmt(metric.stddev.toFixed(2))})`;
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "description": "Browsertime",
-  "version": "14.15.0",
+  "version": "14.18.1",
   "bin": "./bin/browsertime.js",
   "dependencies": {
     "@sitespeed.io/throttle": "3.0.0",
@@ -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",