19

Mam na przykład:

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

i to:

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

Rozwiń fragment kodu

I chcę, aby drugi wyglądał dokładnie tak samo jak pierwszy.

Sądzę, że wyglądają identycznie, ale moim jedynym dowodem było użycie starej techniki „przełączania okien w przód i w tył naprawdę szybko”. (Astronomowie nazywają to „komparator blink” - https://en.wikipedia.org/wiki/Blink_comparator ). Upewniłem się, że okna były tego samego rozmiaru i w tej samej pozycji. Ale jeśli renderowany HTML nie mieści się na ekranie, może to być zbyt trudne.

Czy istnieje bardziej ostateczne narzędzie lub metoda wykonania tego porównania?

Patrzyłem na nie zarówno w Chrome 77.0.3865.120, jak i Firefox 69.0.3.

Wiem na przykład, że w przypadku testów kwasowych, które pierwotnie były częścią projektu Web Standards Project - https://www.acidtests.org/ - wzorcowe było renderowanie w pikselach.

(Dodatkowy kredyt: kod HTML drugiego fragmentu kodu jest prawdopodobnie odpowiedni dla moich potrzeb; jeśli zechcesz zasugerować ulepszenia, będą one mile widziane).

EDYCJA : Moje pytanie porównuje dwie małe próbki HTML, które można wyrenderować, aby zmieściły się w widocznej części przeglądarki. Ale ogólnie chciałbym znać odpowiedź na HTML, która może być dość długa.

html css acid3

— Purplejacket
źródło

Podejście, które zastosowałeś jest dla mnie najlepsze

— Awais

4

Możesz zrobić zrzut ekranu obu, a następnie nałożyć zrzuty ekranu i zmienić krycie górnego, aby upewnić się, że są w jednej linii

— APAD1

2

@ APAD1 - Nadal im się przygląda. Użyj różnicy obrazu.

— Quentin

1

Zasadniczo duplikat zamkniętego jako zbyt szerokiego Porównaj dwa źródła HTML i wyświetl różnice wizualne . Ponadto wyszukiwanie w Internecie „wizualnej różnicy dwóch stron HTML” powoduje wyświetlenie długiej listy produktów i bibliotek ...

— Heretic Monkey,

1

Uważam, że SmartCell TestComplete może wykonać tę dokumentację , jednak może to być zbyt kosztowne.

— Graham

8

Zrobiłem coś podobnego podczas tworzenia strony związanej z CSS . Musiałem porównać dane wyjściowe wygenerowane przez HTML / CSS z obrazem, który został wcześniej wygenerowany za pomocą HTML / CSS.

Użyłem dom-to-image , który konwertuje kod na obraz zakodowany w standardzie base64. Umieszczam ten obraz w obszarze roboczym, a następnie używam dopasowania pikseli, aby porównać oba obrazy.

Oto przykład ilustrujący:

Pokaż fragment kodu

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>

Rozwiń fragment kodu

W powyższym kodzie mamy 2 bloki HTML i 2 płótna, na których będziemy malować nasze bloki. Jak widać, JS jest dość prosty. Kod na końcu uruchamia dopasowanie pikseli i pokazuje, ile różnych pikseli mają oba płótna. Dodałem opóźnienie, aby upewnić się, że oba obrazy są załadowane (możesz zoptymalizować później w przypadku niektórych zdarzeń)

Możesz również rozważyć trzecie płótno, aby podkreślić różnicę między oboma obrazami i uzyskać różnicę wizualną:

Pokaż fragment kodu

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>

Rozwiń fragment kodu

Zmieńmy zawartość, aby zobaczyć różnicę:

Pokaż fragment kodu

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>

Rozwiń fragment kodu

Możesz przeczytać więcej o tym, jak działają dwie używane przeze mnie wtyczki i znaleźć bardziej interesujące opcje.

_{Naprawiam rozmiary do 300 x 300, aby ułatwić demonstrację we fragmencie, ale możesz rozważyć większą wysokość i szerokość.}

Aktualizacja

Oto bardziej realistyczny przykład porównania dwóch układów, które dają ten sam wynik. Szerokość / wysokość płótna będzie dynamiczna i oparta na treści. Z różnicą pokażę tylko ostatnie płótno.

Pokaż fragment kodu

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>

Rozwiń fragment kodu

Użyjmy innego obrazu:

Pokaż fragment kodu

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>

Rozwiń fragment kodu

— Temani Afif
źródło

5

Oto pomysł, aby faktycznie dokonać pomiaru za pomocą DOM - właśnie zastąpiłem ten tekst divami, które mają klasę, o którą można zapytać. Następnie możesz wydrukować przesunięcie wszystkich węzłów.

Z tego, co mierzę, wcięcia znaków są w rzeczywistości takie same jak  .

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>

Rozwiń fragment kodu

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>

Rozwiń fragment kodu

— MrRobboto
źródło

„Właśnie zastąpiłem wszystkie węzły tekstowe div”. Nie, zastąpiłeś tylko te części , które widziałeś . Wszystkie  znaki są również częścią TextNodes. Jest to ważne, ponieważ oznacza, że twoje rozwiązanie nie może działać programowo.

— Kaiido

3

Wydrukuj ekrany dwóch stron i porównaj piksele.
Możesz użyć webdrivera, takiego jak selen, renderować dwa ekrany w pliku obrazu (png, jpg itp.) - selenium ma na to sposób - i napisać oprogramowanie do odczytu pikseli tych dwóch w celu porównania pod względem podobieństwa.
Webdriver to przeglądarka, którą możesz kontrolować za pomocą kodu. I możesz znaleźć oprogramowanie, które porównuje obrazy w Internecie.

Więcej informacji można znaleźć pod tym linkiem: https://selenium.dev/

— Guilherme
źródło

Jak porównujesz piksele? Czy istnieje zautomatyzowany sposób to zrobić? A co jeśli HTML byłby znacznie dłuższy niż podany przykład i nie mieścił się na ekranie?

— Purplejacket

2

Najpierw musimy przechwycić obrazy

Metoda przechwytywania 1

Użyj przycisku ekranu drukowania na klawiaturze (lub innym narzędziu zrzutów ekranu).

W przypadku stron, które są zbyt długie lub szerokie, aby zmieściły się na ekranie, wykonaj kilka zrzutów ekranu z każdej strony i złóż je razem w edytorze zdjęć. Możesz wykonać nakładające się zrzuty ekranu dużej strony, umieścić je na osobnych warstwach, a następnie użyć nakładających się fragmentów, aby ustawić elementy dokładnie przed scaleniem warstw w celu utworzenia kompozytu całej strony.

Metoda przechwytywania 2

Możesz użyć rozszerzenia przeglądarki, takiego jak FireShot, aby przechwycić całą stronę naraz.

Po drugie porównujemy obrazy

Metoda 1

Otwórz photoshop lub przejdź do photopea .
Wklej zrzut ekranu do warstwy.
Powtórz to dla drugiej strony, wklejając na inną warstwę.
Przełącz widoczność warstwy, a wszelkie zmiany będą oczywiste. Lub dostosuj krycie górnej warstwy (i / lub ustaw różne tryby mieszania), aby porównać.

Metoda 2

Użyj rozszerzenia przeglądarki, takiego jak pixel-perfect-2, które umożliwia nakładanie półprzezroczystych obrazów w przeglądarce. Jest to przydatne rozszerzenie do sprawdzania wyrównania i odstępów, ponieważ w przeglądarce można nakładać strony obrazem siatki.

Metoda 3

Użyj narzędzia do różnicowania obrazu. Szybkie wyszukiwanie w Google spowoduje pojawienie się zbyt wielu, aby wymienić tutaj. Istnieją wtyczki diff obrazu dla niektórych edytorów kodu, narzędzi wiersza poleceń, skryptów Python i usług online, takich jak diffchecker .

— Veneseme Tyras
źródło

2

Możesz umieścić jeden nad drugim w tym samym dokumencie z pozycją: bezwzględny; I może powiększyć, aby przyjrzeć się bliżej.

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

Rozwiń fragment kodu

— V.Volkov
źródło

To bardzo miłe! Wypróbowałem ten pomysł, ale z powodu dziwnych aspektów <pre>tagu w odniesieniu do <body>marginesów nie mogłem ich wyrównać. Wygląda na to, #a, #b { ... }że twoje style działają poprawnie.

— Purplejacket

2

Nakładaj dwie strony jedna na drugą za pomocą elementów iframe. Powinno to pozwolić Ci zobaczyć różnice między dwiema stronami.

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>

(Podejrzewam, że jest na to sposób za pomocą urywków stosu. Zapraszam do oświecenia mnie)

— ecc521
źródło

1

Jest tu kilka naprawdę skomplikowanych i sprytnych metod kodu, więc tutaj jest prosta,

Zrób zrzut ekranu, otwórz go w edytorze obrazów obsługującym przezroczystość, takim jak Photoshop,

Wklej go, a następnie pokaż ekran CSS i wklej go, aby ustawić drugi wklejony obraz na krycie 50% i sprawdź, czy się wyrównają.

— Barkermn01
źródło

Co jeśli strona jest za długa, aby zmieścić się na ekranie?

— Purplejacket

Jeśli masz program Photoshop lub inny edytor, który go obsługuje, ustaw różnicę w trybie mieszania na najwyższej warstwie. Jeśli obrazy są identyczne, zobaczysz jednolity czarny obraz.

— steveax

Tak. HTML to jeden ciąg. Wystarczy użyć cURL lub innej metody, aby wydrukować ciąg, a następnie porównać. Oto kilka przepracowanych przykładów.

— Ususipse

@Purplejacket, erm Zrzut ekranu aplikacji jako całości, Ctrl + Shift + Print Screen,

— Barkermn01

1

Jak do tej pory widziałem, niewiele osób wspomina o rzeczywistych narzędziach testujących.

Istnieje wiele narzędzi dla twojej skrzynki użytkownika (często część większych frameworków):

Aby wymienić tylko kilka z tego listy. Może poszukaj siebie i wybierz ten, który pasuje do twojego środowiska.

Jeśli chcesz zbudować zrównoważoną automatyzację, nie polegaj na hackach. Może to być „tylko” kontrola jakości, ale może poważnie zaoszczędzić ** w przyszłych wydaniach.

— Nils K.
źródło

Jak mogę udowodnić, że dwie strony HTML wyglądają identycznie?

Najpierw musimy przechwycić obrazy

Metoda przechwytywania 1

Metoda przechwytywania 2

Po drugie porównujemy obrazy

Metoda 1

Metoda 2

Metoda 3