Cross-Browser Testing: Best Practices and Useful Resources

DZone 's Guide to

Cross-Browser Testing: Best Practices and Useful Resources

Everything you need to know!

· Performance Zone ·
Free Resource

Image title

Wine testing...browser testing...what's the difference?

In the earlier days of web development, executing cross-browser testing used to be very easy. There used to be only a few limited browsers, each browser had limited versions in usage, and most importantly, there were not so many different mobile screen sizes to worry about. But time has turned upside-down, now there are multiple devices to check on, there are many different browsers available on the market that are used by a considerable number of internet goers, and there are thousands of different screen sizes to test on.

You may also like: Top Tips for Better Cross-Browser Testing

Moreover, most devices run on different technologies, making it hard to execute cross-browser testing across all the platforms. Thus, to perform cross-browser testing, you not only need proper planning but a reliable and valuable approach as well.

Today, we will discuss some of the best practices and useful resources that can be used to make your cross-browser testing process easier. In the end, we will also talk about a cross-browser testing tool that can help you minimize the testing time while offering higher test coverage.

Best Practices for Cross-Browser Testing

When it comes to cross-browser testing, it is always great to have access to some handful of approaches and best practices so that you don’t suffer much while testing your site. So, have a look at the practices recommended by experts.

1. Select Your Elements Wisely

There are multiple frontend frameworks available to choose from, like Bootstrap, Foundation, Angular, Vue, React, etc. Most of these frameworks are cross-browser compatible out-of-the-box and often developers leverage these in-built features to But, it’s not about the framework that you use; it is about the components that you will use for your projects. So, always keep an eye out while choosing your components and make sure they are compatible throughout the process. For instance, foundation components help you prototype or modify every aspect of your application quickly as well as in the most effective way. Thus, having suitable components for the cross-browser testing process is always helpful.

Components are used in most of the development projects, so do some experimenting and note down the most useful and reliable ones. You can use foundation components that allow you to implement another JavaScript component.

2. Choose Your Libraries and Frameworks Carefully

Every testing performed on a web app requires libraries and frameworks. Thus, before starting the development, it is crucial to keep in mind that the latest CSS frameworks can help you get the most vivid and dynamic user experience, but they don't need to be compatible with every browser because every browser has a specific rendering engine to display the web content.

Sometimes using the latest CSS in your web app design might result in the user not having a pleasant experience with your web design. So, before using any latest CSS or JS libraries or frameworks, read the guidelines of browsers to verify whether they support those libraries, frameworks or not.

3. Use Vendor Prefix

Most of the latest front-end frameworks are already included with global vendor prefixes in their style sheets. But it is still wise to know the best methods for implementing vendor prefixes. For instance, many new features of CSS3 works only with Chrome browser but fails to render with other browsers. Though that’s not a big issue, it is always great to check the overall browser support so that you can use those vendor prefixes in your stylesheet without going back and doing it later.

Using vendor-specific prefixes with the classes will do most of the work, and it can be achieved both manually or using a tool that allows you to add the necessary vendor prefixes needed for flex and other properties in the CSS stylesheet.

4. Optimize the Internet Explorer Browser

IE might not be the talk of the show anymore, it is still used by multiple users as they believe in Microsoft. But, the only drawback of Internet Explorer is that it doesn’t support advanced CSS styles and framework, so if you have a beautiful site that provides ultimate user experience, opening it in IE can reap its soul apart. Moreover, for IE 8 and the lower version of Internet Explorer, it’s no less than hell for the development and testing of a web app. So, write a separate stylesheet for the Internet Explorer browser and add a hack in your doctype.

5. Use Proper Javascript Library and Task Runners

JavaScript plays a vital role in web app development, thus it’s crucial to use the right JavaScript resources that fulfill your site requirements and offers compatible browser support. In our opinion, we believe you should opt for React JS when it comes to choosing a JavaScript library. React JS allows you to create user interfaces with reusable components. Besides, it even helps you in cutting down component count, as it declutters code, provides quick navigation within the tree and requires only minor tweaking of styles for each component.

When it comes to task runners, there are multiple options to choose from. But Grunt and Gulp always stand out from others because they can be automated according to your requirements. They are also helpful in enhancing the overall performance of the application by providing compilation, linting, minification, and other tasks that will make your code better after compilation. More than that, Grunt and Gulp notify users when there is an issue with the style sheets, which helps in minimizing the cross-browser issues as well.

6. Verify the Media Content on Your Site

You might have come across sites that use high definition media content on their sites like GIF, video, and audio to improve the overall appearance of the site. But such websites are not compatible with every browser because certain media content elements are not supported in every browser. And it often happens with items that ask you to install Flash Player. Thus, before using any media content on your site, check the browser guidelines to verify the supported media elements that you want to implement on your website.

7. Find Browser-OS Configuration

After finalizing your site, it is time to verify the browsers and operating systems on which you want to test your web application. For every browser, there are multiple versions, and some browsers even update continuously at least once a month. Thus, it is crucial to verify which browser, browser versions, and OS you want to test for cross-browser compatibility of your site. Well, most companies prefer to test the latest versions of browsers, but if you are also focused on users that might be using old versions of Internet Explorer, then considering every browser is crucial. You can take the help of tools like Google Analytics or Splunk to track user data. After analyzing the data, make a list of browsers and OS that users can use to access your website.

8. Move to Automated Testing

