Pain with browser compatibility

Pain with browser compatibility

One improvement in Squish for Web 3.2 is the Spy object picker and screenshot comparisons. One issue common to both features is to find out the absolute (to the screen) position and size of a given DOM element. This is necessary to draw a highlighting rectangle around the element (for the object picker) and to take a screenshot of a specific element.

Of course there is no cross-browser way to do this calculation. That’s why in Squish/Web versions prior to 3.1 the object picker used a bad hack to highlight elements (changing its background color) and screenshots could only be taken from the whole browser window.

For Squish for Web 3.2 we finally implemented the necessary function to calculate the DOM element’s coordinates. But it really was a pain. There is no API which you can reliably use. It works differently in all browsers (I wasn’t too surprised by that). But also the used DOM APIs returned behaved differently in Firefox depending on the platform.

So our getElementRect() function really does a lot of checking and magic but finally it works for all browsers. So in Squish 3.2 the object picker will be much more useful (since we also display the name of the object when you hover over it now, as we always did in other Squish editions already) and screenshots can be used now for real.

I’d just wish that the browsers wouldn’t be so different. But I guess many share my pain with this 🙂