View Karma Test Output in a Browser?

I'm new to Karma, but I'm wondering how to view its output in a browser (much like the way one interacts with Jasmine, when a runner.html file is present).

I watched the introductory screencast and I understand how to view test outputs in a console window, but in my browser, I get almost no content for Karma except

Karma - connected

Please advise! I would like to avoid having to maintain a separate runner.html file, since the Karma configuration file already requires me to include all necessary script links.

Solution 1:

AFAIK, the previous two answers are correct in that you'll want to run the tests in a browser; click DEBUG and view the output in the console.

Politely contradicting the previous answer, I regularly do this and step-through debug with full variable interaction using Karma.

The proper answer to your question, because what you want is pretty HTML based output, is "no." However, this plugin for karma may give you the results you desire.

https://npmjs.org/package/karma-html-reporter

Solution 2:

You need to run it with singleRun = false in karma.conf.js and then click the button on the top corner that says "DEBUG". Then you should see the output and it won't disappear or close. You will also be able to use the console to debug.

Worth noting that debugging e2e tests isn't that easy because they are "future" based so you won't be able to intercept values (afaik).

Solution 3:

Hi In my case I solved this problem by installing karma-jasmine-html-reporter and putting it in reporters array.

• Install npm i -D karma-jasmine-html-reporter
• add 'kjhtml' in your reporter.
• add client:{clearContext:false}

var gulpConfig = require('./build/build.conf')();
module.exports = function (config) {
    config.set({
        browsers: ['Chrome'],
        basePath: './',
        plugins: [
          // all other plugins
          'karma-jasmine-html-reporter'
        ],
        colors: true,
        client: {
            clearContext: false    // will show the results in browser once all the testcases are loaded
        },
        frameworks: ['jasmine', 'jasmine-sinon', 'sinon'],
        files: [].concat(
            gulpConfig.deps.lib,
            'js/**/*mother*.js',
            'js/**/*mother.*.js',
            'js/**/*.tests.js'
        ),
        logLevel: config.LOG_INFO,
        reporters: ['kjhtml', 'progress', 'coverage'],
    });
};