Сравните два источника HTML и отобразите визуальные различия

Я пытаюсь показать, где две страницы HTML отличаются. Я пытаюсь выяснить способ, если я могу сравнить исходный код HTML двух веб-страниц (почти похожих) и показать/выделить различия визуально (в пользовательском интерфейсе).

Что я пытался: Я подумал о том, чтобы сделать снимок страницы, а затем использовать Resemble.js для сравнения двух изображений. Но это показывает очень незначительные различия, а результаты - это неясно.

Я подумал о сравнении структуры DOM или исходного кода, а затем покажу, что или где на самом деле две страницы отличаются от UI.

Есть ли способ достичь этого? Я использую Selenium-Webdriver, чтобы получить моментальные снимки и исходный код HTML.

EDIT:

Я думаю, мой вопрос не был ясен. На самом деле, я хотел узнать разницу в содержании HTML для веб-страниц, чтобы в настоящее время проводить тесты A/B. Сначала я захватил источник html в текстовый файл, а затем сравнил его с ранее захваченным источником HTML, используя Java-Diff util. Это дало мне фактические строки, которые отличаются двумя текстовыми файлами с источником HTML.

Теперь проблема заключается в том, как я могу показать эту разницу в пользовательском интерфейсе, как при выделении областей, которые я нашел, различны? Надеюсь, это сделает его более понятным.

В приведенном ниже коде показаны строки, которые отличаются

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

Любые выводы в форме кода будут полезны.

ОТВЕТЫ

Ответ 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 - измененная версия или новая версия, опять же, в зависимости от того, что более уместно здесь.

Надеюсь, что это поможет!

Ответ 2

Использовать daisyDiff api http://code.google.com/p/daisydiff/ Вы можете вызвать этот api из командной строки после того, как ваш код Java вернет разницу.

Ответ 3

Вы пробовали BackstopJS?

Он не задокументирован, но есть параметр misMatchThreshold, который можно использовать для скрытия различий в тонлах: https://github.com/garris/BackstopJS/issues/52

Ответ 4

Я предполагаю, что вы хотели бы разделить два файла кода HTML. В этом случае я хотел бы указать вам следующую библиотеку:

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

Ответ 5

Вы можете проверить Scintilla редактор за Notepad ++.

Я также использовал его некоторое время назад, но у меня проблемы с подсветкой языка, что намного сложнее в более новых версиях (как я помню).

Возможно, вы также можете использовать это: http://www.codeproject.com/Articles/161871/Fast-Colored-TextBox-for-syntax-highlighting

Ответ 6

ok у вас есть решение всегда, просто за исключением одного трюка. найдите первый id или класс в тексте патча с помощью функции jscript и сосредоточьтесь на элементе с jquery. что-то вроде ниже:

для всех символов, пока не найдете 'id' var firstIdOfThePatchText = xxx; $ ('# firstIdOfThePatchText').focus...

приветствие

Ответ 8

Вы можете вставлять каждый элемент из списка различий в цветном div, чтобы он легко виден

Вы указали, что у вас есть список различий и документы до/после HTML. Если вы можете определить, к какому HTML-документу принадлежит каждый элемент с отличием, вы можете найти их по id в DOM и вставить их в цветной div, чтобы сделать его легко видимым.