browsertime 17.9.0 → 17.10.1

package/CHANGELOG.md

@@ -1,11 +1,27 @@
 # Browsertime changelog (we do [semantic versioning](https://semver.org))
 
+## 17.10.1 - 2022-05-19
+### Fixed
+* Updated code to collect Interaction To Next Paint [#1952](https://github.com/sitespeedio/browsertime/pull/1952). This new version follow updated version(s) of Google Web Vitals.
+
+## 17.10.0 - 2022-05-19
+
+### Added
+* Chrome, Edge and Firefox 113 [#1946](https://github.com/sitespeedio/browsertime/pull/1946), Chromedriver 113 [#1947](https://github.com/sitespeedio/browsertime/pull/1947) and Edgedriver 113 [#1949](https://github.com/sitespeedio/browsertime/pull/1949).
+
+### Fixed
+* Bugfix for running iPhone Siumlator (and run tests on latest Mac OS) [#1945](https://github.com/sitespeedio/browsertime/pull/1945).
+* Bumped dependencies for Selenium, yargs and jimp [#1950](https://github.com/sitespeedio/browsertime/pull/1950).
+
 ## 17.9.0 - 2022-04-19
 ### Added
 * New command to start geckoprofiling when scripting using Firefox. Thank you [KS](https://github.com/92kns) for PR [#1934](https://github.com/sitespeedio/browsertime/pull/1934). This is probably only something you need if you work at Mozilla. There's also a follow PR [#1940](https://github.com/sitespeedio/browsertime/pull/1940) that fixes some of the issues I've been wanted to fix with the Geckoprofiler code.
 
 * Use `--enableProfileRun` to make one extra run where metrics aren't collected but Geckoprofiler or Chromes timeline log is turned on. This useful if you are worrying about the trace causing overhead, but you still wan trace from the test/journey. It's a little rough at the moment so it will a follow up in the future [#1943](https://github.com/sitespeedio/browsertime/pull/1943).
 
+### Fixed
+* Bump Chrome remote interface and execa [#1941](https://github.com/sitespeedio/browsertime/pull/1941).
+
 ## 17.8.1 - 2022-04-12
 ### Fixed
 * Upgraded to Firefox HAR 0.0.10 [#1939](https://github.com/sitespeedio/browsertime/pull/1939). 

package/browserscripts/pageinfo/interactionToNextPaintInfo.js

@@ -1,51 +1,32 @@
 (function () {
+
   // This is an updated version of
-  // https://github.com/GoogleChrome/web-vitals/blob/next/src/onINP.ts
+  // https://github.com/GoogleChrome/web-vitals/blob/64f133590fcac72c1bc042bf7b4ab729d7e03316/src/onINP.ts
+  // It was reworked the 19/5-2023
 
   const supported = PerformanceObserver.supportedEntryTypes;
-  if (!supported || supported.indexOf('event') === -1) {
+  if (!supported || supported.indexOf('event') === -1 ||  supported.indexOf('first-input') === -1) {
     return;
   }
-
-  const observer = new PerformanceObserver(list => {});
-  // Event Timing entries have their durations rounded to the nearest 8ms,
-  // so a duration of 40ms would be any event that spans 2.5 or more frames
-  // at 60Hz. This threshold is chosen to strike a balance between usefulness
-  // and performance. Running this callback for any interaction that spans
-  // just one or two frames is likely not worth the insight that could be
-  // gained.
-  observer.observe({type: 'event', buffered: true, durationThreshold: 40});
-  const entries = observer.takeRecords();
-
-  // To prevent unnecessary memory usage on pages with lots of interactions,
-  // store at most 10 of the longest interactions to consider as INP candidates.
-  const MAX_INTERACTIONS_TO_CONSIDER = 10;
-
-  // A list of longest interactions on the page (by latency) sorted so the
-  // longest one is first. The list is as most MAX_INTERACTIONS_TO_CONSIDER long.
-  let longestInteractionList = [];
-
-  // A mapping of longest interactions by their interaction ID.
-  // This is used for faster lookup.
-  const longestInteractionMap = {};
-
-  const getInteractionCountForNavigation = () => {
-    // I guess the interactionCount is coming in Chrome later on
-    if (performance.interactionCount) {
-      return performance.interactionCount;
-    } else {
-      const observerForAll = new PerformanceObserver(list => {});
-      observerForAll.observe({
-        type: 'event',
-        buffered: true,
-        durationThreshold: 0
-      });
-      const allEntries = observerForAll.takeRecords();
-      let interactionCountEstimate = 0;
-      let minKnownInteractionId = Infinity;
-      let maxKnownInteractionId = 0;
-
-      for (let e of allEntries) {
+    var observe = function observe(type, callback, opts) {
+      try {
+        if (PerformanceObserver.supportedEntryTypes.includes(type)) {
+          var po = new PerformanceObserver(function (list) {
+            Promise.resolve().then(function () {
+              callback(list.getEntries());
+            });
+          });
+          po.observe(Object.assign({type: type, buffered: true}, opts || {}));
+          return po;
+        }
+      } catch (e) {}
+      return;
+    };
+    var interactionCountEstimate = 0;
+    var minKnownInteractionId = Infinity;
+    var maxKnownInteractionId = 0;
+    var updateEstimate = function updateEstimate(entries) {
+      entries.forEach(function (e) {
         if (e.interactionId) {
           minKnownInteractionId = Math.min(
             minKnownInteractionId,
@@ -55,73 +36,117 @@
             maxKnownInteractionId,
             e.interactionId
           );
-
           interactionCountEstimate = maxKnownInteractionId
             ? (maxKnownInteractionId - minKnownInteractionId) / 7 + 1
             : 0;
         }
-      }
-      return interactionCountEstimate;
-    }
-  };
-
-  const estimateP98LongestInteraction = () => {
-    const candidateInteractionIndex = Math.min(
-      longestInteractionList.length - 1,
-      Math.floor(getInteractionCountForNavigation() / 50)
-    );
-
-    return longestInteractionList[candidateInteractionIndex];
-  };
-
-  if (entries.length > 0) {
-    for (let entry of entries) {
-      const minLongestInteraction =
+      });
+    };
+    var po;
+    var getInteractionCount = function getInteractionCount() {
+      return po ? interactionCountEstimate : performance.interactionCount || 0;
+    };
+    var initInteractionCountPolyfill = function initInteractionCountPolyfill() {
+      if ('interactionCount' in performance || po) return;
+      po = observe('event', updateEstimate, {
+        type: 'event',
+        buffered: true,
+        durationThreshold: 0,
+      });
+    };
+    var prevInteractionCount = 0;
+    var getInteractionCountForNavigation =
+      function getInteractionCountForNavigation() {
+        return getInteractionCount() - prevInteractionCount;
+      };
+    var MAX_INTERACTIONS_TO_CONSIDER = 10;
+    var longestInteractionList = [];
+    var longestInteractionMap = {};
+    var processEntry = function processEntry(entry) {
+      var minLongestInteraction =
         longestInteractionList[longestInteractionList.length - 1];
-      const existingInteraction = longestInteractionMap[entry.interactionId];
+      var existingInteraction = longestInteractionMap[entry.interactionId];
       if (
         existingInteraction ||
         longestInteractionList.length < MAX_INTERACTIONS_TO_CONSIDER ||
         entry.duration > minLongestInteraction.latency
       ) {
-        // If the interaction already exists, update it. Otherwise create one.
         if (existingInteraction) {
-          existingInteraction.entries.push(
-            { id: entry.interactionId,
-              latency: entry.duration,
-              name: entry.name 
-            });
+          existingInteraction.entries.push(entry);
           existingInteraction.latency = Math.max(
             existingInteraction.latency,
             entry.duration
           );
         } else {
-          const interaction = {
+          var interaction = {
             id: entry.interactionId,
             latency: entry.duration,
-            entries: [
-                      { 
-                        id: entry.interactionId,
-                        latency: entry.duration,
-                        name: entry.name 
-                      }
-                      ]
+            entries: [entry],
           };
           longestInteractionMap[interaction.id] = interaction;
           longestInteractionList.push(interaction);
         }
-
-        // Sort the entries by latency (descending) and keep only the top ten.
-        longestInteractionList.sort((a, b) => b.latency - a.latency);
+        longestInteractionList.sort(function (a, b) {
+          return b.latency - a.latency;
+        });
         longestInteractionList
           .splice(MAX_INTERACTIONS_TO_CONSIDER)
-          .forEach(i => {
+          .forEach(function (i) {
             delete longestInteractionMap[i.id];
           });
       }
+    };
+    var estimateP98LongestInteraction = function estimateP98LongestInteraction() {
+      var candidateInteractionIndex = Math.min(
+        longestInteractionList.length - 1,
+        Math.floor(getInteractionCountForNavigation() / 50)
+      );
+      return longestInteractionList[candidateInteractionIndex];
+    };
+  
+    var opts = {};
+    var metric = {};
+    initInteractionCountPolyfill();
+    var handleEntries = function handleEntries(entries) {
+      entries.forEach(function (entry) {
+        if (entry.interactionId) {
+          processEntry(entry);
+        }
+        if (entry.entryType === 'first-input') {
+          var noMatchingEntry = !longestInteractionList.some(function (
+            interaction
+          ) {
+            return interaction.entries.some(function (prevEntry) {
+              return (
+                entry.duration === prevEntry.duration &&
+                entry.startTime === prevEntry.startTime
+              );
+            });
+          });
+          if (noMatchingEntry) {
+            processEntry(entry);
+          }
+        }
+      });
+      var inp = estimateP98LongestInteraction();
+      if (inp && inp.latency !== metric.value) {
+        var cleanedEntries = [];
+        for (var entry of inp.entries) {
+          console.log(entry);
+          cleanedEntries.push({ 
+            id: entry.interactionId,
+            latency: entry.duration,
+            name: entry.name
+          });
+        }
+        return {latency: inp.latency, entries: cleanedEntries};
+      }
+    };
+    var po = observe('event', handleEntries, {
+      durationThreshold: opts.durationThreshold || 40,
+    });
+    if (po) {
+      po.observe({type: 'first-input', buffered: true});
     }
-    return estimateP98LongestInteraction();
-  } else {
-    // nothing to report
-  }
-})();
+  })({});
+  

package/browserscripts/timings/interactionToNextPaint.js

@@ -1,41 +1,32 @@
 (function () {
+
   // This is an updated version of
-  // https://github.com/GoogleChrome/web-vitals/blob/next/src/onINP.ts
+  // https://github.com/GoogleChrome/web-vitals/blob/64f133590fcac72c1bc042bf7b4ab729d7e03316/src/onINP.ts
+  // It was reworked the 19/5-2023
 
   const supported = PerformanceObserver.supportedEntryTypes;
-  if (!supported || supported.indexOf('event') === -1) {
+  if (!supported || supported.indexOf('event') === -1 ||  supported.indexOf('first-input') === -1) {
     return;
   }
-
-  // To prevent unnecessary memory usage on pages with lots of interactions,
-  // store at most 10 of the longest interactions to consider as INP candidates.
-  const MAX_INTERACTIONS_TO_CONSIDER = 10;
-
-  // A list of longest interactions on the page (by latency) sorted so the
-  // longest one is first. The list is as most MAX_INTERACTIONS_TO_CONSIDER long.
-  let longestInteractionList = [];
-
-  // A mapping of longest interactions by their interaction ID.
-  // This is used for faster lookup.
-  const longestInteractionMap = {};
-
-  const getInteractionCountForNavigation = () => {
-    // I guess the interactionCount is coming in Chrome later on
-    if (performance.interactionCount) {
-      return performance.interactionCount;
-    } else {
-      const observerForAll = new PerformanceObserver(list => {});
-      observerForAll.observe({
-        type: 'event',
-        buffered: true,
-        durationThreshold: 0
-      });
-      const allEntries = observerForAll.takeRecords();
-      let interactionCountEstimate = 0;
-      let minKnownInteractionId = Infinity;
-      let maxKnownInteractionId = 0;
-
-      for (let e of allEntries) {
+    var observe = function observe(type, callback, opts) {
+      try {
+        if (PerformanceObserver.supportedEntryTypes.includes(type)) {
+          var po = new PerformanceObserver(function (list) {
+            Promise.resolve().then(function () {
+              callback(list.getEntries());
+            });
+          });
+          po.observe(Object.assign({type: type, buffered: true}, opts || {}));
+          return po;
+        }
+      } catch (e) {}
+      return;
+    };
+    var interactionCountEstimate = 0;
+    var minKnownInteractionId = Infinity;
+    var maxKnownInteractionId = 0;
+    var updateEstimate = function updateEstimate(entries) {
+      entries.forEach(function (e) {
         if (e.interactionId) {
           minKnownInteractionId = Math.min(
             minKnownInteractionId,
@@ -45,72 +36,107 @@
             maxKnownInteractionId,
             e.interactionId
           );
-
           interactionCountEstimate = maxKnownInteractionId
             ? (maxKnownInteractionId - minKnownInteractionId) / 7 + 1
             : 0;
         }
-      }
-      return interactionCountEstimate;
-    }
-  };
-
-  const estimateP98LongestInteraction = () => {
-    const candidateInteractionIndex = Math.min(
-      longestInteractionList.length - 1,
-      Math.floor(getInteractionCountForNavigation() / 50)
-    );
-
-    return longestInteractionList[candidateInteractionIndex];
-  };
-
-  const observer = new PerformanceObserver(list => {});
-  // Event Timing entries have their durations rounded to the nearest 8ms,
-  // so a duration of 40ms would be any event that spans 2.5 or more frames
-  // at 60Hz. This threshold is chosen to strike a balance between usefulness
-  // and performance. Running this callback for any interaction that spans
-  // just one or two frames is likely not worth the insight that could be
-  // gained.
-  observer.observe({type: 'event', buffered: true, durationThreshold: 40});
-  const entries = observer.takeRecords();
-
-  if (entries.length > 0) {
-    for (let entry of entries) {
-      const minLongestInteraction =
+      });
+    };
+    var po;
+    var getInteractionCount = function getInteractionCount() {
+      return po ? interactionCountEstimate : performance.interactionCount || 0;
+    };
+    var initInteractionCountPolyfill = function initInteractionCountPolyfill() {
+      if ('interactionCount' in performance || po) return;
+      po = observe('event', updateEstimate, {
+        type: 'event',
+        buffered: true,
+        durationThreshold: 0,
+      });
+    };
+    var prevInteractionCount = 0;
+    var getInteractionCountForNavigation =
+      function getInteractionCountForNavigation() {
+        return getInteractionCount() - prevInteractionCount;
+      };
+    var MAX_INTERACTIONS_TO_CONSIDER = 10;
+    var longestInteractionList = [];
+    var longestInteractionMap = {};
+    var processEntry = function processEntry(entry) {
+      var minLongestInteraction =
         longestInteractionList[longestInteractionList.length - 1];
-      const existingInteraction = longestInteractionMap[entry.interactionId];
+      var existingInteraction = longestInteractionMap[entry.interactionId];
       if (
         existingInteraction ||
         longestInteractionList.length < MAX_INTERACTIONS_TO_CONSIDER ||
         entry.duration > minLongestInteraction.latency
       ) {
-        // If the interaction already exists, update it. Otherwise create one.
         if (existingInteraction) {
+          existingInteraction.entries.push(entry);
           existingInteraction.latency = Math.max(
             existingInteraction.latency,
             entry.duration
           );
         } else {
-          const interaction = {
+          var interaction = {
             id: entry.interactionId,
-            latency: entry.duration
+            latency: entry.duration,
+            entries: [entry],
           };
           longestInteractionMap[interaction.id] = interaction;
           longestInteractionList.push(interaction);
         }
-
-        // Sort the entries by latency (descending) and keep only the top ten.
-        longestInteractionList.sort((a, b) => b.latency - a.latency);
+        longestInteractionList.sort(function (a, b) {
+          return b.latency - a.latency;
+        });
         longestInteractionList
           .splice(MAX_INTERACTIONS_TO_CONSIDER)
-          .forEach(i => {
+          .forEach(function (i) {
             delete longestInteractionMap[i.id];
           });
       }
+    };
+    var estimateP98LongestInteraction = function estimateP98LongestInteraction() {
+      var candidateInteractionIndex = Math.min(
+        longestInteractionList.length - 1,
+        Math.floor(getInteractionCountForNavigation() / 50)
+      );
+      return longestInteractionList[candidateInteractionIndex];
+    };
+  
+    var opts = {};
+    initInteractionCountPolyfill();
+    var handleEntries = function handleEntries(entries) {
+      entries.forEach(function (entry) {
+        if (entry.interactionId) {
+          processEntry(entry);
+        }
+        if (entry.entryType === 'first-input') {
+          var noMatchingEntry = !longestInteractionList.some(function (
+            interaction
+          ) {
+            return interaction.entries.some(function (prevEntry) {
+              return (
+                entry.duration === prevEntry.duration &&
+                entry.startTime === prevEntry.startTime
+              );
+            });
+          });
+          if (noMatchingEntry) {
+            processEntry(entry);
+          }
+        }
+      });
+      var inp = estimateP98LongestInteraction();
+      if (inp && inp.latency !== metric.value) {
+        return inp.latency;
+      }
+    };
+    var po = observe('event', handleEntries, {
+      durationThreshold: opts.durationThreshold || 40,
+    });
+    if (po) {
+      po.observe({type: 'first-input', buffered: true});
     }
-    const inp = estimateP98LongestInteraction();
-    return inp.latency;
-  } else {
-    // nothing to report
-  }
-})();
+  })({});
+  

package/lib/video/screenRecording/iosSimulator/recorder.js

@@ -1,7 +1,7 @@
 import path from 'node:path';
 import util from 'node:util';
 import fs from 'node:fs';
-import { execa } from 'execa';
+import { execaCommand } from 'execa';
 import intel from 'intel';
 import { convert } from './convertToMp4.js';
 const unlink = util.promisify(fs.unlink);
@@ -17,7 +17,7 @@ export class IOSSimulatorRecorder {
   async start() {
     log.info('Start IOS Simulator recorder.');
 
-    this.xcrunProcess = execa.command(
+    this.xcrunProcess = execaCommand(
       'xcrun simctl io ' +
         this.options.safari.deviceUDID +
         ' recordVideo --code=h264 --mask=black --force ' +

package/package.json

@@ -1,14 +1,14 @@
 {
   "name": "browsertime",
   "description": "Get performance metrics from your web page using Browsertime.",
-  "version": "17.9.0",
+  "version": "17.10.1",
   "bin": "./bin/browsertime.js",
   "type": "module",
   "dependencies": {
     "@cypress/xvfb": "1.2.4",
     "@devicefarmer/adbkit": "2.11.3",
-    "@sitespeed.io/chromedriver": "112.0.5615-28",
-    "@sitespeed.io/edgedriver": "112.0.1722-34",
+    "@sitespeed.io/chromedriver": "113.0.5672-63",
+    "@sitespeed.io/edgedriver": "113.0.1774-9",
     "@sitespeed.io/geckodriver": "0.33.0",
     "@sitespeed.io/throttle": "5.0.0",
     "@sitespeed.io/tracium": "0.3.3",
@@ -29,11 +29,11 @@
     "lodash.merge": "4.6.2",
     "lodash.pick": "4.4.0",
     "lodash.set": "4.3.2",
-    "selenium-webdriver": "4.8.2",
-    "yargs": "17.7.1"
+    "selenium-webdriver": "4.9.2",
+    "yargs": "17.7.2"
   },
   "optionalDependencies": {
-    "jimp": "0.22.7"
+    "jimp": "0.22.8"
   },
   "devDependencies": {
     "ava": "5.1.0",