Kasus :

Saya memiliki 2 iframe dan keduanya memiliki banyak divs dan kontrol lainnya sehingga iframe sama seperti ukuran sedang situs web HTML. Saya ingin membandingkan keduanya dan mencari tahu perbedaannya.

Saya pikir pilihan yang berbeda di sini:

Solusi 1: Ambil tangkapan layar penuh dari 2 iframe dan bandingkan kedua tangkapan layar menggunakan pustaka bantal Python yang menggambar kisi-kisi di area mismatch dalam tangkapan layar. Tapi di sini masalahnya adalah saya tidak menemukan kode di internet yang dapat mengambil screenshot iframe penuh ( saya punya iframe lama dengan scroll bar ). Saya mencoba hampir semua jawaban pada SO tetapi semuanya bekerja untuk halaman normal tetapi tidak untuk iframe.

Referensi : https://blog.rinatussenov.com/automating-manual-visual-regress-tests-with-python-and-selenium-be66be950196

Solusi 2: Dapatkan entah bagaimana semua kode HTML dari iframe dan bandingkan, tetapi ini tidak akan mudah untuk menganalisis hasil karena akan menemukan beberapa kode HTML yang berbeda atau memiliki ketidakcocokan dalam 2 iframe. Ini akan lebih seperti membandingkan teks dan bukan solusi yang baik saya percaya.

Jadi saya mencari salah satu kode yang dapat mengambil screenshot penuh iframe menggunakan Python atau Javascript ATAU beberapa opsi yang lebih baik yang memungkinkan saya untuk membandingkan 2 iframe dan mencari tahu perbedaannya.

Saya mencoba hampir semua jawaban yang menurut google kami sesuai di bawah ini:

Contoh Iframe diberikan di sini di mana seluruh html berada dalam iframe: https://grapesjs.com/demo.html , Jika beberapa kode dapat mengambil tangkapan layar penuh dari iframe ini maka akan mudah untuk membandingkannya untuk saya.

Seperti yang kami temukan dalam obrolan kami , iframe yang sedang dibahas dihasilkan dalam javascript dan tidak dimuat dari URL.

Ini menghadirkan kesulitan dalam mengotomatisasi layar meraih iframe, namun proses manual mungkin:

Di Firefox klik kanan pada iframe dan pilih "This Frame" di menu popup, lalu pilih "Save Frame As ...".

Setelah bingkai disimpan, beberapa CSS yang diunduh perlu diputar untuk mendapatkan URL latar belakang untuk menunjuk ke tempat yang benar. Setelah melakukannya, buka file html secara lokal dan Anda akan dapat mengambil screenshot menggunakan metode yang saat ini Anda gunakan untuk halaman web normal.

Meraih bagian layar

Anda dapat mengambilnya secara manual atau otomatis. Jika tidak ada banyak iframe untuk dibandingkan, maka melakukannya secara manual adalah sebuah pilihan, Anda cukup melakukan tangkapan layar yang berisi konten dan memotong gambar jika perlu. Kesulitan dari pendekatan ini adalah Anda harus sangat tepat saat melakukan cropping.

Anda dapat melakukannya secara otomatis juga, misalnya memuat bagian DOM ke kanvas dan membuat gambarnya, seperti di sini: Menggunakan HTML5 / Canvas / JavaScript untuk mengambil tangkapan layar di browser

Selain itu, Anda dapat memodifikasi sementara konten Anda untuk memastikan seluruh halaman adalah apa yang Anda minati dan kemudian melakukan tangkapan layar, seperti yang dijelaskan di sini: https://www.cnet.com/how-to/how-to-take- a-tangkapan layar-dari-seluruh-halaman-web-di-chrome /

Membandingkan dua gambar

Anda dapat membandingkan dua gambar dengan menggulung semua pikselnya dan membandingkannya.

Algoritma untuk membandingkan dua gambar

Menampilkan hasilnya

Program Anda harus mengambil dua gambar sebagai input dan membuat gambar baru dengan ukuran yang sama sebagai output. Saya akan menyarankan bahwa gambar target harus menunjukkan piksel dari salah satu gambar untuk membandingkan dan menggambar garis merah di perbatasan setiap perbedaan. Untuk tujuan ini, Anda perlu membagi wilayah perbedaan menjadi persegi panjang. Dengan cara ini Anda bisa melihat di mana perbedaannya dan apa konten yang berbeda.

Anda bisa menggunakan bantal dalam kombinasi dengan pyautogui, mayby ​​pyautogui saja.

Beberapa kode semu:

Selama bilah gulir tidak menyentuh bagian bawah: - ambil tangkapan layar - simpan nama tangkapan layar di daftar - gulir ke bawah, lanjutkan loop ini

Lakukan loop di atas lagi untuk iframe kedua

bandingkan semua tangkapan layar dari dua daftar tangkapan layar yang Anda buat.

Nah, begitulah cara saya melakukannya. Mungkin ada cara yang lebih baik.

Gunakan html2canvas untuk mengambil tangkapan layar

html2canvas(document.getElementById("img_dots")).then(
  function (canvas2) {
    var img_data2 = canvas2.toDataURL('image/png');
    var im_data2 = img_data2.replace('data:image/png;base64,', '');
    $.ajax({
      type: "POST",
      url: "send_image_to_backend",
      data: {
        "base64data": im_data2,
        // "filename": filename.split(".")[0]
        "filename": new_filename + ".png"
      }, success: function () {
         //send second image and compare
      }
    });
  }
);

Ini akan memungkinkan Anda untuk mengirim gambar ke back-end.

Gunakan utas ini untuk mengubah html2canvas untuk mengambil seluruh gambar

Setelah Anda memiliki kedua gambar tersebut, Anda dapat menggunakan openCV untuk menemukan perbedaan antara 2 gambar yang bisa Anda lihat - https://www.pyimagesearch.com/2017/06/19/image-difference-with-opencv-and-python/

Saya memiliki 2 iframe dan keduanya memiliki banyak divs dan kontrol lainnya sehingga iframe sama seperti ukuran sedang situs web HTML. Saya ingin membandingkan keduanya dan mencari tahu perbedaannya.

Apa yang ingin Anda bandingkan? Perbedaan aturan / properti CSS? Perbedaan data / teks? Atau render visual?

Bandingkan render visual

Anda dapat mengekstrak URL iframe dan memuat halaman dengan Selenium untuk mengambil tangkapan layar (lihat contoh) . Anda juga memiliki ekstensi firefox Selenium IDE .