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

Question

案例:

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

我在这里想到了不同的选择:

解决方案一:截取 2 个 iframe 的完整屏幕截图，并使用 Python 的枕头库比较两个屏幕截图，该库在屏幕截图的不匹配区域上绘制网格。但这里的问题是我在互联网上没有找到任何可以截取完整 iframe 屏幕截图的代码( 我有一个带有滚动条的长 iframe )。我尝试了几乎所有关于 SO 的答案，但所有答案都适用于普通页面，但不适用于 iframe。

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

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

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

我尝试了谷歌找到的几乎所有答案，如下所示:



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

Answer 1

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

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

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



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