Por ejemplo, tengo esto:
<pre> sun<br/> mercury <br/> venus <br/> earth <br/> mars <br/> jupiter <br/> saturn <br/> </pre>y esto:
<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>Y quiero que el segundo se vea exactamente como el primero.
Creo que se ven idénticos, pero mi única prueba fue usar la vieja técnica de "cambiar de una ventana a otra muy rápido y observarlo". (Los astrónomos llaman a esto un "comparador de parpadeo" -- https://en.wikipedia.org/wiki/Blink_comparator ). Me aseguré de que las ventanas fueran del mismo tamaño y en la misma posición. Pero si el HTML renderizado no encajara en la pantalla, esto podría haber sido demasiado difícil.
¿Hay alguna herramienta o método más definitivo para hacer esta comparación?
Los miré en Chrome 77.0.3865.120 y Firefox 69.0.3.
Sé, por ejemplo, que con las pruebas Acid del navegador que originalmente formaban parte del Proyecto de estándares web ( https://www.acidtests.org/ ), la representación perfecta de píxeles era el punto de referencia.
(Crédito adicional: el HTML para el segundo fragmento de código probablemente sea adecuado para mis necesidades; si desea sugerir mejoras, serán bienvenidas).
EDITAR : Mi pregunta compara dos pequeñas muestras de HTML, que se pueden representar para que quepan en la parte visible del navegador. Pero, en general, me gustaría saber la respuesta para HTML que podría ser bastante larga.
Imprime las pantallas de las dos páginas y compara los píxeles.
Puede usar un controlador web como selenium, renderizar las dos pantallas en un archivo de imagen (png, jpg, etc.) -selenium tiene un método para hacer esto- y escribir un software para leer los píxeles de los dos para comparar la similitud.
El controlador web es un navegador que puede controlar con código. Y puedes encontrar software que compara imágenes en la web.
Puede encontrar más información en este enlace: https://selenium.dev/
Aquí hay una idea para hacer algunas mediciones con el DOM: simplemente reemplacé el texto en cuestión con divs que tienen una clase que se puede consultar. Luego puede imprimir el desplazamiento de todos los nodos.
Por lo que mido, las sangrías de los caracteres son de hecho las mismas que las .
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/> <div class="measure"></div><br/> <div class="measure"></div><br/> <div class="measure"></div><br/> <div class="measure"></div><br/> <div class="measure"></div><br/> <div class="measure"></div><br/> </pre> 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>Hice algo similar al desarrollar un sitio web relacionado con CSS . Tuve que comparar una salida producida por un HTML/CSS con una imagen que se generó previamente con un HTML/CSS.
Usé dom-to-image , que convierte el código en una imagen codificada en base64. Coloco esta imagen dentro de un lienzo y luego uso pixelmatch para comparar ambas imágenes.
Aquí hay un ejemplo para ilustrar:
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/> mercury <br/> venus <br/> earth <br/> mars <br/> jupiter <br/> 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>En el código anterior, tenemos nuestros 2 bloques HTML y 2 lienzos donde pintaremos nuestros bloques. Como puede ver, el JS es bastante simple. El código al final ejecuta la coincidencia de píxeles y muestra cuántos píxeles diferentes tienen ambos lienzos. Agregué un retraso para asegurarme de que ambas imágenes se carguen (puede optimizar más tarde con algunos eventos)
También puedes considerar un tercer lienzo para resaltar la diferencia entre ambas imágenes y obtener tu diferencia visual:
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/> mercury <br/> venus <br/> earth <br/> mars <br/> jupiter <br/> 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>Cambiemos el contenido para ver alguna diferencia:
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/> mercury <br/> venus <br/> earth <br/> mars <br/> jupiter <br/> 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>Puede leer más sobre cómo funcionan los dos complementos que usé y encontrar opciones más interesantes.
Estoy ajustando los tamaños a 300x300 para facilitar la demostración dentro del fragmento, pero puede considerar una altura y un ancho mayores.
Actualizar
Aquí hay un ejemplo más realista para comparar dos diseños que producen el mismo resultado. El ancho/alto del lienzo será dinámico y se basará en el contenido. Mostraré solo el último lienzo con la diferencia.
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>Usemos una imagen diferente:
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>Use el botón de imprimir pantalla en su teclado (u otra herramienta de captura de pantalla).
Para las páginas que son demasiado largas o anchas para caber en la pantalla, tome varias capturas de pantalla de cada página y júntelas en su editor de fotos. Puede tomar capturas de pantalla superpuestas de una página grande, colocarlas en capas separadas y luego usar las partes superpuestas para colocar las piezas con precisión antes de fusionar las capas para crear una composición de toda la página.
Puede usar una extensión de navegador como fireshot para capturar toda la página a la vez.
Abre Photoshop o ve a Photopea .
Pegue la captura de pantalla en una capa.
Repita para la segunda página, pegando en una capa diferente.
Alterne la visibilidad de la capa y cualquier cambio será obvio. O ajuste la opacidad de la capa superior (y/o establezca diferentes modos de fusión) para comparar.
Use una extensión de navegador como pixel-perfect-2 que permite superponer imágenes semitransparentes dentro de su navegador. Esta es una extensión útil para verificar la alineación y el espaciado también, porque puede superponer páginas con una imagen de cuadrícula dentro de su navegador.
Utilice una herramienta de comparación de imágenes. Una búsqueda rápida en Google arrojará demasiados para enumerarlos aquí. Hay complementos de diferencias de imagen para algunos editores de código, herramientas de línea de comandos, secuencias de comandos de Python y servicios en línea como diffchecker .
Puede colocar uno encima de otro en el mismo documento con position:absolute; Y tal vez hacer zoom para ver más de cerca.
#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/> mercury <br/> venus <br/> earth <br/> mars <br/> jupiter <br/> 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>Aquí hay algunos métodos de código realmente complejos e inteligentes, así que aquí hay uno simple,
Tome una captura de pantalla de uno, ábralo en un editor de imágenes que admita transparencia como Photoshop,
Péguelo, luego tome la pantalla para mostrar su forma de CSS y péguelo, establezca la segunda imagen pegada en una opacidad del 50% y vea si se alinean.
Superponga las dos páginas una encima de la otra usando iframes. Esto debería permitirle ver las diferencias entre las dos páginas.
principal.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/> mercury <br/> venus <br/> earth <br/> mars <br/> jupiter <br/> 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>(Sospecho que hay una manera de hacer esto usando Stack Snippets. Siéntete libre de aclararme)
Como he visto hasta ahora, pocas personas mencionan herramientas de prueba reales.
Hay muchas herramientas para su caso de uso (a menudo parte de marcos más grandes):
Por nombrar algunos tomados de esta lista. Tal vez busque usted mismo y elija uno que se adapte a su entorno.
Si desea construir una automatización sostenible, no confíe en los trucos. Puede que 'solo' sea un control de calidad, pero puede salvarte seriamente el trasero en futuras versiones.