19

Misalnya, saya punya ini:

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

dan ini:

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

Luaskan cuplikan

Dan saya ingin yang kedua terlihat persis seperti yang pertama.

Saya percaya itu terlihat identik, tetapi satu-satunya bukti saya adalah menggunakan teknik lama "beralih bolak-balik antara windows nyata dan mengamatinya". (Para astronom menyebutnya "pembanding kedip" - https://en.wikipedia.org/wiki/Blink_comparator ). Saya memastikan windows memiliki ukuran dan posisi yang sama. Tetapi jika HTML yang diberikan tidak pas di layar, ini mungkin terlalu sulit.

Apakah ada alat atau metode yang lebih pasti untuk melakukan perbandingan ini?

Saya melihat ini di Chrome 77.0.3865.120 dan Firefox 69.0.3.

Saya tahu misalnya bahwa dengan tes Asam browser yang awalnya merupakan bagian dari Proyek Standar Web - https://www.acidtests.org/ - rendering sempurna pixel adalah patokan.

(Kredit Ekstra: HTML untuk cuplikan kode kedua mungkin cukup untuk kebutuhan saya; jika Anda ingin menyarankan perbaikan, silakan saja.)

EDIT : Pertanyaan saya membandingkan dua sampel HTML kecil, yang dapat ditampilkan agar sesuai dengan bagian browser yang terlihat. Tetapi secara umum saya ingin tahu jawaban untuk HTML yang bisa sangat panjang.

html css acid3 Jaket ungu
sumber

Pendekatan yang Anda gunakan adalah yang terbaik bagi saya juga

Awais

4

Anda dapat mengambil tangkapan layar keduanya dan kemudian overlay tangkapan layar dan mengubah opacity dari yang teratas untuk memastikan mereka berbaris

APAD1

2

@ APAD1 - Itu masih mengintai mereka. Gunakan perbedaan gambar.

Quentin

1

Pada dasarnya dupe dari tertutup-sebagai-terlalu-luas Bandingkan dua sumber HTML dan tampilkan perbedaan visual . Juga, melakukan pencarian di internet "perbedaan visual dari dua halaman html" memunculkan daftar panjang produk dan perpustakaan ...

Heretic Monkey

1

Saya percaya TestComplete Smart Bear dapat melakukan dokumentasi ini , namun biayanya mahal.

Graham

8

Saya telah melakukan hal serupa ketika mengembangkan webiste terkait CSS . Saya harus membandingkan output yang dihasilkan oleh HTML / CSS dengan gambar yang sebelumnya dihasilkan dengan HTML / CSS.

Saya menggunakan dom-to-image , yang mengubah kode ke gambar base64-encoded. Saya menempatkan gambar ini di dalam kanvas dan kemudian menggunakan pixelmatch untuk membandingkan antara kedua gambar.

Berikut adalah contoh untuk menggambarkan:

Tampilkan cuplikan kode

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>

Luaskan cuplikan

Dalam kode di atas, kita memiliki 2 blok HTML dan 2 kanvas di mana kita akan mengecat blok kita. Seperti yang Anda lihat, JS cukup sederhana. Kode di bagian akhir menjalankan pencocokan piksel dan menunjukkan berapa banyak piksel yang berbeda yang dimiliki kedua kanvas. Saya menambahkan penundaan untuk memastikan kedua gambar dimuat (Anda dapat mengoptimalkan nanti dengan beberapa acara)

Anda juga dapat mempertimbangkan kanvas ketiga untuk menyoroti perbedaan antara kedua gambar dan mendapatkan perbedaan visual Anda:

Tampilkan cuplikan kode

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>

Luaskan cuplikan

Mari kita ubah konten untuk melihat beberapa perbedaan:

Tampilkan cuplikan kode

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>

Luaskan cuplikan

Anda dapat membaca lebih lanjut tentang bagaimana kedua plugin yang saya gunakan bekerja dan menemukan opsi yang lebih menarik.

_{Saya memperbaiki ukuran hingga 300x300 untuk memudahkan demonstrasi di dalam cuplikan, tetapi Anda dapat mempertimbangkan tinggi dan lebar yang lebih besar.}

Memperbarui

Berikut adalah contoh yang lebih realistis untuk membandingkan antara dua tata letak yang menghasilkan hasil yang sama. Lebar / tinggi kanvas akan dinamis dan berdasarkan konten. Saya hanya akan menunjukkan kanvas terakhir dengan perbedaan.

Tampilkan cuplikan kode

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>

Luaskan cuplikan

Mari kita gunakan gambar yang berbeda:

Tampilkan cuplikan kode

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>

Luaskan cuplikan

Temani Afif
sumber

5

Berikut adalah ide untuk benar-benar melakukan pengukuran dengan DOM - Saya baru saja mengganti teks yang dimaksud dengan div yang memiliki kelas yang dapat ditanyakan. Kemudian Anda dapat mencetak offset semua node.

Dari apa yang saya ukur indentasi karakter memang sama dengan  .

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>

Luaskan cuplikan

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>

Luaskan cuplikan

MrRobboto
sumber

"Saya baru saja mengganti semua simpul teks dengan divs" Tidak, Anda hanya mengganti bagian yang Anda lihat . Semua  karakter juga merupakan bagian dari TextNodes. Ini penting, karena itu berarti solusi Anda tidak dapat bekerja secara terprogram.

Kaiido

3

Cetak layar dua halaman dan bandingkan pikselnya.
Anda dapat menggunakan webdriver seperti selenium, membuat dua layar dalam file gambar (png, jpg, dll) - selenium memiliki metode untuk melakukan ini- dan menulis perangkat lunak untuk membaca piksel keduanya untuk membandingkan kesamaan.
Webdriver adalah browser yang dapat Anda kendalikan dengan kode. Dan Anda dapat menemukan perangkat lunak yang membandingkan gambar di web.

Anda dapat menemukan lebih banyak info di tautan ini: https://selenium.dev/

Guilherme
sumber

Bagaimana Anda membandingkan piksel? Apakah ada cara otomatis untuk melakukan ini? Juga, bagaimana jika HTML sudah jauh lebih lama dari contoh yang saya berikan, dan tidak muat di layar?

Purplejacket

2

Pertama, kita harus mengambil gambar

Metode Pengambilan 1

Gunakan tombol layar cetak pada keyboard Anda (atau alat tangkapan layar lainnya).

Untuk halaman yang panjang atau lebar agar sesuai dengan layar, ambil beberapa tangkapan layar dari setiap halaman dan satukan dalam editor foto Anda. Anda dapat mengambil tangkapan layar yang tumpang tindih dari sebuah halaman besar, meletakkannya di lapisan yang berbeda, kemudian menggunakan bagian yang tumpang tindih untuk memposisikan potongan tepat sebelum menggabungkan lapisan untuk membuat komposit dari seluruh halaman.

Metode Pengambilan 2

Anda dapat menggunakan ekstensi browser seperti fireshot untuk menangkap seluruh halaman sekaligus.

Kedua kita membandingkan gambar

Metode 1

Buka photoshop atau buka photopea .
Tempel tangkapan layar ke dalam lapisan.
Ulangi untuk halaman kedua, tempelkan ke lapisan yang berbeda.
Toggle layer visibility dan segala perubahan akan terlihat jelas. Atau sesuaikan opacity dari lapisan atas (dan / atau atur berbagai mode campuran) untuk membandingkan.

Metode 2

Gunakan ekstensi peramban seperti pixel-perfect-2 yang memungkinkan overlay gambar semi-transparan dalam peramban Anda. Ini juga merupakan ekstensi yang berguna untuk memeriksa perataan dan penspasian, karena Anda dapat menindih halaman dengan gambar kotak di dalam browser Anda.

Metode 3

Gunakan alat diff gambar. Pencarian google cepat akan muncul terlalu banyak untuk dicantumkan di sini. Ada plugin diff gambar untuk beberapa editor kode, alat baris perintah, skrip Python, dan layanan online seperti diffchecker .

Veneseme Tyras
sumber

2

Anda dapat menempatkan satu di atas yang lain dalam dokumen yang sama dengan posisi: absolut; Dan mungkin memperbesar untuk melihat lebih dekat.

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

Luaskan cuplikan

V.Volkov
sumber

Bagus sekali! Saya mencoba ide ini tetapi karena aspek aneh dari <pre>tag sehubungan dengan <body>margin saya tidak bisa membuat mereka menyelaraskan. Gaya Anda untuk #a, #b { ... }membuatnya bekerja dengan baik.

Purplejacket

2

Hamparkan dua halaman di atas satu sama lain menggunakan iframe. Ini akan memungkinkan Anda untuk melihat perbedaan antara dua halaman.

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>

(Saya curiga ada cara untuk melakukan ini menggunakan Stack Snippets. Jangan ragu untuk mencerahkan saya)

ecc521
sumber

1

Ada beberapa metode kode yang sangat rumit dan pintar di sini, jadi ini adalah yang sederhana,

Ambil satu tangkapan layar, buka di editor gambar yang mendukung transparansi Seperti photoshop,

Lekatkan, lalu ambil tampilan layar dari cara CSS Anda dan tempel di setel gambar yang disisipkan kedua menjadi opacity 50%, dan lihat apakah mereka berbaris.

Barkermn01
sumber

Bagaimana jika halaman terlalu panjang untuk muat di layar?

Purplejacket

Jika Anda memiliki photoshop, atau editor lain yang mendukungnya, atur blending mode pada lapisan paling atas ke perbedaan. Jika gambar identik, Anda akan melihat gambar hitam pekat.

steveax

Iya. HTML adalah satu string. Cukup gunakan cURL atau metode lain untuk mencetak string dan kemudian membandingkannya. Ini adalah beberapa contoh rekayasa di sekitar sini.

Ususipse

@Purplejacket, erm Screenshot Aplikasi secara keseluruhan, Ctrl + Shift + Print Screen,

Barkermn01

1

Seperti yang saya lihat sejauh ini, beberapa orang menyebutkan alat pengujian yang sebenarnya.

Ada banyak alat untuk usecase Anda (seringkali merupakan bagian dari kerangka kerja yang lebih besar):

Untuk beberapa nama diambil dari daftar ini . Mungkin mencari sendiri dan memilih yang sesuai dengan lingkungan Anda.

Jika Anda ingin membangun otomasi berkelanjutan, jangan mengandalkan peretasan. Ini mungkin 'hanya' menjadi QA tetapi dapat secara serius menyimpan ** Anda di rilis mendatang.

Nils K
sumber

Bagaimana saya bisa membuktikan bahwa dua halaman HTML terlihat identik?

Jawaban:

Pertama, kita harus mengambil gambar

Metode Pengambilan 1

Metode Pengambilan 2

Kedua kita membandingkan gambar

Metode 1

Metode 2

Metode 3