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

Posted 2023-02-23

【中文标题】如何比较 2 个 iframe 并在视觉上获得差异？

【英文标题】：How to compare 2 iframes and get difference visually?

【发布时间】：2020-05-22 05:50:11

【问题描述】：

案例：

我有 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 代码2个iframe。我认为这更像是文本比较，而不是一个好的解决方案。

所以我正在寻找可以使用 Python 或 Javascript 截取 iframe 完整屏幕截图的代码，或者寻找一些更好的选项，让我可以比较 2 个 iframe 并找出差异。

我尝试了谷歌找到的几乎所有答案：

此处给出了示例 iframe，其中整个 html 在 iframe 内：https://grapesjs.com/demo.html，如果某些代码可以截取此 iframe 的完整屏幕截图，那么对我来说很容易比较。

【问题讨论】：

下面所有的iframe都是普通的html页面。您是否特别想看看它们作为 iframe 是什么样的？

是的，都在html页面下。我的目标是确保两个 iframe 在视觉上看起来相同。

那么打开 iframe 显示为***页面的页面并截屏这些页面是否可以接受？

我认为是这样，但这是怎么可能的，因为我尝试的所有屏幕截图代码都能够对任何页面进行全屏截图，但是对于 iframe，它只截取不滚动可见的部分。

您拥有 iframe 网址，因此您可以将它们作为***页面打开。

【参考方案1】：

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

你想比较什么？ CSS 规则/属性差异 ?数据/文本差异 ?还是视觉渲染？

---

比较视觉渲染

您可以提取 iframe URL 并将带有Selenium 的页面加载到take screenshot (see example)。你也有firefox扩展Selenium IDE。

【讨论】：

感谢您的回答。实际上我的 iframe 没有 url 或 src。截屏只截取视口截屏，但我需要 iframe 的完整截屏。

【参考方案2】：

使用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 找出两张图片之间的差异 你可以参考这个-https://www.pyimagesearch.com/2017/06/19/image-difference-with-opencv-and-python/

【参考方案3】：

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

这给自动抓取 iframe 的屏幕带来了困难，但是手动过程是可能的：

在 Firefox 中右键单击 iframe 并在弹出菜单中选择“This Frame”，然后选择“Save Frame As...”。

保存框架后，需要修改一些下载的 CSS 以使背景 URL 指向正确的位置。完成后，在本地打开 html 文件，您将能够使用当前用于普通网页的方法截屏。

【参考方案4】：

抓取屏幕的一部分

您可以手动或自动抓取它。如果要比较的 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

显示结果

您的程序应该将两个图像作为输入，并创建一个大小相似的新图像作为输出。我建议目标图像应显示其中一个图像的像素以进行比较，并在每个差异的边界处绘制一条红线。为此，您需要将差异区域划分为矩形。通过这种方式，您可以看到不同之处以及不同的内容。

【讨论】：

感谢您的回答。有没有机会我可以将 Html2Canvas 与 python 一起使用，因为我需要 python 或 javascript 中的东西可以截取 iframe 的完整屏幕截图。

@HelpingHands HTML2Canvas 是一个 Javascript 工具，因此您可以通过 Javascript 使用它（参见：html2canvas.hertzen.com）。在搜索 HTML2Canvas 的 Python 用法时，我找到了一个 Python 代理。我没试过，但我希望它有帮助。这是：github.com/brcontainer/html2canvas-python-proxy

【参考方案5】：

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

一些伪代码：

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

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

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

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

【讨论】：

问题是我只有一个 iframe，但它在垂直方向上很长，没有工具能够截取完整的屏幕截图。

您不需要一张长截图。几个屏幕截图也会做得很好。只要您始终向下滚动相同的数量。所以基本上，你让你的 iframe 获得焦点。然后按向下箭头 5 次（或任何您需要的）并截取屏幕截图。屏幕截图中是否有一些双重内容并不重要。您对另一个 iframe 执行相同操作。