19

Örneğin, bende:

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

ve bu:

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

Snippet'i genişlet

Ve ikincisinin aynen ilkine benzemesini istiyorum.

Bu özdeş görünmek inanıyorum, ama benim tek kanıt eski "windows hızlı ve göz küresi arasında ileri geri geçiş" tekniği kullanmak oldu. (Gökbilimciler buna "göz kırpma karşılaştırıcısı" derler - https://en.wikipedia.org/wiki/Blink_comparator ). Pencerelerin aynı boyutta ve aynı konumda olduğundan emin oldum. Ancak, oluşturulan HTML ekrana sığmazsa, bu çok zor olabilir.

Bu karşılaştırmayı yapmak için daha kesin bir araç veya yöntem var mı?

Bunlara hem Chrome 77.0.3865.120 hem de Firefox 69.0.3'te baktım.

Örneğin, başlangıçta Web Standartları Projesi'nin bir parçası olan tarayıcı Asit testleri - https://www.acidtests.org/ - piksel mükemmel renderin kriter olduğunu biliyorum .

(Ekstra Kredi: İkinci kod snippet'inin HTML'si muhtemelen ihtiyaçlarım için yeterli; iyileştirmeler önermek istersen bunlar hoş karşılanır.)

DÜZENLE : Sorum, tarayıcının görünür kısmına sığacak şekilde oluşturulabilen iki küçük HTML örneğini karşılaştırıyor. Ancak genel olarak HTML için oldukça uzun olabilecek cevabı bilmek istiyorum.

html css acid3

— Purplejacket
kaynak

Kullandığınız yaklaşım benim için de en iyisi

— Awais

4

Her ikisinin de ekran görüntüsünü alabilir ve ardından ekran görüntülerini

— kaplayabilir ve sıralandığından

2

@ APAD1 - Bu hala onları göz kamaştırıyor. Bir görüntü farkı kullanın.

— Quentin

1

Temelde çok geniş kapalı bir dupe İki HTML kaynağını karşılaştırın ve görsel farklılıkları görüntüleyin . Ayrıca, "iki html sayfasının görsel farkı" internette arama yapmak ürün ve kütüphanelerin uzun bir listesini getiriyor ...

— Heretic Monkey

1

Smart Bear'ın TestComplete'in bu belgeleri yapabileceğine inanıyorum , ancak maliyet engelleyici olabilir.

— Graham

8

CSS ile ilgili bir webiste geliştirirken benzer bir şey yaptım . Bir HTML / CSS tarafından üretilen bir çıktıyı daha önce bir HTML / CSS ile oluşturulmuş bir görüntüyle karşılaştırmak zorunda kaldım.

Kodları base64 kodlu bir görüntüye dönüştüren dom-to-image kullandım . Bu resmi bir tuvalin içine yerleştiriyorum ve sonra her iki resim arasında karşılaştırma yapmak için pixelmatch kullanıyorum .

Aşağıda açıklamak için bir örnek verilmiştir:

Kod snippet'ini göster

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>

Snippet'i genişlet

Yukarıdaki kodda, bloklarımızı boyayacağımız 2 HTML bloğumuz ve 2 tuvalimiz var. Gördüğünüz gibi JS oldukça basit. Sondaki kod piksel eşleşmesini çalıştırır ve her iki tuvalin kaç farklı piksele sahip olduğunu gösterir. Her iki görüntünün de yüklendiğinden emin olmak için bir gecikme ekledim (daha sonra bazı etkinliklerle optimize edebilirsiniz)

Her iki resim arasındaki farkı vurgulamak ve görsel farkınızı elde etmek için üçüncü bir tuval de düşünebilirsiniz:

Kod snippet'ini göster

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>

Snippet'i genişlet

Farkı görmek için içeriği değiştirelim:

Kod snippet'ini göster

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>

Snippet'i genişlet

Kullandığım iki eklentinin nasıl çalıştığı hakkında daha fazla bilgi edinebilir ve daha ilginç seçenekler bulabilirsiniz.

_{Gösteriyi parçacık içinde kolaylaştırmak için boyutları 300x300'e sabitliyorum, ancak daha büyük yükseklik ve genişlik düşünebilirsiniz.}

Güncelleme

Aynı sonucu veren iki düzen arasında karşılaştırma yapmak için daha gerçekçi bir örnek. Tuvalin genişliği / yüksekliği dinamik ve içeriğe dayalı olacaktır. Farkı olan sadece son tuvali göstereceğim.

Kod snippet'ini göster

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>

Snippet'i genişlet

Farklı bir resim kullanalım:

Kod snippet'ini göster

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>

Snippet'i genişlet

— Temani Afif
kaynak

5

İşte DOM ile bazı ölçümler yapmak için bir fikir - sadece söz konusu metni sorgulanabilecek bir sınıfa sahip div'larla değiştirdim. Sonra tüm düğümlerin ofsetini yazdırabilirsiniz.

Ölçtüğümden karakter girintileri gerçekten ile aynı  .

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>

Snippet'i genişlet

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>

Snippet'i genişlet

— MrRobboto
kaynak

"Ben sadece divs tüm metin düğümleri yerini" Hayır, sadece yerini parçaları sen edildi görünce . Tüm  karakterler ayrıca TextNodes'un bir parçasıdır. Bu önemlidir, çünkü çözümünüz programlı olarak çalışamaz.

— Kaiido

3

İki sayfanın ekranlarını yazdırın ve pikselleri karşılaştırın.
Selenyum gibi bir web sürücüsü kullanabilir, iki ekranı bir görüntü dosyasında (png, jpg, vb.) Oluşturabilirsiniz - selenyumun bunu yapmak için bir yöntemi vardır - ve benzerliği karşılaştırmak için ikisinin piksellerini okumak için bir yazılım yazabilirsiniz.
Web sürücüsü, kodla kontrol edebileceğiniz bir tarayıcıdır. Web'deki görüntüleri karşılaştıran yazılımlar da bulabilirsiniz.

Bu bağlantıda daha fazla bilgi bulabilirsiniz: https://selenium.dev/

— Guilherme
kaynak

Pikselleri nasıl karşılaştırıyorsunuz? Bunu yapmanın otomatik bir yolu var mı? Ayrıca, HTML verdiğim örnekten çok daha uzun olsaydı ve ekrana sığmazsa ne olacak?

— Purplejacket

2

Öncelikle görüntüleri yakalamak zorundayız

Yakalama Yöntemi 1

Klavyenizdeki (veya başka bir ekran görüntüsü aracındaki) ekran baskı düğmesini kullanın.

Ekrana sığacak kadar uzun veya geniş sayfalar için, her sayfanın birden fazla ekran görüntüsünü alın ve bunları fotoğraf düzenleyicinizde bir araya getirin. Büyük bir sayfanın üst üste binen ekran görüntülerini alabilir, ayrı katmanlara yerleştirebilir, ardından tüm sayfanın bir bileşimini oluşturmak için katmanları birleştirmeden önce parçaları tam olarak konumlandırmak için üst üste binen bölümleri kullanabilirsiniz.

Yakalama Yöntemi 2

Tüm sayfayı bir kerede yakalamak için fireshot gibi bir tarayıcı uzantısı kullanabilirsiniz .

İkinci olarak görüntüleri karşılaştırıyoruz

Yöntem 1

Photoshop açın veya photopea'ya gidin .
Ekran görüntüsünü bir katmana yapıştırın.
Farklı bir katmana yapıştırarak ikinci sayfa için tekrarlayın.
Katman görünürlüğünü aç / kapat ve değişiklikler açıkça görülecektir. Veya karşılaştırmak için üst katmanın opaklığını ayarlayın (ve / veya farklı karışım modları ayarlayın).

Yöntem 2

Tarayıcınızda yarı saydam görüntülerin yer paylaşımına izin veren pixel-perfect-2 gibi bir tarayıcı uzantısı kullanın . Bu, hizalama ve aralıkları kontrol etmek için de yararlı bir uzantıdır, çünkü tarayıcınızdaki ızgara görüntüsüne sahip sayfaları kaplayabilirsiniz.

Yöntem 3

Bir görüntü farklı aracı kullanın. Hızlı bir google araması, burada listelenemeyecek kadar çok olacak. Bazı kod editörleri, komut satırı araçları, Python komut dosyaları ve difüzör gibi çevrimiçi hizmetler için görüntü dif eklentileri vardır .

— Veneseme Tyras
kaynak

2

Pozisyonu ile aynı belgeye üst üste yerleştirebilirsiniz: mutlak; Ve belki daha yakından bakmak için yakınlaştırın.

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

Snippet'i genişlet

— V.Volkov
kaynak

Bu çok iyi! Bu fikri denedim, ancak <pre>etiketin <body>kenar boşluklarına göre garip yönleri nedeniyle hizalamalarını sağlayamadım. İçin stilleriniz #a, #b { ... }düzgün çalışıyor gibi görünüyor.

— Purplejacket

2

İç çerçeveleri kullanarak iki sayfayı üst üste bindirin. Bu, iki sayfa arasındaki farkları görmenizi sağlayacaktır.

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>

(Stack Snippet'lerini kullanarak bunu yapmanın bir yolu olduğundan şüpheleniyorum. Beni aydınlatmaktan çekinmeyin)

— ecc521
kaynak

1

Burada gerçekten karmaşık ve akıllı kod yöntemleri var, bu yüzden burada basit,

Birinin ekran görüntüsünü alın, saydamlığı destekleyen bir resim düzenleyicide açın Photoshop gibi,

Ardından, CSS yolunuzdan ekran gösterisini alın ve yapıştırılan ikinci görüntüyü% 50 opaklığa ayarlayın ve sıralanıp hizalanmadığına bakın.

— Barkermn01
kaynak

Sayfa ekrana sığmayacak kadar uzunsa ne olur?

— Purplejacket

Photoshop'unuz veya onu destekleyen başka bir düzenleyiciniz varsa, en üst katmandaki karışım modunu farklı olarak ayarlayın. Görüntüler aynı ise, sabit siyah bir görüntü görürsünüz.

— steveax

Evet. HTML bir dizedir. Dizeyi yazdırmak için cURL veya başka bir yöntem kullanın ve ardından karşılaştırın. Bunlar burada yapılan bazı aşırı mühendislik örnekleri.

— Ususipse

@Purplejacket, erm Uygulamayı bir bütün olarak görüntüle, Ctrl + Shift + Print Screen,

— Barkermn01

1

Şimdiye kadar gördüğüm gibi, birkaç kişi gerçek test araçlarından bahsediyor.

Usecase'iniz için birçok araç var (genellikle daha büyük çerçevelerin bir parçası):

Bu listeden alınan bir kaç isim vermek . Belki kendinizi arayın ve çevrenize uygun birini seçin.

Sürdürülebilir bir otomasyon oluşturmak istiyorsanız, saldırılara güvenmeyin. 'Sadece' KG olabilir, ancak gelecekteki sürümlerde a ** 'nızı ciddi şekilde kurtarabilir.

— Nils K
kaynak

İki HTML sayfasının aynı göründüğünü nasıl kanıtlayabilirim?

Öncelikle görüntüleri yakalamak zorundayız

Yakalama Yöntemi 1

Yakalama Yöntemi 2

İkinci olarak görüntüleri karşılaştırıyoruz

Yöntem 1

Yöntem 2

Yöntem 3