网站上所有CSS的快照

Question

我正在尝试编写一个工具，它可以在浏览器中运行(在Javascript中)，并且可以在单个时间点拍摄网站状态的“快照”。它去掉了脚本标签，将图像和字体内联到数据urls，并内联CSS。CSS部分在一些网站上给我带来了麻烦。

一开始，我假设document.styleSheets有一个页面当前样式的权威列表。不过，似乎只是按顺序选择这些规则并不能让我在页面上看到所有的活动样式。

此外，由于跨域的原因，document.styleSheets中的一些工作表似乎无法访问。

是否有一种方法可以“遍历页面的CSSOM”？理想情况下，我可以在不编写浏览器扩展的情况下做到这一点。最终目标是当长期运行的e2e测试失败时的可检查快照。谢谢你的帮忙!

Answer 1

我不知道我是否正确理解了您的目标，但是有一些很好的工具可以用来进行css单元测试。

https://github.com/jamesshore/quixote

也许这符合您的需要，您可以使用单元测试来解决您的问题。

Answer 2

我最近又回到了这个问题上，并找到了解决方案(针对我的特定问题)。

我最初的假设是document.styleSheets至少包含为页面加载的样式表的完整列表。不过，在开发人员工具的network选项卡中，我看到正在下载其他样式表(在页面呈现过程中的某个时刻)。一开始，我不知道它们是如何加载的，也不知道它们在页面的当前上下文中属于哪里。事实证明答案是CSS Imports

理解了这一点，我就能够获取页面的当前document.styleSheets列表，并递归地“获取”任何CSS导入。这样，除了抓取内联样式之外，还可以相当准确地显示给定页面上的所有样式。这种方法仍然不适用于跨源页面加载，但这可能是一个难以解决的“浏览器内”问题。