javascript - 测试 d3（和其他基于 SVG）的 Web 应用程序

Question

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

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

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

我曾经的一些想法...

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

谢谢！

Answer 1

The example you give are for testing the graphical output. For this you can use a screenshot diff tool like PhantomCSS, Sikuli or roll-up your own with Resemble.js.

But if your question is more genrally about testing D3.js/SVG-based apps, as the title implies, you should look at the D3 test suite. Most tests don't even need an html fixture because they are basically testing the API. If the most important thing for you is the consistency of the visual result, go with a screenshot diff tool. For navigation and UX flow, you are better with browser automation like Selenium. But for unit testing, where you want to ensure having a consistent API and modular code, most test frameworks with spies, fixture and mocking capabilities will do (i.e, Jasmine, Vows, Mocha).

Answer 2

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

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

Answer 3

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

Answer 4

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

我也有类似的问题。（我的问题）。请检查我在那里发布的答案。