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

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的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是更改版本或新版本,再次,在这里更合适.

希望有所帮助!

Answer 2

我假设您想比较这两个 HTML 代码文件。在这种情况下，我想向您推荐以下库：

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