Mogotest: Automated Cross Browser Render Issue Detection
We’ve been rather busy since we launched paid plans for Mogotest just three weeks ago. We’re very pleased to announce our new automated issue detection feature for discovering cross browser rendering inconsistencies. Whereas we’ve always spidered your site and presented you with a set of screenshots for each URL, this feature will compare the rendering output from two browsers and detect any major rendering inconsistencies, saving you the time hassle of having to manually compare screenshots by inspection. The results for your entire site are available in a concise report and the comparison views have been enhanced to highlight the rendering differences.
Some screenshots should help illustrate things:
Figure 1: Overview of browser render results.
Fig. 1 shows the new overview report when a test job is completed. You have a matrix of results indicating your site’s browser compatibility at the render level relative to a reference browser. The reference browser is the one used during primary development and should represent the canonical rendering of the site. Here we’re using Firefox 3.5 on Linux as our reference browser. In this case, when testing the techstars.org site, we see that the /iphone-app/ path is particularly problematic across most browsers and that Internet Explorer 6 has render issues across most paths.
If you click on a cell, you’re taken to a diff view of that path showing differences in that browser relative to the reference browser. Fig. 2 illustrates a rendering issue with Chrome 5 on Windows on the /iphone-app/ path.
Figure 2: Sample error diff between Firefox 3.5 (Linux) and Chrome 5 (Windows).
Below the screenshots you can see the list of render issues detected. When you select an error it highlights the element in both the reference and comparison browser views, adding an overlay with the upper-left-hand and lower-right-hand coordinates to aide in debugging. If you decide that the render issue is acceptable, you can simply choose to ignore the issue and you won’t be bothered with it again.
The improved reporting has cascaded down to our notification emails, too. Whereas previously you would have to click through to our site to see if there were any rendering issues, we now report problems by browser in the notification email (see Fig. 3). Additionally, we indicate the change in errors from the previous test run to help you better determine if it’s something you need to look into immediately or if it’s a problem that can be deferred.
Figure 3: Enhanced email reporting.
The new automated issue detection feature is now available for all paying accounts at no additional cost. If you’d like to see it in action, try running a free page test. And since automated issue detection is something that could always be improved, please report any issues you run into and we’ll do our best to handle them better.