案件 ：

我有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的完整屏幕截图，那么对我来说就很容易比较。

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

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

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

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

抓取屏幕的一部分

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

您也可以自动执行此操作，例如，将DOM的一部分加载到画布中并为其制作图片，如下所示：使用HTML5 / Canvas / JavaScript来获取浏览器内的屏幕截图

另外，您可以临时修改您的内容以确保整个页面都是您感兴趣的内容，然后按以下说明进行截图：https : //www.cnet.com/how-to/how-to-take-整个网页的Chrome屏幕截图/

比较两个图像

您可以通过循环两个像素的所有像素并进行比较来比较两个图像。

比较两个图像的算法

显示结果

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

您可以将枕头与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/

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

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

比较视觉渲染

您可以提取iframe网址，并加载页面硒，以采取截图（见例子）。您也可以使用firefox扩展Selenium IDE。