Open Karma debug.html page on startup

Question

The short version:

How do I start up Karma and have it open the debug.html file automatically in the same browser as the Karma start page?

The long version:

I'm not a huge fan of using the console reporters for Karma, so I have been using karma-jasmine-html-reporter-livereload which outputs to Karma's localhost:9876/debug.html file. The problem is, every time I start a debugging session, I have to click the 'debug' button in the web page that karma opens.

I would like to find a way to have karma open the debug.html page automatically through a gulp task. I run the tests in multiple browsers, so I would like the debug.html page to open as a second tab in each of the browsers that Karma opens. I would also like to be able to close that debug.html tab when karma closes. I've tried a bunch of things, with no success.

Here's my gulp task. The 'watch' task watches my source TypeScript files and compiles them into javascript...nothing fancy.

gulp.task('watch-test', ['watch'], function (done) {
    //start a livereload server so that the karma html 
    //reporter knows to reload whenever the scripts change
    livereload.listen(35729);
    gulp.watch('dist/src/**/*.js').on('change', livereload.changed);

    new KarmaServer({
        configFile: __dirname + '/karma.conf.js',
        singleRun: false
    }, done).start();
});

Answer 1

I found a way that makes it permanent although it is not perfect.. You can inject into the context a javascript:

files: [
    "test/init.js",
    ...
]

and put inside the file this code:

(function (window) {
    if (!window.parent.initDone && window.location.pathname === '/context.html') {
         window.parent.initDone = true;
         window.open('/debug.html', '_blank');
    }
})(window)

this will ensure that the window is open only the first time the tests are run and it will be executed only in context.html.

You can add any init code you wish inside that block.

Answer 2

You can use a customLauncher browser definition:

  customLaunchers: {
    ChromeDebugging: {
      base: 'Chrome',
      flags: [ '--remote-debugging-port=9333', '--auto-open-devtools-for-tabs', 'http://localhost:9876/debug.html' ]
    }
  }

And use this browser in your karma config.

Answer 3

I couldn't figure out a classy way to do it, so here's a dirty, low-down, no-good, rotten, totally shameful cheat, but it works. :)

In node_modules > karma > static > karma.js I added the following lines:

var debugWin = window.open('http://localhost:7676/debug.html','Debugme');
debugWin.focus();

Shown below in context, starting around line 366 (in version 0.13.19):

  var updateBanner = function (status) {
    return function (param) {
      var paramStatus = param ? status.replace('$', param) : status
      titleElement.innerHTML = 'Karma v' + VERSION + ' - ' + paramStatus
      bannerElement.className = status === 'connected' ? 'online' : 'offline'
    }
  }

  var debugWin = window.open('http://localhost:7676/debug.html','Debugme');
  debugWin.focus();

  socket.on('connect', updateBanner('connected'))
  socket.on('disconnect', updateBanner('disconnected'))
  socket.on('reconnecting', updateBanner('reconnecting in $ ms...'))
  socket.on('reconnect', updateBanner('connected'))
  socket.on('reconnect_failed', updateBanner('failed to reconnect'))
  socket.on('info', updateBrowsersInfo)
  socket.on('disconnect', function () {
    updateBrowsersInfo([])
  })
}

Enjoy. You rebel, you.