啟動時打開 Karma debug.html 頁面

Question

簡短版本：

如何啟動 Karma 並讓它在與 Karma 起始頁相同的瀏覽器中自動打開 debug.html 文件？

長版：

我不是使用控制台報告器的忠實粉絲，所以我一直在使用karma-jasmine-html-reporter-livereload輸出到 Karma 的 localhost:9876/debug.html 文件。 問題是，每次我開始調試 session 時，我都必須單擊 karma 打開的 web 頁面中的“調試”按鈕。

我想找到一種方法讓業力通過 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([])
  })
}

請享用。 你反叛，你。

Answer 4

您可以將client.clearContext設置為false ，默認情況下為true 。

見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' ],

    // [...]
}