你知道网页外观比较器吗？答案

【问题标题】：Do you know a webpage appearance comparator?你知道网页外观比较器吗？
【发布时间】：2009-06-30 02:27:38
【问题描述】：

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

这甚至可能吗？还有这种开源程序吗？

我在 google 上搜索过，但到目前为止我只找到了一个候选人，那就是 HTML 匹配。

【问题讨论】：

你在追求什么？差异工具或您的网站在不同浏览器中的工作方式的视觉比较
听起来他在寻找视觉比较工具。 “问题是我不想比较代码 html，而是输出设计。”
听起来像这个问题：stackoverflow.com/questions/31722/…

【解决方案1】：

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

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

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

它并不完美，但应该可以。

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

【讨论】：

HTML 匹配网站是 dead (*2003, †2016) 但我刚刚找到了幸存的下载网站：Tucows、Archive 和幸存的公司网站：Salty Brine Software（“自 1993 年以来”)。

【解决方案2】：

解决方案：“compare web pages” 工具。（“我们从 1999 年就开始这样做了。它是免费的。”）

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

【讨论】：

但是你会显示无法看到的元标记的差异吗？

【解决方案3】：

在窗户下：

http://www.htmlmatch.com/

【讨论】：

网站现在是dead (*2003, †2016)。工作下载站点：Tucows、Archive。幸存的公司网站：Salty Brine Software（“自 1993 年以来”）。

【解决方案4】：

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

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

【讨论】：

【解决方案5】：

这些在线工具并不出色：

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

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

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

【讨论】：

@Quentin aaronsw.com/2002/diff 与 OP 的 HTML Match 完全相同，但它是在线工具，而 HTML Match 是离线工具。

【解决方案6】：

您要查找的关键字是“diff”。

一个可以显示两个文件（html 标记或其他）之间差异的好程序是 ExamDiff 用于 windows。

【讨论】：

"问题是我不想比较代码 html，而是输出设计。" -- 所以 diff 不希望他/她正在寻找。

【解决方案7】：

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

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

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

【讨论】：

如果 html 段相同，为什么需要区分它的图像表示？
您可以通过更改自定义广告图片或推荐的其他项目预告图片来过滤常规响应。如果您对完整的屏幕截图进行图像比较，他们会妨碍您，您必须比较片段。还有其他自定义的东西，如查看/类似计数器、登录凭据等。除非您确定页面不使用 javascript 来更改 DOM，否则 HTML + CSS 不是一种方法。如果您比较 CSS + DOM，您可以使用它。但这可能会产生误报。

【解决方案8】：

您可以通过使用BrowserStack、Cross Browser、PhantomJS 等系统的屏幕输出与Araxis Merge Pro 进行视觉比较

【讨论】：