browsertime 16.7.0 → 16.8.0

package/CHANGELOG.md

@@ -1,8 +1,16 @@
 # Browsertime changelog (we do [semantic versioning](https://semver.org))
 
+##  16.8.0 - 2022-06-06
+### Added
+* Add `--debug` mode. Debug mode will run your tests and open devtools in Chrome/Edge/Firefox on desktop and will stop after each iteration so you can inspect the page. You can add your own breakpoint in your script with the `breakpoint(name)` command. To continue after your breakpoint, add the following code in the developer console in your browser: `window.browsertime.pause=false;`  [#1798](https://github.com/sitespeedio/browsertime/pull/1798).
+* Use Selenium WebDriver 4.2.0 [#1801](https://github.com/sitespeedio/browsertime/pull/1801).
+* Updated to Firefox 101, Edge 102 in the Docker container.
+
+### Tech
+* Added tests using NodeJS 18 [#1772](https://github.com/sitespeedio/browsertime/pull/1772).
 ## 16.7.0 - 2022-05-20
 ### Added
-* Inlcude last CPU long task in the HAR file so we can show when it happens [#1793](https://github.com/sitespeedio/browsertime/pull/1793).
+* Include last CPU long task in the HAR file so we can show when it happens [#1793](https://github.com/sitespeedio/browsertime/pull/1793).
 * Inlclude TTFB and INP in the Google Web Vital namespace [#1792](https://github.com/sitespeedio/browsertime/pull/1792).
 ## 16.6.0 - 2022-05-20
 ### Added

package/bin/browsertime.js

@@ -43,6 +43,9 @@ async function preWarmServer(urls, options) {
 }
 
 async function run(urls, options) {
+  if (options.debug) {
+    log.info('Running Browsertime in debug mode.');
+  }
   try {
     if (!options.resultDir) {
       let dir = 'browsertime-results';

package/lib/chrome/webdriver/setupChromiumOptions.js

@@ -99,6 +99,10 @@ module.exports = function (seleniumOptions, browserOptions, options, baseDir) {
     }
   }
 
+  if (options.debug) {
+    seleniumOptions.addArguments('--auto-open-devtools-for-tabs');
+  }
+
   const perfLogConf = { enableNetwork: true, enablePage: true };
   seleniumOptions.setPerfLoggingPrefs(perfLogConf);
 

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

@@ -0,0 +1,47 @@
+'use strict';
+
+const log = require('intel').getLogger('browsertime.command.debug');
+const delay = ms => new Promise(res => setTimeout(res, ms));
+
+class Debug {
+  constructor(browser, options) {
+    this.browser = browser;
+    this.options = options;
+  }
+
+  /**
+   * Add a breakpoint to script. The browser will wait at the breakpoint for user input.
+   * @returns {Promise} Promise object that is fulfilled when the user move on from the breakpoint.
+   */
+  async breakpoint(name) {
+    if (this.options.debug) {
+      const logMessage = `Pausing for breakpoint ${
+        name || ''
+      }, set browsertime.pause = false; to continue`;
+
+      await this.browser.runScript(
+        `console.log('${logMessage}');`,
+        'CONSOLE_LOG'
+      );
+      log.info(logMessage);
+      let debug = true;
+      await this.browser.runScript(
+        'window.browsertime = {}; window.browsertime.pause = true',
+        'PAUSE_SCRIPT'
+      );
+      while (debug === true) {
+        debug = await this.browser.runScript(
+          'return window.browsertime.pause',
+          'GET_PAUSE_STATUS'
+        );
+        await delay(1000);
+      }
+      return this.browser.runScript(
+        'window.browsertime.pause = false',
+        'SET_PAUSE_STATUS'
+      );
+    }
+  }
+}
+
+module.exports = Debug;

package/lib/core/engine/iteration.js

@@ -22,6 +22,7 @@ const Cache = require('./command/cache.js');
 const Meta = require('./command/meta.js');
 const StopWatch = require('./command/stopWatch.js');
 const Select = require('./command/select.js');
+const Debug = require('./command/debug.js');
 const AndroidCommand = require('./command/android.js');
 const ChromeDevToolsProtocol = require('./command/chromeDevToolsProtocol.js');
 const { addConnectivity, removeConnectivity } = require('../../connectivity');
@@ -148,7 +149,7 @@ class Iteration {
 
       const cdp = new ChromeDevToolsProtocol(engineDelegate, options.browser);
       const android = new Android(options);
-
+      const debug = new Debug(browser, options);
       const commands = {
         click: new Click(browser, this.pageCompleteCheck),
         scroll: new Scroll(browser, options),
@@ -172,6 +173,7 @@ class Iteration {
         screenshot: new Screenshot(screenshotManager, browser, index),
         cdp,
         android: new AndroidCommand(options),
+        debug: debug,
         mouse: {
           moveTo: new MouseMove(browser),
           contextClick: new ContextClick(browser),
@@ -244,7 +246,17 @@ class Iteration {
       }
 
       await engineDelegate.beforeBrowserStop(browser, index, result);
-      await browser.stop();
+
+      // if we are in debig mode we wait on a continue command
+      if (options.debug) {
+        await debug.breakpoint('End-of-iteration');
+      }
+
+      if (options.browser === 'firefox' && options.debug) {
+        log.info('Firefox is kept open in debug mode');
+      } else {
+        await browser.stop();
+      }
       // Give the browsers some time to stop
       await delay(2000);
       await engineDelegate.afterBrowserStopped();
@@ -329,7 +341,11 @@ class Iteration {
         if (options.connectivity.variance) {
           await removeConnectivity(options);
         }
-        await browser.stop();
+        if (options.browser === 'firefox' && options.debug) {
+          log.info('Firefox is kept open in debug mode');
+        } else {
+          await browser.stop();
+        }
       } catch (e) {
         // Most cases the browser been stopped already
       }

package/lib/firefox/webdriver/builder.js

@@ -103,6 +103,12 @@ module.exports.configureBuilder = function (builder, baseDir, options) {
     });
   }
 
+  if (options.debug) {
+    ffOptions.addArguments('--devtools');
+    // Mozilla use detach to make sure you can inspect the browser
+    ffOptions.setPreference('detach', true);
+  }
+
   if (!options.skipHar) {
     if (options.android) {
       log.info('Skip install HAR trigger on Android');
@@ -110,8 +116,10 @@ module.exports.configureBuilder = function (builder, baseDir, options) {
       // Hack for opening the toolbar
       // In Firefox 61 we need to have devtools open but do not need to choose netmonitor
       // ffOptions.setPreference('devtools.toolbox.selectedTool', 'netmonitor');
-      ffOptions.setPreference('devtools.toolbox.footer.height', 0);
-      ffOptions.addArguments('-devtools');
+      if (!options.debug) {
+        ffOptions.setPreference('devtools.toolbox.footer.height', 0);
+        ffOptions.addArguments('-devtools');
+      }
 
       ffOptions.addExtensions(
         path.resolve(

package/lib/support/cli.js

@@ -75,6 +75,18 @@ function validateInput(argv) {
     return 'You need to specify the --safari.deviceUDID when you run the simulator.';
   }
 
+  if (argv.debug && argv.browser === 'safari') {
+    return 'Debug mode do not work in Safari. Please try with Firefox/Chrome or Edge';
+  }
+
+  if (argv.debug && argv.android) {
+    return 'Debug mode do not work on Android. Please run debug mode on Desktop.';
+  }
+
+  if (argv.debug && argv.docker) {
+    return 'There is no benefit running debug mode inside a Docker container.';
+  }
+
   if (argv.tcpdump) {
     if (!hasbin.all.sync(['tcpdump'])) {
       return 'You need to have tcpdump in your path to be able to record a tcpdump.';
@@ -1159,6 +1171,12 @@ module.exports.parseCommandLine = function parseCommandLine() {
       describe:
         'The wait time before you start the real testing after your pre-cache request.'
     })
+    .option('debug', {
+      type: 'boolean',
+      default: false,
+      describe: 'Run Browsertime in debug mode.',
+      group: 'debug'
+    })
 
     .count('verbose')
     .config(config)
@@ -1253,6 +1271,13 @@ module.exports.parseCommandLine = function parseCommandLine() {
     set(argv, 'visualMetrics', get(argv, 'visualMetrics', true));
   }
 
+  // Set the timeouts to a maximum while debugging
+  if (argv.debug) {
+    set(argv, 'timeouts.pageload', 2147483647);
+    set(argv, 'timeouts.script', 2147483647);
+    set(argv, 'timeouts.pageCompleteCheck', 2147483647);
+  }
+
   return {
     urls: argv._,
     options: argv

package/package.json

@@ -1,11 +1,11 @@
 {
   "description": "Browsertime",
-  "version": "16.7.0",
+  "version": "16.8.0",
   "bin": "./bin/browsertime.js",
   "dependencies": {
     "@cypress/xvfb": "1.2.4",
     "@devicefarmer/adbkit": "2.11.3",
-    "@sitespeed.io/chromedriver": "101.0.4951-15",
+    "@sitespeed.io/chromedriver": "102.0.5005-27",
     "@sitespeed.io/edgedriver": "101.0.1210-32",
     "@sitespeed.io/geckodriver": "0.31.0",
     "@sitespeed.io/throttle": "3.1.1",
@@ -26,7 +26,7 @@
     "lodash.merge": "4.6.2",
     "lodash.pick": "4.4.0",
     "lodash.set": "4.3.2",
-    "selenium-webdriver": "4.1.2",
+    "selenium-webdriver": "4.2.0",
     "yargs": "17.4.1"
   },
   "optionalDependencies": {