browsertime 26.3.2 → 27.0.1

package/lib/support/getViewPort.js

@@ -29,9 +29,14 @@ const sizeMap = {
   'iPhone 12 Pro': '390x844',
   'iPhone 14 Pro': '430x932',
   'iPhone 14 Pro Max': '430x932',
+  'Pixel 3': '394x786',
+  'Pixel 3 XL': '394x786',
+  'Pixel 4': '354x746',
   'Pixel 5': '394x852',
   'Pixel 7': '412x916',
+  'Moto G Power': '412x824',
   'Samsung Galaxy S8+': '412x846',
+  'Samsung Galaxy S20 Ultra': '412x916',
   'Samsung Galaxy A51/71': '412x914'
 };
 

package/lib/support/har/index.js

@@ -61,7 +61,8 @@ function addExtrasToHAR(
   visualMetricsData,
   timings,
   cpu,
-  googleWebVitals
+  googleWebVitals,
+  pageinfo
 ) {
   const harPageTimings = harPage.pageTimings;
 
@@ -129,6 +130,41 @@ function addExtrasToHAR(
     harPageTimings._domContentLoadedTime =
       timings.pageTimings.domContentLoadedTime;
   }
+
+  // Long-task ranges as a `_longTasks` extension on pageTimings. Each
+  // entry is `[startMs, endMs]`, the format consumed by WebPageTest-derived
+  // waterfall viewers (e.g. waterfall-tools). Tri-state presence semantic:
+  // a non-empty array draws individual blocked spans; an empty array
+  // signals "instrumented, observed nothing"; field absent means "parser
+  // can't instrument". Browsertime always instruments via PerformanceObserver
+  // when the page-info script runs, so always emit the array (possibly
+  // empty) when `pageinfo.longTask` exists.
+  if (pageinfo && Array.isArray(pageinfo.longTask)) {
+    harPageTimings._longTasks = pageinfo.longTask.map(t => [
+      Number(t.startTime),
+      Number(t.startTime + t.duration)
+    ]);
+  }
+
+  // User-timing marks + measures as a `_userTimings` extension on
+  // pageTimings. Object keyed by entry name so a downstream waterfall
+  // renderer can paint each as a vertical line. Measures override marks
+  // on name collision.
+  const userTimings = timings && timings.userTimings;
+  if (
+    userTimings &&
+    ((userTimings.marks && userTimings.marks.length > 0) ||
+      (userTimings.measures && userTimings.measures.length > 0))
+  ) {
+    const map = {};
+    for (const mark of userTimings.marks || []) {
+      if (mark && mark.name) map[mark.name] = mark.startTime;
+    }
+    for (const measure of userTimings.measures || []) {
+      if (measure && measure.name) map[measure.name] = measure.startTime;
+    }
+    if (Object.keys(map).length > 0) harPageTimings._userTimings = map;
+  }
 }
 
 function addMetaToHAR(index, harPage, url, browserScript, options) {
@@ -354,7 +390,8 @@ export function addExtraFieldsToHar(totalResults, har, options) {
             visualMetric,
             browserScript.timings,
             cpu,
-            googleWebVitals
+            googleWebVitals,
+            browserScript.pageinfo
           );
         }
         harPageNumber++;
@@ -392,7 +429,8 @@ export function addExtraFieldsToHar(totalResults, har, options) {
               visualMetric,
               browserScript.timings,
               cpu,
-              googleWebVitals
+              googleWebVitals,
+              browserScript.pageinfo
             );
           }
         }

package/lib/support/usbPower.js

