How to compare 2 iframes and get difference visually?

Question

Case :

I have 2 iframes and both have lot of divs and other controls so both iframes are like the medium size of HTML websites. I want to compare both and find out differences.

I thought different options here :

Solution 1: Take a full screenshot of 2 iframes and compare both screenshots using the pillow library of Python which draws the grid on the mismatch area in a screenshot. But here the issue is I did not find any code on the internet which can take full iframe screenshots (I have a long iframe with a scroll bar). I tried almost all answers on SO but all are working for a normal page but not for the iframe.

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

Solution 2: Get somehow all HTML code from both iframe and compare it, but this won't be easy to analyze result because it will find some HTML code that is different or have a mismatch in 2 iframes. This will be more like text compare and not a good solution I believe.

So I am looking for either code which can take a full screenshot of iframe using Python or Javascript OR some better option which allows me to compare 2 iframes and find out differences.

I tried almost all answers which google find our as per below :

Sample Iframe is given here where whole html is within iframe : https://grapesjs.com/demo.html , If some code can take full screenshot of this iframe then it will be easy to compare for me.

Answer 1

As we discovered in our chat, the iframes under discussion are generated in javascript and not loaded from a URL.

This presents a difficulty in automating screen grabbing the iframe, however a manual process is possible:

In Firefox right click on the iframe and select "This Frame" in the popup menu, then select "Save Frame As...".

Once the frame is saved, some of the downloaded CSS will need to be fiddled with to get the background URLs to point to the correct place. Having done that, open the html file locally and you will be able to take a screen shot using the method you currently use for a normal web page.

Answer 2

Grabbing part of the screen

You can either grab it manually or automatically. If there are not many iframes to compare, then doing it manually is an option, you just do a screenshot which contains the content and crop the image if necessary. The difficulty of this approach is that you need to be very very precise while cropping.

You can do it automatically as well, for example loading the part of the DOM into a canvas and making a picture of it, like here: Using HTML5/Canvas/JavaScript to take in-browser screenshots

Also, you can modify temporarily your content to make sure the whole page is what you are interested about and then do a screenshot, as described here: https://www.cnet.com/how-to/how-to-take-a-screenshot-of-a-whole-web-page-in-chrome/

Comparing two images

You can compare two images by looping all their pixels and comparing them.

Algorithm to compare two images

Showing the results

Your program should take two images as input and create a new image of similar size as output. I would suggest that the target image should show the pixels of one of the images to compare and to draw a red line at the border of each differences. For this purpose you will need to divide a region of differences into rectangles. This way you could see where the differences are and what is the content that is different.

Answer 3

You could use pillow in combination with pyautogui, mayby pyautogui alone.

Some pseudo code:

As long as the scrollbar doesnt touch the bottom: - take a screenshot - save screenshot name in list - scroll down, continue this loop

Do the above loop again for the second iframe

compare all the screenshots from the two lists of screenshots you have generated.

Well, that's how I would do it. There are probably better ways though.

Answer 4

Use html2canvas for taking screenshot

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

This will enable you to send images to back-end.

Use this thread to tweak html2canvas to fetch entire image

Once you have both images you can use openCV to find difference between 2 images you can refer to this - https://www.pyimagesearch.com/2017/06/19/image-difference-with-opencv-and-python/

Answer 5

I have 2 iframes and both have lot of divs and other controls so both iframes are like the medium size of HTML websites. I want to compare both and find out differences.

What do you want compare ? CSS rules/properties differences ? Data/text differences ? Or visual render ?

---

Compare visual render

You can extract the iframe URL and load the page with Selenium to take screenshot (see example). Also you have firefox extension Selenium IDE.