Automate Cross-Browser Testing of Web Applications Using Selenium

Automate Cross-Browser Testing of Web Applications Using Selenium

Most of the modern web development frameworks do the heavy lifting of maintaining the cross-browser support in their mind while developing their product, which helps testers like us to not worry too much about cross-browser testing.

Cross-browser testing refers to a functional test that is used to verify your web application functionalities are working as expected in different browsers like Mozilla Firefox, IE, Google Chrome, Safari, etc.

Need for Cross Browser Testing for Web Applications

Web applications are completely different than Windows applications. Users can open a web application in any browser. For example, some people prefer to open Facebook in Firefox, while others can open it with Chrome or Opera browser. Every browser has different behaviors and features, so they open web apps differently. Therefore, it’s necessary to ensure that the web application works as expected in every browser so that people can access it and use it. And it can only be achieved via cross-browser testing. There are some other reasons that require cross-browser testing, such as:

  • JavaScript orientation can be different on different web browsers.

  • Browser compatibility with different operating systems.

  • Font size mismatch or not rendered properly

  • Some browsers don’t support some of the HTML5 tags.

  • Image orientation

Cross-Browser Testing Using Selenium WebDriver

Selenium WebDriver is a popular tool that is specially designed for cross-browser automation testing. Selenium WebDriver supports different web browsers, and for each web browser, there are different WebDriver classes like FirefoxDriver, ChromeDriver, InternetExplorerDriver, etc. You have to download these drivers to perform cross-browser testing in different browsers.

Selenium comes with default Mozilla Firefox driver, so there is no setup required for Firefox driver. However, if you want to use other browsers, you will have to set up its system property. For better understanding, let’s take the example of opening Facebook on Chrome, Firefox, and Internet Explorer.

1. Google Chrome Driver

Every driver uses a program to fetch the heading on the Facebook page. ChromeDriver need an additional driver.exe file which can be downloaded from Seleniumhq, and this exe file needs to be placed in the project directory, and then configured accordingly:


[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]

In this program, we instantiate ChromeDriver class and then use that instance to invoke and load the Facebook login page. Using the drive instance, we find that the element on that web page is a heading on the Facebook. On fetching the text, we will find that the heading on the webpage is “Connect with friends and the world around you on Facebook.” In this test, only Google Chrome browser can be used throughout the testing.

Source

2. FirefoxDriver

Firefox doesn’t require any additional exe file; selenium web drive already has it in a .jar file. So, you don’t need to download Firefox driver; you can use the following program to fetch the heading on the Facebook page:

[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]

In this program, we instantiate FirefoxDriver class and then use that instance to load the Facebook login page. Using this instance, you will find that the heading on the webpage is “Facebook helps you connect and share with the people in your life.” In this program, we can use only Mozilla Firefox browser for testing, as we are invoking Firefox browser.

Source

Multi-Browser Testing Using Selenium TestNG

Testing every browser separately with different web drivers will take a considerable time, so we can also perform multi-browser testing using automation. For multi-browser testing, you can integrate selenium web driver with TestNG framework. TestNG gives access to users to perform the same test on different browsers in a simple way.

To achieve this, you’ll have to create a test case parameter, and then pass it through TextNG.xml file. Based on the parameter, the selenium will initiate the browsers. Follow the below steps:

  1. Create a script to test the login process of a web application using TestNG class. In this script, we’ll run two different browsers parallel.
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 this 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

2. Now, create a TestNG.xml file 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 which specify the mode of execution and thread-count specify how many browser 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>

Note: Any number of browsers can be set up in the TestNG.xml file. We have set up only two browsers as an example.

Source

  1. Now, run the test by right-clicking on the testing.xml file and select Run As>TestNG Suite. On running the test, it will provide the following output.

This is image title

For multi cross-browser testing, you have to execute selenium web driver through testing.xml only.

However, if you perform multi-browser testing using Selenium the major problem that you face is infrastructure as you can test only those browsers which are installed in your local system.

For example, you can not test on Firefox 62 if you have Firefox 64 installed in your system. The way is to download the downgraded version by installing the latest one and this becomes a cumbersome task when you have to test on hundreds of such browsers. Here, a cloud selenium grid can help you a lot. You can use tools like LambdaTest which offers Selenium cloud grid to perform cross-browser testing.

Conclusion

Cross-browser testing is very important for every organization to make sure their web application works fine across all web browsers. Now, there are two ways for cross-browser testing – separately testing every browser with Selenium WebDriver or multi-browser testing using TestNG framework. In this article, we have covered both these methods in details. So, you can choose the method that suits you best.

Learn More

Selenium

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Selenium Online Training- Selenium Course with live Project| OnlineITGuru

Software company need expert with selenium certification. Learn best Java concepts in selenium training and become a testing engineer.

Selenium Tool Suite - Components and Features

Learn about selenium tool suite - See its components like Selenium IDE, Selenium Remote control, webdriver & selenium grid with their features & limitations

What Is Selenium? How Selenium Works? Selenium Basics & More

Selenium automates web testing of by controlling browsers based on your test scripts. Learn what is Selenium? Why is Selenium testing important? How Selenium works? What are Selenium Components? How to start Selenium testing?

Selenium vs UFT - Differences Between Selenium and UFT

Learn the Comparison between selenium vs UFT. It will help you to learn difference between the two technologies to see which is better to learn now.

Selenium IDE Installation - Steps to Install Selenium IDE

Welcome to DataFlair Selenium Tutorial series. In this article, we are going to learn step by step process of Selenium IDE installation.