在 Azure DevOps 测试结果中显示 Jasmine 屏幕截图

Posted 2023-02-24

【中文标题】在 Azure DevOps 测试结果中显示 Jasmine 屏幕截图

【英文标题】：Show Jasmine screenshots in Azure DevOps test results

【发布时间】：2019-06-24 10:10:11

【问题描述】：

我正在使用 Protractor 和 Jasmine 进行 e2e 测试来测试我的应用程序。该代码位于 Azure DevOps 上，并自动生成和运行测试。 Azure 非常棒，当您的测试结果为 JUnit、xUnit、.. 格式时，您实际上可以生成带有图形的测试结果。

我安装了 protractor-jasmine2-screenshot-reporter，因为我希望能够在测试失败时显示屏幕截图。在我的电脑上本地运行得很好。每次生成屏幕截图并放置在正确的位置。它生成 .png 文件和一个 .html 文件。在 html 中有对 .png 文件的引用。

现在问题来了：屏幕截图捆绑在 html 中，但 azure 无法将 html 形成测试结果。

如何让 jasmine 将其转换为 Azure 将读取的格式，或者如何将屏幕截图插入 Azure 而不让 Azure 抱怨他无法阅读？ 我已经能够显示由生成 .xml 文件的 jasmine 报告器生成的测试结果，这不是问题。但是将屏幕截图/html 导入 Azure DevOps...

即使我可以通过屏幕截图将附件附加到测试中，也已经很棒了。

这两天我在网上到处找了三种可能性：

也许有一个插件可以截取屏幕截图，并以某种方式将其包含在 Azure 将读取的 xml 中。不幸的是，我只能找到生成 html 的插件。 我试图找到一种方法让 Azure 接受某种附件或接受 html，但似乎不会。 我搜索了将 html 转换为 xml 的方法，但似乎只能找到相反的方法。

一般问题：

如何显示 tfs 的测试结果截图。例如在附件中（如图所示）。

【问题讨论】：

你能分享你的管道吗？

@ShaykiAbramczyk 我不明白。这将如何帮助解决我的问题？你特别想看到什么可以帮助你制定答案？我真的不明白它有什么帮助

尝试重现问题，准确检查您尝试执行的操作。

我使用运行量角器脚本的 npm 脚本运行 e2e 测试（在我静默安装程序后，它已启动并运行测试）。管道的下一步是发布结果。现在我选择 JUnit 作为“测试结果格式”，并参考测试结果所在的 */e2e-results-junit.xml 和 **/e2e-results-screenshots.html。 xml 被正确读取，但他当然给 html 文件一个错误，因为他需要 JUnit 而不是 html 文件。

报告者不仅要生成屏幕截图，而且必须在测试结果文件中链接。很少有生成器这样做。标准的 Visual Studio TRX 格式支持这一点。

【参考方案1】：

您可以使用jasmine-trx-reporter。安装 npm 包并将以下代码添加到量角器配置中。此外，不要忘记使用 Azure DevOps 中的发布测试结果任务发布您的 trx 文件。

const TrxReporter = require('jasmine-trx-reporter');

jasmine.getEnv().addReporter(new TrxReporter(
  folder: 'e2ereport/trx/',
  takeScreenshotsOnlyOnFailures: true,
));