UI组件和小部件的测试驱动开发

Test Driven Developement for UI components and widgets

本文关键字：测试开发组件小部 UI 更新时间：2023-09-26

我正在构建一个相当大的JS应用程序，其中有许多UI小部件需要相互交互。

由于我使用AngularJS作为核心，我想对每个控制器进行单元测试，以跟踪它们的正确行为。

好的。

现在我也想测试UI，我有一些用例是手动完成的，看看组件是如何反应的。

示例：

我有一个滑块，我在其中加载不同大小的图片，每次滑块重新加载和重新启动时，它都必须包含4个图片，并且大小正确（根据屏幕分辨率）。

我想使用CasperJS并编写一个测试脚本来检查每次刷新时滑块的框大小，然后检查是否所有元素都在那里，检查它们的大小，点击它们等等…

我知道这在很大程度上取决于浏览器/系统，但也许必须有一个最佳的方法来做到这一点

我的看起来有点像黑客，而且不优雅，我怎么能做得比这更好呢？以前有人遇到过这个问题吗？谢谢

Selenium Webdriver将是一个很好的工具-它可以让你直接通过浏览器编写脚本来测试你的UI，并且被广泛使用，所以应该有很多帮助和建议。此外，它还有一个额外的好处，那就是可以很容易地在多个浏览器上运行测试（IE、Firefox、Safari、Chrome都支持）。

我个人发现它对这类测试非常好——当然，把测试放在一起需要付出相当大的努力，而且脚本通常没有人们希望的那么干净，但最终它带来了很大的价值。