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.
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!
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.
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
J'imagine que vous souhaitez différencier les deux fichiers de code HTML. Dans ce cas, j'aimerais vous indiquer la bibliothèque suivante:
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.
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