javascript - 带截图的 CSS 跨浏览器测试

Question

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

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

我正在考虑在具有相同窗口大小/分辨率的所有 DOM 事件期间截取页面的屏幕截图。他们比较这些图像，如果有任何显着差异，则将其作为失败的测试吐出(“发现错误”之类的东西)。

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

我不是在问“我如何截取网站的屏幕截图”我是在问“我如何分析已经截取的屏幕截图”

Answer 1

我不知道自动化..但是你可以使用跨浏览器服务来测试你的网站，比如:

http://www.browserstack.com/

还有浏览器截图:

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?

希望对你有帮助