Blog We love to talk!

Jan Fri

5 Steps to add cross-browser testing to your development cycle

  •  1-27-2012
Cycle

Now as you surely know testing websites and web applications across all major browsers can be quite a daunting task. Add some mobile devices to the mix and the testing can get a problem quite fast.

Unfortunately more and more clients want websites running in wide range of browsers and devices.

Quite often we develop or design a website in one browser. We do all our testing in this browser and only prior to the release there is a brief cross-browser check, if any.

But what if you could cross-browser test your website after every implemented change or new feature?

What if you could cross-browser test your website hosted on your local machine (or your local network) with deployment to an actual server?

What if this fast local cross-browser test could include all major desktop and mobile browsers?

And what if you could inspect and compare DOM and CSS among many of those browsers?

This is exactly what BrowseEmAll is trying to do. With the installation of BrowseEmAll you get 15 major web browsers (Internet Explorer, Firefox, Chrome, Opera and Safari) and 7 mobile browsers (iPhone, iPad, Android, Android Tablets) available on your local machine.

The video below shows a quick demo of what BrowseEmAll can do to help you cross-browser test your websites faster.

Why use BrowseEmAll?

Because with BrowseEmAll you can include cross-browser testing in your development cycle. Rather than implement in one browser and hope for the best you can easily test every new feature in all target browsers.

How to use BrowseEmAll

I would like to show you a quick (real-world) example of how easy you can integrated BrowseEmAll in your development cycle.

 

Step 1: Select a reference browser

Choose your favorite browser as your reference and develop every new feature in this browser first. For this example we choose Firefox as our reference (mainly because of the excellent add-on firebug). Now simply develop your new feature (or page) until it is ready and works in Firefox. To get this example going I will use the BrowseEmAll homepage as an example. As you can see in the screenshot it works really nice in the current version of Firefox.

Step 2: Test this feature with all browsers you need or want to support

Now lets say we need to support Firefox, Chrome and Internet Explorer 7,8 and 9 with our website. We can now test our new feature (or page) with BrowseEmAll. Just start it up, load the page and iterate through all browsers by selecting them on the top right.

As we see it still works in Firefox

and Chrome

but not in Internet Explorer 7.

We can clearly see that the list on the left is not rendered correctly.

Step 3: Analyze the problems

Now lets have a quick look at what goes on inside Internet Explorer 7. Just select “Inspect and Compare” in BrowseEmAll and inspect the DOM and CSS on our offending element.

We can see how Internet Explorer 7 calculated the layout for our element. Now we can compare this values with our reference browser (Firefox).

Step 4: Compare with your reference browser

We can compare the current calculated layout with our reference browser. We just select Firefox 9 on the top right and get the DOM and CSS calculated with Firefox 9.

Now we can see the difference in width between Firefox (385px) and Internet Explorer (401px) side by side. If that doesn’t help either you can always compare the single CSS values (differences among the browsers are marked as red).

Step 5: Fix the error

With all this information at hand you can easily fix the issue (or try and error) and press refresh in BrowseEmAll to see the results.

Repeat for every feature!

These five steps can easily be repeated for every new feature or page integrated in your website. Please note that all of these steps can be done with your page hosted on your local machine and without any cloud services. All Browsers integrated with BrowseEmAll are full functional.

Want to try for yourself?

You can get a free 30-day trial of BrowseEmAll here.

Photo by Nishanth Jols

No Comments

Leave a Reply

Your email address will not be published.