3

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!

René Höhle
  • 26,716
  • 22
  • 73
  • 82
ichdenkealso
  • 83
  • 6

2 Answers2

1

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.

René Höhle
  • 26,716
  • 22
  • 73
  • 82
  • Thanks for the link. It's not quite what I'm looking for though. The motivation for this question is that occasionally I will write an end-to-end test that takes a while to execute (we've already settled on a (bad) testing framework). If the test fails at the end because it can't find an element (by css selector for instance), I'd like to dig around in the page with the dev tools and see what happened. With this kind of tool, I shouldn't need to worry as much about reproducing the exact test steps. – ichdenkealso Jul 21 '18 at 20:27
0

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"

ichdenkealso
  • 83
  • 6