是否有有效的自动化接口测试？

Question

我与C#合作，为我的代码编写了有效的自动化测试，这些测试将为我保证我们业务的核心，也就是系统的功能。

现在我在一家广告公司工作，现在我们的大问题是界面/设计问题，比如元素错位、颜色、文本字体、javascript特性，比如fadeIn/fadeOut和slideIn/slideOut元素，css问题，比如与z-index重叠的元素，等等……

像Selenium/WatiN这样的工具不适合我，因为这些工具是用来测试功能的。而不是设计(HTML、CSS)本身。HTML/CSS/Javascript在设计上(而不是在功能上)是脆弱的。

今天，在设计中同时测试HTML/CSS/Javascript的最好方法是手动测试:一个人在页面上寻找错误。

有没有一种有效的方法来自动测试这些东西？

Answer 1

我不确定如何测试动态的东西，例如淡入和淡出，但静态布局可以用一种直接的方式进行检查。作为一个规则，你应该有一个设计(化妆，模型)作为每个页面的图像。然后使用Selenium或其他自动化工具拍摄每个页面的快照，并将它们与相应的设计进行比较。理想情况下，应该有逐个像素的匹配，但您可以管理一些容差。

Answer 2

有一些验证器可以用来验证它们。

示例:超文本标记语言( http://validator.w3.org/ )

CSS ( http://csslint.net/ )

JS ( http://www.jslint.com)

没有真正的方法来“作为一个整体”来测试所有这些。原因是HTML和CSS是可视化的“表示”层。在这些语言中，不同的浏览器可以根据它们的版本呈现元素、操作、事件以及更多不同的内容。相信我，作为前端开发人员，这是一个很大的挫折。

大多数JavaScript框架现在都支持所有主流浏览器(IE6+、FFOX、Chrome、Safari、Opera等)

这是一个将通知您哪些内容与HTML5和CSS3兼容的站点：http://findmebyip.com/litmus

再次抱歉，但没有办法(至少我所知道的只是在全球范围内“测试”)所有这些事情。

如上所述，就在环境中进行测试而言，JsLint可能是您所指的最接近的东西。但是，它不能检查您的超文本标记语言或CSS与JavaScript语法的一致性，以及正确显示的预期结果。

由于多年来浏览器一直很不可靠，而且缺乏标准兼容性，因此没有“通用”的测试方法。

如果您只想“测试”一个站点在“每个已知的浏览器”中的外观，那么您将希望查看下面这样的内容：http://browsershots.org/

但是，它不会测试您的Javascript。