If you are willing to test a wide variety of browsers, browser versions, and devices, then manual testing is not the ideal approach. Instead, you should move to automated testing because it not only provides a more comprehensive test coverage but offers other advantages as well. With automated cross-browser testing, you can test your web app across different browsers and OS combinations. There are multiple automated cross-browser testing tools available in the market. Below, we have highlighted the best cross-browser testing tools.

Useful Resources for Cross-Browser Testing

Cross-browser testing tools can make the overall testing process easier and smooth for you. Thus, knowing about or having access to some of the best automated cross-browser testing tools is advisable.

1. LambdaTest

LambdaTest is one of the most popular cloud-based cross-browser testing platforms that enable users to test their web apps or sites across a combination of more than 2000 browsers and operating systems. What’s more unique about LambdaTest is that it not only provides infrastructure for manual live interactive testing, it also provides a cloud-based selenium grid that can also be used for automated cross-browser testing for web applications.

With LambdaTest, you can perform real-time cross-browser testing, live interactive testing, or visual testing of your web app. Apart from that, it provides a Chrome extension and a WordPress plugin to test your site directly from the browser. And all of that without spending anything on developing, maintaining, upgrading, and scaling of inhouse infrastructure. You don’t have to maintain anything on developing expensive in-house device labs and building up DevOps teams just for maintenance of test infrastructure.

2. Creating Machines on Cloud

Building an in-house infrastructure is an expensive option. Every year a new mac os comes out and every other month a new mobile device. Each one costing in access of $700 apiece. But why spend 1000s of dollars when you can just rent a machine — on the cloud.

Cloud platforms like LambdaTest drastically reduce that cost for you, however, cases may arise where you need to test on machines over which you have complete flexibility to customize. In cases like these, you can take help from cloud-based infrastructure providers like Amazon Web Services, Microsoft Azure, Rackspace, Digital Ocean, etc.

The best part about these cloud platforms is that you can pay for how much you use. If for example, you have to test for like 5-6 hours a month, you can rent an EC2 instance for just 6 hours instead of the whole month. Also since the machine is for your use only, you can play around with it as you wish and customize it as per your requirement.

This flexibility; however, can also be considered as a disadvantage of this approach. These cloud machines are usually bare metal and have barebones Linux or Windows operating systems. You would still have to install complete desired environments on the platform and have to work on upgrading, scaling, and maintenance of the machines as required.

Another disadvantage would be pricing for long term usage. Even though it's a pay as you go, if you have for example 12 hours per day usage, the price can become a very major factor. So for example, you want fast testing for which you have acquired a decent t3a.xlarge (4Core CPU, 8GB Memory, EBS HDD) machine. This machine costs $0.224 per Hour. Lower-grade machines will decrease the test execution times there but it’s up to you based on requirements.

So now if you wish to perform 6 hours of testing for 30 days a month, on 5 different environments, the cost would come out to 0.224*6*30*5 = $201.6. If you want to scale it up for let’s say 100 machines to cut down overall test execution time, the price would be in the range of $4032. And if we count the time and man-hours consumed in setting up and maintenance of this infrastructure, the cost becomes much more significant.

3. Installing Virtual OS on Local Machine

The biggest challenge in cross-browser testing is the incompatibility of a few browsers with native operating systems itself. If you are a Mac OS user, you cannot test on Internet Explorer or Edge browsers because they are not compatible, or even installable on Mac machines. Similarly, you cannot test on Safari browsers if you are a Windows user. So apart from going to cloud-based cross-browser testing platforms, or cloud-based infrastructure providers, the next best approach is to install Virtual Machines on your local systems and then test on these VMs.

Installing Other OS on Windows Machines

If you are a Windows user, then Linux (or Ubuntu) OS can be easily installed as an additional OS in your same machine so that would not be a major issue. The problem is with Mac OS.

Before we go, a major warning. You cannot legally install macOS on any machine other than the Apple machine. It’s there in all of their terms and services. It could be done but if you are planning a long term business venture, we strongly advise against it.

To install Mac OS on a no Apple machine, you would need tools like Clover(https://github.com/Dids/clover-builder/releases) or Unibeast (https://www.tonymacx86.com/threads/unibeast-install-macos-mojave-on-any-supported-intel-based-pc.259381/) and create something called Hackintosh system. Go through the steps highlighted in this post-https://www.tonymacx86.com/threads/unibeast-install-macos-mojave-on-any-supported-intel-based-pc.259381/.

Another challenge comes related to multiple versions of Windows. For example, if you need to install Windows 8.1 on Windows 10 Machine. For such a case you can take help from Hyper-V. It’s a Windows Hypervisor (virtual machine monitor), i.e. a tool that will help you create and run virtual machines on windows. Here’s the post to get you started with Hyper - V

Installing Other OS on Mac OS

Running Windows on Mac machines is easier than the other way around. You would just need a tool called Boot Camp and use the tool to install and manage Windows instance on your Apple machine. You can find Boot Camp Assistant in the utility folder of your main Applications folder, and use this tool for creating a Windows Partition in Mac device. Check out this post by Apple support to know more about it https://support.apple.com/en-us/HT201468


Cross-browser testing is crucial, and any developer and testers cannot avoid it. It might be a headache for the testing team, but most of the site’s traffic depends on browser compatibility. Thus, considering best practices and resources is vital before performing cross-browser testing. In this article, we covered the best practices and useful resources that can help you ease the process of cross-browser testing.

Further Reading

Automated Cross-Browser Testing

34 Ways to Save Time on Manual Cross-Browser Testing, Part 1: Methods 1-10

cross browser testing ,cross browser testing tool ,browser compatibility ,browser testing ,testing checklist ,selenium automation testing ,web app testing ,website testing ,performance

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}