Difference between DOM based and image processing based cross-browser testing

In cross browser testing, comparison based on the Document Object Model (DOM) has so far been more common than image based comparison. The following post will give a short explanation on why Browserbite uses the latter.

The DOM is a cross platform convention of how to handle objects in HTML. In a web browser the layout engine is responsible for the conversion of HTML into a DOM structure. This is the stage where discrepancies between browsers and platforms start to show up. Different layout engines support the DOM in varying degrees, possibly resulting in different DOM tree structures across browsers. The differences are most visible between newer and older browsers. Some examples of the types of differences that can be found from the DOM include:

  • DOM Structure

  • DOM Parameters

  • CSS  version support

  • etc.

Let’s now take an actual web page to demonstrate some problems involved when using DOM comparison. We have selected the Google search page  (https://www.google.ee) for our experiment.

Google

Google Search web page

 

We compare the DOM between Google Chrome 30.0 and Internet Explorer 10. These browsers are running on a Windows 7 operating system with a 1920×1080 screen resolution. Both browser windows are maximized. Using the browsers’ own integrated developer tools we selected a div element with id=”lga”. The dimensions of the selected elements are outlined in the following images:

Chrome google

Google Search web page on Google Chrome

IE10 google

Google Search web page on IE10

Visually it seems that both div elements have very similar or identical content. Also, the highlighted borders of the divs have identical size which means they have full width of 1920 pixels.

Based on this it is quite easy to propose a cross-browser testing technique by comparing element parameters like size and absolute position. Unfortunately, when we look at the layout parameters we find that there are some differences. For example, here are the dimensions of the id=”lga” elements in the previously mentioned browsers:

Chrome layout

Layout on Google Chrome

IE10 layout

Layout on IE10

In Google Chrome, the element width is only 1746 pixels, unlike the full 1920px width of Internet Explorer 10. However, these types of differences often do not imply a different rendering result, as can be seen below:

google report page

Browserbite report

This is one of many examples where cross-browser testing using only DOM parameters yields undesired results. The main reason we use image processing instead of DOM comparison is that we want to test the final rendered result. The data we use for testing is in the same form a user would see it. Although DOM comparison can be simpler in many cases there is no guarantee that the final rendering result is correct. This can be made sure only by visual testing.

Posted by

Comments are closed.