你知道一个网页外观比较器吗？

Question

我需要一个工具来比较一个网站的设计,我不想只比较HTML代码,而是输出设计.

这甚至可能吗？还有这种开源项目吗？

我搜索了谷歌,但到目前为止我只得到一个候选人,这是一个HTML匹配.

Answer 1

在现代网页中,外观由各种"事物"控制:html代码,css样式和图像至少(在某些页面中也是javascript).简单的基于文本的差异编程是不够的,因为它们的输出可能与网页外观无关(即清理css可能会显示许多差异,但渲染的网页保持不变).

对于更简单的页面,上面提到的HTML Match可以完成这项工作.如果我必须比较两个"复杂"页面的设计(包括布局,空间,图像和文本更改),我会采取两步法:

1. 在html源上运行diff工具以突出显示文本内容差异.然后我会修改其中一个页面以显示与另一个相同的内容(为了使下一步更准确和'专注'以显示'真实'布局更改).当然它只适用于非常相似的html.
2. 在同一个Web浏览器中加载页面,从固定位置的渲染输出中获取一些截图并比较图像(即使用ImageMagick).它应该显示渲染输出中的所有视觉差异.

它不完美,但应该工作.

[更新] HTML Match似乎已经死了,请参阅此答案以获得替代解决方案.