Merge branch 'main' into requestHeaders

.github/workflows/unittests.yml

@@ -13,7 +13,7 @@ jobs:
       fail-fast: false
       matrix:
         browser: ['chrome', 'firefox']
-        node-version: [18.x, 20.x]
+        node-version: [18.x, 20.x, 22.x]
     steps:
     - uses: actions/checkout@v4
     - name: Use Node.js ${{ matrix.node-version }}

CHANGELOG.md

@@ -1,5 +1,25 @@
 # Browsertime changelog (we do [semantic versioning](https://semver.org))
 
+## 22.5.0 - 2024-06-14
+### Added
+* Updated the Docker container to include Chrome 126 and Firefox 127. Chromedriver has been updated to 126 [#2141](https://github.com/sitespeedio/browsertime/pull/2141).
+
+## 22.4.1 - 2024-06-07
+### Fixed
+* Make sure the engine is stopped before the extra video/profile run [#2140](https://github.com/sitespeedio/browsertime/pull/2140).
+
+## 22.4.0 - 2024-06-06
+### Added
+* Use `--enableVideoRun` to get one extra run with a video and visual metrics [#2139](https://github.com/sitespeedio/browsertime/pull/2139)
+
+## 22.3.0 - 2024-06-04
+### Added
+* Add the ability to gather power usage measurements on Android from USB power meters, thank you [Gregory Mierzwinski](https://github.com/gmierz) for PR [#2134](https://github.com/sitespeedio/browsertime/pull/2134).
+* Add support to visualmetrics to identify key frames matching the given colors, thank you [aosmond](https://github.com/aosmond) for PR [#2119](https://github.com/sitespeedio/browsertime/pull/2119).
+
+### Fixed
+* Removed DOMContentFlushed for Firefox thank you [florinbilt](https://github.com/florinbilt) for PR [#2138](https://github.com/sitespeedio/browsertime/pull/2138).
+
 ## 22.2.0 - 2024-05-24
 ### Added
 * New command: Mouse single click on a element with a specific id `commands.mouse.singleClick.byId(id)` and `commands.mouse.singleClick.byIdAndWait(id)` [#2135](https://github.com/sitespeedio/browsertime/pull/2135).

Dockerfile

@@ -1,4 +1,4 @@
-FROM sitespeedio/webbrowsers:chrome-125.0-firefox-126.0-edge-125.0
+FROM sitespeedio/webbrowsers:chrome-126.0-firefox-127.0-edge-125.0
 
 ARG TARGETPLATFORM=linux/amd64
 

bin/browsertime.js

@@ -123,27 +123,6 @@ async function run(urls, options) {
         );
       }
 
-      if (options.enableProfileRun) {
-        log.info('Make one extra run to collect trace information');
-        options.iterations = 1;
-        if (options.browser === 'firefox') {
-          options.firefox.geckoProfiler = true;
-        } else if (options.browser === 'chrome') {
-          options.chrome.timeline = true;
-          options.cpu = true;
-          options.chrome.enableTraceScreenshots = true;
-          options.chrome.traceCategory = [
-            'disabled-by-default-v8.cpu_profiler'
-          ];
-        }
-        options.video = false;
-        options.visualMetrics = false;
-        const traceEngine = new Engine(options);
-        await traceEngine.start();
-        await traceEngine.runMultiple(urls, scriptsByCategory);
-        await traceEngine.stop();
-      }
-
       await Promise.all(saveOperations);
 
       const resultDirectory = relative(process.cwd(), storageManager.directory);
@@ -173,6 +152,41 @@ async function run(urls, options) {
         process.exitCode = 1;
       }
     }
+
+    if (options.enableProfileRun || options.enableVideoRun) {
+      log.info('Make one extra run to collect trace/video information');
+      options.iterations = 1;
+      if (options.enableProfileRun) {
+        if (options.browser === 'firefox') {
+          options.firefox.geckoProfiler = true;
+        } else if (options.browser === 'chrome') {
+          options.chrome.timeline = true;
+          options.cpu = true;
+          options.chrome.enableTraceScreenshots = true;
+          options.chrome.traceCategory = [
+            'disabled-by-default-v8.cpu_profiler'
+          ];
+        }
+      }
+      if (options.enableVideoRun) {
+        if (options.video === true) {
+          log.error(
+            'You can only configure video run if you do not collect any video'
+          );
+          // This is a hack to not get an error
+          options.video = false;
+          options.visualMetrics = false;
+        } else {
+          options.video = true;
+          options.visualMetrics = true;
+        }
+      }
+      const traceEngine = new Engine(options);
+      await traceEngine.start();
+      await traceEngine.runMultiple(urls, scriptsByCategory);
+      await traceEngine.stop();
+      log.info('Extra run finished');
+    }
   } catch (error) {
     log.error('Error running browsertime', error);
     process.exitCode = 1;

lib/chrome/webdriver/setupChromiumOptions.js

@@ -172,6 +172,10 @@ export function setupChromiumOptions(
     }
   }
 
+  if (browserOptions.enableVideoAutoplay) {
+    seleniumOptions.addArguments('--autoplay-policy=no-user-gesture-required');
+  }
+
   // It's a new splash screen introduced in Chrome 98
   // for new profiles
   // disable it with ChromeWhatsNewUI

lib/core/engine/iteration.js

@@ -15,7 +15,10 @@ import {
   addConnectivity,
   removeConnectivity
 } from '../../connectivity/index.js';
-import { jsonifyVisualProgress } from '../../support/util.js';
+import {
+  jsonifyVisualProgress,
+  jsonifyKeyColorFrames
+} from '../../support/util.js';
 import { flushDNS } from '../../support/dns.js';
 
 import { getNumberOfRunningProcesses } from '../../support/processes.js';
@@ -232,6 +235,12 @@ export class Iteration {
                 );
               }
             }
+            if (videoMetrics.visualMetrics['KeyColorFrames']) {
+              videoMetrics.visualMetrics['KeyColorFrames'] =
+                jsonifyKeyColorFrames(
+                  videoMetrics.visualMetrics['KeyColorFrames']
+                );
+            }
             result[index_].videoRecordingStart =
               videoMetrics.videoRecordingStart;
             result[index_].visualMetrics = videoMetrics.visualMetrics;

lib/support/cli.js

@@ -274,6 +274,11 @@ export function parseCommandLine() {
       type: 'boolean',
       group: 'chrome'
     })
+    .option('chrome.enableVideoAutoplay', {
+      describe: 'Allow videos to autoplay.',
+      type: 'boolean',
+      group: 'chrome'
+    })
     .option('chrome.timeline', {
       alias: 'chrome.trace',
       describe:
@@ -609,6 +614,11 @@ export function parseCommandLine() {
       describe:
         'Make one extra run that collects the profiling trace log (no other metrics is collected). For Chrome it will collect the timeline trace, for Firefox it will get the Geckoprofiler trace. This means you do not need to get the trace for all runs and can skip the overhead it produces.'
     })
+    .option('enableVideoRun', {
+      type: 'boolean',
+      describe:
+        'Make one extra run that collects video and visual metrics. This means you can do your runs with --visualMetrics true --video false --enableVideoRun true to collect visual metrics from all runs and save a video from the profile/video run. If you run it together with --enableProfileRun it will also collect profiling trace.'
+    })
     .option('video', {
       type: 'boolean',
       describe:
@@ -718,6 +728,12 @@ export function parseCommandLine() {
       describe:
         'Use the portable visual-metrics processing script (no ImageMagick dependencies).'
     })
+    .option('visualMetricsKeyColor', {
+      type: 'array',
+      nargs: 8,
+      describe:
+        'Collect Key Color frame metrics when you run --visualMetrics. Each --visualMetricsKeyColor supplied must have 8 arguments: key name, red channel (0-255) low and high, green channel (0-255) low and high, blue channel (0-255) low and high, fraction (0.0-1.0) of pixels that must match each channel.'
+    })
     .option('scriptInput.visualElements', {
       describe:
         'Include specific elements in visual elements. Give the element a name and select it with document.body.querySelector. Use like this: --scriptInput.visualElements name:domSelector see https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors. Add multiple instances to measure multiple elements. Visual Metrics will use these elements and calculate when they are visible and fully rendered.'

lib/support/util.js

@@ -230,6 +230,29 @@ export function jsonifyVisualProgress(visualProgress) {
   }
   return visualProgress;
 }
+export function jsonifyKeyColorFrames(keyColorFrames) {
+  // Original data looks like
+  //  "FrameName1=[0-133 255-300], FrameName2=[133-255] FrameName3=[]"
+  if (typeof keyColorFrames === 'string') {
+    const keyColorFramesObject = {};
+    for (const keyColorPair of keyColorFrames.split(', ')) {
+      const [name, values] = keyColorPair.split('=');
+      keyColorFramesObject[name] = [];
+      const rangePairs = values.replace('[', '').replace(']', '');
+      if (rangePairs) {
+        for (const rangePair of rangePairs.split(' ')) {
+          const [start, end] = rangePair.split('-');
+          keyColorFramesObject[name].push({
+            startTimestamp: Number.parseInt(start, 10),
+            endTimestamp: Number.parseInt(end, 10)
+          });
+        }
+      }
+    }
+    return keyColorFramesObject;
+  }
+  return keyColorFrames;
+}
 export function adjustVisualProgressTimestamps(
   visualProgress,
   profilerStartTime,

lib/video/postprocessing/visualmetrics/visualMetrics.js

@@ -84,6 +84,15 @@ export async function run(
     scriptArguments.push('--contentful');
   }
 
+  if (options.visualMetricsKeyColor) {
+    for (let i = 0; i < options.visualMetricsKeyColor.length; ++i) {
+      if (i % 8 == 0) {
+        scriptArguments.push('--keycolor');
+      }
+      scriptArguments.push(options.visualMetricsKeyColor[i]);
+    }
+  }
+
   // There seems to be a bug with --startwhite that makes VM bail out
   // 11:20:14.950 - Calculating image histograms
   // 11:20:14.951 - No video frames found in /private/var/folders/27/xpnvcsbs0nlfbb4qq397z3rh0000gn/T/vis-cn_JMf

package.json

@@ -1,14 +1,14 @@
 {
   "name": "browsertime",
   "description": "Get performance metrics from your web page using Browsertime.",
-  "version": "22.2.0",
+  "version": "22.5.0",
   "bin": "./bin/browsertime.js",
   "type": "module",
   "types": "./types/scripting.d.ts",
   "dependencies": {
     "@cypress/xvfb": "1.2.4",
     "@devicefarmer/adbkit": "3.2.6",
-    "@sitespeed.io/chromedriver": "125.0.6422-60",
+    "@sitespeed.io/chromedriver": "126.0.6478-55",
     "@sitespeed.io/edgedriver": "125.0.2535-47",
     "@sitespeed.io/geckodriver": "0.34.0",
     "@sitespeed.io/throttle": "5.0.0",

types/android/index.d.ts

@@ -66,5 +66,10 @@ export class Android {
         'full-wifi': number;
         total: number;
     }>;
+    measureUsbPowerUsage(startTime: any, endTime: any): Promise<{
+        powerUsage: any;
+        baselineUsage: number;
+    }>;
+    getUsbPowerUsageProfile(index: any, url: any, result: any, options: any, storageManager: any): Promise<void>;
 }
 //# sourceMappingURL=index.d.ts.map

types/support/util.d.ts

@@ -2,5 +2,6 @@ export function formatMetric(name: any, metric: any, multiple: any, inMs: any, e
 export function logResultLogLine(results: any): void;
 export function toArray(arrayLike: any): any[];
 export function jsonifyVisualProgress(visualProgress: any): any;
+export function jsonifyKeyColorFrames(keyColorFrames: any): any;
 export function adjustVisualProgressTimestamps(visualProgress: any, profilerStartTime: any, recordingStartTime: any): any;
 //# sourceMappingURL=util.d.ts.map