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>

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
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

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

var node1 = document.querySelector("pre");
var node2 = document.querySelector(".div");
var canvas1 = document.querySelector(".first");
var canvas2 = document.querySelector(".second");
var ctx1 = canvas1.getContext("2d");
var ctx2 = canvas2.getContext("2d");
/* Change both code to Image and put inside Canvas */
domtoimage.toPng(node1)
  .then(function(dataUrl) {
    var image = new Image();
    image.onload = function() {
      ctx1.drawImage(this, 0, 0);
    };
    image.src = dataUrl;
  })

domtoimage.toPng(node2)
  .then(function(dataUrl) {
    var image = new Image();
    image.onload = function() {
      ctx2.drawImage(this, 0, 0);
    };
    image.src = dataUrl;
  })

/* Run the pixel matching*/
setTimeout(function() {
  var im_r = ctx1.getImageData(0, 0, 300, 300).data;
  var im_o = ctx2.getImageData(0, 0, 300, 300).data;
  var pixDiff = pixelmatch(im_r, im_o, false, 280, 280, {
    threshold: 0.1
  });
  console.log(pixDiff);
}, 3000);

canvas {
  border: 1px solid;
}

pre,
.div {
  border: 2px solid red;
  width: 300px;
  height: 300px;
  box-sizing: border-box;
  margin: 0;
}

<script type="text/javascript" src="https://css-challenges.com/wp-content/themes/ronneby_child/js/dom-to-image.js"></script>
<script type="text/javascript" src="https://css-challenges.com/wp-content/themes/ronneby_child/js/pixel.js"></script>
<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>


<div class="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>

<canvas width="300" height="300" class="first"></canvas>
<canvas width="300" height="300" class="second"></canvas>

Développer l'extrait

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

var node1 = document.querySelector("pre");
var node2 = document.querySelector(".div");
var canvas1 = document.querySelector(".first");
var canvas2 = document.querySelector(".second");
var canvas3 = document.querySelector(".result");
var ctx1 = canvas1.getContext("2d");
var ctx2 = canvas2.getContext("2d");
var ctx3 = canvas3.getContext("2d");
/* Change both code to Image and put inside Canvas */
domtoimage.toPng(node1)
  .then(function(dataUrl) {
    var image = new Image();
    image.onload = function() {
      ctx1.drawImage(this, 0, 0);
    };
    image.src = dataUrl;
  })

domtoimage.toPng(node2)
  .then(function(dataUrl) {
    var image = new Image();
    image.onload = function() {
      ctx2.drawImage(this, 0, 0);
    };
    image.src = dataUrl;
  })

/* Run the pixel matching*/
setTimeout(function() {
  var im_r = ctx1.getImageData(0, 0, 300, 300).data;
  var im_o = ctx2.getImageData(0, 0, 300, 300).data;
  var diff = ctx3.createImageData(300, 300);
  var pixDiff = pixelmatch(im_r, im_o, diff.data, 300, 300, {
    threshold: 0.1
  });
  ctx3.putImageData(diff, 0, 0);
  console.log(pixDiff);
}, 3000);

canvas {
  border: 1px solid;
}

pre,
.div {
  border: 2px solid red;
  width: 300px;
  height: 300px;
  box-sizing: border-box;
  margin: 0;
}

<script type="text/javascript" src="https://css-challenges.com/wp-content/themes/ronneby_child/js/dom-to-image.js"></script>
<script type="text/javascript" src="https://css-challenges.com/wp-content/themes/ronneby_child/js/pixel.js"></script>
<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>


<div class="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>

<canvas width="300" height="300" class="first"></canvas>
<canvas width="300" height="300" class="second"></canvas>
<canvas width="300" height="300" class="result"></canvas>

Développer l'extrait

Modifions le contenu pour voir une différence:

Afficher l'extrait de code

var node1 = document.querySelector("pre");
var node2 = document.querySelector(".div");
var canvas1 = document.querySelector(".first");
var canvas2 = document.querySelector(".second");
var canvas3 = document.querySelector(".result");
var ctx1 = canvas1.getContext("2d");
var ctx2 = canvas2.getContext("2d");
var ctx3 = canvas3.getContext("2d");
/* Change both code to Image and put inside Canvas */
domtoimage.toPng(node1)
  .then(function(dataUrl) {
    var image = new Image();
    image.onload = function() {
      ctx1.drawImage(this, 0, 0);
    };
    image.src = dataUrl;
  })

