Cross Browser Testing using TestNG

Once upon a time, when there was Internet Explorer, who ruled the world. With time the glory has gone. Today there are Microsoft Edge, Google Chrome, Mozilla Firefox, and Apple Safari, all are in a race to capture the world. Nowadays, nobody knows which browser user loves the most to open the website. Users have multiple options to choose any browser to open the website, a developer cannot assume all the users are on Chrome driver or on Firefox. Since development of such type of website become so important, so is the testing. While testing the website efficiently, and to take the control over the browser driver, we need Selenium. Now we need TestNG to use Selenium efficiently.

What is cross browser testing?

The process of testing the functionalities of the website in multiple browser and operating system (OS) is called Cross browser testing. A type of functional testing to check whether the website or application is working fine with different browser and OS. It is possible to perform cross browser testing either manually or in an automated way, but manual testing is tedious.

We perform the automated cross-browser testing with the help of Selenium and TestNG. It’s necessary to understand why we perform cross-browser testing.

Why do we need to perform a Cross-Browser Testing?

Web-based applications are totally different from windows applications. A web application can be opened in any browser. We all know that end user can choose any browser to open the application, since it cannot be developed considering one browser only. If we do, it might render perfectly on that particular browser but after publishing what will happen in other browser? Suppose if we incorporated some tags those were supported by only its latest version? We have not yet considered the resolutions and operating systems. Browser manufacturers always tends to do something new with their browser to cope up with the competition including the engine where the browser is built. Since the engine is different, the way how a browser understands the web languages (CSS, JavaScript and HTML) is also different. If the position property of CSS works fine on Chrome, it will not work on Safari. Reason behind is the absence of -WebKit tag. Cross browser testing using TestNG ensures a much better performance on different browsers and operating systems.

Reasons to do a cross browser testing and some possible issues as follows:

1. Image orientation

2. Mismatch of font size in different browser

3. Page alignment and div size

4. Browser incompatibility with OS

5. JavaScript implementation can be different

6. Validation difference of CSS,HTML also possible

7. Some browser still not supporting HTML5

8. Unsupported tags can be revealed and taken care of by turnaround codes

How To Perform Cross-Browser Testing In TestNG Using Selenium

Selenium Webdriver gives the opportunity to automate test cases using Chrome, Firefox, Internet Explorer and Safari browser.

TestNG Annotation required to access the parameter values from xml to the Java program is @Parameters. TestNG Parameters help us to avoid writing the same repetitive code again and again. Using TestNG Parameter annotation, we can cut down on lines of code significantly and makes efficient use of TestNG annotation. That is what a tester aims for when working on TestNG.

The below code will demonstrate how to perform cross-browser testing in TestNG using selenium webdriver:-

package MultiBrowser;

import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.firefox.FirefoxDriver;
import org.testng.Assert;
import org.testng.annotations.AfterTest;
import org.testng.annotations.BeforeTest;
import org.testng.annotations.Parameters;
import org.testng.annotations.Test;


import io.github.bonigarcia.wdm.WebDriverManager;

public class Crossbrowsertest {

 WebDriver driver;
 
 @Parameters({"url", "browserType"})
 @BeforeTest
 public void invokeBrowser(String url, String browserType)
 {
  if(browserType.equals("Chrome"))
  {
   
   WebDriverManager.chromedriver().setup();
   driver = new ChromeDriver();
  }
  
  else 
  {
   
   WebDriverManager.firefoxdriver().setup();
   driver = new FirefoxDriver();
  }
  
  driver.get(url);
  
 }
 @Test
 public void validateTitle()
 {
  String expected = "Google";
  String actual = driver.getTitle();
  Assert.assertEquals(actual, expected);
 }
 @AfterTest
 public void closeBrowser() {
  driver.close();
 }
 
}

Creating the xml file following the below steps as shown in the image:-

1. Right click on the program

2. Hover on TestNG

3. Select Convert to TestNG

testng.xml:

Since we are using TestNG Parameter, we need to specify the values from the TestNG XML file that will pass to the test case file.

Here the testng.xml has two test tags, this test case will execute two times for two different browsers.

First test ‘ChromeBrowser’ will pass the value of parameter ‘browserType’ as ‘Chrome’ so ChromeDriver will be executed. This test case will run on Chrome Browser.

Second test ‘FirefoxBrowser’ will pass the value of parameter ‘browserType’ as ‘Firefox’ so FirefoxDriver will be executed. This test case will run on Firefox Browser.

As follows:-

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE suite SYSTEM "https://testng.org/testng-1.0.dtd">
<suite name="Suite" verbose = "5"> 
  <test  name="ChromeBrowser">
  <parameter name="url" value="https://www.google.com"/>
  <parameter name="browserType" value="Chrome"/>
    <classes>
      <class name="MultiBrowser.Crossbrowsertest"/>
    </classes>
  </test> <!-- Test -->

 <test  name="FirefoxBrowser">
  <parameter name="url" value="https://www.google.com"/>
  <parameter name="browserType" value="Firefox"/>
    <classes>
      <class name="MultiBrowser.Crossbrowsertest"/>
    </classes>
  </test> <!-- Test -->
</suite> <!-- Suite -->

To execute the test in TestNG follow the below steps:-

1. Right click on the testng.xml file

2. Hover on Run as

3. Click TestNG suite

Executing the test case in tesng

Console

As we can see both of the test cases passed successfully running the website on different browsers.

Take away from this blog in short

1. Cross browser testing is an essential part of developing a website.

2. Cross browser testing is a technique to check the performance of websites on different web browsers.

3. The mobile revolution has changed the way how websites are viewed today. There are billions of mobile users in the world, cannot be ignored.

4. At present, website can be open on any device, any version, any browser, any OS or any resolution. Keeping this in mind the developers and testers need to be prepared for this before any catastrophe happens.

5. Selenium can support different types of browsers for automation and can be integrated with TestNG to perform Multi Browser Testing to ensure certain things.

6. From parameter in testng.xml we can pass browser name, can create WebDriver reference accordingly in a test case also.

Happy testing.

Thank You!!