While testing websites, we all come across tests where we observe that the website under test is not properly displayed on some browsers and we think that the website is just broken. However, when we open it on a different browser, the website works just fine. This behavior refers to the compatibility of a website with different browsers.

With the technology advancing at a fast pace, there are a variety of browsers available in the market today, from Google Chrome to Microsoft Edge to Firefox to Apple’s Safari, all these browsers have captured the market rapidly.

If we take a look at the Web Browser market share worldwide, Google Chrome leads the market with 69.8% share. Safari is the second browser followed by IE, Edge, Firefox and Opera.

Source -Browser & Platform Market Share January 2023

Going deeper if we check for the top 10 Web browsers used worldwide, Google Chrome, Safari, Microsoft Edge, etc. are some of the browsers topping the list with their different versions. Also Windows 10 tops the list as the most used Platform, followed by iOS, Android and macOS.

Source -Browser & Platform Market Share January 2023

Looking at the data, it is clear that people use different browsers and OSs when it comes to surfing the web. Hence, we must make sure to test our websites on different browsers, respective versions with multiple platforms simultaneously. In short, we must perform Cross Browser testing.

What is Cross-browser Testing?

Cross-browser testing is a type of non-functional testing where users test their website or web application to make sure it works as expected without any dependencies when accessed on different browsers/platform/OS versions through different devices like desktops, laptops, mobiles, tablets, etc.

Why is Cross browser Testing required?

Cross browser testing is required:

1. To check the efficiency and user experience of the website on different browsers.
2. To check the behavior of the website on different browsers.
3. To check that all images, gifs, videos, colors, etc render correctly on different browsers.
4. To verify that the design looks perfect and fits different screen sizes/orientations.

Cross browser testing is actually running the same set of tests on different browser/platform combinations.

Role of Cloud platforms in performing Cross browser testing

Thanks to the evolving technology, we have multiple browsers with a variety of versions for desktops as well as mobile devices. These browsers run on different OS platforms like Windows, Mac, Linux, etc.

It is impossible to ensure that we have all the required different browsers, related versions and different platforms in house, as it will require a huge investment to purchase the required Desktops, Mobile devices and keep them available round the clock for testing.

Here, Cloud Platforms like pCloudy can save our day. The pCloudy platform provides us with all the latest OS platforms, different browsers and their multiple versions for us to test our web apps and websites for various aspects like compatibility, design integrity, performance, etc.

Real Mobile devices are also available on demand which can be used as per the requirement to perform cross browser testing. It also supports Automated testing using Appium and Selenium WebDriver on the desktop browsers as well as mobile browsers respectively.

When to perform Cross browser testing?

Considering the importance of Cross browser testing, it should be performed as early as possible to get faster feedback on the builds. It is recommended to perform this testing during the development phase within the CI/CD pipeline before the builds are pushed to other environments like QA, UAT, Pre-Release, etc.

Catching bugs early has an added advantage of fixing them quickly and efficiently whereas if bugs are found in later stages it requires more time, effort and money to fix.

As per the testing checklist we discussed earlier, it seems to be a tedious task to perform testing on different browsers manually. However, automation testing can help in running the tests quickly.

Let’s check out how we can use Selenium WebDriver to automate our Cross browser testing efforts.

Cross Browser Testing in Selenium

Selenium WebDriver is a popular web automation tool. It helps in automating the tests for websites and web apps and also helps us perform cross browser testing by running our tests in parallel over different OS platforms and browser versions. For running tests in parallel, we will be using the TestNG automation framework.

Let’s first discuss the test scenarios we will be covering to perform the automation testing.
We will navigate to the home page of the pCloudy website and verify the text displayed in the center of the screen.

pCloudy Home Page

In the next scenario, we will navigate to the Blogs menu by hovering the mouse on the Resources menu. Once the blogs page is loaded, we will verify the title “Trending Reads”.

Blogs Menu

Blogs Page

We will be running these test scenarios on the following browsers/platforms by creating a JSON file for storing all the required combinations of browsers and platforms.

Browser Name	Browser Version	OS Name	OS Version
Google Chrome	109	Windows	10
Safari	16	Mac	Ventura
Firefox	109	Windows	10

Parallel-config.json file

How to choose the browsers for performing cross browser testing?

As discussed in the earlier section, we should check out the Web browser’s latest market share for the region where we are planning to launch the website or application. Based on the research and the stats we get, we can take a combination of browsers and their respective versions running on different platforms like Windows, Mac, Linux, etc.

It should also be noted that if the latest market share for the browsers running on the mobile devices are also high, then the mobile devices and the respective browsers as per statistics, should also be considered for testing.

One more point to note here is, If there are new versions for browsers released later, it should be taken into consideration for running the tests as people are more attracted to new browsers and quickly adapt to the latest tech updates. Chances are they will start using them soon, so it is good to test our web apps and websites on the latest versions as well.

Code Repository

All of the code which is showcased in this blog can be found in this Github repository

Project Configuration

This project has been created using Maven. TestNG is used as a test runner as it helps in running the tests in parallel. Once the project is created, we need to add the dependency for Selenium WebDriver and TestNG in the `pom.xml` file.

pom.xml

As this blog primarily focuses on Cross browser testing, we will not get into the details of configurations, and locator strategies. For more details related to configurations and setting up the project, please checkout Executing Parallel Test Sessions with TestNG and Selenium WebDriver blog where a detailed explanation on how to use the browsers/platform values by creating a parallel-config.json file is provided. It also provides details for managing the browser drivers required to run the Selenium tests.

Let’s focus on the implementation of the test scenarios and running them.

Implementation of Test Scenarios

Test Scenario 1

Here is a setup method in which we will setup the base for running our tests

testSetup()

Here is a code implementation of Test Scenario 1, where we navigate to the pCloudy website and check the text displayed on the center of the screen.

testHomePageText()

Test is pretty simple, we are locating the text element and performing assertion using TestNG’s assertEquals() method.

To locate the test we are using the CSS Selector locator strategy of Selenium.

getCenterText() method

Test Scenario 2

Here is a code implementation of Test Scenario 2, where we navigate to the pCloudy blogs page and check the title “Trending Reads” on the top of the page.

Implementation is simple, a separate page has been created for storing elements of the Blogs Page as per Page Object Model pattern. getPageTitle() method returns the text of the title from the blogs page which is asserted against the expected text – “Trending Reads”.

BlogsPage class

Running the tests

As we are using TestNG as a test runner, “testng.xml: file is created where all test details with classes and test names are stored.

Tests can be executed by right-clicking on the file and selecting Run ‘…\testng.xml’.

Testng.xml file

The value for parameter name – “ID” is supplied using the parallel-config.json file where all the browsers and OS platform details are saved. The following table shows how the ID is mapped to different browser configurations.

Parameter(“id”) in testng.xml	Browser Name	Browser Version	OS Name	OS Version
1	Google Chrome	109	Windows	10
2	Safari	16	Mac	Ventura
3	Firefox	109	Windows	10

Here is the screenshot from the IntelliJ IDE after running the tests

Once the tests are run successfully, we can check out the pCloudy Reports and view all the test details of the test run.

Summary

To summarize, Cross browser testing refers to running tests on multiple browsers simultaneously on different platforms. It is done to check that the website doesn’t have any compatibility issues on different browsers and also to verify the look and feel of user experiences.

As we need to perform repeated tests on different browser configurations, performing automated Cross browser testing with Selenium WebDriver and TestNG helps us test all the scenarios in quick time.
Also, cloud platforms like pCloudy can be very helpful in performing Cross browser testing as it has a wide range of all browsers, Operating Systems and mobile devices.

Happy Testing!