In this post, we will share some tactics and tools you can use to do more effective cross-browser testing.

What to test?

Before we jump right into testing it is worth thinking about what we really need to test.

Define your target browsers!

Not every website or web application project needs to be tested in every browser under the sun. By taking a hard look at existing analytics or the target audience of the project it is often possible to reduce the number of browsers you will need to support. A website targeted at web professionals for example does not necessarily need support for Internet Explorer 6 while a website targeted at Windows XP users should definitely work in IE 6.

Moreover, it is not necessary to test the same browser on different operating systems! If a website works in Google Chrome on Windows it will most likely work just as well in Google Chrome on macOS. This does not hold true if you go for pixel perfect because there can be slight differences in things like font rendering.

Test for responsiveness!

While testing for all desktop browsers may be within your reach it is impossible to test for each and every mobile device out there. With iOS, Android, and Windows Phone there are just so many options! What you can do instead is testing for responsiveness (What is that?). To do this efficiently follow these 4 guidelines:

• Define a minimum width and height to work with
• Select only a few (maybe 4) different devices for testing
• Test during development not only on release day
• Use frameworks like bootstrap to get a working basis faster

Test during development

Starting to test in different browsers during the development process is critical. It is much harder to fix all compatibility problems on the day of release rather than one by one during the development of features/sub pages.

To help with this I suggest you use standards-compliant browsers (no, not IE) for testing while you develop a feature or page. After it works in the browser of your choice (and therefore in all standards-compliant browsers) you can then move on to testing in older browsers like Internet Explorer. Of course, this is only possible if you properly defined your targeted browsers at the beginning of each project.

Where to get all the browsers?

To test during development you will need to have access to all the necessary browsers. This is possible in various levels of comfort.

• Browsers that run on your operating system can simply be installed. This would be Chrome, Firefox, and Opera at the least.
• For testing browsers created by Microsoft, you can use virtual machines provided through modern.ie (free of charge). This is especially helpful because you are not able to run all Microsoft browsers even if you are using Windows. These virtual machines include Internet Explorer 8, 9, 10, 11, and Microsoft Edge.
• Testing Safari is much harder if you are not working on macOS as there is no Windows / Linux version of the browser and virtual machines of macOS are not allowed outside of Apple hardware. So for Safari testing, you will have to resort to some kind of tool or online service.

Advantages of BrowseEmAll

With our cross-browser testing tool BrowseEmAll you can streamline the process by utilizing these features:

• Run different versions of Chrome, Firefox, and Opera on your machine without manually preventing the auto-update mechanism of these browsers.
• Browsers are not really installed and therefore don’t clutter your bar/start menu.
• Manages, renews, and updates the Microsoft virtual machines for you.
• Includes windows build of the rendering engine WebKit which makes testing for Safari possible on Windows.

Faster regression testing

Doing regression testing in different browsers is still a mostly manual process where the tester has to run through a predefined test script for every browser to see if any functionality has been broken by recent changes.

With the open source tool browser-sync, this can be done much faster and more efficiently! Browser-sync will:

• Repeat user input done in one browser in all the other open browsers.
• Support all major browsers through JavaScript.
• Run on your local machine and support localhost and staging environments.

Check out their website as they explain it much better than I ever could!

Advantages of BrowseEmAll

Again this is a feature our cross-browser testing tool does support as well. A few key advantages are:

• Manages the configuration, start & stop, and updating of browser-sync for you
• Enables browser-sync in the virtual machines provided by Microsoft so you can synchronize your user input between different machines.
• Handle the proxy settings so browser-sync will work even for websites that can only be reached through a cooperate web proxy.

Validating layout changes

We have all been there, from time to time the client needs some specific layout changes applied to some elements. It could be a different font or a new color for the buttons. In any case, these layout changes have to be tested in all supported browsers to make sure they work correctly. Checking these manually by opening each browser, navigating to the correct page, and checking the layout can be a drawn-out process.

With different screenshot tools, you can speed this up greatly because you only need to check the images and validate the layout changes there. You could use:

• Screenshots provided by BrowserStack (a paid service)
• Screenshots provided by Microsoft (free, limited browser selection, older browsers)
• Screenshots provided by BrowserShots (free, longer wait times, no Internet Explorer)

Advantages of BrowseEmAll

Of course, our tool can do screenshots as well! This is great because:

• It runs on your local machine and therefore can take screenshots of localhost and staging environments.
• It takes screenshots at different screen resolutions and full-page screenshots.
• It generates accurate results because it uses real browsers.
• It gives you a 14-day free trial during which you can take screenshots for free.