使用屏幕截图进行CSS跨浏览器测试

Question

目前我正在为JS项目进行单元测试。我唯一可以进行自动化测试的是功能。

问题：有没有办法自动进行外观测试？我的意思是，目前我不知道一些在Chrome中完美运行的样式在IE中关闭，除非我打开IE浏览器并查看我的页面。

我正在考虑在具有相同窗口大小/分辨率的所有DOM事件期间截取页面的屏幕截图。他们比较这些图像，如果有任何显着差异，那么就把它吐出来作为一个失败的测试（“找到错误”的东西）。

那里有类似的东西吗？我真的不想重新发明轮子。

我不是在问“我怎么能截取网站的截图”我问“我如何分析已拍摄的截图”

Answer 1

我不了解自动化..但您可以使用跨浏览器服务来测试您的网站：

http://www.browserstack.com/

还有Browsershots：

http://browsershots.org/

但最好的测试方法是在不同的浏览器中打开网站并查看它以获得最准确的功能呈现并根据不同的浏览器版本显示问题

<强>更新

自动缩略图截图服务：

http://www.shrinktheweb.com

对于IE有

http://www.iescreenshot.com/

除非您在服务器上执行某些操作，以捕获不同分辨率的屏幕截图

和@michaelt建议

其他更新

我在下面看到你的例子..还有这个

http://www.imagemagick.org/Usage/compare/

这种类型的图像库只显示像素数据的差异..为了使其自动化你必须混合js，ajax与服务器通信并捕获和比较图像..但它需要它来比较数字图像中的颜色，如果这些颜色在每个图像中与光度相同，然后让它在服务器上的cron作业上运行...

比较此stackoverflow问题中的像素数据的另一种方法：

How does comparing images through md5 work?

我希望它有所帮助

Answer 2

我建议您尝试Selenium WebDriver。 WebDriver界面实际上功能丰富，以屏幕截图为例，所谓的驱动程序适用于大量不同的浏览器，包括Internet Explorer。 WebDriver有一些JavaScript实现，我使用wd和WebdriverJs获得了不同的成功。

如果您选择使用JavaScript实现，您可以相对轻松地开始使用WebDriver作为使用Mocha编写的任何单元测试的一部分。

修改：

好像我误解了你的问题。如果要比较屏幕截图，可以使用Sikuli等图像识别工具。我只使用它的Java API，但它也适用于Python。 Sikuli很容易成为TestNG或JUnit中编写的任何测试的一部分。给它一个图像，它将在给定区域（或整个屏幕）中搜索看起来像它的图像。如果它找到一个看起来像图像的屏幕的一部分，它将返回给你以及确定它们是否相同的程度。

对于您的用例，您可以在某个文件服务器上有一个图像，表示您的页面部分应该的外观，并让测试确保它们都存在。如果Sikuli找不到它们，或者发现它们但确定性很低，那么你将无法通过测试。