domtoimage.toPng(node2)
  .then(function(dataUrl) {
    var image = new Image();
    image.onload = function() {
      ctx2.drawImage(this, 0, 0);
    };
    image.src = dataUrl;
  })

/* Run the pixel matching*/
setTimeout(function() {
  var im_r = ctx1.getImageData(0, 0, 300, 300).data;
  var im_o = ctx2.getImageData(0, 0, 300, 300).data;
  var diff = ctx3.createImageData(300, 300);
  var pixDiff = pixelmatch(im_r, im_o, diff.data, 300, 300, {
    threshold: 0.1
  });
  ctx3.putImageData(diff, 0, 0);
  console.log(pixDiff);
}, 3000);

canvas {
  border: 1px solid;
}

pre,
.div {
  border: 2px solid red;
  width: 300px;
  height: 300px;
  box-sizing: border-box;
  margin: 0;
}

<script type="text/javascript" src="https://css-challenges.com/wp-content/themes/ronneby_child/js/dom-to-image.js"></script>
<script type="text/javascript" src="https://css-challenges.com/wp-content/themes/ronneby_child/js/pixel.js"></script>
<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>


<div class="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">april</div> <br/>
  <div style="text-indent: 12ch">jupiter</div> <br/>
  <div style="text-indent: 4ch">saturn</div> <br/>
</div>

<canvas width="300" height="300" class="first"></canvas>
<canvas width="300" height="300" class="second"></canvas>
<canvas width="300" height="300" class="result"></canvas>

Développer l'extrait

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

var node1 = document.querySelector(".flex");
var node2 = document.querySelector(".grid");
var canvas1 = document.querySelector(".first");
var canvas2 = document.querySelector(".second");
var canvas3 = document.querySelector(".result");
canvas1.height= node1.offsetHeight;
canvas2.height= node2.offsetHeight;
canvas3.height= node1.offsetHeight;
canvas1.width= node1.offsetWidth;
canvas2.width= node2.offsetWidth;
canvas3.width= node1.offsetWidth;
var ctx1 = canvas1.getContext("2d");
var ctx2 = canvas2.getContext("2d");
var ctx3 = canvas3.getContext("2d");

domtoimage.toPng(node1)
  .then(function(dataUrl) {
    var image = new Image();
    image.onload = function() {
      ctx1.drawImage(this, 0, 0);
    };
    image.src = dataUrl;
  })

domtoimage.toPng(node2)
  .then(function(dataUrl) {
    var image = new Image();
    image.onload = function() {
      ctx2.drawImage(this, 0, 0);
    };
    image.src = dataUrl;
  })


setTimeout(function() {
  var im_r = ctx1.getImageData(0, 0, canvas1.width, canvas1.height).data;
  var im_o = ctx2.getImageData(0, 0, canvas1.width, canvas1.height).data;
  var diff = ctx3.createImageData(canvas1.width, canvas1.height);
  var pixDiff = pixelmatch(im_r, im_o, diff.data, canvas1.width, canvas1.height, {
    threshold: 0.2
  });
  ctx3.putImageData(diff, 0, 0);
  console.log(pixDiff);
}, 3000);

.grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  border:2px solid red;
}
h1 {
  text-align:center;
  grid-column:1/-1;
  flex-basis:100%;
}

.flex {
  display:flex;
  flex-wrap:wrap;
  border:2px solid red;
}
.flex > div {
  flex-grow:1;
  flex-basis:0;
}

<script type="text/javascript" src="https://css-challenges.com/wp-content/themes/ronneby_child/js/dom-to-image.js"></script>
<script type="text/javascript" src="https://css-challenges.com/wp-content/themes/ronneby_child/js/pixel.js"></script>
<div class="grid">
<h1>A title here</h1>
<div>
<img src="https://picsum.photos/id/10/200/200" >
</div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus aliquam condimentum mollis. Phasellus faucibus diam quis lorem efficitur, id egestas neque malesuada</div>
<div> Maecenas sollicitudin lacinia finibus. Integer vel varius eros. Morbi et ante eget est mollis sollicitudin.</div>
</div>
<div class="flex">
<h1>A title here</h1>
<div>
<img src="https://picsum.photos/id/10/200/200" >
</div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus aliquam condimentum mollis. Phasellus faucibus diam quis lorem efficitur, id egestas neque malesuada</div>
<div> Maecenas sollicitudin lacinia finibus. Integer vel varius eros. Morbi et ante eget est mollis sollicitudin.</div>
</div>

