A quick look at cross-browser testing

Team Merlin
Government Digital Services, Singapore
4 min readMay 20, 2022

--

Hello! 👋🏼

In today’s article, we are exploring a topic which continues to find a place in a Quality Engineer’s journey in software engineering: Cross-browser testing a.k.a browser compatibility testing.

Cross-browser development and testing aren’t easy tasks. As the number of web applications began to rise since the advent of the web, the types of web client used by people to access these websites rose as well. Today, we have more than 20 modern web browsers, with Google Chrome, Apple Safari, Microsoft Edge, and Mozilla Firefox leading the charge.

The popular browsers continue to adopt the common W3C standards and this has helped everyone in general. However, most browsers have their unique auxiliary features that mostly revolve around APIs, privacy, and security. Hence, it is important to make sure that your web application is tested across different browsers, especially when it has dependencies on browser APIs and other browser-specific utilities.

How to choose your target browsers?

With so many web browsers available for free, it is mostly a good thing for public users since they’re able to ‘shop’ for one to install and use. This positive outlook is somewhat flipped for software and quality engineers developing a web application for public use.

Here are some considerations when you’re formulating your cross-browser strategy:

For more information about StatCounter, read here

Test Automation

The topic of test automation is prominent in cross-browser testing. With the right framework and tools, you can develop a single automation script that runs across all modern browsers with little or no tweaks. Let’s look at some considerations for cross-browser test automation:

Read here about running automated tests in mobile browser applications​

In this article, we will be using Selenium Grid 4 — an open-source, scalable and easy-to-use automation tool that we’ve used from time to time.

Selenium is a popular test automation library that supports cross-browser testing with the use of browser drivers. To run your test against a specific browser, ensure that you have installed the corresponding browser driver (e.g. chromedriver for chrome) to use with the selenium test script.

Selenium Grid is used for distributed automation testing, with capabilities to distribute your testing load from a central “hub” to multiple machines (or “nodes”). You can run parallel tests and manage different browser versions and browser configurations.

Setup with Selenium Grid 4

With the new features in Selenium Grid 4, you can now execute your tests in a local docker environment using the Hub-Node setup. Let’s look at how we can set up 1 selenium hub and 3 Selenium nodes (1 Chrome, 1 Firefox, 1 Edge).

Step-1:
Ensure that you have installed Docker on your machine. You can refer to docker installation steps here.

Step-2:
Once docker is installed, run this command first to setup a docker network:

The docker network will allow the selenium hub and nodes to be accessible within this network using namespaces, and without the need to explicitly specify IP addresses. Next, let’s setup the hub:

Step-3:
Complete the setup for all 3 selenium nodes:

After all the above steps are completed without errors, your cross-browser automation setup is complete. Once you update your selenium client code to use the hub’s IP address and port, your execution can begin. Have fun!

We hope this information is useful in your testing journey and adds an option to your arsenal of testing tools. If you have questions or more tips to share with us, do make use of the comments section below. See you again soon!

🧙🏼‍♀ Team Merlin 💛
Application security is not any individual’s problem but a shared responsibility.

--

--

Team Merlin
Government Digital Services, Singapore

Software | Security | Quality enthusiasts doing the right things