I have read it from a Google blog that Google guys have used DOM concept to test Google Instant. But I did not understand it completely. Is it possible to use DOM concept anywhere while testing a web application if yes can I see some code for it.
The blog post is about determining whether Instant Pages renders web pages correctly. Or to be more precise, it is about determining whether Instant Pages renders a web page the same way that Chrome would ordinarily render a page.
If Chrome renders the page the same way in both cases, but renders the page the wrong way, their test will not detect the problem. This is a pretty typical strategy for tests in which the requirements are fuzzy and/or there are too many test cases to test exhaustively.
The gist of the method described in the blog post is this:
We automatically scan each page, pixel by pixel, but look at what element is visible at the point on the page, not the color/RGB values. We then do a simple measure of how closely these pixel measurements match.
They can map a pixel to an element because they know the spacial extent of every element, and they know about every element because Chrome has that information in the DOM.
Of course, it is always possible that the two instances of the page will have structural differences. Less of that will happen if you sample those pages at around the same time, e.g. if you run the tests in parallel. Of course, you may still find cases where the page structures differ. The blog post describes how they deal with that:
Where the pages where different we built a web page that showed the differences between the two pages by rendering both images and highlighting the difference. It was quick and easy for the developers to visually verify that the differences were only due to content or other non-structural differences in the rendering. Anytime test automation scales, is repeatable, quantified, and developers can validate the results without us is a good thing!
Software testing always requires coping with change. The job is easier if you can find automatic ways to distinguish between the changed parts and the static parts. The mechanism described in the blog post does that.
Finally, the OP asked whether you could use this technique to test web applications. You could imagine capturing a web applications requirements as pair of DOMs, where each pair consists of a DOM before and after performing an action. I personally think this would be a terrible way to test a web application because you would spend an inordinate amount of time maintaining your test cases.
From what I understand they compare the DOM of different build versions. If you expect the DOM to be same this could be a very fast way to verify you didn't change anything. Also see this page that explains the DOM, since there is some confusion about what it actually is.
You can use dom-compare to compare the DOM's, they also show some examples. It seems there is no easy way to get the actual DOM of a rendered page, I couldn't find one after some searches. I think you will need to hack some browser (good thing they are open-source) to get the run-time DOM. Save it and compare it to a previous save.