How To Automate Cross Browser Testing of Web Applications?

According to web browser statistics, there were more than 112 browsers used by people across the globe in 2018.

Of course, it's impossible to consider ALL web browsers when creating a web app. But it's crucial to take into account the top browsers with the most market share.

And recent stats show Chrome holds the most market share, with Safari and Firefox coming in 2nd and 3rd respectively.

As people use multiple browsers, it's important to optimize your web app to suit several browsers. Each browser has its own engine that renders web pages differently.

This is why cross-browser testing is essential to the success of any web app.

If you're using a testing tool to make sure your web app is running correctly with a specific browser, how can you ensure that your testing tool works with different browsers?

The answer is to automate your cross-browser testing.

In this guide, we'll show you how to do automated cross-browser testing. We'll also give you some tips on what to look for in a cross-browser testing tool. So keep reading!

What Is Cross-Browser Testing?

Cross-browser testing is the process of testing web apps across different browsers to ensure that their functionalities are working properly in every web browser.

It is a form of non-functional testing that checks both web and mobile apps to ensure their best performance without any dependencies or compromise in quality. The most suitable scenarios for performing cross-browser tests are -

For customer-facing applications. Since it is almost impossible to have a clear idea of which browser or operating system an end user will use.
For applications running on different browser-operating system combinations i.e. on widely used browsers like Chrome, Firefox, Safari, Microsoft Edge, etc. running on popular operating systems like Windows, macOS, Linux, Android, iOS, etc.
Applications that run on different devices (e.g. mobile, laptop, tablet, etc.) because different devices are likely to have different operating systems, different screen sizes, and different browsers.
Applications that support assistive tools because those devices or tools are likely to have specific setups for differently abled people.

Why Do You Need Cross Browser Testing?

Cross-browser testing is essential for the success of any website or web app. It's the only way to ensure that your app looks and works great on all the most popular browsers.

Here are the most common reasons why you might need it:

Javascript has different orientations

The most commonly used programming language to develop the front-end parts of web applications is JavaScript but you must know that its orientation can be different on different web browsers.

That's why you need to check and be sure that your web application runs perfectly on all browsers that you want to support.

Absence of App Cross browsing Compatibility

Your app may perform fine in the browser it is purposely developed for but it may have very poor cross-browser compatibility.

Or the browser that you have developed your app for may not be compatible with different operating systems.

People using different versions of browsers

You cannot be completely sure about the browser versions that your users are using and the performance of your app can significantly deteriorate because of that.

Your web app being unresponsive

When your web app is not responsive for whatever reason, the HTML, CSS, and other building components can break on different screen sizes and your users will see a UI with broken designs, not properly rendered font sizes, etc. In such a case, the user experience of your application will completely break.

Not paying attention to the latest HTML tags

Technology is always evolving and the older versions are getting obsolete. Hence, there is a high chance that any backdated browser may not be capable of loading your app as it is most likely to use the latest HTML5 tags.

Improper Image Orientation

Proper image orientation is a major concern. Any beautiful web design will likely have a lot of images and improper orientation and broken rendering of those images will significantly harm the web page as well as the complete user experience of your application.

Manual vs Automated Cross-Browser Testing

There are two ways to do cross-browser testing: manually and automatically.

Manual cross-browser testing is when you test your app on each browser yourself. This is time-consuming and not very efficient.

Automated cross-browser testing is when you use a testing tool to test your app on different browsers for you. This is much more efficient and can save you a lot of time.

A hybrid approach is a mix of both manual and automated testing. This means that you use a testing tool to test your app on some browsers, and then you test it yourself on the other browsers.

This can be a good way to save time while still ensuring that your app is compatible with all the most popular browsers.

A hybrid approach is best used when you've signed up for a free trial for a testing tool. This way, you can test the tool on a few browsers before you decide whether or not to buy it.

How To Automate Cross Browser Testing

Automation is everywhere these days. And for a good reason!

Automation can save you a lot of time and effort. The same is true for cross-browser testing.

There are many different ways to automate your cross-browser tests. Here are our top picks:

Using Selenium As Your Cross Browser Testing Framework

After its development by Jason Huggins in 2004, Selenium has gained immense popularity as a truly effective and useful automation testing framework. Selenium is highly efficient in terms of overall test automation.

However, here our primary point of concern is Selenium WebDriver which is a useful part of Selenium in terms of automating cross-browser tests. So, let's see how it does its job.

Using WebDrivers For Different Browsers

The primary task of Selenium WebDriver is accepting commands from testers and sending them to different web browsers to perform specific tasks on them.

