browsertime 26.3.1 → 27.0.0

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

@@ -2,9 +2,7 @@ import path from 'node:path';
 import { getLogger } from '@sitespeed.io/log';
 import merge from 'lodash.merge';
 import { timestamp as _timestamp } from '../../../support/engineUtils.js';
-import { Video } from '../../../video/video.js';
 import { pathToFolder } from '../../../support/pathToFolder.js';
-import { setOrangeBackground } from '../../../video/screenRecording/setOrangeBackground.js';
 import {
   filterAllowlisted,
   filterBlocklisted
@@ -12,9 +10,8 @@ import {
 import { isAndroidConfigured, Android } from '../../../android/index.js';
 import { TCPDump } from '../../../support/tcpdump.js';
 import { getProperty } from '../../../support/util.js';
-import { lcpHighlightScript as highlightLargestContentfulPaint } from './util/lcpHighlightScript.js';
-import { clsHighlightScript as highlightLS } from './util/lsHighlightScript.js';
-const delay = ms => new Promise(res => setTimeout(res, ms));
+import { MeasureScreenshots } from './measure/screenshots.js';
+import { MeasureVideo } from './measure/video.js';
 const log = getLogger('browsertime.command.measure');
 
 // In some cases we could have one alias mapped to multiple URLs
@@ -38,7 +35,7 @@ function getNewResult() {
  * @hideconstructor
  */
 export class Measure {
-  constructor(
+  constructor({
     browser,
     index,
     pageCompleteCheck,
@@ -52,7 +49,7 @@ export class Measure {
     context,
     screenshotManager,
     options
-  ) {
+  }) {
     /**
      * @private
      */
@@ -77,22 +74,10 @@ export class Measure {
      * @private
      */
     this.options = options;
-    /**
-     * @private
-     */
-    this.screenshotManager = screenshotManager;
     /**
      * @private
      */
     this.storageManager = storageManager;
-    /**
-     * @private
-     */
-    this.recordVideo = options.visualMetrics || options.video;
-    /**
-     * @private
-     */
-    this.videos = videos;
     /**
      * @private
      */
@@ -132,64 +117,22 @@ export class Measure {
     /**
      * @private
      */
-    this.ANDROID_DELAY_TIME = getProperty(
-      options,
-      'orangeAndroidDelayTime',
-      2000
+    this.measureVideo = new MeasureVideo(
+      storageManager,
+      browser,
+      videos,
+      options
     );
     /**
      * @private
      */
-    this.IOS_DELAY_TIME = getProperty(options, 'orangeIosDelayTime', 1000);
-    /**
-     * @private
-     */
-    this.DESKTOP_DELAY_TIME = getProperty(
-      options,
-      'orangeDesktopDelayTime',
-      800
+    this.screenshots = new MeasureScreenshots(
+      browser,
+      screenshotManager,
+      options
     );
   }
 
-  /**
-   * Have a consistent way of starting the video
-   * @private
-   */
-  async _startVideo(numberOfMeasuredPages, index) {
-    this.video = new Video(this.storageManager, this.options, this.browser);
-
-    if (this.options.firefox && this.options.firefox.windowRecorder) {
-      // The Firefox window recorder will only record subsequent
-      // changes after recording has begun.  So the orange frame needs
-      // to come after we start recording.
-      await this.video.record(numberOfMeasuredPages, index);
-      await setOrangeBackground(this.browser.getDriver(), this.options);
-    } else {
-      await setOrangeBackground(this.browser.getDriver(), this.options);
-      await this.video.record(numberOfMeasuredPages, index);
-    }
-
-    // Give ffmpeg/video on phone time to settle
-    if (isAndroidConfigured(this.options)) {
-      return delay(this.ANDROID_DELAY_TIME);
-    } else if (this.options.safari && this.options.safari.useSimulator) {
-      return delay(this.IOS_DELAY_TIME);
-    } else {
-      return delay(this.DESKTOP_DELAY_TIME);
-    }
-  }
-
-  /**
-   * Have a consistent way of starting stopping the video
-   * @private
-   */
-  async _stopVideo(url) {
-    if (this.recordVideo && !this.options.videoParams.debug) {
-      await this.video.stop(url);
-      this.videos.push(this.video);
-    }
-  }
-
   /**
    * Have a consistent way of adding an error
    * @private
@@ -322,8 +265,16 @@ export class Measure {
         .executeScript('window.performance.clearResourceTimings();');
     }
 
-    if (this.recordVideo && !this.options.videoParams.debug) {
-      await this._startVideo(this.numberOfMeasuredPages, this.index);
+    // Record current soft navigation count so browser scripts
+    // only collect entries from this measurement
+    await this.browser
+      .getDriver()
+      .executeScript(
+        'window.__bt_softNavCount = (performance.getEntriesByType("soft-navigation") || []).length;'
+      );
+
+    if (this.measureVideo.shouldRecord()) {
+      await this.measureVideo.start(this.numberOfMeasuredPages, this.index);
       // if we do not have the URL, we should remove the orange and
       // start meausuring because the user themself will navigate to
       // the URL that will be tested.
@@ -363,7 +314,7 @@ export class Measure {
         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);
+        await this.measureVideo.stop(url);
         throw error;
       }
     } else {
@@ -387,7 +338,7 @@ export class Measure {
     // Remove the last result
     this.result.pop();
 
-    await this._stopVideo();
+    await this.measureVideo.stop();
 
     if (this.options.tcpdump) {
       await this.tcpDump.stop();
@@ -395,6 +346,31 @@ export class Measure {
 
     return;
   }
+
+  /**
+   * @private
+   */
+  setClick(click) {
+    this._click = click;
+  }
+
+  /**
+   * Starts a measurement, clicks on an element matching the given CSS selector,
+   * waits for the page complete check, and stops the measurement. This is
+   * a shortcut for the common pattern of measure.start/click/measure.stop.
+   *
+   * @async
+   * @param {string} alias - The friendly name for this measurement.
+   * @param {string} selector - The CSS selector of the element to click.
+   * @returns {Promise} A promise that resolves with the collected metrics data.
+   * @throws {Error} Throws an error if the element is not found or the measurement fails.
+   */
+  async clickAndMeasure(alias, selector) {
+    await this.start(alias);
+    await this._click.bySelectorAndWait(selector);
+    return this.stop();
+  }
+
   /**
    * Stops the measurement process, collects metrics, and handles any post-measurement tasks.
    * It finalizes the URL being tested, manages any URL-specific metadata, stops any ongoing video recordings,
@@ -442,7 +418,7 @@ export class Measure {
     await this.storageManager.createSubDataDir(
       path.join(pathToFolder(url, this.options))
     );
-    await this._stopVideo(url);
+    await this.measureVideo.stop(url);
 
     const alias = this.options.urlMetaData
       ? this.options.urlMetaData[url]
@@ -473,7 +449,7 @@ export class Measure {
       await this.tcpDump.stop();
     }
 
-    return this.collect(url);
+    return this._collect(url);
   }
 
   /**
@@ -515,125 +491,39 @@ export class Measure {
   }
 
   /**
-   *
    * @private
    */
-  async collect(url) {
-    // This stops collecting trace logs in Chrome etc
-    // await this.engineDelegate.beforeCollect();
-
-    log.verbose('Collecting metrics');
-
-    // If we have an alias for the URL, use that URL
+  _resolveAlias(url) {
     if (
       this.result[this.numberOfMeasuredPages] &&
       this.result[this.numberOfMeasuredPages].alias
     ) {
       const alias = this.result[this.numberOfMeasuredPages].alias;
       if (aliasAndUrl[alias]) {
-        url = aliasAndUrl[alias];
-      } else {
-        aliasAndUrl[alias] = url;
+        return aliasAndUrl[alias];
       }
+      aliasAndUrl[alias] = url;
     }
+    return url;
+  }
 
-    this.result[this.numberOfMeasuredPages].url = url;
-
-    // when we have the URL we can use that to stop the video and put it where we want it
-    if (
-      this.recordVideo &&
-      !this.options.videoParams.debug &&
-      this.video.getRecordingStartTime()
-    ) {
+  /**
+   * @private
+   */
+  _attachVideoMetadata() {
+    const metadata = this.measureVideo.getRecordingMetadata();
+    if (metadata) {
       this.result[this.numberOfMeasuredPages].recordingStartTime =
-        Number.parseFloat(this.video.getRecordingStartTime());
+        metadata.recordingStartTime;
       this.result[this.numberOfMeasuredPages].timeToFirstFrame =
-        Number.parseInt(this.video.getTimeToFirstFrame(), 10);
-    }
-
-    if (this.options.screenshot) {
-      log.info('Take after page complete check screenshot');
-      try {
-        const screenshot = await this.browser.takeScreenshot(url);
-        await this.screenshotManager.save(
-          'afterPageCompleteCheck',
-          screenshot,
-          url,
-          this.index
-        );
-      } catch {
-        // not getting screenshots shouldn't result in a failed test.
-      }
-    }
-
-    const supportLS = await this.browser.runScript(
-      `
-      const supported = PerformanceObserver.supportedEntryTypes;
-      if (!supported || supported.indexOf('layout-shift') === -1) {
-        return false;
-      } else return true;
-      `,
-      'SUPPORT_LS'
-    );
-
-    if (this.options.screenshotLS && supportLS) {
-      log.info('Take cumulative layout shift screenshot');
-      await this.browser.runScript(highlightLS, 'HIGHLIGHT_LS', {
-        color: this.options.screenshotLSColor || 'red',
-        limit: this.options.screenshotLSLimit || 0.01
-      });
-      const screenshot = await this.browser.takeScreenshot(url);
-      await this.screenshotManager.save(
-        'layoutShift',
-        screenshot,
-        url,
-        this.index
-      );
-      const lsScriptClean = `
-          const c = document.getElementById("browsertime-ls");
-          if (c) c.remove();
-        `;
-      await this.browser.runScript(lsScriptClean, 'CLEAN_LS');
-    }
-
-    const supportLCP = await this.browser.runScript(
-      `
-      const supported = PerformanceObserver.supportedEntryTypes;
-      if (!supported || supported.indexOf('largest-contentful-paint') === -1) {
-        return false;
-      } else return true;
-      `,
-      'SUPPORT_LCP'
-    );
-
-    if (this.options.screenshotLCP && supportLCP) {
-      log.info('Take largest contentful paint screenshot');
-      try {
-        const lcpScriptClean = `
-          const c = document.getElementById("browsertime-lcp");
-          if (c) c.remove();
-        `;
-        const message = await this.browser.runScript(
-          highlightLargestContentfulPaint,
-          'HIGHLIGHT_LCP',
-          this.options.screenshotLCPColor || 'red'
-        );
-        if (message != '') {
-          log.info(message);
-        }
-        const screenshot = await this.browser.takeScreenshot(url);
-        await this.screenshotManager.save(
-          'largestContentfulPaint',
-          screenshot,
-          url,
-          this.index
-        );
-        await this.browser.runScript(lcpScriptClean, 'CLEAN_LCP');
-      } catch (error) {
-        log.error('Could not get LCP screenshot', error);
-      }
+        metadata.timeToFirstFrame;
     }
+  }
 
+  /**
+   * @private
+   */
+  async _collectBrowserScripts() {
     const syncScripts = this.scriptsByCategory
         ? await this.browser.runScripts(this.scriptsByCategory)
         : {},
@@ -646,7 +536,12 @@ export class Measure {
       syncScripts,
       asyncScripts
     );
+  }
 
+  /**
+   * @private
+   */
+  _filterUserTimings() {
     // Some sites has crazy amount of user timings:
     // strip them if you want
     if (this.options.userTimingAllowList) {
@@ -664,7 +559,12 @@ export class Measure {
         this.options.userTimingBlockList
       );
     }
+  }
 
+  /**
+   * @private
+   */
+  async _collectAndroidProcessTime() {
     if (isAndroidConfigured(this.options) && this.options.processStartTime) {
       const packageName =
         this.options.browser === 'firefox'
@@ -685,10 +585,34 @@ export class Measure {
         ].browserScripts.browser.processStartTime = processStartTime;
       }
     }
+  }
 
+  /**
+   * @private
+   */
+  async _runPostURLScripts() {
     for (const postURLScript of this.postURLScripts) {
       await postURLScript(this.context);
     }
+  }
+
+  /**
+   * @private
+   */
+  async _collect(url) {
+    log.verbose('Collecting metrics');
+
+    url = this._resolveAlias(url);
+    this.result[this.numberOfMeasuredPages].url = url;
+
+    this._attachVideoMetadata();
+    await this.screenshots.afterPageCompleteCheck(url, this.index);
+    await this.screenshots.layoutShift(url, this.index);
+    await this.screenshots.largestContentfulPaint(url, this.index);
+    await this._collectBrowserScripts();
+    this._filterUserTimings();
+    await this._collectAndroidProcessTime();
+    await this._runPostURLScripts();
 
     if (this.options.tcpdump) {
       await this.tcpDump.mv(url, this.index);

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

@@ -117,7 +117,8 @@ export class ClickAndHold {
   async releaseAtXpath(xpath) {
     try {
       const element = await this.driver.findElement(By.xpath(xpath));
-      return this.actions.move({ origin: element }).release().perform();
+      await this.actions.move({ origin: element }).release().perform();
+      return this.actions.clear();
     } catch (error) {
       log.error('Could not release on xpath %s', xpath);
       log.verbose(error);
@@ -136,7 +137,8 @@ export class ClickAndHold {
   async releaseAtSelector(selector) {
     try {
       const element = await this.driver.findElement(By.css(selector));
-      return this.actions.move({ origin: element }).release().perform();
+      await this.actions.move({ origin: element }).release().perform();
+      return this.actions.clear();
     } catch (error) {
       log.error('Could not release on selector %s', selector);
       log.verbose(error);
@@ -155,10 +157,11 @@ export class ClickAndHold {
    */
   async releaseAtPosition(xPos, yPos) {
     try {
-      return this.actions
+      await this.actions
         .move({ x: xPos, y: yPos, origin: Origin.VIEWPORT })
         .release()
         .perform();
+      return this.actions.clear();
     } catch (error) {
       log.error('Could not release at position (%d,%d)', xPos, yPos);
       log.verbose(error);

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

@@ -1,5 +1,8 @@
 import { getLogger } from '@sitespeed.io/log';
 import { By } from 'selenium-webdriver';
+import webdriver from 'selenium-webdriver';
+import { executeCommand } from '../commandHelper.js';
+import { parseSelector } from '../selectorParser.js';
 const log = getLogger('browsertime.command.mouse');
 
 /**
@@ -9,7 +12,11 @@ const log = getLogger('browsertime.command.mouse');
  * @hideconstructor
  */
 export class ContextClick {
-  constructor(browser) {
+  constructor(browser, options) {
+    /**
+     * @private
+     */
+    this.browser = browser;
     /**
      * @private
      */
@@ -18,9 +25,49 @@ export class ContextClick {
      * @private
      */
     this.actions = this.driver.actions({ async: true });
+    /**
+     * @private
+     */
+    this.options = options;
+  }
+
+  /**
+   * @private
+   */
+  async _waitForElement(driver, locator) {
+    const timeout = this.options?.timeouts?.elementWait ?? 0;
+    if (timeout > 0) {
+      await driver.wait(webdriver.until.elementLocated(locator), timeout);
+    }
+  }
+
+  /**
+   * Performs a context click (right-click) on an element using a unified selector string.
+   *
+   * @async
+   * @param {string} selector - The selector string. CSS by default, or use a prefix.
+   * @returns {Promise<void>}
+   * @throws {Error} Throws an error if the element is not found.
+   */
+  async run(selector) {
+    const { locator, description } = parseSelector(selector);
+    return executeCommand(
+      log,
+      'Could not context click on element %s',
+      description,
+      async () => {
+        const driver = this.browser.getDriver();
+        await this._waitForElement(driver, locator);
+        const element = await driver.findElement(locator);
+        await this.actions.contextClick(element).perform();
+        await this.actions.clear();
+      },
+      this.browser
+    );
   }
 
   /**
+   * @private
    * Performs a context click (right-click) on an element that matches a given XPath selector.
    *
    * @async
@@ -31,7 +78,8 @@ export class ContextClick {
   async byXpath(xpath) {
     try {
       const element = await this.driver.findElement(By.xpath(xpath));
-      return this.actions.contextClick(element).perform();
+      await this.actions.contextClick(element).perform();
+      return this.actions.clear();
     } catch (error) {
       log.error('Could not context click on element with xpath %s', xpath);
       log.verbose(error);
@@ -40,6 +88,7 @@ export class ContextClick {
   }
 
   /**
+   * @private
    * Performs a context click (right-click) on an element that matches a given CSS selector.
    *
    * @async
@@ -50,7 +99,8 @@ export class ContextClick {
   async bySelector(selector) {
     try {
       const element = await this.driver.findElement(By.css(selector));
-      return this.actions.contextClick(element).perform();
+      await this.actions.contextClick(element).perform();
+      return this.actions.clear();
     } catch (error) {
       log.error('Could not context click on element with css %s', selector);
       log.verbose(error);
@@ -61,6 +111,7 @@ export class ContextClick {
   }
 
   /**
+   * @private
    * Performs a context click (right-click) at the current cursor position.
    *
    * @async
@@ -69,7 +120,8 @@ export class ContextClick {
    */
   async atCursor() {
     try {
-      return this.actions.contextClick().perform();
+      await this.actions.contextClick().perform();
+      return this.actions.clear();
     } catch (error) {
       log.error('Could not perform context click');
       log.verbose(error);

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

@@ -1,5 +1,8 @@
 import { getLogger } from '@sitespeed.io/log';
 import { By } from 'selenium-webdriver';
+import webdriver from 'selenium-webdriver';
+import { executeCommand } from '../commandHelper.js';
+import { parseSelector } from '../selectorParser.js';
 const log = getLogger('browsertime.command.mouse');
 /**
  * Provides functionality to perform a double-click action on elements in a web page.
@@ -8,7 +11,7 @@ const log = getLogger('browsertime.command.mouse');
  * @hideconstructor
  */
 export class DoubleClick {
-  constructor(browser, pageCompleteCheck) {
+  constructor(browser, pageCompleteCheck, options) {
     /**
      * @private
      */
@@ -21,9 +24,49 @@ export class DoubleClick {
      * @private
      */
     this.pageCompleteCheck = pageCompleteCheck;
+    /**
+     * @private
+     */
+    this.options = options;
+  }
+
+  /**
+   * @private
+   */
+  async _waitForElement(driver, locator) {
+    const timeout = this.options?.timeouts?.elementWait ?? 0;
+    if (timeout > 0) {
+      await driver.wait(webdriver.until.elementLocated(locator), timeout);
+    }
+  }
+
+  /**
+   * Performs a double click on an element using a unified selector string.
+   *
+   * @async
+   * @param {string} selector - The selector string. CSS by default, or use a prefix.
+   * @returns {Promise<void>}
+   * @throws {Error} Throws an error if the element is not found.
+   */
+  async run(selector) {
+    const { locator, description } = parseSelector(selector);
+    return executeCommand(
+      log,
+      'Could not double click on element %s',
+      description,
+      async () => {
+        const driver = this.browser.getDriver();
+        await this._waitForElement(driver, locator);
+        const element = await driver.findElement(locator);
+        await this.actions.doubleClick(element).perform();
+        await this.actions.clear();
+      },
+      this.browser
+    );
   }
 
   /**
+   * @private
    * Performs a mouse double-click on an element matching a given XPath selector.
    *
    * @async
@@ -38,6 +81,7 @@ export class DoubleClick {
         .getDriver()
         .findElement(By.xpath(xpath));
       await this.actions.doubleClick(element).perform();
+      await this.actions.clear();
       if (options && 'wait' in options && options.wait === true) {
         return this.browser.extraWait(this.pageCompleteCheck);
       }
@@ -49,6 +93,7 @@ export class DoubleClick {
   }
 
   /**
+   * @private
    * Performs a mouse double-click on an element matching a given CSS selector.
    *
    * @async
@@ -63,6 +108,7 @@ export class DoubleClick {
         .getDriver()
         .findElement(By.css(selector));
       await this.actions.doubleClick(element).perform();
+      await this.actions.clear();
       if (options && 'wait' in options && options.wait === true) {
         return this.browser.extraWait(this.pageCompleteCheck);
       }
@@ -76,6 +122,7 @@ export class DoubleClick {
   }
 
   /**
+   * @private
    * Performs a mouse double-click at the current cursor position.
    *
    * @async
@@ -86,6 +133,7 @@ export class DoubleClick {
   async atCursor(options) {
     try {
       await this.actions.doubleClick().perform();
+      await this.actions.clear();
       if (options && 'wait' in options && options.wait === true) {
         return this.browser.extraWait(this.pageCompleteCheck);
       }