css将html快照,快照网站上的所有CSS

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

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

此外，由于跨源的东西，document.styleSheets中的某些工作表似乎无法访问。

有没有办法“走CSST”页面？理想情况下，我可以在不编写浏览器扩展的情况下执行此操作。最终目标是在长时间运行的e2e测试失败时可检查的快照。谢谢你的帮助！

答案

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

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

另一答案

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

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

理解这一点后，我就可以获取当前的document.styleSheets列表，并递归“获取”任何CSS导入。除了拼接内联样式之外，这还为我提供了给定页面上所有样式的精确图片。这种方法仍不适用于交叉原始纸张加载，但这可能是解决“浏览器内”的难题