SAP

Web

Must Learn!

Big Data

What is Cross Browser Testing?

Cross Browser Testing is a type of functional test to check that your web application works as expected in different browsers.

Cross Browser Testing  using Selenium WebDriver

Why do we need Cross Browser Testing?

Web-based applications are totally different from Windows applications. A web application can be opened in any browser by the end user. For example, some people prefer to open http://twitter.com inFirefox browser, while other's can be using Chrome browser or IE.

In the diagram below you can observe that in IE, the login box of Twitter is not showing curve at all corners, but we are able to see it in Chrome browser.

Cross Browser Testing  using Selenium WebDriver

So we need to ensure that the web application will work as expected in all popular browsers so that more people can access it and use it.

This motive can be fulfilled with Cross Browser Testing of the product.

Reason Cross Browser Issues

  1. Font size mismatch in different browsers.
  2. JavaScript implementation can be different.
  3. CSS,HTML validation difference can be there.
  4. Some browser still not supporting HTML5.
  5. Page alignment and div size.
  6. Image orientation.
  7. Browser incompatibility with OS. Etc.

How to perform Cross Browser Testing

If we are using Selenium WebDriver, we can automate test cases using Internet Explorer, FireFox, Chrome, Safari browsers.

To execute test cases with different browsers in the same machine at the same time we can integrate TestNG framework with Selenium WebDriver.

Your testing.xml will look like that,

Cross Browser Testing  using Selenium WebDriver

This testing.xml will map with the test case which will look like that

Cross Browser Testing  using Selenium WebDriver

Here because the testing.xml has two Test tags ('ChromeTest','FirefoxTest'),this test case will execute two times for 2 different browsers.

First Test 'ChromeTest' will pass the value of parameter 'browser' as 'chrome' so ChromeDriver will be executed. This test case will run on Chrome browser.

Second Test 'FirefoxTest' will pass the value of parameter 'browser' as 'Firefox' so FirefoxDriver will be executed. This test case will run on FireFox browser.

Complete Code:

Guru99CrossBrowserScript.java

package parallelTest;

import java.util.concurrent.TimeUnit;
import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.edge.EdgeDriver;
import org.openqa.selenium.firefox.FirefoxDriver;
import org.testng.annotations.BeforeTest;
import org.testng.annotations.Parameters;
import org.testng.annotations.Test;

public class CrossBrowserScript {

	WebDriver driver;

	/**
	 * This function will execute before each Test tag in testng.xml
	 * @param browser
	 * @throws Exception
	 */
	@BeforeTest
	@Parameters("browser")
	public void setup(String browser) throws Exception{
		//Check if parameter passed from TestNG is 'firefox'
		if(browser.equalsIgnoreCase("firefox")){
		//create firefox instance
			System.setProperty("webdriver.firefox.marionette", ".\\geckodriver.exe");
			driver = new FirefoxDriver();
		}
		//Check if parameter passed as 'chrome'
		else if(browser.equalsIgnoreCase("chrome")){
			//set path to chromedriver.exe
			System.setProperty("webdriver.chrome.driver",".\\chromedriver.exe");
			//create chrome instance
			driver = new ChromeDriver();
		}
		//Check if parameter passed as 'Edge'
				else if(browser.equalsIgnoreCase("Edge")){
					//set path to Edge.exe
					System.setProperty("webdriver.edge.driver",".\\MicrosoftWebDriver.exe");
					//create Edge instance
					driver = new EdgeDriver();
				}
		else{
			//If no browser passed throw exception
			throw new Exception("Browser is not correct");
		}
		driver.manage().timeouts().implicitlyWait(10, TimeUnit.SECONDS);
	}
	
	@Test
	public void testParameterWithXML() throws InterruptedException{
		driver.get("http://demo.guru99.com/V4/");
		//Find user name
		WebElement userName = driver.findElement(By.name("uid"));
		//Fill user name
		userName.sendKeys("guru99");
		//Find password
		WebElement password = driver.findElement(By.name("password"));
		//Fill password
		password.sendKeys("guru99");
	}
}

testing.xml

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE suite SYSTEM "http://testng.org/testng-1.0.dtd">

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

<test name="ChromeTest">

<parameter name="browser" value="Chrome" />

<classes>

<class name="parallelTest.CrossBrowserScript">

</class>

</classes>

</test>

<test name="FirefoxTest">

<parameter name="browser" value="Firefox" />

<classes>

<class name="parallelTest.CrossBrowserScript">

</class>

</classes>

</test>

<test name="EdgeTest">

<parameter name="browser" value="Edge" />

<classes>

<class name="parallelTest.CrossBrowserScript">

</class>

</classes>

</test>

</suite>

NOTE: To run the test, Right click on the testing.xml, Select Run As, and Click TestNG

Cross Browser Testing  using Selenium WebDriver

Summary

  1. Cross browser Testing is a technique to test web application with different web browsers.
  2. Selenium can support different type of browsers for automation.
  3. Selenium can be integrated with TestNG to perform Multi Browser Testing.
  4. From parameters in testing.xml we can pass browser name, and in a test case, we can create WebDriver reference accordingly.

Note: The given program was built & tested on selenium 3.0.1, Chrome 56.0.2924.87 , Firefox 47.0.2 & Microsoft Edge 14.14393. If the programs give an error, please update the driver

Download the Selenium Project Files for the Demo in this Tutorial