javascript - 如何比较 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 代码并进行比较，但这并不容易分析结果，因为它会在 2 个 iframe 中找到一些不同或不匹配的 HTML 代码。这将更像是文本比较，而不是我相信的一个好的解决方案。

因此，我正在寻找可以使用Python 或 Javascript对 iframe 进行完整截图的代码，或者一些更好的选项，它可以让我比较 2 个 iframe 并找出差异。

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

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

标签： javascriptpythonhtmlselenium-webdriveriframe

Answer 1

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

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

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

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