Is there any package that returns entire HTML DOM and CSS rules in a dictionary structure?

I'm thinking about making an automated GUI testing tool. I can simulate different screen size and browser with selenium. I can parse the HTML with beautiful soup. I can parse CSS with cssutils. But it would be nice to have a library that can generate entire HTML DOM and CSS rules in a dictionary structure. I don't want to reinvent the wheel. Please suggest me some tool or library that can provide entire DOM and CSS rules by just querying once. I would be very grateful to you if you suggest me some of them. Suppose I have a html like below:

<div class="test">
     <span class="testtext">text</span> 
  </div> 

I'll need a structure similar to this

  htmlDict={'tag':'div','class':'test','id':'','parent':'',
  'child':[{'tag':'span','class':'testtext','parent':'div.test','child':''},]
 }

Say I have the following css.

 .test{
    width:30px;
    color:#345432;  
   }

Now the css dictionary can be as follows:

  cssDict={'test':{'width':'30px','color':'#345432'}}      

I'm looking for a library that will take my all html and css files as input and generate a tree or dictionary like structure. But all I want is one fewest steps to be followed to produce the tree or dictionary. Not sure how firebug generates entire structure. Would be enough if you suggest any way to query firebug and get the resultant tree. Thanks in advance for your help.