How To Automate Cross Browser Testing of Different Web Applications?

Cross Browser Testing Automation

The number of browsers is increasing at an insanely fast rate due to different requirements from different people. Gone are the days when Internet Explorer used to dominate as the most popular web browser. Presently, there are a number of top-level players operating in the market as the favorite web browsers (e.g. Google Chrome, Safari, Microsoft Edge, Mozilla Firefox, Opera, etc.) for different sets of users. And, to serve those different sets of users and to grab that amazing business opportunity, companies are developing numerous web applications, browser extensions, and many more types of tech products that have the best suitability for different browsers.

Now, you must know how important it is to test tech products for ensuring that they are delivering their best performance. We have also discussed the same in our article “What Is Software Testing?” Similarly, you must run rigorous tests to check that your web apps are running properly. Also, the popularity and importance of automation testing (traditionally known as test automation) are not unknown to you. Manual testing is never adequate to cope with the huge demand and supply chain in the field of technology. That’s why to cope with the enormous necessity to test numerous apps with good efficiency, automation testing is the most preferred way.

As mentioned above, web apps are getting developed for different browsers. Hence, if your testing tool does not support cross-browser testing, you can never reach a huge portion of your potential customers and will stay stuck with a handful of applications that are developed for one specific web browser.

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 as it is almost impossible to have a clear idea about or control 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.
  • For applications running 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.
  • For 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?

You surely know how the web app that your team has developed will work but they have developed it keeping one or two popular web browsers in mind and you can never have a definite idea about whether your user will use the chrome browser or anything else. Also, it is impossible for you to have any idea about your users’ devices i.e. their operating systems and other settings. Though we previously discussed the point that cross-browser testing works for the prime objective of testing web apps across different web browsers, you must have a clearer idea about why you need it.

  • 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.
  • Your app may perform fine in the browser it is purposely developed for but it may have very poor cross-browser compatibility.
  • The browser that you have developed your app for may not be compatible with different operating systems.
  • 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 may not be responsive. That means that 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.
  • 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.
  • 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.

How To Automate Cross Browser Testing?

Till now, you got the idea about what cross-browser testing is and why it is so important for you to grow in the web business. You also got to know that the key to sustaining in today’s highly competitive market and achieving the heights of success, is automating every form of software testing such as unit testing, integration testing, regression testing, functional testing, etc. In the case of cross-browser testing, it may include multiple types of tests that will get executed on different browsers. Hence, it is evident that cross-browser testing needs more attention and planning to produce the best results. A detailed idea about automating cross-browser tests is given below.

Using Selenium As Your Cross Browser Testing Framework

As the discussion is broadly about test automation, Selenium is a must-mention here. After its development by Jason Huggins in 2004, it has gained immense popularity as a truly effective and useful automation testing framework. Selenium is highly efficient in terms of overall test automation and we have also gone into great depth about it in our article on codeless 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, Internet Explorer, etc., 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. Here we are describing the example of opening Facebook and fetching the heading on Chrome, Firefox, and Internet Explorer.

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

Similar to Google Chrome, Internet Explorer also needs an additional driver that you can easily download from Selenium's dedicated documentation page. 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.

1. We are 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/

2. 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

<suite name="Suite" parallel="tests" thread-count="2">

<test name="Test">

<parameter name="Browser" value="FF" />

<classes>

<class name="SampleTestcases.TestCase1"/>

</classes>

</test>

<test name="Test1">

<parameter name="Browser" value="IE" />

<classes>

<class name="SampleTestcases.TestCase1"/>

</classes>

</test>

</suite>

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

Here the discussion is mostly the same as you got to know about the TestNG framework. The main point of concern is that you need to run your automated tests in parallel on multiple browsers or multiple real devices. 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 the 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. We are diving into that now.

Using Cross-Browser Testing Tools Like PreFlight

If you don’t like to get bothered about setting up a lot of parameters by yourself and hassling with a lot of technical aspects, then we must suggest you make PreFlight your only choice for testing. This open-source codeless automated testing platform allows anyone regardless of his/her coding knowledge to create and run tests within seconds. Though you can get to know about PreFlight’s benefits in detail from the article “10 Amazing Software Testing Benefits From PreFlight In 2022”, we are jotting down the key points below.

  • It is a truly codeless tool so test execution is not exclusive to technical people.
  • Its smooth interactive interface allows you to easily access the features that let you create and run your test cases.
  • Quicker and detailed test results enable you to achieve better test coverage as well as faster debugging.
  • Its simulators are so awesome that you feel like the tests are running on real browsers.
  • Your test runs are always getting auto-recorded and saved, and screenshots of important moments are being captured. Hence, you have the opportunity to observe and analyze your test results whenever you want.
  • You get the flexibility to test your web app for multiple types of devices such as windows computers, mac, android mobile devices, iOS devices, etc.
  • You can get a marvelous parallel testing experience by running multiple tests at the same time.

Conclusion

You got to know how different browsers, devices, and other parameters are different for different test environments. Hence, your tests should never be suitable for only the browser or test environment it is planned for. You must be always ready to execute your test cases on whatever web browsers or devices your team is using. This article guides you to run Selenium with ease and achieve overall great efficiency in cross-browser testing automation.

From this article, you also got to know that using Selenium can even involve you in a bit of coding but PreFlight, the most effective alternative to Selenium, is the simplest yet most effective test automation tool that lets you create and run different forms of important software tests (e.g. unit tests, integration tests, cross-browser tests, UI tests, API tests, functional tests, smoke tests, etc.) within seconds and you don’t need to deal with even a little bit of hassle for coding.

However, no matter what tool or testing framework you use for your cross-browser testing needs, parallel execution of the test cases is highly important for achieving the overall test efficiency. So, don’t get bothered to monitor that by yourself and leave all your testing worries to PreFlight. You just need to focus on the efficiently delivered test results and what measures you can take for a quicker debugging as well as an effective quality improvement process. Book a demo and get started on your new testing journey.

For more information, feel free to reach out to us or visit our website. Also, if you like to go through the latest technology updates every moment, do consider following our blog page.