19

Ad esempio, ho questo:

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

e questo:

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

Espandi frammento

E voglio che il secondo assomigli esattamente al primo.

Credo che siano identici, ma la mia unica prova è stata quella di utilizzare la vecchia tecnica "passa avanti e indietro tra Windows molto velocemente e il bulbo oculare". (Gli astronomi chiamano questo un "comparatore di battiti di ciglia" - https://en.wikipedia.org/wiki/Blink_comparator ). Mi sono assicurato che le finestre avessero le stesse dimensioni e nella stessa posizione. Ma se l'HTML renderizzato non fosse adatto allo schermo, potrebbe essere stato troppo difficile.

Esiste uno strumento o un metodo più definitivo per fare questo confronto?

Ho esaminato questi in Chrome 77.0.3865.120 e Firefox 69.0.3.

So per esempio che con il browser Test degli acidi che erano originariamente parte del Web Standards Project - https://www.acidtests.org/ - il rendering perfetto dei pixel era il punto di riferimento.

(Credito extra: l'HTML per il secondo frammento di codice è probabilmente adeguato alle mie esigenze; se ti interessa suggerire miglioramenti, questi sarebbero i benvenuti.)

EDIT : la mia domanda confronta due piccoli esempi HTML, che possono essere resi per adattarsi alla parte visibile del browser. Ma in generale vorrei sapere la risposta per HTML che potrebbe essere piuttosto lunga.

html css acid3

— Purplejacket
fonte

L'approccio che stavi usando è il migliore anche per me

— Aspetta il

4

Puoi fare uno screenshot di entrambi e quindi sovrapporre gli screenshot e cambiare l'opacità di quello in alto per assicurarti che si

— allineino

2

@ APAD1 - Li sta ancora guardando in faccia. Usa un'immagine diff.

— Quentin,

1

Fondamentalmente un duplicato del chiuso-come-troppo-ampio Confronta due fonti HTML e mostra differenze visive . Inoltre, facendo una ricerca su Internet della "differenza visiva di due pagine html" viene visualizzato un lungo elenco di prodotti e librerie ...

— Heretic Monkey,

1

Credo che TestComplete di Smart Bear possa fare questa documentazione , tuttavia può essere proibitivo in termini di costi.

— Graham,

8

Ho fatto qualcosa di simile durante lo sviluppo di un webiste CSS . Ho dovuto confrontare un output prodotto da un HTML / CSS con un'immagine precedentemente generata con un HTML / CSS.

Ho usato dom-to-image , che converte il codice in un'immagine codificata in base64. Metto questa immagine all'interno di una tela e quindi uso pixelmatch per confrontare tra le due immagini.

Ecco un esempio per illustrare:

Mostra snippet di codice

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>

Espandi frammento

Nel codice sopra, abbiamo i nostri 2 blocchi HTML e 2 aree in cui dipingeremo i nostri blocchi. Come puoi vedere, JS è abbastanza semplice. Il codice alla fine esegue la corrispondenza dei pixel e mostra quanti pixel diversi hanno entrambi i canvas. Ho aggiunto un ritardo per assicurarsi che entrambe le immagini siano caricate (è possibile ottimizzare in seguito con alcuni eventi)

Puoi anche prendere in considerazione una terza tela per evidenziare la differenza tra entrambe le immagini e ottenere la differenza visiva:

Mostra snippet di codice

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>

Espandi frammento

Cambiamo il contenuto per vedere qualche differenza:

Mostra snippet di codice

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>

Espandi frammento

Puoi leggere di più su come funzionano i due plugin che ho usato e trovare opzioni più interessanti.

_{Sto fissando le dimensioni a 300x300 per semplificare la dimostrazione all'interno dello snippet, ma puoi considerare l'altezza e la larghezza maggiori.}

Aggiornare

Ecco un esempio più realistico per confrontare tra due layout che producono lo stesso risultato. La larghezza / altezza della tela sarà dinamica e basata sul contenuto. Mostrerò solo l'ultima tela con la differenza.

Mostra snippet di codice

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>

Espandi frammento

Usiamo un'immagine diversa:

Mostra snippet di codice

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>

Espandi frammento

— Temani Afif
fonte

5

Ecco un'idea per fare un po 'di misurazione con il DOM: ho appena sostituito il testo in questione con div che hanno una classe su cui è possibile eseguire una query. Quindi è possibile stampare l'offset di tutti i nodi.

Da quello che misuro i rientri del personaggio sono effettivamente gli stessi del  .

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>

Espandi frammento

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>

Espandi frammento

— MrRobboto
fonte

"Ho appena sostituito tutti i nodi di testo con div" No, hai sostituito solo le parti che stavi vedendo . Tutti i  caratteri fanno anche parte dei TextNodes. Questo è importante perché significa che la tua soluzione non può funzionare a livello di codice.

— Kaiido,

3

Stampa le schermate delle due pagine e confronta i pixel.
Puoi usare un webdriver come il selenio, renderizzare le due schermate in un file di immagine (png, jpg, ecc.) - il selenio ha un metodo per farlo - e scrivere un software per leggere i pixel dei due per confrontare per somiglianza.
Il webdriver è un browser che puoi controllare con il codice. E puoi trovare software che confrontano le immagini sul web.

Puoi trovare maggiori informazioni in questo link: https://selenium.dev/

— Guilherme
fonte

Come si confrontano i pixel? Esiste un modo automatizzato per farlo? Inoltre, se l'HTML fosse stato molto più lungo dell'esempio che ho dato e non si adattasse allo schermo?

— Purplejacket,

2

Per prima cosa dobbiamo catturare immagini

Metodo di acquisizione 1

Utilizzare il pulsante dello schermo di stampa sulla tastiera (o altro strumento di screenshot).

Se le pagine sono troppo lunghe o larghe per adattarsi allo schermo, scatta più schermate di ciascuna pagina e raggruppale nel tuo editor di foto. Puoi acquisire schermate sovrapposte di una pagina grande, metterle su livelli separati, quindi utilizzare le parti sovrapposte per posizionare i pezzi con precisione prima di unire i livelli per creare un composito dell'intera pagina.

Metodo di acquisizione 2

È possibile utilizzare un'estensione del browser come fireshot per acquisire l'intera pagina in una volta.

In secondo luogo confrontiamo le immagini

Metodo 1

Apri Photoshop o vai a Photopea .
Incolla lo screenshot in un livello.
Ripetere l'operazione per la seconda pagina, incollando in un livello diverso.
Attiva / disattiva la visibilità dei livelli e qualsiasi modifica sarà evidente. Oppure regola l'opacità del livello superiore (e / o imposta diverse modalità di fusione) da confrontare.

Metodo 2

Utilizzare un'estensione del browser come pixel-perfect-2 che consente di sovrapporre immagini semi-trasparenti all'interno del browser. Questa è un'estensione utile per controllare anche l'allineamento e la spaziatura, perché è possibile sovrapporre pagine con un'immagine a griglia all'interno del browser.

Metodo 3

Utilizzare uno strumento di diff immagine. Una rapida ricerca su Google mostrerà troppi per elencarli qui. Esistono plugin di immagini diff per alcuni editor di codice, strumenti da riga di comando, script Python e servizi online come il controllo differenziale .

— Veneseme Tyras
fonte

2

Puoi posizionarli uno sopra l'altro nello stesso documento con position: absolute; E forse ingrandisci per uno sguardo più attento.

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

Espandi frammento

— V.Volkov
fonte

È molto carino! Ho provato questa idea ma a causa di strani aspetti del <pre>tag rispetto ai <body>margini non sono riuscito a farli allineare. I tuoi stili #a, #b { ... }sembrano funzionare correttamente.

— Purplejacket,

2

Sovrapponi le due pagine una sopra l'altra usando iframe. Ciò dovrebbe consentire di vedere eventuali differenze tra le due pagine.

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>

(Sospetto che ci sia un modo per farlo usando Stack Snippet. Sentiti libero di illuminarmi)

— ecc521
fonte

1

Ci sono alcuni metodi di codice davvero complessi e intelligenti qui, quindi eccone uno semplice,

Fai uno screenshot di uno, aprilo in un editor di immagini che supporti la trasparenza Come Photoshop,

Incollalo, quindi prendi lo schermo mostra il tuo modo CSS e incollalo in imposta la seconda immagine incollata su un'opacità del 50% e vedi se si allineano.

— Barkermn01
fonte

Cosa succede se la pagina è troppo lunga per adattarsi allo schermo?

— Purplejacket,

Se si dispone di Photoshop o di qualsiasi altro editor che lo supporta, impostare la modalità di fusione sul livello più alto in modo che differisca. Se le immagini sono identiche, vedrai un'immagine nera fissa.

— Steveax,

Sì. HTML è una stringa. Usa semplicemente cURL o un altro metodo per stampare la stringa e poi confrontarla. Questi sono alcuni esempi ingegnerizzati che corrono qui intorno.

— Ususipse,

@Purplejacket, erm Screenshot dell'app nel suo insieme, Ctrl + Maiusc + Stampa schermo,

— Barkermn01

1

Come ho visto finora, poche persone stanno citando strumenti di test reali.

Esistono molti strumenti per il tuo caso d'uso (spesso parte di framework più grandi):

Per citarne alcuni presi da questo elenco. Forse cercati e scegline uno adatto al tuo ambiente.

Se vuoi costruire un'automazione sostenibile non fare affidamento sugli hack. Potrebbe "solo" essere QA ma può salvare seriamente il tuo ** nelle versioni future.

— Nils K
fonte

Come posso dimostrare che due pagine HTML sembrano identiche?

Per prima cosa dobbiamo catturare immagini

Metodo di acquisizione 1

Metodo di acquisizione 2

In secondo luogo confrontiamo le immagini

Metodo 1

Metodo 2

Metodo 3