分组测试结果：Karma / Protractor 与 Jenkins 集成

Question

我已经成功设置了一个 Jenkins 作业，它执行我的 Karma 测试（使用 Angular-CLI）以及我的 Angular4 应用程序的量角器测试（使用 Angular-CLI）。这两个测试都会输出一个 XML 文件，然后 Jenkins 会使用该文件来显示结果和详细信息。

我的问题非常简单，通过以下屏幕截图可见：我无法区分我的测试套件是来自量角器测试还是业力测试。

• 红色突出显示的是我的量角器测试套件
• 未突出显示的是我的 Karma 测试套件。

因此，我问自己以下问题：

• 是否有一种良好的实践来管理当今的单元测试和具有持续集成的端到端测试？
• 我是否必须在不同的 Jenkins 作业中分开测试？这是否意味着我以后需要在 Jenkins 管道工作流中使用两个不同的 JenkinsFile？
• 或者相反，我可以简单地为每个测试套件设置一个前缀，以便我可以轻松管理所有内容？

最后两个选项似乎都不切实际。

---

编辑：在投票结束之前仔细考虑问题并完整阅读此问题，因为它不是基于意见的。我会明确表示：我正面临持续集成的不切实际的实施，对问题有明确的定义，我希望有一个解决方案可以解决我当前的问题，如果可能的话，一些关于测试前端的良好实践也可以解决此问题的应用程序。

Answer 1

虽然这是一个常见问题，但我认为没有最佳或好的做法。这仅取决于开发人员希望如何在构建服务器上显示测试结果。

我为您的特定用例提供了一个解决方案，希望能解决您的技术问题。

我自己使用 Teamcity，但我也将其调整为与 Jenkins 一起使用。我已经使用 Angular CLI 设置了一个演示应用程序进行演示。

构建 Jenkins 和 TeamCity 等服务器只需从结果文件（Jenkins，通常是 JUnit，我将在下面演示）或通过标准输出 (TeamCity) 读取服务消息。因此，我们可以在写入这些记录之前操作测试结果数据，这使我们能够区分 karma（单位）和量角器（e2e），而无需在单独的作业上运行测试或使用不必要的前缀使测试套件膨胀.

您将需要两个额外的包，karma-junit-reporter 和 jasmine-reporters。我们将对 Karma 使用 karma-junit-reporter，对 Protractor 使用 jasmine-reporters。

这些包允许我们在将结果写入 JUnit 文件之前修改套件名称，这将帮助我们区分 unit 和 e2e。

您可以按照每个工具提供的安装说明或按照我的以下实现：

安装 karma-junit-reporter：

npm install karma-junit-reporter --save-dev

对您的 karma.conf.js 文件进行以下更改：

将 karma-junit-reporter 添加到插件数组中：

require('karma-junit-reporter')

将 junit 添加到记者数组中：

reporters: ['progress', 'kjhtml', 'junit']

使用以下内容添加一个 junitReporter 对象：

junitReporter: {
        outputDir: 'testresults', 
        outputFile: 'karmatest.xml', 
        suite: 'unit',  // whichever prefix you wish to use
        useBrowserName: false, 
      }

安装 jasmine-reporters：

npm install jasmine-reporters --save-dev

请注意，截至发稿时； Protractor 的 jasmine-reporters 文档指出您应该运行 npm install --save-dev jasmine-reporters@^2.0.0 - 但是这会导致没有异常处理的问题。我建议安装最新的。

在protractor.conf.js文件的onPrepare函数中加入如下代码：

var jasmineReporters = require('jasmine-reporters');
return browser.getProcessedConfig().then(function (config) {
      var junitReporter = new jasmineReporters.JUnitXmlReporter({
        consolidateAll: true,
        savePath: 'testresults',
        filePrefix: 'protractor-test-results',
        modifySuiteName: function (generatedSuiteName, suite) {
          return 'e2e.' + generatedSuiteName; // whichever prefix you wish to use
    }
  });
  jasmine.getEnv().addReporter(junitReporter);
});

您现在应该配置您的 Jenkins 作业以运行 ng test、ng e2e 并添加构建后操作以发布 JUnit 测试结果报告，如下所示：

测试结果\*.xml

您的 Jenkins 测试结果仪表板现在将如下所示：

出于本演示的目的，我没有通过单元测试和 e2e 测试，因为您可以看到每个测试名称都有一个前缀来确定它是 unit 还是 e2e。您还可以通过单击包下的链接深入了解所有 e2e 或所有单元测试。

如果您有勇气并且有大量时间，您可以编写自己的实用程序，该实用程序与这些软件包完成相同的工作，以获得更个性化的结果。

我希望这可以帮助您实现所需的结果。

谢谢

Answer 2

您的问题是合理的，但是根据当前情况，此问题的解决方案更接近基于意见。

我们对 Teamcity 也有同样的问题，NUnit、Karma 或 Protractor 测试之间没有视觉差异。发生这种情况是因为对于 CI，所有测试都是相同的，它只是解析标准输出以搜索特定模式/格式（测试套件、测试名称等），但没有测试类型或测试种类之类的东西，因此没有分组按类型。

所以区分测试的唯一方法是使用命名约定或创建describe函数的特殊版本：

export describeProtractor(name:string, ...) {
     describe('(Protractor)' + name, ...);
} 

为了这个目的同时拥有多个工作真的很不方便。

另一种选择是使用 HTML Publisher Plugin 来显示由 karma/protractor html 报告器生成的测试结果，我从未使用过，这取决于你。