{{announcement.body}}
{{announcement.title}}

How to Automate Cross-Browser Testing of Web Applications Using Selenium

DZone 's Guide to

How to Automate Cross-Browser Testing of Web Applications Using Selenium

Check out the two most important ways to handle cross-browser testing.

· Performance Zone ·
Free Resource

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: https://www.softwaretestingclass.com/cross-browser-testing-using-selenium/

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: https://www.softwaretestingclass.com/cross-browser-testing-using-selenium/

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: http://learn-automation.com/cross-browser-testing-using-selenium-webdriver/

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: http://learn-automation.com/cross-browser-testing-using-selenium-webdriver/

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

Cross Browser Testing using Selenium Webdriver

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.

Topics:
cross browser testing ,browser testing ,cross browser testing tool ,website testing ,automation testing ,selenium webdriver ,testng ,Performance

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}