Howto extract a complete DOM Tree out of an HTML Page

Question

I have to comparare two web pages and analyse if there is any difference between them. The problem is: i need to include every DOM element (also the ones that are added dynamically through javascript), AND i need to include all applied CSS settings (aka. computed style).

For example: if there is an CSS :hover setting defined, I need to get a different result when my mouse is over the element, than when it is not over the element.

Maybe I could make an javascript iteration through every element of the page, ask for every css setting and for every child DOM element. But i think this would take a long time and would blow the resulting DOM and make it more difficult to compare.

Any ideas?? Thanks!!

Answer 1

For Firefox, XmlSerializer is your friend.

Answer 2

I would check out selenium. There is a command selenium.getHtmlSource(); You can call this after a javascript function occurs. After a quick look I found this

http://davidlaing.com/2008/12/29/selenium-gotcha-seleniumgethtmlsource-returns-processed-html/

and

Need to compare 2 html documents using Java & selenium

I am sure its not the elegant way you were hoping for but I hope this will get you started