启动时打开 Karma debug.html 页面

Question

简短版：

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

长版：

我不太喜欢使用控制台报告器来处理 Karma，所以我一直在使用 karma-jasmine-html-reporter-livereload，它输出到 Karma 的 localhost:9876/debug.html 文件。问题是，每次我开始调试会话时，我都必须单击 karma 打开的网页中的“调试”按钮。

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

这是我的 gulp 任务。 “监视”任务监视我的源 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

我找到了一种让它永久化的方法，尽管它并不完美。你可以在上下文中注入一个 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)

这将确保该窗口仅在第一次运行测试时打开，并且仅在 context.html 中执行。

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

Answer 2

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

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

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

Answer 3

我想不出一个优雅的方法来做到这一点，所以这是一个肮脏、低调、不好、腐烂、完全可耻的作弊，但它确实有效。 :)

在 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([])
  })
}

享受。你叛逆，你。