javascript - 如何为可视化组件创建单元测试

Question

我是 ScadaJS 的作者我需要为视觉组件创建单元测试。到目前为止，这些组件都是通过人工交互来手动检查的。

例如，this bug通过屏幕截图简单地描述了可视化组件的问题所在。记者说“它应该看起来像this，但看起来像that，这不是预期的”。开发人员修复该组件，在展示页面中手动检查它，如果一切顺利，则关闭问题。

由于一个组件的更改可能会破坏多个其他组件，因此我认为我们应该自动化这些测试。人们如何在视觉 Material 发挥作用的图书馆中进行此类检查？

猜测

我们可以编写一个脚本来自动创建鼠标移动和点击，然后它将创建一个.gif，用于创建引用点。如果发生任何变化，两个 gif 的差异将不会是黑色的 .gif，因此测试套件将抛出异常。如果我们设置一个标志来指示“该组件一切正常，我只更改了字体大小”，那么它将使用新的 .gif 作为引用点。

Answer 1

Selenium可能是值得一看的东西。图像比较可能是一种选择，但我认为它不是很有用。即使组件中最轻微的变化也会破坏测试，并且存储引用图像是相当乏味的工作。