如何爲可視組件創建單元測試

Question

我是ScadaJS的作者，我需要爲可視組件創建單元測試。到目前爲止，組件是通過人工交互手動檢查的。

例如，this bug只是通過屏幕截圖描述了可視組件的問題。記者說：「它應該看起來像this但看起來像that，這不是預期的事情」。開發人員修復組件，在展示頁面中手動檢查它，如果一切順利，請關閉該問題。

由於一個組件的更改可能會打破多個其他組件，因此我認爲我們應該自動執行這些測試。在視覺材料發揮作用的圖書館中，人們如何進行這種檢查？

猜測

我們可以寫一個腳本，該腳本會自動創建鼠標移動和點擊，然後它會創建將用於創建一個參考點的.gif。如果有什麼變化，兩個GIF的差異將不會是黑色的，所以測試套裝會拋出異常。如果我們設置一個標誌來指示「此組件一切正常，我只更改了字體大小」，那麼它將使用新的.gif作爲參考點。

Answer 1

Selenium可能是值得結賬的東西。圖像比較可能是一種選擇，但我不認爲它是非常有用的。即使組件中最輕微的變化也會破壞測試，並且存儲參考圖像是非常繁瑣的工作。