Comment puis-je prouver que deux pages HTML sont identiques?

19

Par exemple, j'ai ceci:

<pre>
sun<br/>
&nbsp;&nbsp;&nbsp;&nbsp;mercury <br/>
&nbsp;&nbsp;&nbsp;&nbsp;venus <br/>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;earth <br/>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;mars <br/>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;jupiter <br/>
&nbsp;&nbsp;&nbsp;&nbsp;saturn <br/>
</pre>
Développer l'extrait

et ça:

<div style="font-family:monospace">
  <div style="text-indent: 0">sun</div> <br/>
  <div style="text-indent: 4ch">mercury</div> <br/>
  <div style="text-indent: 4ch">venus</div> <br/>
  <div style="text-indent: 8ch">earth</div> <br/>
  <div style="text-indent: 8ch">mars</div> <br/>
  <div style="text-indent: 12ch">jupiter</div> <br/>
  <div style="text-indent: 4ch">saturn</div> <br/>
</div>
Développer l'extrait

Et je veux que le second ressemble exactement au premier.

Je crois que ceux-ci ont l'air identiques, mais ma seule preuve était d'utiliser l'ancienne technique de «basculement entre les fenêtres très rapidement et le globe oculaire». (Les astronomes appellent cela un "comparateur de clignements" - https://en.wikipedia.org/wiki/Blink_comparator ). Je me suis assuré que les fenêtres étaient de la même taille et dans la même position. Mais si le HTML rendu ne tenait pas à l'écran, cela aurait pu être trop difficile.

Existe-t-il un outil ou une méthode plus définitive pour effectuer cette comparaison?

Je les ai examinés dans Chrome 77.0.3865.120 et Firefox 69.0.3.

Je sais par exemple qu'avec le navigateur Acid tests qui faisaient à l'origine partie du Web Standards Project - https://www.acidtests.org/ - le rendu parfait des pixels était la référence.

(Crédit supplémentaire: le code HTML du deuxième extrait de code est probablement adapté à mes besoins; si vous souhaitez suggérer des améliorations, celles-ci seraient les bienvenues.)

EDIT : Ma question compare deux petits exemples HTML, qui peuvent être rendus pour s'adapter à la partie visible du navigateur. Mais en général, j'aimerais connaître la réponse pour HTML qui pourrait être assez longue.

html css acid3 Purplejacket
la source
L'approche que vous utilisiez me convient également
Awais
4
Vous pouvez prendre une capture d'écran des deux, puis superposer les captures d'écran et modifier l'opacité de la première pour vous assurer qu'elles s'alignent
APAD1
2
@ APAD1 - C'est toujours le globe oculaire. Utilisez une image diff.
Quentin
1
Fondamentalement, une dupe de la fermeture comme trop large Comparez deux sources HTML et affichez les différences visuelles . De plus, faire une recherche sur Internet de "diff visuel de deux pages html" fait apparaître une longue liste de produits et de bibliothèques ...
Heretic Monkey
1
Je crois que TestComplete de Smart Bear peut faire cette documentation , mais cela peut être prohibitif.
Graham

Réponses:

8

J'ai fait quelque chose de similaire lors du développement d'un site Web lié à CSS . J'ai dû comparer une sortie produite par un HTML / CSS avec une image qui avait été précédemment générée avec un HTML / CSS.

J'ai utilisé dom-to-image , qui convertit le code en une image encodée en base64. Je place cette image à l'intérieur d'une toile, puis j'utilise pixelmatch pour comparer les deux images.

Voici un exemple pour illustrer:

Afficher l'extrait de code

Dans le code ci-dessus, nous avons nos 2 blocs HTML et 2 toiles où nous allons peindre nos blocs. Comme vous pouvez le voir, le JS est assez simple. Le code à la fin exécute la correspondance des pixels et indique le nombre de pixels différents des deux toiles. J'ai ajouté un délai pour m'assurer que les deux images sont chargées (vous pouvez optimiser plus tard avec certains événements)

Vous pouvez également envisager une troisième toile pour mettre en évidence la différence entre les deux images et obtenir votre différence visuelle:

Afficher l'extrait de code

Modifions le contenu pour voir une différence:

Afficher l'extrait de code

Vous pouvez en savoir plus sur le fonctionnement des deux plugins que j'ai utilisés et trouver des options plus intéressantes.

Je fixe les tailles à 300x300 pour faciliter la démonstration à l'intérieur de l'extrait de code, mais vous pouvez envisager une hauteur et une largeur plus grandes.

Mise à jour

Voici un exemple plus réaliste pour comparer entre deux dispositions qui produisent le même résultat. La largeur / hauteur du canevas sera dynamique et basée sur le contenu. Je ne montrerai que la dernière toile avec la différence.

