Confronta due sorgenti HTML e visualizza le differenze visive

Question

Sto tentando di mostrare dove le due pagine HTML differiscono. Sto cercando di capire un modo se posso confrontare il codice sorgente HTML di due pagine web (quasi simili), e mostrare/evidenziare le differenze visivamente (sull'interfaccia utente).

Quello che ho cercato: ho pensato di prendere snapshot della pagina e quindi utilizzare Resemble.js per confrontare due immagini. Ma questo mostra anche differenze minuscole e i risultati sono qualcosa che non è chiaro.

Ho pensato di confrontare la struttura DOM o il codice sorgente e quindi mostrare quali o dove effettivamente le due pagine differiscono su UI.

C'è un modo per raggiungere questo obiettivo? Sto usando Selenium- Webdriver per ottenere le istantanee e il codice sorgente HTML.

EDIT:

Credo che la mia domanda non era chiara. In realtà, volevo scoprire la differenza nel contenuto HTML per le pagine Web al fine di rilevare i test A/B attualmente eseguiti. Ho prima catturato il codice html in un file di testo e poi l'ho confrontato con il codice sorgente HTML precedentemente acquisito usando Java-Diff util. Questo mi ha dato le linee effettive che differiscono in due file di testo con sorgente HTML.

Ora, il problema è, come posso mostrare questa differenza sull'interfaccia utente come evidenziare le aree che ho trovato sono diverse? Spero che questo lo renderebbe più chiaro.

Il codice seguente mostra le linee che differiscono

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

Qualche pista in forma di codice sarebbe utile.

Answer 1

Presumo che si desidera diff i due file di codice HTML. Nel qual caso vorrei puntare verso la seguente libreria:

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

Answer 2

Usa daisyDiff api http://code.google.com/p/daisydiff/ È possibile chiamare questa API da un prompt dei comandi dopo il codice Java restituisce una differenza.

Answer 3

È possibile controllare Scintilla l'editor dietro Notepad ++.

L'ho usato anche qualche tempo fa ma ho avuto problemi con l'evidenziazione della lingua - che è molto più complicato nelle versioni più recenti (come ricordo).

Forse è anche possibile utilizzare questo: http://www.codeproject.com/Articles/161871/Fast-Colored-TextBox-for-syntax-highlighting

Answer 4

Hai provato BackstopJS?

Non è documentato, ma c'è un parametro misMatchThreshold è possibile utilizzare per nascondere le differenze subtl: https://github.com/garris/BackstopJS/issues/52

Answer 5

ok avete la soluzione sempre, solo tranne uno tric. trova il primo id o classe nel testo della patch con una funzione jscript e focalizza l'elemento con jquery.qualcosa di simile:

per tutti i caratteri fino a trovare 'id' var firstIdOfThePatchText = xxx; $ ('# firstIdOfThePatchText') .focus ...

allegria

Answer 6

Usa confrontare plug-in Notepad ++

plugin page on sourceforge

Answer 7

usare Python di difflib. Per esempio:

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) 

Questo creerà un file HTML denominato comparison.html contenente le diff tra i due file html file1.html e file2.html. Qui file1.html è considerata la fonte , o versione originale a seconda di quale è più appropriato per il vostro caso, e file2.html è la cambiato versione o nuova versione, ancora una volta, a seconda di quale è più appropriato qui.

Spero che questo aiuti!

Answer 8

Si potrebbe incorporare ogni elemento dalla lista diff in un div di colore in modo che sia facilmente visibile

Lei ha affermato di avere l'elenco delle diff e del prima/dopo i documenti HTML. Se è possibile determinare da quale documento HTML provengono tutti gli elementi differenziali, è possibile visualizzarli per ID nel DOM e incorporarli in un div colorato per renderlo facilmente visibile.