Samsung just hosted their annual “August” event and released multiple revolutionary devices for the masses. These devices were in the headlines as they are flagship phones. A lot of the other devices also keep getting made but rarely make headlines. But this is the story of just one mobile phone manufacturer.
Apart from Samsung, there are 1300 other mobile manufacturers and they have their own set of devices. Now, there are around 1.8 billion websites in the world, but how are devices and websites connected?
The first connection is related to the number of devices you can expect your website to be rendered on. The second connection is all about how many options a user has when your website does not perform as expected on the given device.
If we combine both of them, we settle on one bigger connection – a website has to be cross-browser tested on many devices at once to make sure it works as expected. Don’t worry if you are new to these terms and are just beginning your web development journey. We will discuss cross-browser testing along with a demonstration with an online tool called Browserling.
Cross-browser testing and its importance
So, the first thing we need to learn to digest the above-given stats is what is meant by cross-browser testing? Cross-browser testing is a term that is picking up these days in the web development industry because of the large number of devices, operating systems, browsers, and everything in between. In simple terms, cross-browser testing means testing the web application on all the target combinations of platforms so that each user can view your website as it is meant to be.
For example, let’s say you build a website by constantly rendering it on your personal system which has Chrome 90. When this website goes live, a user opens your website on Opera 75 and realizes the UI is all messed up! What would he do next? Remember there are 1.8 billion websites and Google search is just a click away?
This is cross-browser testing and its value in today’s market. You just cannot take the risk and have to make sure your website is cross-browser proof before launching it to the public. Also, remember that cross-browser issues are not always UI-based. There can be numerous cross-browser compatibility issues that need to be taken care of. But more on that any other day.
Okay, so now you know that this thing is important. But, how do you do it and breathe a huge sigh of relief?
How to perform cross-browser testing?
If you have decided that you are confident in your website and it will magically fit itself on every screen size, and work in every OS and browser in this world, this post has ended for you. For the other part of the readers, performing cross-browser testing will ask you to go down one of the two roads.
First, roll up your sleeves and purchase every screen size system, mobile and test the website on them. Step 2 – repeat the same process in all the systems with a different version of the software. Step 3 – Ah! You forgot operating systems have versions too. I probably don’t need to elaborate on step 4.
The second road is smoother and even if that road is taken by fellow travelers, this is the correct and recommended path. Consider it this way. If you want to eat a cake, you can either make it or buy it from an expert who has a variety of options for you. Since it is a special occasion, you probably won’t try your luck and wear the chef’s hat.
Similarly, in cross-browser testing, there are experts who have a variety of browsers, operating systems, devices, etc. ready for you. You just need to pick your favorite cake and pay the price. It is easier, faster, efficient, cost-effective and a future-proof plan.
The following screenshot reveals the convenience in itself with multiple sections. These will be discussed in the next section.
To just demonstrate a simple cross-browser testing example, we will take help from Browserling – an online cross-browser testing tool.
Cross-browser testing with Browserling
In this section, we will explore how Browserling can help us perform tests on a web application easily. With over 10 years of experience in this field, Browserling comes equipped with a lot of features that facilitate efficient testing processes. While we may not be able to explore all of them in detail here, we surely can throw some light on them for familiarity.
Let’s start by deciding three things in our mind for demonstration: the website, the browser, and the platform. I will go with google.com, Firefox 90, and Windows 10.
Now head over to Browserling and fill in the same details on the landing page:
Press “Test now!” to launch a virtual machine on Browserling’s server with the same configuration.
After 5 seconds, the page will open up and will be ready for the live interactive session:
The above image also shows a sleek menu bar on the left side. This can be used to switch between various configurations while being live on a machine.
You can also perform the following operations while testing your website:
- Capturing a screenshot and saving it on your account.
- Uploading the screenshot on imgur and share it with your team via email or link.
- Record testing session video for the team.
- Write text or draw shapes to highlight a specific area on the image (shown in the image).
- Change display options dynamically.
- Share your browser configuration with others.
And the list is long. Browserling comes with free starter plans for people trying the flavors in this field. As a tester, you can also try Browserling browser extension and bookmarklets. Once you are satisfied after the testing, you can be confident about how your website will present itself in front of millions of users. I think it will be perfect!
This article is contributed by – Harish Rajora.
Kuldeep is the founder and lead author of ArtOfTesting. He is skilled in test automation, performance testing, big data, and CI-CD. He brings his decade of experience to his current role where he is dedicated to educating the QA professionals. You can connect with him on LinkedIn.