19

ZB habe ich folgendes:

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

und das:

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

Erweitern Sie das Snippet

Und ich möchte, dass der zweite genau wie der erste aussieht.

Ich glaube, diese sehen identisch aus, aber mein einziger Beweis war, die alte Technik "Schnell zwischen den Fenstern hin und her wechseln und es in Augenschein nehmen" zu verwenden. (Astronomen nennen dies einen "Blinkkomparator" - https://en.wikipedia.org/wiki/Blink_comparator ). Ich habe dafür gesorgt, dass die Fenster die gleiche Größe und Position haben. Aber wenn der gerenderte HTML-Code nicht auf den Bildschirm passt, wäre dies möglicherweise zu schwierig gewesen.

Gibt es ein definitiveres Werkzeug oder eine Methode, um diesen Vergleich durchzuführen?

Ich habe mir diese sowohl in Chrome 77.0.3865.120 als auch in Firefox 69.0.3 angesehen.

Ich weiß zum Beispiel, dass mit dem Browser Säuretests, die ursprünglich Teil des Web Standards Project waren - https://www.acidtests.org/ - pixelgenaues Rendern der Maßstab war.

(Extra Credit: Der HTML-Code für das zweite Code-Snippet ist wahrscheinlich für meine Anforderungen geeignet. Wenn Sie Verbesserungen vorschlagen möchten, sind diese willkommen.)

BEARBEITEN : Meine Frage vergleicht zwei kleine HTML-Beispiele, die so gerendert werden können, dass sie in den sichtbaren Teil des Browsers passen. Aber im Allgemeinen würde ich gerne die Antwort für HTML wissen, die ziemlich lang sein könnte.

html css acid3 Lila Jacke
quelle

Der Ansatz, den Sie verwendet haben, ist auch für mich am besten

Awais

4

Sie können einen Screenshot von beiden machen und dann die Screenshots überlagern und die Deckkraft des oberen ändern, um sicherzustellen, dass sie ausgerichtet sind

APAD1

2

@ APAD1 - Das mustert sie immer noch. Verwenden Sie ein Bilddiff.

Quentin

1

Grundsätzlich ein Betrug der geschlossenen als zu breit Vergleichen Sie zwei HTML-Quellen und zeigen Sie visuelle Unterschiede an . Wenn Sie im Internet nach "visuellen Unterschieden von zwei HTML-Seiten" suchen, wird eine lange Liste von Produkten und Bibliotheken

angezeigt

1

Ich glaube, dass TestComplete von Smart Bear diese Dokumentation ausführen kann , sie kann jedoch unerschwinglich sein.

Graham

8

Ich habe etwas Ähnliches getan, als ich eine CSS-bezogene Webiste entwickelt habe . Ich musste eine von einem HTML / CSS erzeugte Ausgabe mit einem Bild vergleichen, das zuvor mit einem HTML / CSS erzeugt wurde.

Ich habe Dom-to-Image verwendet , das Code in ein Base64-codiertes Image konvertiert. Ich platziere dieses Bild auf einer Leinwand und verwende dann Pixelmatch , um zwischen beiden Bildern zu vergleichen.

Hier ist ein Beispiel zur Veranschaulichung:

Code-Snippet anzeigen

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>

Erweitern Sie das Snippet

Im obigen Code haben wir unsere 2 HTML-Blöcke und 2 Leinwände, auf denen wir unsere Blöcke malen werden. Wie Sie sehen können, ist der JS recht einfach. Der Code am Ende führt die Pixelanpassung aus und zeigt, wie viele verschiedene Pixel beide Leinwände haben. Ich habe eine Verzögerung hinzugefügt, um sicherzustellen, dass beide Bilder geladen werden (Sie können sie später bei einigen Ereignissen optimieren).

Sie können auch eine dritte Leinwand in Betracht ziehen, um den Unterschied zwischen beiden Bildern hervorzuheben und Ihren visuellen Unterschied zu erhalten:

Code-Snippet anzeigen

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>

Erweitern Sie das Snippet

Lassen Sie uns den Inhalt ändern, um einen Unterschied zu sehen:

Code-Snippet anzeigen

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>

Erweitern Sie das Snippet

Sie können mehr darüber lesen, wie die beiden von mir verwendeten Plugins funktionieren, und weitere interessante Optionen finden.

_{Ich korrigiere die Größen auf 300 x 300, um die Demonstration im Snippet zu vereinfachen, aber Sie können eine größere Höhe und Breite in Betracht ziehen.}

Aktualisieren

Hier ist ein realistischeres Beispiel für den Vergleich zwischen zwei Layouts, die das gleiche Ergebnis erzielen. Die Breite / Höhe der Leinwand ist dynamisch und basiert auf dem Inhalt. Ich werde nur die letzte Leinwand mit dem Unterschied zeigen.

Code-Snippet anzeigen

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>

Erweitern Sie das Snippet

Verwenden wir ein anderes Bild:

Code-Snippet anzeigen

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>

Erweitern Sie das Snippet

Temani Afif
quelle

5

Hier ist eine Idee, um tatsächlich mit dem DOM zu messen - ich habe gerade den fraglichen Text durch divs ersetzt, die eine Klasse haben, die abgefragt werden kann. Anschließend können Sie den Versatz aller Knoten drucken.

Nach dem, was ich messe, sind die Zeicheneinrückungen tatsächlich die gleichen wie die  .

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>

Erweitern Sie das Snippet

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>

Erweitern Sie das Snippet

MrRobboto
quelle

"Ich habe gerade alle Textknoten durch divs ersetzt." Nein, Sie haben nur die Teile ersetzt, die Sie gesehen haben . Alle  Zeichen sind auch Teil der TextNodes. Dies ist wichtig, da Ihre Lösung dadurch nicht programmgesteuert funktionieren kann.

Kaiido

3

Drucken Sie die Bildschirme der beiden Seiten und vergleichen Sie die Pixel.
Sie können einen Web-Treiber wie Selen verwenden, die beiden Bildschirme in einer Bilddatei (PNG, JPG usw.) rendern - Selen hat eine Methode, um dies zu tun - und eine Software schreiben, um die Pixel der beiden zu lesen und auf Ähnlichkeit zu vergleichen.
Der Webdriver ist ein Browser, den Sie mit Code steuern können. Und Sie können Software finden, die Bilder im Web vergleicht.

Weitere Informationen finden Sie unter diesem Link: https://selenium.dev/

Guilherme
quelle

Wie vergleichst du die Pixel? Gibt es eine automatisierte Möglichkeit, dies zu tun? Was wäre, wenn der HTML-Code viel länger gewesen wäre als das Beispiel, das ich gegeben habe, und nicht auf den Bildschirm gepasst hätte?

Purplejacket

2

Zuerst müssen wir Bilder aufnehmen

Erfassungsmethode 1

Verwenden Sie die Schaltfläche zum Drucken des Bildschirms auf Ihrer Tastatur (oder einem anderen Screenshot-Tool).

Wenn Seiten zu lang oder zu breit sind, um auf den Bildschirm zu passen, machen Sie mehrere Screenshots von jeder Seite und setzen Sie sie in Ihrem Fotoeditor zusammen. Sie können überlappende Screenshots einer großen Seite erstellen, diese auf separate Ebenen legen und dann die überlappenden Teile verwenden, um die Teile genau zu positionieren, bevor Sie Ebenen zusammenführen, um eine Zusammenstellung der gesamten Seite zu erstellen.

Erfassungsmethode 2

Sie können eine Browsererweiterung wie Fireshot verwenden , um die gesamte Seite auf einmal zu erfassen.

Zweitens vergleichen wir die Bilder

Methode 1

Öffnen Sie Photoshop oder gehen Sie zu Photopea .
Fügen Sie den Screenshot in eine Ebene ein.
Wiederholen Sie diesen Vorgang für die zweite Seite und fügen Sie ihn in eine andere Ebene ein.
Das Umschalten der Ebenensichtbarkeit und etwaiger Änderungen ist offensichtlich. Oder passen Sie die Deckkraft der obersten Ebene an (und / oder stellen Sie verschiedene Mischmodi ein), um sie zu vergleichen.

Methode 2

Verwenden Sie eine Browser-Erweiterung wie pixel-perfect-2 , mit der Sie halbtransparente Bilder in Ihrem Browser überlagern können. Dies ist eine nützliche Erweiterung zum Überprüfen der Ausrichtung und des Abstands, da Sie Seiten mit einem Rasterbild in Ihrem Browser überlagern können.

Methode 3

Verwenden Sie ein Bilddiff-Tool. Bei einer schnellen Google-Suche werden zu viele angezeigt, um sie hier aufzulisten. Es gibt Image-Diff-Plugins für einige Code-Editoren, Befehlszeilentools, Python-Skripte und Onlinedienste wie Diffchecker .

Veneseme Tyras
quelle

2

Sie können im selben Dokument Folgendes übereinander platzieren: absolute; Und vielleicht vergrößern, um genauer hinzuschauen.

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

Erweitern Sie das Snippet

V.Volkov
quelle

Das ist sehr nett! Ich habe diese Idee ausprobiert, aber aufgrund seltsamer Aspekte des <pre>Tags in Bezug auf die <body>Ränder konnte ich sie nicht zum Ausrichten bringen. Ihre Stile #a, #b { ... }scheinen dafür zu sorgen, dass es richtig funktioniert.

Purplejacket

2

Überlagern Sie die beiden Seiten mit Iframes. Auf diese Weise sollten Sie Unterschiede zwischen den beiden Seiten erkennen können.

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>

(Ich vermute, es gibt eine Möglichkeit, dies mit Stack Snippets zu tun. Sie können mich gerne aufklären.)

ecc521
quelle

1

Hier gibt es einige wirklich komplexe und clevere Codemethoden. Hier ist eine einfache:

Machen Sie einen Screenshot von einem und öffnen Sie ihn in einem Bildeditor, der Transparenz unterstützt.

Fügen Sie es ein, zeigen Sie auf dem Bildschirm Ihre CSS-Methode und fügen Sie es ein. Stellen Sie das zweite eingefügte Bild auf eine Deckkraft von 50% ein und prüfen Sie, ob sie ausgerichtet sind.

Barkermn01
quelle

Was ist, wenn die Seite zu lang ist, um auf den Bildschirm zu passen?

Purplejacket

Wenn Sie über Photoshop oder einen anderen Editor verfügen, der dies unterstützt, stellen Sie den Mischmodus auf der obersten Ebene auf Differenz ein. Wenn die Bilder identisch sind, sehen Sie ein durchgehend schwarzes Bild.

Steveax

Ja. HTML ist eine Zeichenfolge. Verwenden Sie einfach cURL oder eine andere Methode, um die Zeichenfolge zu drucken und dann zu vergleichen. Dies sind einige überentwickelte Beispiele, die hier herumlaufen.

Ususipse

@ Purplejacket, ähm Screenshot der App als Ganzes, Strg + Umschalt +

Druckbildschirm

1

Wie ich bisher gesehen habe, erwähnen nur wenige Leute tatsächliche Testwerkzeuge.

Es gibt viele Tools für Ihren Anwendungsfall (oft Teil größerer Frameworks):

Um nur einige zu nennen, die aus dieser Liste stammen. Vielleicht suchen Sie selbst und wählen Sie eine, die zu Ihrer Umgebung passt.

Wenn Sie eine nachhaltige Automatisierung aufbauen möchten, verlassen Sie sich nicht auf Hacks. Es kann "nur" QS sein, kann aber Ihr a ** in zukünftigen Versionen ernsthaft retten.

Nils K.
quelle

Wie kann ich nachweisen, dass zwei HTML-Seiten identisch aussehen?

Antworten:

Zuerst müssen wir Bilder aufnehmen

Erfassungsmethode 1

Erfassungsmethode 2

Zweitens vergleichen wir die Bilder

Methode 1

Methode 2

Methode 3