目前我正在为 JS 项目进行单元测试。我唯一能做的自动化测试就是功能。
问题：有没有办法自动化外观测试？我的意思是，目前我不知道某些在 Chrome 中完美运行的样式在 IE 中已关闭，除非我打开 IE 浏览器并查看我的页面。
我正在考虑在所有 DOM 事件期间以相同的窗口大小/分辨率截取页面。他们比较这些图像，如果有任何显着差异，然后将其作为失败的测试（“发现错误”之类的东西）吐出来。
那里有类似的东西吗？我真的不想重新发明轮子。
我不是在问“我如何截取网站的屏幕截图”我是在问“我如何分析已经截取的屏幕截图”
【问题讨论】：
标签： javascript css html dom automated-tests
我不知道自动化.. 但您可以使用跨浏览器服务来测试您的网站，如下所示：
还有 Browsershots：
但最好的测试方法是在不同的浏览器中打开网站并查看它以获得最准确的功能呈现和基于不同浏览器版本的显示问题
更新
自动缩略图截图服务：
对于 IE 有
除非您在服务器上执行捕获不同分辨率屏幕截图的操作
或者@michaelt 在下面的建议
其他更新
我在下面看到你的例子..还有这个
http://www.imagemagick.org/Usage/compare/
这种类型的图像库只是显示像素数据的差异..要使其自动化，您必须混合 js、ajax 与服务器对话并捕获和比较图像..但它需要比较数量图像中的颜色，如果这些颜色在每个图像中与亮度相同......然后让它在服务器上的 cron 作业上运行......
在这个 stackoverflow 问题中比较像素数据的另一种方法：
How does comparing images through md5 work?
希望对你有帮助
【讨论】：
我建议尝试Selenium WebDriver。 WebDriver 界面功能非常丰富，比如截图，还有很多不同浏览器的所谓驱动，包括Internet Explorer。有一些 WebDriver 的 JavaScript 实现，我使用 wd 和 WebdriverJs 取得了不同程度的成功。
如果您选择使用 JavaScript 实现，您可以相对轻松地开始使用 WebDriver 作为任何用 Mocha 或其他语言编写的单元测试的一部分。
编辑：
好像我误解了你的问题。如果您想比较屏幕截图，您可以使用图像识别工具，例如Sikuli。我只使用了它的 Java API，但它也可用于 Python。 Sikuli 可以很容易地成为任何测试的一部分，例如 TestNG 或 JUnit。给它一个图像，它会在给定区域（或整个屏幕）搜索看起来像它的图像。如果它发现屏幕的某个部分看起来像图像，它会将其连同确定它们相同的程度一起返回给您。
对于您的用例，您可以在某个文件服务器上放置一个图像，表示您的页面各部分应该的外观，并让测试确保它们都存在。如果 Sikuli 找不到它们，或者找到它们但确定性非常低，那么您将无法通过测试。
【讨论】：