快照网站上的所有 CSS答案

【问题标题】：Snapshot All CSS on a website快照网站上的所有 CSS
【发布时间】：2018-12-29 18:42:04
【问题描述】：

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

我首先假设 document.styleSheets 有一个页面当前样式的权威列表。似乎只是按顺序选择这些规则并不能让我获得页面上的所有活动样式。

此外，由于跨域内容，document.styleSheets 中的某些工作表似乎无法访问。

有没有办法“遍历页面的 CSSOM”？理想情况下，我无需编写浏览器扩展就可以做到这一点。最终目标是在长时间运行的 e2e 测试失败时提供可检查的快照。感谢您的帮助！

【问题讨论】：

【解决方案1】：

我最近回到这个问题并找到了解决方案（针对我的具体问题）。

我最初的假设是 document.styleSheets 至少包含为页面加载的样式表的完整列表。但是，在开发人员工具的网络选项卡中，我看到正在下载其他样式表（在页面渲染过程中的某个时刻）。起初我不知道这些是如何加载的，也不知道它们在当前页面上下文中的位置。原来答案是CSS Imports

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

【讨论】：

【解决方案2】：

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

也许这符合您的需求，您可以通过单元测试解决您的问题。

【讨论】：

感谢您的链接。不过，这并不是我想要的。这个问题的动机是偶尔我会编写一个需要一段时间才能执行的端到端测试（我们已经确定了一个（糟糕的）测试框架）。如果测试由于找不到元素（例如通过 css 选择器）而最终失败，我想使用开发工具在页面中四处挖掘，看看发生了什么。使用这种工具，我不必担心重现确切的测试步骤。