Compare two HTML sources and display visual differences [closed]

问题

I am trying to show where the two HTML pages differ. I am trying to figure out a way if i can compare the HTML source code of two webpages(almost similar), and show/highlight the differences visually(on UI).

What I tried: I thought of taking snapshot of the page and then use Resemble.js to compare two images. But that shows very minute differences as well and results are something which is not clear.

I thought of comparing the DOM structure or the source code and then show what or where actually the two pages differ on UI.

Is there any way i could achieve this? I am using Selenium- Webdriver to get the snapshots and the HTML source code.

EDIT:

I guess my question was not clear. Actually, i wanted to find out the difference in HTML content for webpages in order to detect A/B tests being performed currently. I first grabbed the html source into a text file and then compared it with previously captured HTML source using Java-Diff util . This gave me the actual lines which differ in two text files with HTML source.

Now, the problem is, how can i show this difference on UI as in highlighting the areas which i found are different? Hope this would make it more clear.

The below code shows the lines which differ

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");
    }

Any leads in form of code would be helpful.

回答1:

Use python's difflib. For example:

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)

This will create an html file named comparison.html containing the diffs between the two html files file1.html and file2.html. Here file1.html is considered the source, or original version whichever is more appropriate for your case, and file2.html is the changed version or new version, again, whichever is more appropriate here.

Hope that helps!

回答2:

Use daisyDiff api http://code.google.com/p/daisydiff/ You can call this api from a command prompt after your java code returns a difference.

回答3:

Have you tried BackstopJS ?

It's not documented but there is a misMatchThreshold parameter you can use to hide subtl differences: https://github.com/garris/BackstopJS/issues/52

回答4:

I assume you would like to diff the two HTML code files. In which case I would like to point you towards the following library:

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

回答5:

ok you have got the solution always , just except one tric. find first id or class in your patch text with a jscript function and focus over the element with jquery. something like below:

for all characters untill find 'id' var firstIdOfThePatchText = xxx; $('#firstIdOfThePatchText ').focus...

cheer

回答6:

You could embed each element from the diff list in a colored div so that it's easily visible

You stated that you have the list of diffs and the before/after HTML documents. If you can determine which HTML document each differenced element came from, then you could look them up by id in the DOM and embed them into a colored div to make it easily visible.

来源：https://stackoverflow.com/questions/18955417/compare-two-html-sources-and-display-visual-differences

标签

java

javascript

html

comparison