Bagaimana saya bisa membuktikan bahwa dua halaman HTML terlihat identik?

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>

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.

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

Jawaban:

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:

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:

Mari kita ubah konten untuk melihat beberapa perbedaan:

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.

Mari kita gunakan gambar yang berbeda:

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 &nbsp;.

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>

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>

MrRobboto
sumber
"Saya baru saja mengganti semua simpul teks dengan divs" Tidak, Anda hanya mengganti bagian yang Anda lihat . Semua &nbsp;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

  1. Buka photoshop atau buka photopea .

  2. Tempel tangkapan layar ke dalam lapisan.

  3. Ulangi untuk halaman kedua, tempelkan ke lapisan yang berbeda.

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

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