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

Question

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

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

我搜索了谷歌，但到目前为止我只获得了一个HTML匹配。

Answer 1

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

对于更简单的页面，上面提到的HTML Match可以完成这项工作。如果我必须比较两个“复杂”页面的设计（包括布局，空间，图像和文本更改），我会采取两步法：

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

这不完美，但应该有效。

[更新] HTML匹配似乎已失效，请参阅this answer了解替代解决方案。

Answer 2

解决方案：“compare web pages”工具。 （“我们自1999年以来一直这样做。它是免费的。”）

示例输出（比较TP-Link USB集线器模型UH700和UH720的页面）：

Answer 3

在Windows下：

http://www.htmlmatch.com/

Answer 4

如果您使用的是KDE，则可以使用Kompare或KDiff3。

但是，如果您想查看您的网页在不同操作系统的不同浏览器中的显示效果，可以使用BrowserShots。

Answer 5

有这些在线工具 - 并不出色：

http://www.w3.org/2007/10/htmldiff

http://www.aaronsw.com/2002/diff/

我喜欢daisydiff的样子，但没有在愤怒中使用它：http://code.google.com/p/daisydiff/

Answer 6

您正在寻找的关键字是“diff”。

一个好的程序可以显示两个文件（html标记或其他文件）之间的差异，对于Windows来说， ExamDiff 。

Answer 7

我正在研究一个，我告诉你这很难，市场上什么都没有。也许Google和Bing在内部有一些东西。您可以使用一些图像比较工具来识别已更改图像的矩形区域。例如，这是所有现代视频压缩的一部分，但您必须为网页的不同区域（导航栏部分，主要文章，由广告拦截器过滤的区域等）执行此操作，因为其中一些可能会更改它仍然被认为是页面上的相同内容。

正如我所说的非常复杂的问题而没有确切的解决方案。

另一种是以非可视方式进行比较，只是比较每个html元素的计算机计算机样式。您必须破解浏览器才能访问布局树。它也没有官方API或现有的库/程序/黑客/补丁。

Answer 8

您可以使用Araxis Merge Pro，BrowserStack，Cross Browser等系统获取屏幕输出，从而与PhantomJS进行视觉比较