It supports different web browsers so for smoother operation, it has different WebDriver classes like FirefoxDriver, ChromeDriver, InternetExplorerDriver, etc. You can install the specific driver for the browser you use from Selenium's documentation page for WebDrivers.

To use the Selenium WebDriver for different browsers like Google Chrome, you need to set up its system property. However, Selenium comes with the default Mozilla Firefox driver so you don't need to go through the setup phase for the Firefox driver.

For a better understanding, let's take the example of opening Facebook and fetching the heading on Chrome, Firefox, and Internet Explorer respectively.

1. Google Chrome

As mentioned above, Google Chrome needs the WebDriver to be downloaded from Selenium's dedicated documentation page.

After the download is complete, the next step is to place that downloaded exe file in the project directory and then configure it accordingly along with setting up the program to fetch the heading from the Facebook page.

[code language="java"]
//declaration and instantiation of objects/variables
System.setProperty("webdriver.chrome.driver", ".//chromedriver.exe");
WebDriver driverGC = new ChromeDriver();
[/code]
[code language="java"]
package seleniumpackage;
import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;
public class UsingChromeWebDriver {
public static void main(String[] args) {
//declaration and instantiation of objects/variables
System.setProperty("webdriver.chrome.driver", ".//chromedriver.exe");
WebDriver driverGC = new ChromeDriver();
String baseWebUrl = "https://www.facebook.com/";
driverGC.get(baseWebUrl);
String heading = driverGC.findElement(By.xpath("//*[@id='content']/div/div/div/div[2]/div[1]/div[1]"))
.getText();
System.out.println("Heading on the Web Page is: "+ heading);
//closing Google Chrome Browser
driverGC.close();
//Exiting the System
System.exit(0);
}
}
[/code]

Explanation of the code:

The ChromeDriver is instantiated.
That instance invokes and loads the Facebook login page.
The element on that web page is found to be a heading on the Facebook page.
The text is fetched as “Heading on the Web Page is Connect with friends and the world around you on Facebook”.

Remember that this code will work only on the Google Chrome browser.

Source of Example: https://www.softwaretestingclass.com/cross-browser-testing-using-selenium/

2. Mozilla Firefox

You already know that Firefox does not need the WebDriver to get additionally downloaded as an exe file because Selenium WebDriver already has it in a .jar file. Hence, skipping the driver download part, you can proceed with the following code -

[code language="java"]
package seleniumpackage;
import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.firefox.FirefoxDriver;
public class CrossBrowserTesting {
public static void main(String[] args) {
//declaration and instantiation of objects/variable
WebDriver driverFF = new FirefoxDriver();
String baseWebUrl = "https://www.facebook.com/";
driverFF.get(baseWebUrl);
//String heading = driverFF.findElement(By.tagName("h2")).getText();
String heading = driverFF.findElement(By.xpath("//*[@id='content']/div/div/div/div[2]/div[1]/div[1]"))
.getText();
System.out.println("Heading on the Web Page is: "+ heading);
//closing Firefox Browser
driverFF.close();
//Exiting the System
System.exit(0);
}
}
[/code]

Explanation of the code:

FirefoxDriver class is instantiated.
That instance is used to load the Facebook login page.
The text is fetched as “Heading on the Web Page is Facebook helps you connect and share with the people in your life.”

Remember that this code will work only on the Firefox web browser.

Source of Example: https://www.softwaretestingclass.com/cross-browser-testing-using-selenium/

3.Internet EXPLORER

After your download the driver, then you can proceed with keeping that exe file in the project directory and setting up the configurations accordingly.

package seleniumpackage;
import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.ie.InternetExplorerDriver;
public class UsingIEWebDriver {
public static void main(String[] args) {
//declaration and instantiation of objects/variables
WebDriver driverIE = new InternetExplorerDriver();
String baseWebUrl = "https://www.facebook.com/";
driverIE.get(baseWebUrl);
String heading = driverIE.findElement(By.xpath("//*[@id='content']/div/div/div/div[2]/div[1]/div[1]"))
.getText();
System.out.println("Heading on the Web Page is: "+ heading);
//closing IE Browser
driverIE.close();
//Exiting the System
System.exit(0);
}
}

Explanation of the code:

The InternetExplorer Driver class is instantiated.
That instance invokes and loads the Facebook login page.
The driver instance is used to find the element on that web page. The element is a heading on a Facebook page.
The text is fetched in the form “Heading on the Web Page is Connect with friends and the World around you on Facebook.

Remember that this code will work only on Internet Explorer.

