web-dev-qa-db-fra.com

Comparez deux sources HTML et affichez les différences visuelles

J'essaie de montrer où les deux pages HTML diffèrent. J'essaie de trouver un moyen de comparer le code source HTML de deux pages Web (presque similaire) et de montrer/mettre en évidence les différences visuellement (sur l'interface utilisateur).

Ce que j'ai essayé: J'ai pensé prendre un instantané de la page, puis utiliser Resemble.js pour comparer deux images. Mais cela montre aussi des différences minimes et les résultats ne sont pas clairs.

J'ai pensé à comparer la structure du DOM ou le code source et ensuite montrer quoi ou où réellement les deux pages diffèrent surUI.

Y at-il un moyen que je pourrais atteindre cela? J'utilise Selenium- Webdriver pour obtenir les instantanés et le code source HTML.

EDIT:

Je suppose que ma question n'était pas claire. En fait, je voulais connaître la différence de contenu HTML pour les pages Web afin de détecter les tests A/B en cours d’exécution. J'ai d'abord saisi la source HTML dans un fichier texte, puis je l'ai comparé à une source HTML précédemment capturée à l'aide de Java-Diff util . Cela m'a donné les lignes réelles qui diffèrent dans deux fichiers texte avec source HTML.

Maintenant, le problème est, comment puis-je montrer cette différence sur l'interface utilisateur en soulignant les domaines que j'ai trouvés sont différents? J'espère que cela le rendra plus clair.

Le code ci-dessous montre les lignes qui diffèrent

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

Toute piste sous forme de code serait utile.

javajavascripthtmlcomparison
13
roger_that

Utilisez difflib de python. Par exemple:

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)

Cela créera un fichier HTML nommé comparison.html contenant les différences entre les deux fichiers html file1.html et file2.html. Ici file1.html est considéré comme le source _ ou version originale selon ce qui convient le mieux à votre cas, et file2.html est le version modifiée _ ou nouvelle version encore une fois, selon ce qui est le plus approprié ici.

J'espère que cela pourra aider!

7
Sнаđошƒаӽ

Utilisez daisyDiff api http://code.google.com/p/daisydiff/ vous pouvez appeler cette API à partir d'une invite de commande après que votre code Java a renvoyé une différence.

2
Rajveer Singh

Avez-vous essayé BackstopJS ?

Ce n'est pas documenté, mais il existe un paramètre misMatchThreshold que vous pouvez utiliser pour masquer les différences subtiles: https://github.com/garris/BackstopJS/issues/52

1
A. Joahny

J'imagine que vous souhaitez différencier les deux fichiers de code HTML. Dans ce cas, j'aimerais vous indiquer la bibliothèque suivante:

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

0
Husman

Vous pouvez intégrer chaque élément de la liste des différences dans un div coloré pour qu'il soit facilement visible

Vous avez déclaré disposer de la liste des diff et des documents HTML avant/après. Si vous pouvez déterminer le document HTML de chaque élément différencié, vous pouvez les rechercher par ID dans le DOM et les incorporer dans un div coloré pour le rendre facilement visible.

0
pholtz

ok vous avez toujours la solution, sauf un tric. Recherchez le premier identifiant ou la première classe dans le texte de votre correctif avec une fonction jscript et concentrez-vous sur l'élément avec jquery. quelque chose comme ci-dessous:

pour tous les caractères jusqu'à trouver 'id' var firstIdOfThePatchText = xxx; $ ('# firstIdOfThePatchText') .focus ...

acclamation

0
dewelloper