Cross-browser testing is a method of non-functional testing making sure your website or application is functional across multiple browsers. This is necessary because each web browser follows a set of standards (Open Web Standards) but all interpret them separately, rendering HTML, CSS and JavaScript differently.

It is important to test across browser’s as there are now many ways to access a website, through the many different browsers preferred by each user, the different devices with ranging screen widths and assistive tools like screen readers. Understanding this will ensure you give each user the same experience of your website.

To give you an example of why cross-browser testing is required, there are many things that may work with some browsers and not others, with newer versions against older versions. For example;

• Some HTML tags aren’t recognised by some browsers (or don’t support HTML5), similar to un-supported CSS3 features,
• Technologies not supported on devices (iPhone cannot utilise Flash),
• Image orientation is different across browsers.

Those are a few examples of what developers and testers need to watch out for when creating a website or application and why it is necessary to test it.

Widely Used Browsers

The use of a browser can depend on a few things, mainly region and type of device. Every user has a preference but often people will use the default that comes as standard on certain devices. Below are some common combinations of browsers and devices;

• Google Chrome on Windows and Mac,
• Firefox on Windows, Mac and Linux,
• Chrome on Android and iOS,
• Safari on iOS (default).

However, they may be the most common uses but browsers like Microsoft Edge still exist and are still utilised by a small percentage of the population. So, developers shouldn’t exclude them from the features of an application as essentially, they’re still customers.

How is Cross-Browser Testing Performed?

Once its understood that different browsers interpret application code in different ways, you can start to test on the common browsers. First, it’s useful to run all the design and test cases on the browser you are using in development – providing you with a baseline of what it should look like.

Secondly, creating a test plan and selecting browsers should be your next step. Choosing your browsers should be based on the research you’ve done on the most common browsers of your audience by site traffic analysis – this specification will outline what you’ll test and why.

When it comes to the actual testing phase, there are two methods; Manual and Automated. Below is an explanation and the benefits of each;

• Manual testing is self-explanatory, it consists of the tester going through each test case and checking its result against it’s expected result. Its effective because the tester is immersing themselves with the same user experience any user would have. However, as with anything done by human, there is always scope for human error and could subsequently miss important things.
• Automated testing is the use of tools, scripts and any software that you give pre-defined actions and the testing is performed automatically across browsers. A tool used commonly is Selenium, but there are many different applications out there. Automated testing is a lot faster than manual as you can run tests in parallel rather than sequentially, however an element of manual testing is still required when using automated tools.

When is it performed?

Cross-browser testing is dependant on your workflow, a developer may constantly test their functionality every time they create an element or style – so, during development. It is also best practise to test pre-release, in fact it’s demanded because it is so important. You don’t want to push live a website or application and then start testing its functionality as users can be experiencing the errors that exist before you find them. Developers often test the application themselves but there also exists a team of QA (quality assurance specialists) who work to make sure that the developed application is functional across all necessary browsers. They work closely with developers and marketing teams to ensure a ‘quality’ experience.

Summary

So, we’ve explained what cross-browser testing is, it’s importance and how it is typically performed. Obviously, when developing an application there is often an element of Agile development, a method of progression that is iterative dependant on the requirements throughout the development lifecycle. This means testing will have to be adaptive to deliver a consistent end-user experience and not drag down your business’ reputation.