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();
});

Saudra

I agree, it's annoying to have to click that every time, especially when using karma-jasmine-html-reporter-livereload. I've been wondering the same thing. Can you post what you've already tried so I don't reinvent your wheels? – Pulpboard

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.

Tb

Still a tiny bit of a hack, but this does exactly what I need! And what's nice is that I can check that file in and now everyone on the team gets this feature with zero configuration. Thanks! – Saudra

I'm using this in conjunction with karma's customLaunchers setting to pass the --auto-open-devtools-for-tabs and '--user-data-dir=' + path.resolve(__dirname, './.chrome') flags to Chrome resulting in a window that opens in the same place with the same devtools layout already open to the debug tab every run. – Dermatogen

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.

Headline

This opens both the debug.html page and the default page. – Trictrac

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.

Pulpboard

Very creative. :) Unfortunately this doesn't quite have the permanence that I was looking for. If I wipe out my node_modules folder, or another person on my team pulls down the code and runs it, this change won't be persisted for them unless I also check in the node_modules folder with at least this file in it. – Saudra

Down & dirty, like I said. If you come up with anything more permanent, make sure to post it here please! – Pulpboard

Answer 4

You can set client.clearContext to false which is true by default.

See http://karma-runner.github.io/6.4/config/configuration-file.html#clientclearcontext

// Karma configuration

module.exports = function(config) {
  config.set({
    // [...]

    client: {
      clearContext: false
    }

    reporters: [ 'kjhtml' ],

    // [...]
}

Whitleywhitlock