กรณี

ฉันมี iframe 2 ตัวและทั้งคู่มี divs และตัวควบคุมอื่น ๆ มากมายดังนั้น iframe ทั้งสองนั้นก็เหมือนเว็บไซต์ HTML ขนาดกลาง ฉันต้องการเปรียบเทียบทั้งสองและค้นหาความแตกต่าง

ฉันคิดว่าตัวเลือกต่าง ๆ ที่นี่:

โซลูชันที่ 1:ถ่ายภาพเต็มหน้าจอ 2 iframes และเปรียบเทียบภาพหน้าจอทั้งสองโดยใช้ห้องสมุดหมอนของ Python ซึ่งวาดตารางบนพื้นที่ไม่ตรงกันในภาพหน้าจอ แต่ที่นี่ปัญหาคือฉันไม่พบรหัสใด ๆ บนอินเทอร์เน็ตที่สามารถจับภาพหน้าจอ iframe เต็มรูปแบบ ( ฉันมี iframe ที่ยาวพร้อมแถบเลื่อน ) ฉันลองคำตอบเกือบทั้งหมดบน SO แต่ทั้งหมดนั้นใช้งานได้ในหน้าปกติ แต่ไม่ใช่สำหรับ iframe

การอ้างอิง : https://blog.rinatussenov.com/automating-manual-visual-regression-tests-with-python-and-selenium-be66be950196

โซลูชันที่ 2: รับโค้ด HTML อย่างใดอย่างหนึ่งจากทั้ง iframe และเปรียบเทียบ แต่จะไม่ง่ายในการวิเคราะห์ผลลัพธ์เพราะจะพบรหัส HTML บางอย่างที่แตกต่างหรือมีความไม่ตรงกันใน 2 iframe นี่จะเป็นเหมือนข้อความเปรียบเทียบและไม่ใช่ทางออกที่ดีที่ฉันเชื่อ

ดังนั้นฉันกำลังมองหารหัสซึ่งสามารถจับภาพหน้าจอเต็มรูปแบบของ iframe โดยใช้Python หรือ Javascriptหรือตัวเลือกที่ดีกว่าซึ่งช่วยให้ฉันเปรียบเทียบ 2 iframe และค้นหาความแตกต่าง

ฉันลองตอบเกือบทั้งหมดซึ่ง google พบของเราตามด้านล่าง:

ตัวอย่าง Iframe มอบให้ที่นี่โดยที่ html ทั้งหมดอยู่ใน iframe: https://grapesjs.com/demo.htmlหากโค้ดบางตัวสามารถจับภาพหน้าจอเต็มของ iframe นี้ได้จะเป็นการง่ายสำหรับการเปรียบเทียบกับฉัน

เมื่อเราค้นพบในการแชทของเรา iframes ภายใต้การสนทนาถูกสร้างขึ้นในจาวาสคริปต์และไม่ได้โหลดจาก URL

สิ่งนี้นำเสนอความยากลำบากในการทำให้หน้าจออัตโนมัติคว้า iframe อย่างไรก็ตามกระบวนการที่ทำด้วยมือเป็นไปได้:

ใน Firefox คลิกขวาที่ iframe และเลือก "This Frame" ในเมนูป๊อปอัพจากนั้นเลือก "Save Frame As ... "

เมื่อบันทึกเฟรมแล้ว CSS ที่ดาวน์โหลดมาบางตัวจะต้องมีการเล่นเพื่อให้ URL พื้นหลังชี้ไปยังตำแหน่งที่ถูกต้อง เมื่อทำเช่นนั้นแล้วให้เปิดไฟล์ html ในเครื่องและคุณจะสามารถถ่ายภาพหน้าจอโดยใช้วิธีที่คุณใช้ในขณะนี้สำหรับหน้าเว็บปกติ

โลภส่วนหนึ่งของหน้าจอ

คุณสามารถคว้ามันด้วยตนเองหรือโดยอัตโนมัติ หากมี iframe ไม่มากที่จะทำการเปรียบเทียบการทำด้วยตนเองเป็นตัวเลือกคุณเพียงแค่ทำภาพหน้าจอที่มีเนื้อหาและครอบตัดรูปภาพหากจำเป็น ความยากของวิธีนี้คือคุณต้องแม่นยำอย่างมากในขณะที่ปลูกพืช

