启动时打开 Karma debug.html 页面

Question

短版：

如何启动 Karma 并让它在与 Karma 起始页相同的浏览器中自动打开 debug.html 文件？

长版：

我不太喜欢使用 Karma 的控制台记者，所以我一直在使用 karma-jasmine-html-reporter-livereload 输出到 Karma 的 localhost:9876/debug.html 文件。问题是，每次启动调试会话时，我都必须单击 karma 打开的网页中的 'debug' 按钮。

我想找到一种方法让 karma 通过 gulp 任务自动打开 debug.html 页面。我运行在多个浏览器中进行测试，所以我希望 debug.html 页面在 Karma 打开的每个浏览器中作为第二个选项卡打开。我还希望能够在 karma 关闭时关闭 debug.html 选项卡。我尝试了很多东西，但没有成功。

这是我的 gulp 任务。 'watch' 任务监视我的源 TypeScript 文件并将它们编译成 javascript...没什么特别的。

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

我想不出一个经典的方法来做到这一点，所以这里有一个肮脏的、卑鄙的、不好的、烂的、完全可耻的作弊方法，但它有效。 :)

在 node_modules > karma > static > karma.js 我添加了以下行：

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

上下文显示如下，从第 366 行开始（在版本 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([])
  })
}

尽情享受吧。你叛逆，你

Answer 2

我找到了一种使它永久化的方法，尽管它并不完美。您可以在上下文中注入一个 javascript:

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

并将此代码放入文件中：

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

这将确保 window 仅在第一次测试运行时打开，并且仅在 context.html.

中执行

您可以在该块中添加任何您想要的初始化代码。

Answer 3

您可以使用 customLauncher 浏览器定义：

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

并在您的业力配置中使用此浏览器。

启动时打开 Karma debug.html 页面

Open Karma debug.html page on startup

javascript

debugging

node.js

karma-runner

gulp