Afficher l'extrait de code

Utilisons une image différente:

Afficher l'extrait de code

Temani Afif
la source
5

Voici une idée pour faire des mesures avec le DOM - je viens de remplacer le texte en question par des divs qui ont une classe qui peut être interrogée. Ensuite, vous pouvez imprimer le décalage de tous les nœuds.

D'après ce que je mesure, les retraits de caractère sont en effet les mêmes que les &nbsp;.

var nodes = document.getElementsByClassName('measure');

for (var n of nodes) {
  console.log(n.offsetLeft);
}
.measure {
  display: inline-block;
  background: red;
  width: 50px;
  height: 5px;
}
<pre>
<div class="measure"></div><br/>
&nbsp;&nbsp;&nbsp;&nbsp;<div class="measure"></div><br/>
&nbsp;&nbsp;&nbsp;&nbsp;<div class="measure"></div><br/>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<div class="measure"></div><br/>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<div class="measure"></div><br/>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<div class="measure"></div><br/>
&nbsp;&nbsp;&nbsp;&nbsp;<div class="measure"></div><br/>
</pre>
Développer l'extrait

var nodes = document.getElementsByClassName('measure');

for (var n of nodes) {
  console.log(n.offsetLeft);
}
.measure {
  display: inline-block;
  background: red;
  width: 50px;
  height: 5px;
}
<div style="font-family:monospace">
  <div style="text-indent: 0"><div class="measure"></div></div> <br/>
  <div style="text-indent: 4ch"><div class="measure"></div></div> <br/>
  <div style="text-indent: 4ch"><div class="measure"></div></div> <br/>
  <div style="text-indent: 8ch"><div class="measure"></div></div> <br/>
  <div style="text-indent: 8ch"><div class="measure"></div></div> <br/>
  <div style="text-indent: 12ch"><div class="measure"></div></div> <br/>
  <div style="text-indent: 4ch"><div class="measure"></div></div> <br/>
</div>
Développer l'extrait

MrRobboto
la source
"Je viens de remplacer tous les nœuds de texte par des divs" Non, vous avez remplacé uniquement les parties que vous voyiez . Tous les &nbsp;caractères font également partie des TextNodes. Ceci est important, car cela signifie que votre solution ne peut pas fonctionner par programme.
Kaiido
3

Imprimez les écrans des deux pages et comparez les pixels.
Vous pouvez utiliser un pilote Web comme le sélénium, rendre les deux écrans dans un fichier image (png, jpg, etc.) - le sélénium a une méthode pour le faire - et écrire un logiciel pour lire les pixels des deux pour comparer pour la similitude.
Le pilote Web est un navigateur que vous pouvez contrôler avec du code. Et vous pouvez trouver des logiciels qui comparent les images sur le Web.

Vous pouvez trouver plus d'informations dans ce lien: https://selenium.dev/

Guilherme
la source
Comment comparez-vous les pixels? Existe-t-il un moyen automatisé de procéder? Et si le HTML avait été beaucoup plus long que l'exemple que j'ai donné et ne tenait pas à l'écran?
Purplejacket
2

Nous devons d'abord capturer des images

Méthode de capture 1

Utilisez le bouton d'écran d'impression sur votre clavier (ou tout autre outil de capture d'écran).

Pour les pages trop longues ou trop larges pour tenir à l'écran, prenez plusieurs captures d'écran de chaque page et assemblez-les dans votre éditeur de photos. Vous pouvez prendre des captures d'écran superposées d'une grande page, les placer sur des calques séparés, puis utiliser les parties qui se chevauchent pour positionner les pièces avec précision avant de fusionner les calques pour créer un composite de la page entière.

Méthode de capture 2

Vous pouvez utiliser une extension de navigateur telle que fireshot pour capturer la page entière à la fois.

Deuxièmement, nous comparons les images

Méthode 1

  1. Ouvrez Photoshop ou allez dans Photopea .

  2. Collez la capture d'écran dans un calque.

  3. Répétez l'opération pour la deuxième page, en collant dans un calque différent.

  4. Basculez la visibilité des calques et tout changement sera évident. Ou ajustez l'opacité du calque supérieur (et / ou définissez différents modes de fusion) pour comparer.

Méthode 2

Utilisez une extension de navigateur telle que pixel-perfect-2 qui permet de superposer des images semi-transparentes dans votre navigateur. Il s'agit également d'une extension utile pour vérifier l'alignement et l'espacement, car vous pouvez superposer des pages avec une image de grille dans votre navigateur.

Méthode 3

Utilisez un outil de diff image. Une recherche rapide sur Google en révélera trop pour être répertoriée ici. Il existe des plugins de diff d'image pour certains éditeurs de code, des outils de ligne de commande, des scripts Python et des services en ligne tels que diffchecker .

Veneseme Tyras
la source
2

Vous pouvez les placer les uns au-dessus des autres dans le même document avec la position: absolue; Et peut-être zoomer pour regarder de plus près.

#a, #b {
  position:absolute;
  left:0;
  top:0;
  margin:0;
  padding:0;
  color:green;
  opacity:0.5;
}
#a {
  color:red;
}
#b {
  color:green;
}
<pre id="a">
sun<br/>
&nbsp;&nbsp;&nbsp;&nbsp;mercury <br/>
&nbsp;&nbsp;&nbsp;&nbsp;venus <br/>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;earth <br/>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;mars <br/>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;jupiter <br/>
&nbsp;&nbsp;&nbsp;&nbsp;saturn <br/>
</pre>
    <div style="font-family:monospace" id="b">
      <div style="text-indent: 0">sun</div> <br/>
      <div style="text-indent: 4ch">mercury</div> <br/>
      <div style="text-indent: 4ch">venus</div> <br/>
      <div style="text-indent: 8ch">earth</div> <br/>
      <div style="text-indent: 8ch">mars</div> <br/>
      <div style="text-indent: 12ch">jupiter</div> <br/>
      <div style="text-indent: 4ch">saturn</div> <br/>
    </div>
