Detect browser incompatibilities via algorithm

Question

I was wondering how one would attempt to compare the rendering of a website in various browsers via an algorithm in order to detect incompatibilities (e.g. floats etc.), just like browsera.

Answer 1

You could attempt to parse the and HTML and CSS and look for known problems, like a ‘lint’ tool. But there are so very many browser bugs (esp. IE6 layout bugs) that you'd be unlikely to find everything that way.

The other way would be to load actual instances of each of the target browsers and script them to load the given URL. You could then inject JavaScript to walk their DOMs reading the page-relative positions of each element (using the offset*properties), and flag any elements whose positions/dimensions vary greatly between browsers. You'd also want to catch and record any unhandled JS errors thrown, perhaps through window.onerror.