我正在尝试编写一种在浏览器中运行的工具（使用Javascript），并且可以在单个时间点上“捕获”网站状态。它去除脚本标签，将图像和字体内联到数据url，并内联CSS。 CSS部分在某些站点上给我带来麻烦。
我首先假设document.styleSheets拥有页面当前样式的权威列表。似乎仅按顺序选择这些规则并不能使我获得页面上所有有效的样式。
此外，由于交叉源的东西，document.styleSheets中的某些工作表似乎无法访问。
有没有一种方法可以“遍历页面的CSSOM”？理想情况下，我无需编写浏览器扩展就能做到这一点。最终目标是长期运行的e2e测试失败时的可检查快照。感谢您的帮助！
答案 0 :(得分：1)
我不知道我是否正确理解了您的目标，但是有一些很好的工具可以进行CSS单元测试。
https://github.com/jamesshore/quixote
也许满足您的需求，并且可以通过单元测试解决问题。
答案 1 :(得分：0)
我最近又回到这个问题，并找到了解决方案（针对我的特定问题）。
最初，我的假设是document.styleSheets至少包含为页面加载的样式表的完整列表。不过，在开发人员工具的“网络”标签中，我看到正在下载其他样式表（在页面渲染过程中的某个时候）。起初我不知道它们是如何加载的或它们在页面当前上下文中的位置。原来答案是CSS Imports
理解了这一点，然后，我能够获取页面的document.styleSheets当前列表，然后递归“获取”任何CSS导入。除了抓取内联样式外，这还为我提供了给定页面上所有样式的非常准确的图片。这种方法对于跨原始工作表加载仍然不起作用，但这可能是解决“浏览器内部”的难题。