Source of Example: https://www.softwaretestingclass.com/cross-browser-testing-using-selenium/

Using Selenium TestNG

Though using different WebDrivers for different web browsers is a great way to execute cross-browser tests, a better-automated approach to do the same is by integrating Selenium WebDriver and TestNG framework that enables the users to easily perform the same test on different browsers with ease.

The procedure to achieve the expected results using TestNG is creating a test case parameter and then passing it through the TestNG.xml file. That parameter controls Selenium for initiating the browsers.

Let's understand better with an example.

Let's say we're jotting down a script to test the login process of a web application using the TestNG class in two different browsers.

import org.openqa.selenium.WebDriver;
import org.openqa.selenium.firefox.FirefoxDriver;
import org.openqa.selenium.ie.InternetExplorerDriver;
import org.testng.annotations.Parameters;
import org.testng.annotations.Test;
public class TestCase1 {
@Test
// Here these parameters we will take from testng.xml
@Parameters("Browser")
public void test1(String browser) {
if(browser.equalsIgnoreCase("FF")){
WebDriver driver=new FirefoxDriver();
driver.manage().window().maximize();
driver.get("http://www.facebook.com");
driver.quit();
}
else if(browser.equalsIgnoreCase("IE")){
System.setProperty("webdriver.ie.driver", "./server/IEDriverServer.exe");
WebDriver driver=new InternetExplorerDriver();
driver.manage().window().maximize();
driver.get("http://www.facebook.com");
driver.quit();
}
}
}

Source of example: http://learn-automation.com/cross-browser-testing-using-selenium-webdriver/

Now, as mentioned below, a TestNG.xml file should be created to pass the parameters.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE suite SYSTEM "http://testng.org/testng-1.0.dtd">

Here parallel is an attribute that specifies the mode of execution and thread count specifies how many browsers should open

We must mention that here we have used two browsers just as a reference. You can set up any number of web browsers in the TestNG.xml file.

Source of example: http://learn-automation.com/cross-browser-testing-using-selenium-webdriver/

3. Now to run the test -

Right-click on the testing.xml file
Select Run As > TestNG Suite

Parallel Execution of Cross Browser Tests

Running your automated tests in parallel on multiple browsers or multiple real devices is crucial.

Why?

For example, if a test case takes 15 minutes on average to get executed in one browser and you have to execute it in 8 different browsers/devices, it will take 120 minutes to complete all the executions of the test case. On the other hand, if you can run the test case parallelly in all browsers or devices, it will take 15 minutes on average to complete the test.

That's why parallel execution of cross-browser tests is so important to achieve efficiency through testing your web app across multiple browsers and devices in the shortest possible time. And, that can easily be achieved by using the Selenium grid, which is the pathway to run your Selenium tests on multiple environments at the same time.

The required infrastructure to use the Selenium grid is a hub-node pattern. That means you need to have one machine as the hub that will host the tests and several machines as nodes to execute the tests on different browsers with different versions and different other parameters.

To use the Selenium grid and get the best out of it, you must have set up and maintained the necessary infrastructure. And, if you think that it will be hard for you to manage all those things, you can use an efficient test automation tool like Preflight to handle all the hassle for you.

Use Cross-browser Testing Tools to Save Time and Ensure Your App's Compatibility with all Browsers

There is a multitude of browsers that people use to access the internet. The most popular ones include Chrome, Firefox, Safari, and Edge. So remember to perform cross-browser testing to avoid any issues that might come from different browsers rendering your content in a different way.

You must always be ready to execute your test cases on whatever web browsers or devices your team is using.

We also gave you a rundown on how to use Selenium with ease and achieve overall great efficiency in cross-browser testing automation.

And no matter what tool or testing framework you use for your cross-browser testing needs, don't forget that parallel execution of the test cases is highly important for achieving overall test efficiency. If you're tired of manually testing your app or want to try a hybrid process, leave all your testing worries to Preflight. Try for FREE and get started on your new testing journey!

The Ultimate Guide to Automating Cross-Browser Testing of Different Web Applications

What Is Cross-Browser Testing?

Why Do You Need Cross Browser Testing?

Manual vs Automated Cross-Browser Testing

How To Automate Cross Browser Testing

Using Selenium As Your Cross Browser Testing Framework

Using WebDrivers For Different Browsers

1. Google Chrome

2. Mozilla Firefox

3.Internet EXPLORER

Using Selenium TestNG

Parallel Execution of Cross Browser Tests

Use Cross-browser Testing Tools to Save Time and Ensure Your App's Compatibility with all Browsers