browsertime 17.15.0 → 17.17.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Browsertime changelog (we do [semantic versioning](https://semver.org))
 
+## 17.17.0 - 2022-10-11
+### Added
+* Firefox 118, Edge 117 and Chrome/Chromedriver 118 in the Docker container [#1996](https://github.com/sitespeedio/browsertime/pull/1996).
+* Expose trace start/stop for Chrome in scripting (the same way as for Firefox). Thank you [KS](https://github.com/92kns) for [#1988](https://github.com/sitespeedio/browsertime/pull/1988). Documentation is coming when the functionality is rolled out in sitespeed.io.
+
+## 17.16.0 - 2022-09-04
+### Added
+* Firefox 117 and Edge 116 in the Docker container.
+
+### Fixed 
+* Updated the BiDi HAR exporter for Firefox to version 0.0.12. This version will not work with Firefox 116 so if you use the BiDi HAR exporter you need to upgrade to Firefox 117.
+
 ## 17.15.0 - 2022-08-16
 ### Added
 * Updated Chrome and Chromedriver to 116.

package/lib/chrome/webdriver/chromium.js

@@ -15,11 +15,7 @@ import { parse } from '../traceCategoriesParser.js';
 import { pathToFolder } from '../../support/pathToFolder.js';
 import { ChromeDevtoolsProtocol } from '../chromeDevtoolsProtocol.js';
 import { Android, isAndroidConfigured } from '../../android/index.js';
-import {
-  getFirstContentFulPaintEvent,
-  getLargestContentfulPaintEvent,
-  getRecalculateStyleElementsAndTimeBefore
-} from './traceUtilities.js';
+import { getRenderBlocking } from './traceUtilities.js';
 const unlink = promisify(_unlink);
 const rm = promisify(_rm);
 
@@ -160,7 +156,11 @@ export class Chromium {
       await this.android.resetPowerUsage();
     }
 
-    if (this.collectTracingEvents && !this.isTracing) {
+    if (
+      this.collectTracingEvents &&
+      !this.isTracing &&
+      this.options.chrome.timelineRecordingType !== 'custom'
+    ) {
       this.isTracing = true;
       return this.cdpClient.startTrace();
     }
@@ -174,7 +174,11 @@ export class Chromium {
    */
   async afterPageCompleteCheck(runner, index, url, alias) {
     const result = { url, alias };
-    if (this.collectTracingEvents && this.isTracing) {
+    if (
+      this.collectTracingEvents &&
+      this.isTracing &&
+      this.options.chrome.timelineRecordingType !== 'custom'
+    ) {
       // We are ready and can stop collecting events
       this.isTracing = false;
       this.events = await this.cdpClient.stopTrace();
@@ -334,7 +338,10 @@ export class Chromium {
       await this.storageManager.gzip(filename, gzFilename, true);
     }
 
-    if (this.collectTracingEvents) {
+    if (
+      this.collectTracingEvents &&
+      this.options.chrome.timelineRecordingType !== 'custom'
+    ) {
       const trace = parse(this.events, result.url);
       const name = this.options.enableProfileRun
         ? `trace-${index}-extra-run.json`
@@ -345,50 +352,19 @@ export class Chromium {
       result.cpu = cpu;
 
       // Collect render blocking info
-      const renderBlockingInfo = {};
-      const urlsWithBlockingInfo = trace.traceEvents.filter(
-        task =>
-          task.cat === 'devtools.timeline' &&
-          task.name === 'ResourceSendRequest' &&
-          task.args.data.url &&
-          task.args.data.renderBlocking
-      );
-      for (let asset of urlsWithBlockingInfo) {
-        renderBlockingInfo[asset.args.data.url] =
-          asset.args.data.renderBlocking;
-      }
-
-      const fcpEvent = getFirstContentFulPaintEvent(trace.traceEvents);
-      const lcpEvent = getLargestContentfulPaintEvent(trace.traceEvents);
-
-      result.renderBlocking = { recalculateStyle: {}, requests: {} };
-
-      if (fcpEvent) {
-        const beforeFCP = getRecalculateStyleElementsAndTimeBefore(
-          trace.traceEvents,
-          fcpEvent.ts
-        );
-        result.renderBlocking.recalculateStyle.beforeFCP = beforeFCP;
-      }
-
-      if (lcpEvent) {
-        const beforeLCP = getRecalculateStyleElementsAndTimeBefore(
-          trace.traceEvents,
-          lcpEvent.ts
-        );
-        result.renderBlocking.recalculateStyle.beforeLCP = beforeLCP;
-      }
+      const render = await getRenderBlocking(trace);
+      result.renderBlocking = render.renderBlocking;
 
       if (!this.options.skipHar) {
         for (let harRequest of this.hars[index - 1].log.entries) {
-          if (renderBlockingInfo[harRequest.request.url]) {
+          if (render.renderBlockingInfo[harRequest.request.url]) {
             harRequest._renderBlocking =
-              renderBlockingInfo[harRequest.request.url];
+              render.renderBlockingInfo[harRequest.request.url];
           }
         }
       }
 
-      result.renderBlocking.requests = renderBlockingInfo;
+      result.renderBlocking.requests = render.renderBlockingInfo;
     }
 
     // Google Web Vitals hacksery

package/lib/chrome/webdriver/traceUtilities.js

@@ -1,7 +1,7 @@
 import intel from 'intel';
 const log = intel.getLogger('browsertime.chrome');
 
-export function getLargestContentfulPaintEvent(traceEvents) {
+function getLargestContentfulPaintEvent(traceEvents) {
   const lcpCandidates = traceEvents.filter(
     task => task.name === 'largestContentfulPaint::Candidate'
   );
@@ -20,7 +20,7 @@ export function getLargestContentfulPaintEvent(traceEvents) {
   }
 }
 
-export function getFirstContentFulPaintEvent(traceEvents) {
+function getFirstContentFulPaintEvent(traceEvents) {
   // Get first contentful paint
   const fcpEvent = traceEvents.find(
     task => task.name === 'firstContentfulPaint'
@@ -33,10 +33,7 @@ export function getFirstContentFulPaintEvent(traceEvents) {
   }
 }
 
-export function getRecalculateStyleElementsAndTimeBefore(
-  traceEvents,
-  timestamp
-) {
+function getRecalculateStyleElementsAndTimeBefore(traceEvents, timestamp) {
   const recalculatesBefore = traceEvents.filter(
     task =>
       task.cat === 'disabled-by-default-devtools.timeline' &&
@@ -62,3 +59,41 @@ export function getRecalculateStyleElementsAndTimeBefore(
 
   return { elements, durationInMillis: duration / 1000 };
 }
+
+export async function getRenderBlocking(trace) {
+  const renderBlockingInfo = {};
+
+  const urlsWithBlockingInfo = trace.traceEvents.filter(
+    task =>
+      task.cat === 'devtools.timeline' &&
+      task.name === 'ResourceSendRequest' &&
+      task.args.data.url &&
+      task.args.data.renderBlocking
+  );
+  for (let asset of urlsWithBlockingInfo) {
+    renderBlockingInfo[asset.args.data.url] = asset.args.data.renderBlocking;
+  }
+
+  const fcpEvent = getFirstContentFulPaintEvent(trace.traceEvents);
+  const lcpEvent = getLargestContentfulPaintEvent(trace.traceEvents);
+
+  const renderBlocking = { recalculateStyle: {}, requests: {} };
+
+  if (fcpEvent) {
+    const beforeFCP = getRecalculateStyleElementsAndTimeBefore(
+      trace.traceEvents,
+      fcpEvent.ts
+    );
+    renderBlocking.recalculateStyle.beforeFCP = beforeFCP;
+  }
+
+  if (lcpEvent) {
+    const beforeLCP = getRecalculateStyleElementsAndTimeBefore(
+      trace.traceEvents,
+      lcpEvent.ts
+    );
+    renderBlocking.recalculateStyle.beforeLCP = beforeLCP;
+  }
+
+  return { renderBlockingInfo, renderBlocking };
+}

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

@@ -0,0 +1,63 @@
+import intel from 'intel';
+
+import { getRenderBlocking } from '../../../chrome/webdriver/traceUtilities.js';
+import { parse } from '../../../chrome/traceCategoriesParser.js';
+import { parseCPUTrace } from '../../../chrome/parseCpuTrace.js';
+const log = intel.getLogger('browsertime.command.chrometrace');
+export class ChromeTrace {
+  constructor(engineDelegate, index, options, result) {
+    this.engineDelegate = engineDelegate;
+    this.options = options;
+    this.result = result;
+    this.index = index;
+  }
+
+  async start() {
+    if (this.options.browser === 'chrome') {
+      if (this.options.chrome.timelineRecordingType === 'custom') {
+        return this.engineDelegate.getCDPClient().startTrace();
+      } else {
+        log.info(
+          'You need to set traceRecordingType to custom to turn on the profiler in scripting'
+        );
+      }
+    } else {
+      throw new Error('Trace only works in Chrome');
+    }
+  }
+
+  async stop() {
+    if (this.options.browser === 'chrome') {
+      if (this.options.chrome.timelineRecordingType === 'custom') {
+        let result = this.result[0];
+
+        this.events = [];
+        this.events = await this.engineDelegate.getCDPClient().stopTrace();
+        const trace = parse(this.events, result.url);
+        const name = this.options.enableProfileRun
+          ? `trace-${this.index}-extra-run.json`
+          : `trace-${this.index}.json`;
+        result.extraJson[name] = trace;
+
+        const cpu = await parseCPUTrace(trace, result.url);
+        result.cpu = cpu;
+
+        // Collect render blocking info
+        const render = await getRenderBlocking(trace);
+
+        result.renderBlocking = render.renderBlocking;
+
+        if (!this.options.skipHar) {
+          for (let harRequest of this.hars[this.index - 1].log.entries) {
+            if (render.renderBlockingInfo[harRequest.request.url]) {
+              harRequest._renderBlocking =
+                render.renderBlockingInfo[harRequest.request.url];
+            }
+          }
+        }
+      }
+    } else {
+      throw new Error('Trace only works in Chrome');
+    }
+  }
+}

package/lib/core/engine/iteration.js

@@ -24,6 +24,7 @@ import { Select } from './command/select.js';
 import { Debug } from './command/debug.js';
 import { AndroidCommand } from './command/android.js';
 import { ChromeDevelopmentToolsProtocol } from './command/chromeDevToolsProtocol.js';
+import { ChromeTrace } from './command/chromeTrace.js';
 import {
   addConnectivity,
   removeConnectivity
@@ -164,10 +165,12 @@ export class Iteration {
         engineDelegate,
         options.browser
       );
+      const trace = new ChromeTrace(engineDelegate, index, options, result);
       const android = new Android(options);
       const debug = new Debug(browser, options);
       const commands = {
         profiler: profiler,
+        trace: trace,
         click: new Click(browser, this.pageCompleteCheck),
         scroll: new Scroll(browser, options),
         addText: new AddText(browser),

package/lib/support/cli.js

@@ -274,6 +274,14 @@ export function parseCommandLine() {
       type: 'boolean',
       group: 'chrome'
     })
+    .option('chrome.timelineRecordingType', {
+      alias: 'chrome.traceRecordingType',
+      describe: 'Expose the start/stop commands for the chrome trace',
+      default: 'pageload',
+      choices: ['pageload', 'custom'],
+      type: 'string',
+      group: 'chrome'
+    })
     .option('chrome.collectPerfLog', {
       type: 'boolean',
       describe:

package/package.json

@@ -1,18 +1,18 @@
 {
   "name": "browsertime",
   "description": "Get performance metrics from your web page using Browsertime.",
-  "version": "17.15.0",
+  "version": "17.17.0",
   "bin": "./bin/browsertime.js",
   "type": "module",
   "dependencies": {
     "@cypress/xvfb": "1.2.4",
     "@devicefarmer/adbkit": "2.11.3",
-    "@sitespeed.io/chromedriver": "116.0.5845-96",
+    "@sitespeed.io/chromedriver": "118.0.5993-70",
     "@sitespeed.io/edgedriver": "115.0.1901-183",
     "@sitespeed.io/geckodriver": "0.33.0",
     "@sitespeed.io/throttle": "5.0.0",
     "@sitespeed.io/tracium": "0.3.3",
-    "ff-test-bidi-har-export": "0.0.11",
+    "ff-test-bidi-har-export": "0.0.12",
     "btoa": "1.2.1",
     "chrome-har": "0.13.2",
     "chrome-remote-interface": "0.33.0",
@@ -29,7 +29,7 @@
     "lodash.merge": "4.6.2",
     "lodash.pick": "4.4.0",
     "lodash.set": "4.3.2",
-    "selenium-webdriver": "4.11.1",
+    "selenium-webdriver": "4.12.0",
     "yargs": "17.7.2"
   },
   "optionalDependencies": {