Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Open Karma debug.html page on startup

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();
});
like image 667
TwitchBronBron Avatar asked Oct 08 '15 18:10

TwitchBronBron


People also ask

What is Karma Jasmine HTML?

Reporter that dynamically shows tests results at debug. html page. You can also run a describe block, or a single test.


2 Answers

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.

like image 156
ntrp Avatar answered Oct 09 '22 22:10

ntrp


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.

like image 31
Alexander Heimbuch Avatar answered Oct 09 '22 21:10

Alexander Heimbuch