Сравните два источника 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...
приветствие
Ответ 7
Использовать плагин сравнения в блокноте ++
плагиновая страница на sourceforge
Ответ 8
Вы можете вставлять каждый элемент из списка различий в цветном div, чтобы он легко виден
Вы указали, что у вас есть список различий и документы до/после HTML. Если вы можете определить, к какому HTML-документу принадлежит каждый элемент с отличием, вы можете найти их по id в DOM и вставить их в цветной div, чтобы сделать его легко видимым.