Porównaj dwa źródła HTML i różnice wizualne wyświetlania

Question

Próbuję pokazać, gdzie różnią się dwie strony HTML. Próbuję znaleźć sposób, w jaki sposób mogę porównać kod źródłowy HTML dwóch stron (prawie podobne) i pokazać/podkreślić różnice wizualnie (w interfejsie użytkownika).

Co próbowałem: Pomyślałem o zrobieniu migawki strony, a następnie użyj Resemble.js, aby porównać dwa obrazy. Ale to pokazuje bardzo małe różnice, a wyniki są czymś, co nie jest jasne.

Pomyślałem o porównaniu struktury DOM lub kodu źródłowego, a następnie pokażę, co lub gdzie właściwie dwie strony różnią się na UI.

Czy mogę to osiągnąć? Używam Selenium- Webdriver, aby uzyskać migawki i kod źródłowy HTML.

EDIT:

Chyba moje pytanie nie było jasne. Właściwie, chciałem dowiedzieć się, jaka jest różnica w treści HTML stron internetowych, aby wykryć aktualnie przeprowadzane testy A/B. Najpierw złapałem źródło html w plik tekstowy, a następnie porównałem go z wcześniej przechwyconym źródłem HTML przy użyciu Java-Diff util. To dało mi rzeczywiste linie, które różnią się dwoma plikami tekstowymi ze źródłem HTML.

Problem polega na tym, w jaki sposób mogę wyświetlać tę różnicę w interfejsie użytkownika, jak w przypadku wyróżniania obszarów, które znalazłem, są różne? Mam nadzieję, że to wszystko wyjaśni.

poniżej kod przedstawia linie, które różnią

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

odprowadzeń w postaci kodu, który będzie pomocny.

Answer 1

Zakładam, że chciałbyś zmienić dwa pliki kodu HTML. W tym przypadku chciałbym wskazać kierunku następującej biblioteki:

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

Answer 2

Zastosowanie daisyDiff api http://code.google.com/p/daisydiff/ można nazwać tego API z wiersza poleceń po kod Java zwraca różnicę.

Answer 3

Możesz sprawdzić Scintilla edytora za Notepad ++.

Używam go też jakiś czas temu, ale mam problemy z podświetlaniem języka - co jest znacznie bardziej skomplikowane w nowszych wersjach (jak pamiętam).

Może również użyć tego: http://www.codeproject.com/Articles/161871/Fast-Colored-TextBox-for-syntax-highlighting

Answer 4

Czy próbowałeś BackstopJS?

To nie jest udokumentowane, ale nie jest parametrem misMatchThreshold można użyć, aby ukryć różnice subtl: https://github.com/garris/BackstopJS/issues/52

Answer 5

ok masz Zawsze rozwiązanie tylko wyjątkiem jednego tric. znajdź pierwszy identyfikator lub klasę w tekście poprawki za pomocą funkcji jscript i skoncentruj się na elemencie z jquery.coś jak poniżej:

dla wszystkich znaków do znalezienia 'id' var firstIdOfThePatchText = xxx; $ ('# firstIdOfThePatchText') .focus ...

cheer

Answer 6

Zastosowanie porównać wtyczkę w notatniku ++

plugin page on sourceforge

Answer 7

użycie Pythona difflib. Na przykład:

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) 

To utworzy plik HTML o nazwie comparison.html zawierający dyferencjału między dwoma plikami html file1.html i file2.html. Tutaj file1.html jest uważany za źródło lub oryginalna wersja cokolwiek jest bardziej odpowiednie dla Twojego przypadku i file2.html jest zmienił wersję lub nową wersję, ponownie, w zależności co jest bardziej odpowiednie tutaj.

Nadzieję, że pomaga!

Answer 8

Można umieścić każdy element z listy diff w kolorowym div tak, że jest to dobrze widoczne

można stwierdzić, że masz listę dyferencjału i przed/po dokumentach HTML. Jeśli potrafisz określić, z jakiego dokumentu HTML pochodzi każdy inny element, możesz wyszukać go za pomocą id w DOM i osadzić w kolorowym div, aby był dobrze widoczny.