Snapshot All CSS on a website

Question

I am trying to write a tool that runs in the browser (in Javascript) and can take a "snapshot" of the state of a website at a single point in time. It strips out script tags, inlines images and fonts to data urls, and inlines CSS. The CSS part is giving me trouble on some sites though.

I started with the assumption that document.styleSheets had an authoritative list of the current styles for a page. It seems like just picking up these rules in order does not get me all of the active styles on a page though.

Furthermore, some sheets in document.styleSheets seem to be inaccessible because of cross-origin stuff.

Is there a way to "walk the CSSOM" of a page? Ideally I would be able to do this without writing a browser extension. The end goal is an inspectable snapshot for when long-running e2e tests fail. Thanks for your help!

Answer 1

I came back to this problem recently and found the solution (to my specific problem).

I was originally under the assumption that document.styleSheets at least contains the complete list of stylesheets loaded for a page. In the network tab of the developer tools though, I was seeing additional stylesheets being downloaded (at some point in the page render process). I at first did not know how these were loaded or where they belonged in the current context of the page. Turns out the answer was CSS Imports

Understanding this, I was then able to grab the current list of document.styleSheets for a page and recursively "fetch" any CSS imports. This, in addition to scraping inline styles, gave me a pretty accurate picture of all the styles on a given page. This approach still does not work for cross origin sheet loading but that is probably a difficult problem to solve "in-browser"

Answer 2

I don't know if i understood your goal correctly but there are some good tools to make css unit tests.

https://github.com/jamesshore/quixote

perhaps that fit your need and you can solve your problem with unit tests.