Durum :

Ben 2 iframes var ve her iki iframes HTML web sitelerinin orta boyutu gibi her iki div ve diğer kontroller çok var. Her ikisini de karşılaştırmak ve farklılıkları öğrenmek istiyorum.

Burada farklı seçenekler düşündüm:

Çözüm 1: 2 iframın tam ekran görüntüsünü alın ve ızgarayı ekran görüntüsünde uyumsuzluk alanına çizen Python'un yastık kitaplığını kullanarak her iki ekran görüntüsünü karşılaştırın. Ama burada sorun ben internette iframe ekran görüntülerini alabilen herhangi bir kod bulamadım ( kaydırma çubuğuyla uzun bir iframe'im var ). SO'da neredeyse tüm cevapları denedim ama hepsi normal bir sayfa için çalışıyor, ancak iframe için çalışmıyor.

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

Çözüm 2: Her iki iframe'den bir şekilde tüm HTML kodlarını alın ve karşılaştırın, ancak sonucu analiz etmek kolay olmayacaktır, çünkü farklı veya bazı 2 iframe'de uyuşmayan bir HTML kodu bulacaktır. Bu daha çok metin karşılaştırma gibi olacak ve inanıyorum iyi bir çözüm değil.

Bu yüzden ben Python veya Javascript kullanarak iframe tam bir ekran görüntüsü alabilir ya da bana 2 iframe karşılaştırmak ve farkları bulmak için izin veren bazı daha iyi bir seçenek alabilir kod arıyor .

Google'ın aşağıda olduğu gibi bulduğu neredeyse tüm cevapları denedim:

Örnek iframe burada tüm html'nin iframe içinde olduğu yerde verilir: https://grapesjs.com/demo.html , Bazı kodlar bu iframe'in tam ekran görüntüsünü alabilirse, o zaman benim için karşılaştırmak kolay olacaktır.

Biz keşfettik gibi bizim sohbet , tartışılmakta olan iframe'lerin javascript oluşturulur ve bir URL'den yüklenmez.

Bu, iframe'i kapmak için ekranın otomatikleştirilmesinde bir zorluk sunar, ancak manuel bir işlem mümkündür:

Firefox'ta iframe'i sağ tıklayın ve açılır menüden "Bu Çerçeve" yi seçin, ardından "Çerçeveyi Farklı Kaydet ..." seçeneğini seçin.

Çerçeve kaydedildikten sonra, arka plan URL'lerinin doğru yeri göstermesini sağlamak için indirilen CSS'lerin bir kısmının kullanılması gerekir. Bunu yaptıktan sonra, html dosyasını yerel olarak açın ve normal bir web sayfası için şu anda kullandığınız yöntemi kullanarak bir ekran görüntüsü alabilirsiniz.

Ekranın bir kısmını kapma

Elle veya otomatik olarak yakalayabilirsiniz. Karşılaştırılacak fazla iframe yoksa, manuel olarak yapmak bir seçenektir, sadece içeriği içeren bir ekran görüntüsü yaparsınız ve gerekirse görüntüyü kırpırsınız. Bu yaklaşımın zorluğu, kırpma sırasında çok hassas olmanız gerektiğidir.

Bunu otomatik olarak da yapabilirsiniz, örneğin DOM'un bir bölümünü bir tuvale yüklemek ve bunun gibi bir resim yapmak için: Tarayıcı içi ekran görüntüleri almak için HTML5 / Canvas / JavaScript kullanma

Ayrıca, tüm sayfanın ilgilendiğinizden emin olmak için içeriğinizi geçici olarak değiştirebilir ve ardından burada açıklandığı gibi bir ekran görüntüsü yapabilirsiniz: https://www.cnet.com/how-to/how-to-take- a-ekran-of-a-tam web sayfası-içinde-krom /

İki görüntüyü karşılaştırma

Tüm pikselleri döngülerek ve karşılaştırarak iki görüntüyü karşılaştırabilirsiniz.

İki görüntüyü karşılaştırma algoritması

Sonuçları gösterme

Programınız girdi olarak iki resim çekmeli ve çıktı ile benzer boyutta yeni bir resim oluşturmalıdır. Hedef görüntünün, karşılaştırmak ve her farkın sınırında kırmızı bir çizgi çizmek için görüntülerden birinin piksellerini göstermesi gerektiğini öneririm. Bu amaçla, farklılıklar olan bir bölgeyi dikdörtgenlere bölmeniz gerekecektir. Bu şekilde, farklılıkların nerede olduğunu ve farklı içeriklerin ne olduğunu görebilirsiniz.

Tek başına pyautogui, mayby ​​pyautogui ile birlikte yastık kullanabilirsiniz.

Bazı sözde kod:

Kaydırma çubuğu tabana değmediği sürece: - ekran görüntüsü al - ekran görüntüsü adını listeye kaydet - aşağı kaydır, bu döngüye devam et

İkinci iframe için yukarıdaki döngüyü tekrar yapın

oluşturduğunuz iki ekran görüntüsü listesindeki tüm ekran görüntülerini karşılaştırın.

Ben böyle yapardım. Yine de muhtemelen daha iyi yollar var.

Ekran görüntüsü almak için html2canvas kullanma

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
      }
    });
  }
);

Bu, görüntüleri arka uca göndermenizi sağlar.

Görüntünün tamamını getirmek için html2canvas ayarını yapmak için bu iş parçacığını kullanın

Her iki görüntünüze sahip olduktan sonra, 2 görüntü arasındaki farkı bulmak için openCV'yi kullanabilirsiniz - https://www.pyimagesearch.com/2017/06/19/image-difference-with-opencv-and-python/

Ben 2 iframes var ve her iki iframes HTML web sitelerinin orta boyutu gibi her iki div ve diğer kontroller çok var. Her ikisini de karşılaştırmak ve farklılıkları öğrenmek istiyorum.

Neyi karşılaştırmak istiyorsun? CSS kuralları / özellik farklılıkları? Veri / metin farklılıkları? Veya görsel render?

Görsel oluşturmayı karşılaştır

Sen iframe URL'sini ayıklamak ve sayfayı yüklemek için Selenyum için (örneğe bakın) ekran görüntüsü almak . Ayrıca selenium IDE firefox uzantınız var .