<canvas width="300" height="300" class="first" style="display:none;"></canvas>
<canvas width="300" height="300" class="second" style="display:none;"></canvas>
<canvas width="300" height="300" class="result"></canvas>

Développer l'extrait

Utilisons une image différente:

Afficher l'extrait de code

var node1 = document.querySelector(".flex");
var node2 = document.querySelector(".grid");
var canvas1 = document.querySelector(".first");
var canvas2 = document.querySelector(".second");
var canvas3 = document.querySelector(".result");
canvas1.height= node1.offsetHeight;
canvas2.height= node2.offsetHeight;
canvas3.height= node1.offsetHeight;
canvas1.width= node1.offsetWidth;
canvas2.width= node2.offsetWidth;
canvas3.width= node1.offsetWidth;
var ctx1 = canvas1.getContext("2d");
var ctx2 = canvas2.getContext("2d");
var ctx3 = canvas3.getContext("2d");

domtoimage.toPng(node1)
  .then(function(dataUrl) {
    var image = new Image();
    image.onload = function() {
      ctx1.drawImage(this, 0, 0);
    };
    image.src = dataUrl;
  })

domtoimage.toPng(node2)
  .then(function(dataUrl) {
    var image = new Image();
    image.onload = function() {
      ctx2.drawImage(this, 0, 0);
    };
    image.src = dataUrl;
  })


setTimeout(function() {
  var im_r = ctx1.getImageData(0, 0, canvas1.width, canvas1.height).data;
  var im_o = ctx2.getImageData(0, 0, canvas1.width, canvas1.height).data;
  var diff = ctx3.createImageData(canvas1.width, canvas1.height);
  var pixDiff = pixelmatch(im_r, im_o, diff.data, canvas1.width, canvas1.height, {
    threshold: 0.2
  });
  ctx3.putImageData(diff, 0, 0);
  console.log(pixDiff);
}, 3000);

.grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  border:2px solid red;
}
h1 {
  text-align:center;
  grid-column:1/-1;
  flex-basis:100%;
}

.flex {
  display:flex;
  flex-wrap:wrap;
  border:2px solid red;
}
.flex > div {
  flex-grow:1;
  flex-basis:0;
}

<script type="text/javascript" src="https://css-challenges.com/wp-content/themes/ronneby_child/js/dom-to-image.js"></script>
<script type="text/javascript" src="https://css-challenges.com/wp-content/themes/ronneby_child/js/pixel.js"></script>
<div class="grid">
<h1>A title here</h1>
<div>
<img src="https://picsum.photos/id/10/200/200" >
</div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus aliquam condimentum mollis. Phasellus faucibus diam quis lorem efficitur, id egestas neque malesuada</div>
<div> Maecenas sollicitudin lacinia finibus. Integer vel varius eros. Morbi et ante eget est mollis sollicitudin.</div>
</div>
<div class="flex">
<h1>A title here</h1>
<div>
<img src="https://picsum.photos/id/12/200/200" >
</div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus aliquam condimentum mollis. Phasellus faucibus diam quis lorem efficitur, id egestas neque malesuada</div>
<div> Maecenas sollicitudin lacinia finibus. Integer vel varius eros. Morbi et ante eget est mollis sollicitudin.</div>
</div>

<canvas width="300" height="300" class="first" style="display:none;"></canvas>
<canvas width="300" height="300" class="second" style="display:none;"></canvas>
<canvas width="300" height="300" class="result"></canvas>

Développer l'extrait

— Temani Afif
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  .

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
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  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
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

Ouvrez Photoshop ou allez dans Photopea .
Collez la capture d'écran dans un calque.
Répétez l'opération pour la deuxième page, en collant dans un calque différent.
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
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
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
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
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
source

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

Nous devons d'abord capturer des images

Méthode de capture 1

Méthode de capture 2

Deuxièmement, nous comparons les images

Méthode 1

Méthode 2

Méthode 3