如何比较2个iframe并在视觉上获得差异？

Question

bounty到期在3小时内。该问题的答案有资格获得+ 100声望赏金。Helping Hands正在寻找规范答案。

Case：

我有2个iframe，并且都具有很多div和其他控件，所以两个iframe都像中等大小的HTML网站。我想将两者进行比较并找出差异。

我在这里想到了其他选择：

解决方案1：拍摄2个iframe的完整屏幕快照，并使用Python的枕头库比较两个屏幕快照，该枕头库在屏幕快照的不匹配区域上绘制了网格。但是这里的问题是我在互联网上找不到任何可以获取完整iframe屏幕截图的代码（我的iframe长，并带有滚动条）。我在SO上尝试了几乎所有答案，但是所有答案都适用于正常页面，但不适用于iframe。

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

解决方案2：以某种方式从两个iframe中获取所有HTML代码并进行比较，但这很难分析结果，因为它将发现一些不同的HTML代码或两个iframe中存在不匹配的HTML代码。这将更像是文本比较，而不是我认为的一个好的解决方案。

因此，我正在寻找可以使用Python或Javascript拍摄iframe完整屏幕截图的代码，或者是可以比较2个iframe并找出差异的更好的选择。

我尝试了谷歌按照以下方法找到的几乎所有答案：

这里提供了示例iframe，其中整个html都位于iframe中：https://grapesjs.com/demo.html，如果某些代码可以获取此iframe的完整屏幕截图，那么对我来说就很容易比较。

Answer 1

我们在our chat中发现，所讨论的iframe是用javascript生成的，而不是从URL加载的。

[这在自动抓屏iframe方面存在困难，但是可以手动进行操作：

[在Firefox中，右键单击iframe，然后在弹出菜单中选择“此框架”，然后选择“将框架另存为...”。

一旦保存了框架，将需要整理一些下载的CSS，以使背景URL指向正确的位置。完成此操作后，请在本地打开html文件，您将可以使用当前用于普通网页的方法进行屏幕截图。

Answer 2

抓取屏幕的一部分

您可以手动或自动抓住它。如果没有太多要比较的iframe，则可以选择手动进行操作，您只需制作一个包含内容的屏幕截图，并在必要时裁剪图像。这种方法的困难在于，裁剪时需要非常非常精确。

您也可以自动执行，例如将DOM的一部分加载到画布中并为其制作图片，例如：Using HTML5/Canvas/JavaScript to take in-browser screenshots

此外，您可以临时修改您的内容以确保整个页面都是您感兴趣的内容，然后按如下所示进行屏幕截图：https://www.cnet.com/how-to/how-to-take-a-screenshot-of-a-whole-web-page-in-chrome/

比较两个图像

您可以通过循环两个像素并对其进行比较来比较两个图像。

Algorithm to compare two images

显示结果

您的程序应将两个图像作为输入，并创建一个与输出图像大小相似的新图像。我建议目标图像应显示其中一张图像的像素，以便进行比较并在每个差异的边界处画一条红线。为此，您需要将差异区域划分为多个矩形。这样，您可以看到差异在哪里，差异在哪里。

Answer 3

您可以将枕头与pyautogui结合使用，也可以单独使用pybygui。

一些伪代码：

只要滚动条不触底：-截图-将截图名称保存在列表中-向下滚动，继续此循环

再次为第二个iframe执行上述循环

比较您生成的两个屏幕快照列表中的所有屏幕快照。

嗯，这就是我要做的。不过，可能还有更好的方法。

Answer 4

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

这将使您可以将图像发送到后端。

使用this线程调整html2canvas以获取整个图像

一旦拥有两个图像，就可以使用openCV查找2个图像之间的差异您可以参考此-https://www.pyimagesearch.com/2017/06/19/image-difference-with-opencv-and-python/

Answer 5

我有2个iframe，并且都具有很多div和其他控件，所以两个iframe都像中等大小的HTML网站。我想将两者进行比较并找出差异。

您想比较什么？ CSS规则/属性的差异？数据/文字差异？还是视觉渲染？

---

比较视觉渲染

您可以提取iframe URL并将页面从Selenium加载到take screenshot (see example)。您也可以使用Firefox扩展名Selenium IDE。