One of the most painful aspects of website testing is checking a site you’ve produced across all the major web browsers. Many of the issues that you encounter when testing browser compatibility are small layout issues where graphics, buttons, navigation elements, text and images are placed out of line or in incorrect places.
Sometimes however the issues can be much more important – whole pages can be rendered incorrectly by certain browsers and, if not checked, it may mean that users visiting your website with that browser cannot use the site.
Most designers, developers and project managers manually check the website in each of the main web browsers, which is time consuming and requires detailed and concentrated testing of each page or page type within the website.
However, all is not lost, a new web app aims to make the process much easier. Its called Mogotest and takes the strain out of browser testing by comparing how your website displays in each browser and giving you the results.
To see Mogotest in action you can run a free page test from their home page, which tests a single page and shows you the results once completed so you get feedback straightaway. This is a great introduction to the Mogotest service and gives you instant access to many of the features of a paid plan. Mogotest includes up to 3 page tests for free.
Starts at $15 per month for a personal plan, which gives you a single user account, up to 50 tests each month across a maximum of 3 sites. You don’t get certain features such as being able to test authenticated pages or being able to schedule tests. These features come along in the freelancer plan, which is $45 per month. Pricing goes up much more steeply after that with a Team plan costing $125 per month for 10 sites and the Agency plan is $595 for 50 sites.
To run a test you follow a 4 step process:
Configure Site – just input your website address and tick if you want to see the advanced options.
Create Test Group – here is where you add paths for each URL that you want to test specifically. If you have lots of URLs to test then this could be a bit more time consuming but nothing like how long it would take to test each URL manually.
It is also possible to schedule tests to run every day, every 2 days, etc., which is a great feature for sites that are undergoing regular updates. Within this step you can also set whether the test should wait for any Ajax to load in before starting.
For my test I added 3 URLs, all for the WebDepend website including the home page, one of the service pages within the Website Testing section and the Blog main page.
Once you’re happy you save your test group and proceed to the next step.
Configure Authentication – you can set whether your site requires authentication, useful for being able to test password protected sites that are still in development or for testing pages within a members section.
Prepare Test Run – final step shows all the items you have configured and allows you to go back to edit settings before clicking on Run Test!
Whilst the test is running you can view a Test In Progress page that shows how your test is coming along and the estimated time to complete (900 seconds) although my test took far less than that.
Once the test has run your screen shows 3 tabs:
Browser Compatibility Report – from the screenshot you can see that the WebDepend site’s blog page and home page did not pass for Firefox 3.5 on Linux (not a combination I regularly test for it must be said) but that all other tests passed successfully.
Clicking on the items that didn’t pass will display the browser rendering results where it will show the browser you have clicked on side by side with your reference browsers (mine is Firefox 3.5 on Windows) so you can easily pick out the differences.
Any issues will be displayed underneath the side by side view, in this case 3 elements for my Blog main page were incorrectly positioned in Firefox 3.5 on Linux when compared with Firefox 3.5 on Windows.
As it turned out, the issues that Mogotest had found were very minor problems but you can see how useful it is being able to find these problems by running a test rather than manually trying to pick out browser related problems.
Site Problems – shows any HTML or CSS validation errors, broken links, server errors, empty content warnings or redirects. Mogotest found 5 validation errors and warnings that were not picked up when I manually ran each page through W3C’s validator a couple of weeks ago.
Validation Reports – displays a list of the URLs you tested and shows which of those have problems. Clicking on a problem pages takes you to a view of the HTML for that page with row numbers against each line of code (very helpful) plus a list of the issues found underneath. Rolling your mouse over an offending line with also display the issues, which is very helpful when investigating the problems that need attention.
Once you have fixed any issues found, you can go back into Mogotest and click Retest in order to carry out the same tests again, which will hopefully now pass for each browser.
Overall, Mogotest is a really useful service. By automating a lot of the browser checking process it really does make life easier and will pick up lots of layout problems between browsers that could go unnoticed or take time to find.
The browser support could be extended, as Mogotest is running tests in Chrome 5 whereas we’re up to Chrome 9 now and there is currently no support for Mac browsers at all.
If you run tests regularly, across several sites, you could find yourself running out of available tests pretty quickly and needing to upgrade. Also, there doesn’t appear to be anywhere that I can see how many tests I’ve got left or if I could purchase a block of tests without having to upgrade to the next plan up.
When running tests, I was lucky in that there were a small number of issues found. I wonder for projects in early stages of development what happens when there are large amounts of problems to wade through and how easy it is to see the most important ones that need fixing first.
A good addition to any website tester’s, web developer’s or project manager’s list of testing tools to make life easier, Mogotest does do what it sets out to and can only get better from here.