我个人认为，这样的工具允许您以声明性的方式定义一个测试，即某个东西应该是什么样子的，然后在您的测试的实际文件上运行一个复杂的启发式，以确定它与您的声明性定义的"接近程度"。
有一种方法可以使用GalenFramework测试您想要的内容，这是我帮助开发的一个工具。它是一个特殊的工具，有自己的语言，可以表达网站应该是什么样子。它是基于Selenium的，如果你需要在不同的浏览器中检查它，可以在Selenium Grid中运行。目前这个工具正在做什么-它会获取页面上指定元素的位置，并检查它们之间的相对位置。例如，如果你想检查菜单面板是否位于页眉下方，并拉伸到浏览器的宽度，高度为50像素，你可以这样做：

menu
    below: header 5 px
    width: 100% of screen/width
    height: 50px

如果你不想Assert精确值，你可以这样做

menu
    below: header 0 to 5 px
    width: 90 to 100% of screen/width
    height: 45 to 55px

该工具对于测试响应式设计非常有用，因为您可以使用自定义标签来精确匹配您的需求。例如，如果我们想表达桌面上的"侧面板"应该位于屏幕的右侧，静态宽度为300像素，但在移动设备上，它应该位于"内容"下方，并延伸到浏览器的整个宽度，您可以这样做：

@ desktop
---------------------
content
    inside: screen 0px left

side-panel
    inside: screen 0px right
    near: content 0px right
    width: 300px

@ mobile
--------------------
content, side-panel
    width: 100% of screen/width

side-panel
    below: content 0px

关于这个工具的信息并不多，因为它是一个新的工具。目前只有一篇文章解释了如何使用Galen Framework http://mindengine.net/post/2013-11-16-tdd-for-responsive-design-or-how-to-automate-testing-of-website-layout-for-different-devices/测试响应网页。
您也可以在官方网站http://galenframework.com上找到完整的文档

您可以尝试以下工具：Screenster、mogotest。两者都使用视觉匹配进行布局测试。

我不认为你需要复杂的图像分析。正如前面提到的，不同的浏览器之间会有一些小的差异。同样，一些你可能认为太小而不予考虑的东西可能是非常重要的，比如一个小图标的变化。
如果你想进行跨浏览器测试，自动化将是非常困难的。但是你可以创建一个工具来检查意外的视觉变化。保存一个所需的DOM状态，然后将其与更改后的版本进行比较，这有助于突出问题。如果你更改了一个CSS类，希望它只对页面起作用，运行你的测试将揭示对其他页面的意外连锁影响。

如果你对CSS和HTML在几个浏览器上的呈现感兴趣，你可以自动化比较屏幕截图的测试。
我曾经参与过一个类似的测试，首先我们所有的CSS都是从less编译的，然后测试。基本上这个过程是生成基本的截图，然后当有变化的时候，它会比较新的截图。
下面是我在NodeJS中创建的一个小CSS测试项目：https://github.com/adcarabajal/generator-css-testing
干杯

如果你对CSS HTML视觉测试感兴趣，differencify可以帮你完成。

如果你使用Java + Selenium测试自动化，你可以尝试这个插件：https://github.com/webrelab/layout_testing
此组件允许您根据当前状态与引用状态得比较来检测页面可视显示中得更改.
该组件不使用截图。工作基于元素的样式、大小和排列的属性值的计算。
该组件自动查找指定区域中屏幕的所有视觉上重要的元素，并执行所有必要的度量。

最后一个问题是，如果这些工具不存在，它们是否值得编写？
我不这么认为，因为它需要几秒钟的时间来查看页面，看看是否所有的元素都正确呈现，而您可能会花费至少几个星期的时间从头开始编写和测试这样的工具。