Validate DOM manipulation when using Selenium

Question

I'm using Selenium to test my application. A nice test would be that after every DOM manipulation I would validate the DOM. Is there a nice way to do this?

Obvious ways are:

• use some builtin Selenium function. Is there one?
• get the HTML of the DOM after the manipulation and use a local validator. However, I can't see how to get the HTML for the current DOM from Selenium.
• I could go through javascript somehow, either by adding a JS file while testing or through Selenium. But I'm not sure how to go about this. Thoughts?

Answer 1

There is no built in process for doing this using Selenium. There is however a Open Source project that is built on WebDriver, WebDriver is becoming Selenium 2, that allows you to do layout testing.

The project is at http://code.google.com/p/fighting-layout-bugs/ and was first shown at GTAC 2009 in Zurich. The code uses W3C and jQuery to check the validity of the DOM. Have a look at the video of the talk and the code that is there.

EDIT:

Thanks to sampablokuper the W3C validation is at code.google.com/p/w3c-markup-validation-filter/

Answer 2

I've been pondering on the same front. Here's my progress so far.

The JavaScript attribute document.documentElement.outerHTML can be accessed in some browsers, e.g. Safari and Chrome, but not in Firefox. This will show you the result of DOM manipulations but won't give you quite the full source code for the page. If you inject some JavaScript that will store the value of document.documentElement.outerHTML after your DOM manipulation has been carried out, you should be able to get Selenium to type that value into the "direct input" textarea of the W3C Validator and submit it. You'd need to prepend and append the value appropriately in order to make it a valid (X)HTML document. I haven't managed to get all these steps working yet from Selenium.

prepending "view-source:" to the URL (as done here) works in some browsers, e.g. Firefox and Chrome, but not in Safari. It won't show you the result of DOM manipulations. I can't seem to get Selenium IDE to open an address beginning with "view-source:" however; it always prepends a forward slash, and I'm not sure how to avoid that.

I'd be interested to know which other approaches people have tried, and whether they've had any success!