Question

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

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

Answer 1

使用python＆＃39; s 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是已更改的版本< / em>或新版本，再次，这里更合适。

希望有所帮助！

Answer 2

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

Answer 3

您是否尝试过BackstopJS？

没有记录，但您可以使用misMatchThreshold参数隐藏细分差异：https://github.com/garris/BackstopJS/issues/52

Answer 4

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

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

Answer 5

好的，你总能得到解决方案，只是除了一个三重奏。使用jscript函数在补丁文本中查找第一个id或类，并使用jquery关注元素。如下所示：

对于所有字符，直到找到'id' var firstIdOfThePatchText = xxx; $（'＃firstIdOfThePatchText'）。focus ...

欢呼

Answer 6

您可以将差异列表中的每个元素嵌入彩色div中，以便它可以轻松显示

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

比较两个HTML源并显示视觉差异

6 个答案: