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

Question

我有一个Web应用程序,它使用d3库进行一些基于SVG的复杂可视化.

我对我的服务器端代码和JavaScript模型进行了自动化测试(我在JavaScript中使用了类似MVC的体系结构).这些都在每次提交时在Jenkins CI服务器上运行.现在我需要弄清楚如何测试我的观点.

别人如何解决这个问题以及你使用什么工具？

我有过一些想法......

• 将生成的SVG序列化为文件并与基线进行比较
• 自动捕获浏览器图像并执行图像差异
• 别的什么？

谢谢!

Answer 1

您提供的示例用于测试图形输出.为此,您可以使用截图差异工具,如PhantomCSS,Sikuli或使用Resemble.js自行编辑.

但是,如果您的问题更多地是关于测试基于D3.js/SVG的应用程序,正如标题所暗示的那样,您应该看看D3 测试套件.大多数测试甚至不需要html夹具,因为它们基本上是在测试API.如果最重要的是视觉效果的一致性,请使用屏幕截图差异工具.对于导航和用户体验流程,您可以更好地使用Selenium等浏览器自动化.但对于单元测试,您希望确保具有一致的API和模块化代码,大多数具有间谍,夹具和模拟功能的测试框架都可以(即Jasmine,Vows,Mocha).

Answer 2

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