@@ -1,9 +1,8 @@
 export async function loadUsbPowerProfiler() {
   try {
     // usb-power-profiling/usb-power-profiling.js exports a default, so we destructure it
-    const { default: usbPowerProfiler } = await import(
-      'usb-power-profiling/usb-power-profiling.js'
-    );
+    const { default: usbPowerProfiler } =
+      await import('usb-power-profiling/usb-power-profiling.js');
     return usbPowerProfiler;
   } catch {
     return;

package/lib/video/postprocessing/finetune/addTextToVideo.js

@@ -39,6 +39,10 @@ export async function addTextToVideo(
     fontSize = 32;
   }
 
+  if (options.safari && options.safari.ios) {
+    fontSize = 40;
+  }
+
   arguments_.push(
     '-vf',
     `drawtext=${fontFile}x=w/2-(tw/2): y=H-h/10:fontcolor=white:fontsize=h/${fontSize}:box=1:boxcolor=0x000000AA:text='%{pts\\:hms}'${allTimingMetrics}`,

package/lib/video/postprocessing/finetune/getFont.js

@@ -6,7 +6,7 @@ export function getFont(options) {
     const systemFontFile = '/System/Library/Fonts/SFNSMono.ttf';
     try {
       if (existsSync(systemFontFile)) {
-        return systemFontFile + ':';
+        return `fontfile=${systemFontFile}:`;
       }
       return '';
     } catch {
@@ -18,7 +18,7 @@ export function getFont(options) {
       '/usr/share/fonts/truetype/dejavu/DejaVuSansMono.ttf';
     try {
       if (existsSync(systemFontFile)) {
-        return systemFontFile + ':';
+        return `fontfile=${systemFontFile}:`;
       }
       return '';
     } catch {
@@ -26,6 +26,6 @@ export function getFont(options) {
     }
   } else
     return options.videoParams.fontPath
-      ? options.videoParams.fontPath + ':'
+      ? `fontfile=${options.videoParams.fontPath}:`
       : '';
 }

package/lib/video/postprocessing/finetune/getTimingMetrics.js

@@ -23,6 +23,10 @@ function get(metric, metricName, pos, options) {
     fontSize = 32;
     x = 10;
   }
+  if (options.safari && options.safari.ios) {
+    fontSize = 40;
+    x = 12;
+  }
 
   // H-h/8
   return `drawtext=${fontFile}enable='between(t,${
@@ -78,6 +82,9 @@ export function getTimingMetrics(videoMetrics, timingMetrics, options) {
   if (options.safari && options.safari.useSimulator) {
     posOffset = 24;
   }
+  if (options.safari && options.safari.ios) {
+    posOffset = 28;
+  }
 
   for (let metricAndValue of metricsAndValues) {
     text += ',' + get(metricAndValue.value, metricAndValue.name, pos, options);

package/lib/video/postprocessing/finetune/index.js

@@ -72,15 +72,32 @@ export async function finetuneVideo(
 
   if (options.videoParams.addTimer) {
     const temporaryFile2 = path.join(videoDir, 'tmp2.mp4');
-    await addTextToVideo(
-      temporaryFile,
-      temporaryFile2,
-      videoMetrics,
-      timingMetrics,
-      options
-    );
-    await rename(temporaryFile2, videoPath);
-    await unlink(temporaryFile);
+    try {
+      await addTextToVideo(
+        temporaryFile,
+        temporaryFile2,
+        videoMetrics,
+        timingMetrics,
+        options
+      );
+      await rename(temporaryFile2, videoPath);
+      await unlink(temporaryFile);
+    } catch (error) {
+      // Most commonly hit when the local ffmpeg lacks the drawtext
+      // filter (e.g. homebrew's stripped ffmpeg 8 build without
+      // libfreetype). Save the un-overlaid video so the rest of the
+      // run still produces useful output.
+      log.warn(
+        'Could not add text overlay to video, saving without metric labels. %s',
+        error.shortMessage || error.message
+      );
+      await rename(temporaryFile, videoPath);
+      try {
+        await unlink(temporaryFile2);
+      } catch {
+        // tmp2 may not exist if ffmpeg never opened the output
+      }
+    }
   } else {
     await rename(temporaryFile, videoPath);
   }

package/lib/video/screenRecording/ios/iosDeviceRecorder.js

@@ -0,0 +1,109 @@
+import path from 'node:path';
+import fs from 'node:fs';
+import { getLogger } from '@sitespeed.io/log';
+
+const log = getLogger('browsertime.video');
+
+/**
+ * Records the screen of an iOS device connected via USB.
+ *
+ * Uses the ios-capture server process that was started by the
+ * Safari delegate in beforeBrowserStart(). The server accepts
+ * START/STOP commands via stdin to control recording per iteration.
+ */
+export class IOSDeviceRecorder {
+  constructor(options, baseDir) {
+    this.options = options;
+    this.baseDir = baseDir;
+    this.responseBuffer = '';
+  }
+
+  /**
+   * Start recording to a temporary file.
+   */
+  async start() {
+    const captureProcess = this.options._iosCaptureProcess;
+    if (!captureProcess) {
+      log.error('ios-capture server not running');
+      return;
+    }
+
+    // Set up response listener if not already done
+    if (!this._listeningForResponses) {
+      captureProcess.stdout.on('data', data => {
+        this.responseBuffer += data.toString();
+      });
+      this._listeningForResponses = true;
+    }
+
+    const tmpVideo = path.join(this.baseDir, 'ios-tmp-video.mp4');
+    this.tmpVideo = tmpVideo;
+
+    captureProcess.stdin.write(`START ${tmpVideo}\n`);
+
+    // Wait for RECORDING response
+    await this._waitForResponse('RECORDING', 10_000);
+    log.debug('iOS recording started');
+  }
+
+  /**
+   * Stop the current recording and move the video to the destination.
+   */
+  async stop(destination) {
+    log.debug('Stop iOS device recorder');
+
+    const captureProcess = this.options._iosCaptureProcess;
+    if (captureProcess) {
+      captureProcess.stdin.write('STOP\n');
+      await this._waitForResponse('STOPPED', 10_000);
+    }
+
+    // Wait for ffmpeg to finish writing
+    await new Promise(r => setTimeout(r, 1000));
+
+    if (!destination) {
+      return;
+    }
+
+    try {
+      await fs.promises.rename(this.tmpVideo, destination);
+    } catch {
+      try {
+        await fs.promises.copyFile(this.tmpVideo, destination);
+        await fs.promises.unlink(this.tmpVideo);
+      } catch (error) {
+        log.error('Could not move video: %s', error.message);
+      }
+    }
+
+    log.debug('Video saved to %s', destination);
+  }
+
+  /**
+   * Wait for a specific response from ios-capture stdout.
+   */
+  async _waitForResponse(expected, timeoutMs) {
+    const start = Date.now();
+    while (Date.now() - start < timeoutMs) {
+      if (this.responseBuffer.includes(expected)) {
+        const index = this.responseBuffer.indexOf(expected);
+        this.responseBuffer = this.responseBuffer
+          .slice(index + expected.length)
+          .trim();
+        return true;
+      }
+      if (this.responseBuffer.includes('ERROR')) {
+        const errorMsg = this.responseBuffer.trim();
+        this.responseBuffer = '';
+        throw new Error(`ios-capture error: ${errorMsg}`);
+      }
+      await new Promise(r => setTimeout(r, 100));
+    }
+    log.error(
+      'Timeout waiting for "%s" from ios-capture (buffer: %s)',
+      expected,
+      this.responseBuffer
+    );
+    return false;
+  }
+}

package/lib/video/screenRecording/recorder.js

@@ -3,7 +3,7 @@ import { AndroidRecorder } from './android/recorder.js';
 import { DesktopRecorder } from './desktop/desktopRecorder.js';
 import { FirefoxWindowRecorder } from './firefox/firefoxWindowRecorder.js';
 import { IOSSimulatorRecorder } from './iosSimulator/recorder.js';
-import { IOSRecorder } from './ios/iosRecorder.js';
+import { IOSDeviceRecorder } from './ios/iosDeviceRecorder.js';
 
 export function getRecorder(options, browser, baseDir) {
   if (
@@ -27,7 +27,7 @@ export function getRecorder(options, browser, baseDir) {
   }
 
   if (options.browser === 'safari' && options.safari && options.safari.ios) {
-    return new IOSRecorder(options, baseDir);
+    return new IOSDeviceRecorder(options, baseDir);
   }
 
   return new DesktopRecorder(options);

package/lib/video/screenRecording/setOrangeBackground.js

@@ -6,6 +6,9 @@ export async function setOrangeBackground(driver) {
   // We tried other ways for Android (access an orange page)
   // That works fine ... but break scripts
   // https://github.com/sitespeedio/browsertime/issues/802
+  // Wait for document.body to exist before trying to add the orange overlay
+  await driver.wait(until.elementsLocated(By.css('body')));
+
   const orangeScript = `
         (function() {
           const orange = document.createElement('div');

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "browsertime",
   "description": "Get performance metrics from your web page using Browsertime.",
-  "version": "26.3.2",
+  "version": "27.0.1",
   "bin": "./bin/browsertime.js",
   "type": "module",
   "types": "./types/scripting.d.ts",
@@ -13,31 +13,31 @@
     "@sitespeed.io/log": "1.0.0",
     "@sitespeed.io/throttle": "5.0.1",
     "@sitespeed.io/tracium": "0.3.3",
-    "chrome-har": "1.1.1",
+    "chrome-har": "1.2.1",
     "chrome-remote-interface": "0.33.3",
-    "execa": "9.6.0",
+    "execa": "9.6.1",
     "fast-stats": "0.0.7",
     "ff-test-bidi-har-export": "0.0.22",
     "lodash.merge": "4.6.2",
-    "selenium-webdriver": "4.39.0",
+    "selenium-webdriver": "4.43.0",
     "yargs": "18.0.0"
   },
   "optionalDependencies": {
-    "jimp": "1.6.0",
+    "jimp": "1.6.1",
     "usb-power-profiling": "1.6.0"
   },
   "devDependencies": {
-    "@types/selenium-webdriver": "4.35.1",
+    "@types/selenium-webdriver": "4.35.5",
     "ava": "6.4.1",
-    "clean-jsdoc-theme": "4.3.0",
+    "clean-jsdoc-theme": "4.3.2",
     "eslint": "9.37.0",
     "eslint-config-prettier": "10.1.8",
-    "eslint-plugin-prettier": "5.5.4",
+    "eslint-plugin-prettier": "5.5.5",
     "eslint-plugin-unicorn": "61.0.2",
     "jsdoc": "4.0.5",
-    "prettier": "3.6.2",
-    "serve": "14.2.5",
-    "serve-handler": "6.1.6",
+    "prettier": "3.8.3",
+    "serve": "14.2.6",
+    "serve-handler": "6.1.7",
     "typescript": "5.9.3"
   },
   "engines": {

package/types/core/engine/command/addText.d.ts

@@ -4,65 +4,94 @@
  * @hideconstructor
  */
 export class AddText {
-    constructor(browser: any);
+    constructor(browser: any, options: any);
     /**
      * @private
      */
     private browser;
+    /**
+     * @private
+     */
+    private options;
+    /**
+     * @private
+     */
+    private _waitForElement;
+    /**
+     * @private
+     */
+    private _getUrl;
+    /**
+     * Adds text to an element using a unified selector string.
+     * Supports CSS selectors (default), and prefix-based strategies:
+     * 'id:myId', 'xpath://input', 'name:email', 'class:input-field'.
+     *
+     * @async
+     * @param {string} selector - The selector string. CSS by default, or use a prefix.
+     * @param {string} text - The text string to add.
+     * @returns {Promise<void>} A promise that resolves when the text has been added.
+     * @throws {Error} Throws an error if the element is not found.
+     */
+    run(selector: string, text: string): Promise<void>;
     /**
      * Adds text to an element identified by its ID.
      *
      * @async
+     * @private
      * @example commands.addText.byId('mytext', 'id');
      * @param {string} text - The text string to add.
      * @param {string} id - The ID of the element.
      * @returns {Promise<void>} A promise that resolves when the text has been added.
      * @throws {Error} Throws an error if the element is not found.
      */
-    byId(text: string, id: string): Promise<void>;
+    private byId;
     /**
      * Adds text to an element identified by its XPath.
      *
      * @async
+     * @private
      * @example commands.addText.byXpath('mytext', 'xpath');
      * @param {string} text - The text string to add.
      * @param {string} xpath - The XPath of the element.
      * @returns {Promise<void>} A promise that resolves when the text has been added.
      * @throws {Error} Throws an error if the element is not found.
      */
-    byXpath(text: string, xpath: string): Promise<void>;
+    private byXpath;
     /**
      * Adds text to an element identified by its CSS selector.
      *
      * @async
+     * @private
      * @example commands.addText.bySelector('mytext', 'selector');
      * @param {string} text - The text string to add.
      * @param {string} selector - The CSS selector of the element.
      * @returns {Promise<void>} A promise that resolves when the text has been added.
      * @throws {Error} Throws an error if the element is not found.
      */
-    bySelector(text: string, selector: string): Promise<void>;
+    private bySelector;
     /**
      * Adds text to an element identified by its class name.
      *
      * @async
+     * @private
      * @example commands.addText.byClassName('mytext', 'className');
      * @param {string} text - The text string to add.
      * @param {string} className - The class name of the element.
      * @returns {Promise<void>} A promise that resolves when the text has been added.
      * @throws {Error} Throws an error if the element is not found.
      */
-    byClassName(text: string, className: string): Promise<void>;
+    private byClassName;
     /**
      * Adds text to an element identified by its name attribute.
      *
      * @async
+     * @private
      * @example commands.addText.byName('mytext', 'name');
      * @param {string} text - The text string to add.
      * @param {string} name - The name attribute of the element.
      * @returns {Promise<void>} A promise that resolves when the text has been added.
      * @throws {Error} Throws an error if the element is not found.
      */
-    byName(text: string, name: string): Promise<void>;
+    private byName;
 }
 //# sourceMappingURL=addText.d.ts.map

package/types/core/engine/command/addText.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"addText.d.ts","sourceRoot":"","sources":["../../../../lib/core/engine/command/addText.js"],"names":[],"mappings":"AAIA;;;;GAIG;AACH;IACE,0BAKC;IAJC;;OAEG;IACH,gBAAsB;IAGxB;;;;;;;;;OASG;IACH,WALW,MAAM,MACN,MAAM,GACJ,OAAO,CAAC,IAAI,CAAC,CAoBzB;IAED;;;;;;;;;OASG;IACH,cALW,MAAM,SACN,MAAM,GACJ,OAAO,CAAC,IAAI,CAAC,CAoBzB;IAED;;;;;;;;;OASG;IACH,iBALW,MAAM,YACN,MAAM,GACJ,OAAO,CAAC,IAAI,CAAC,CAoBzB;IAED;;;;;;;;;OASG;IACH,kBALW,MAAM,aACN,MAAM,GACJ,OAAO,CAAC,IAAI,CAAC,CAoBzB;IAED;;;;;;;;;OASG;IACH,aALW,MAAM,QACN,MAAM,GACJ,OAAO,CAAC,IAAI,CAAC,CAoBzB;CACF"}
+{"version":3,"file":"addText.d.ts","sourceRoot":"","sources":["../../../../lib/core/engine/command/addText.js"],"names":[],"mappings":"AAMA;;;;GAIG;AACH;IACE,wCASC;IARC;;OAEG;IACH,gBAAsB;IACtB;;OAEG;IACH,gBAAsB;IAGxB;;OAEG;IACH,wBAKC;IAED;;OAEG;IACH,gBAMC;IAED;;;;;;;;;;OAUG;IACH,cALW,MAAM,QACN,MAAM,GACJ,OAAO,CAAC,IAAI,CAAC,CAkBzB;IAED;;;;;;;;;;OAUG;IACH,aAoBC;IAED;;;;;;;;;;OAUG;IACH,gBAoBC;IAED;;;;;;;;;;OAUG;IACH,mBAsBC;IAED;;;;;;;;;;OAUG;IACH,oBAsBC;IAED;;;;;;;;;;OAUG;IACH,eAsBC;CACF"}