测试d3(和其他基于SVG的)Web应用程序

Testing d3 (and other SVG based) Web Applications

本文关键字：SVG Web 应用程序 d3 其他 测试      更新时间：2023-09-26

我有一个web应用程序，使用d3库进行一些复杂的基于SVG的可视化。

我对我的服务器端代码和JavaScript模型进行了自动化测试(我在JavaScript中使用MVC之类的架构)。它们在每次提交时都在Jenkins CI服务器上运行。现在我需要弄清楚如何测试我的视图。

其他人如何解决这个问题，你使用什么工具?

我的一些想法…

  • 将生成的SVG序列化到文件并与基线进行比较
  • 自动捕获浏览器图像并执行图像diff
  • 别的吗?

谢谢!

您给出的示例是用于测试图形输出。为此，你可以使用像PhantomCSS, Sikuli这样的截图工具，或者用你自己的similar .js。

但是如果你的问题是关于测试基于D3.js/svg的应用，正如标题所暗示的那样，你应该看看D3测试套件。大多数测试甚至不需要html fixture，因为它们基本上是在测试API。如果对你来说最重要的是视觉效果的一致性，那就使用截图diff工具。对于导航和用户体验流，最好使用浏览器自动化，如Selenium。但是对于单元测试，当你想要确保拥有一致的API和模块化代码时，大多数带有间谍、fixture和mock功能的测试框架(例如Jasmine、誓言、Mocha)就可以了。

听起来Selenium应该做您正在寻找的事情。它驱动web浏览器，因此允许您检查浏览器中实际发生的事情，而不是假设SVG将被正确呈现。它允许你将单元测试指定为一系列的点击/按键，并且它与Jenkins集成得非常好。

我目前正在考虑的解决方案是…

  1. 创建一个简单的文件(csv)，其中包含要捕获的url列表，以及裁剪区域(见3)
  2. 加载每个url并使用Selenium
    3. 捕获屏幕截图
  3. 使用ImageMagick从截图中裁剪可视化(所以我们只是测试可视化而不是完整的ui)
  4. 使用ImageMagick将图像与基线比较
  5. 用旧的、新的和不同的图像生成HTML报告(对于任何不同的图像)
  6. 为CI服务器生成JUnit xml输出

捕获浏览器并验证图形是一个很好的测试。但我觉得这是D3本身的责任，而不是我们的代码。

我也有类似的问题。(我的问题)。请查看我贴在那里的答案

相关文章：