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

Question

案件 ：

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

Answer 1

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

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

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

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

Answer 2

抓取屏幕的一部分

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

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

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

比较两个图像

您可以通过循环所有像素并比较它们来比较两个图像。

比较两个图像的算法

显示结果

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