คุณสามารถทำได้โดยอัตโนมัติเช่นการโหลดส่วนของ DOM ลงในผืนผ้าใบและสร้างรูปของมันเช่นที่นี่: การใช้ HTML5 / Canvas / JavaScript เพื่อถ่ายภาพหน้าจอในเบราว์เซอร์

นอกจากนี้คุณสามารถปรับเปลี่ยนเนื้อหาของคุณชั่วคราวเพื่อให้แน่ใจว่าทั้งหน้าเป็นสิ่งที่คุณสนใจแล้วทำภาพหน้าจอตามที่อธิบายไว้ที่นี่: https://www.cnet.com/how-to/how-to-take- ที่มีภาพหน้าจอของ -a-ทั้งหน้าเว็บในโครเมี่ยม /

เปรียบเทียบสองภาพ

คุณสามารถเปรียบเทียบภาพสองภาพโดยวนพิกเซลทั้งหมดของพวกเขาและเปรียบเทียบพวกเขา

อัลกอริทึมเพื่อเปรียบเทียบภาพสองภาพ

แสดงผลลัพธ์

โปรแกรมของคุณควรใช้ภาพสองภาพเป็นอินพุตและสร้างภาพใหม่ที่มีขนาดใกล้เคียงกับเอาต์พุต ฉันขอแนะนำให้ภาพเป้าหมายควรแสดงพิกเซลของภาพใดภาพหนึ่งเพื่อเปรียบเทียบและวาดเส้นสีแดงที่เส้นขอบของความแตกต่างกัน เพื่อจุดประสงค์นี้คุณจะต้องแบ่งพื้นที่ของความแตกต่างออกเป็นรูปสี่เหลี่ยมผืนผ้า วิธีนี้คุณสามารถดูความแตกต่างได้และเนื้อหาที่แตกต่างคืออะไร

คุณสามารถใช้หมอนร่วมกับ pyautogui, mayby ​​pyautogui เพียงอย่างเดียว

บางรหัสหลอก:

ตราบใดที่แถบเลื่อนไม่แตะที่ด้านล่าง: - จับภาพหน้าจอ - บันทึกชื่อภาพหน้าจอในรายการ - เลื่อนลงไปเรื่อย ๆ

ทำลูปด้านบนอีกครั้งสำหรับ iframe ที่สอง

เปรียบเทียบภาพหน้าจอทั้งหมดจากภาพหน้าจอสองรายการที่คุณสร้างขึ้น

นั่นเป็นวิธีที่ฉันจะทำ อาจมีวิธีที่ดีกว่า

ใช้ html2canvas สำหรับถ่ายภาพหน้าจอ

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

วิธีนี้จะช่วยให้คุณสามารถส่งภาพไปยังด้านหลัง

ใช้กระทู้นี้เพื่อปรับแต่ง html2canvas เพื่อดึงภาพทั้งหมด

เมื่อคุณมีภาพทั้งสองแล้วคุณสามารถใช้ openCV เพื่อค้นหาความแตกต่างระหว่าง 2 ภาพคุณสามารถอ้างถึงสิ่งนี้ - https://www.pyimagesearch.com/2017/06/19/image-difference-with-opencv-and-python/

ฉันมี iframe 2 ตัวและทั้งคู่มี divs และตัวควบคุมอื่น ๆ มากมายดังนั้น iframe ทั้งสองนั้นก็เหมือนเว็บไซต์ HTML ขนาดกลาง ฉันต้องการเปรียบเทียบทั้งสองและค้นหาความแตกต่าง

คุณต้องการเปรียบเทียบอะไร ความแตกต่างของกฎ / คุณสมบัติ CSS? ความแตกต่างของข้อมูล / ข้อความ? หรือแสดงภาพ?

เปรียบเทียบการแสดงผลภาพ

คุณสามารถแยก URL iframe และโหลดหน้าเว็บที่มีซีลีเนียมจะใช้หน้าจอ (ดูตัวอย่าง) นอกจากนี้คุณมีส่วนขยายของ Firefox ซีลีเนียม IDE