21

我试图展示两个 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");
    }

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

4

6 回答 6

12

使用 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)

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

希望有帮助！

于 2016-02-17T16:44:20.723 回答
2

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

于 2014-01-27T21:49:23.453 回答
1

你试过BackstopJS吗？

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

于 2016-02-17T10:39:53.897 回答
0

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

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

于 2013-09-23T11:34:18.437 回答
0

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

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

于 2016-02-17T16:51:20.737 回答
-1

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

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

欢呼

于 2016-02-17T10:57:08.880 回答