比较两个 HTML 源并显示视觉差异 [关闭]答案

【问题标题】：Compare two HTML sources and display visual differences [closed]比较两个 HTML 源并显示视觉差异 [关闭]
【发布时间】：2013-09-28 02:57:15
【问题描述】：

我试图展示两个 HTML 页面的不同之处。我试图找出一种方法，如果我可以比较两个网页的 HTML 源代码（几乎相似），并在视觉上显示/突出显示差异（在 UI 上）。

我的尝试：我想拍摄页面快照，然后使用Resemble.js 比较两张图片。但这也显示出非常细微的差异，结果也不清楚。

我想比较一下 DOM 结构或源代码，然后在 UI 上显示两个页面的实际不同之处。

有什么方法可以实现吗？我正在使用Selenium- Webdriver 来获取快照和 HTML 源代码。

编辑：

我想我的问题并不清楚。实际上，我想找出网页 HTML 内容的差异，以便检测当前正在执行的 A/B 测试。我首先将 html 源代码抓取到一个文本文件中，然后使用 Java-Diff util 将其与之前捕获的 HTML 源代码进行比较。这给了我在两个带有 HTML 源代码的文本文件中不同的实际行。

现在，问题是，我如何在 UI 上显示这种差异，就像突出显示我发现的不同区域一样？希望这会让它更清楚。

下面的代码显示了不同的行

List<String> original = fileToLines("HTML Source diff/originalSource.txt");
    List<String> revised = fileToLines("HTML Source diff/sourceAfterCookieClear.txt");

    // Compute diff. Get the Patch object. Patch is the container for computed deltas.
    Patch patch = DiffUtils.diff(original, revised);

    System.out.println("Printing Deltas\n");
    for (Delta delta : patch.getDeltas()) {
        String revisedText = delta.getRevised().toString();
        String content = revisedText.substring(revisedText.indexOf(" [")+2,revisedText.indexOf("]]"));
        writeTextToFile(content,"difference.html");
    }

任何代码形式的线索都会有所帮助。

【问题讨论】：

我正在以编程方式考虑任何解决方案
您自己已经解决了这个问题吗？我正在尝试构建类似的东西，只是使用代码更改的热图，所以这对我来说非常有趣，如果已经存在我至少可以构建的解决方案。
您是如何保存 HTML 文件本身的？美化？还是您使用“driver.getSourcePage”将其保存为长字符串？
另一个简单的可能性是 recheck-web Chrome 扩展 (chrome.google.com/webstore/detail/recheck-web-demo/…)。默认情况下，它会为您提供两个网站的所有差异，包括视觉或“隐藏”网站。但是过滤器功能可以让您专注于您真正想要的内容，并在屏幕截图中标记这些内容。
看看这个：lxml.de/api/lxml.html.diff-module.html#htmldiff。由于这个问题不接受答案，我无法给出详细的答案，但文档应该足够了。

标签： java javascript html comparison

【解决方案1】：

使用 python 的difflib。例如：

import difflib

file1 = open('file1.html', 'r').readlines()
file2 = open('file2.html', 'r').readlines()

htmlDiffer = difflib.HtmlDiff()
htmldiffs = htmlDiffer.make_file(file1, file2)

with open('comparison.html', 'w') as outfile:
    outfile.write(htmldiffs)

这将创建一个名为 comparison.html 的 html 文件，其中包含两个 html 文件 file1.html 和 file2.html 之间的差异。这里file1.html 被认为是来源或原始版本 以更适合您的情况为准，file2.html 是更改版本 或新版本，再次，以此处更合适的为准。

希望有帮助！

【讨论】：

我可以将生成的文件保存为呈现的 HTML 格式而不是源格式吗？
@Umair 是的，你可以。 HtmlDiff 中make_file 的输出是呈现的HTML。试一试。在我的示例中，创建的文件名为“comparison.html”
不，亲爱的，它以 HTML 源格式保存 comparison.html ... 它不会呈现 HTML ...
这就是postimg.org/image/k6gwpvqq9 RAW HTML 的样子……我没有使用 DJango……我有 python 2.7
@francogrex 是的，我现在同意。再次回顾这个问题，我的回答似乎不恰当。我应该尝试重新打开它，这是一个有趣的问题。 BTW，目前不接受。但它收到了赏金，因为没有其他答案有 2 票或更多票，可惜。还要看一下编辑历史，2013 年有人问过，但 2016 年增加了赏金！

【解决方案2】：

使用 daisyDiff api http://code.google.com/p/daisydiff/ 在您的 java 代码返回差异后，您可以从命令提示符调用此 api。

【讨论】：

【解决方案3】：

你试过BackstopJS吗？

没有记录，但有一个 misMatchThreshold 参数可用于隐藏细微差异：https://github.com/garris/BackstopJS/issues/52

【讨论】：

【解决方案4】：

我假设您想区分这两个 HTML 代码文件。在这种情况下，我想向您指出以下库：

http://code.google.com/p/java-diff-utils/

【讨论】：

感谢您的回复。我已经完成了这个，这告诉我两个 HTML 源的不同之处，这很好。我坚持认为，我应该如何将这种差异显示为 UI。我的意思是像突出显示有差异的元素或类似的东西。
这个阶段太复杂了，实际上你需要构建一个引擎来解析 HTML，然后在屏幕上呈现它，同时保持到代码的映射。因此，在您的代码中，您可以指向一个元素，您的引擎将能够智能地突出显示该对象（基于 CSS 规则，即可见性/重叠/0px 宽度）。此时，您可以使用 2 个 HTML 页面执行此操作，并让您的引擎突出显示差异。幸运的是，已经有一个库可以做这样的事情：code.google.com/p/daisydiff
嗯，我也在考虑与到达一个元素然后应用一些 CSS 规则来突出显示它相同。是的，我也经历了 daisydiff ，但这也给出了一些例外（其 Main 类中的空指针）。不明白为什么。它太乱了。

【解决方案5】：

您可以将 diff 列表中的每个元素嵌入到彩色 div 中，以便轻松查看

您说您有差异列表和之前/之后的 HTML 文档。如果您可以确定每个不同元素来自哪个 HTML 文档，那么您可以在 DOM 中通过 id 查找它们并将它们嵌入到彩色 div 中以使其易于查看。

【讨论】：

【解决方案6】：

好的，你总是有解决方案，只是一个特技。使用 jscript 函数在补丁文本中查找第一个 id 或类，并使用 jquery 将注意力集中在元素上。如下所示：

所有字符直到找到'id' var firstIdOfThePatchText = xxx; $('#firstIdOfThePatchText ').focus...

欢呼

【讨论】：