Développer l'extrait

V.Volkov
la source
C'est très gentil! J'ai essayé cette idée, mais à cause d'aspects étranges de la <pre>balise en ce qui concerne les <body>marges, je n'ai pas pu les aligner. Vos styles #a, #b { ... }semblent le faire fonctionner correctement.
Purplejacket
2

Superposez les deux pages l'une sur l'autre à l'aide d'iframes. Cela devrait vous permettre de voir les différences entre les deux pages.

main.html:

<iframe src="doc1.html"></iframe>
<iframe src="doc2.html" style="opacity:0.5"></iframe>
<style>

html, body {
    margin:0;
    height:100%;
}
iframe {
    height:100%;
    width:100%;
    position:absolute;
    top:0;
    left:0;
}

</style>

doc1.html:

<pre>
sun<br/>
&nbsp;&nbsp;&nbsp;&nbsp;mercury <br/>
&nbsp;&nbsp;&nbsp;&nbsp;venus <br/>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;earth <br/>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;mars <br/>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;jupiter <br/>
&nbsp;&nbsp;&nbsp;&nbsp;saturn <br/>
</pre>

doc2.html

<div style="font-family:monospace">
  <div style="text-indent: 0">sun</div> <br/>
  <div style="text-indent: 4ch">mercury</div> <br/>
  <div style="text-indent: 4ch">venus</div> <br/>
  <div style="text-indent: 8ch">earth</div> <br/>
  <div style="text-indent: 8ch">mars</div> <br/>
  <div style="text-indent: 12ch">jupiter</div> <br/>
  <div style="text-indent: 4ch">saturn</div> <br/>
</div>

(Je soupçonne qu'il existe un moyen de le faire en utilisant des extraits de pile. N'hésitez pas à m'éclairer)

ecc521
la source
1

Il y a des méthodes de code très complexes et intelligentes ici, alors voici une méthode simple,

Prenez une capture d'écran de l'un, ouvrez-le dans un éditeur d'image qui prend en charge la transparence Comme Photoshop,

Collez-le, puis montrez l'écran à votre manière CSS et collez-le, définissez la deuxième image collée à une opacité de 50% et voyez si elles s'alignent.

Barkermn01
la source
Et si la page est trop longue pour tenir sur l'écran?
Purplejacket
Si vous avez Photoshop ou tout autre éditeur qui le prend en charge, définissez le mode de fusion sur le calque supérieur sur différence. Si les images sont identiques, vous verrez une image noire solide.
steveax
Oui. HTML est une chaîne. Utilisez simplement cURL ou une autre méthode pour imprimer la chaîne, puis comparez-la. Ce sont des exemples sur-conçus qui tournent ici.
Ususipse
@Purplejacket, erm Screenshot the App as a whole, Ctrl + Shift + Print Screen,
Barkermn01
1

Comme je l'ai vu jusqu'à présent, peu de gens mentionnent de véritables outils de test.

Il existe de nombreux outils pour votre cas d'utilisation (faisant souvent partie de cadres plus grands):

Pour ne citer que quelques prises de cette liste. Peut-être cherchez-vous et choisissez celui qui convient à votre environnement.

Si vous voulez construire une automatisation durable, ne vous fiez pas aux hacks. Il peut ne s'agir que d'AQ mais peut sérieusement enregistrer votre ** dans les futures versions.

Nils K
la source