Cross Browser Testing using Selenium WebDriver

Why do we need Cross Browser Testing?

Web-based applications are very different from native desktop applications. A web application can be opened in any browser by the end user. For example, some people prefer to open https://twitter.com in Firefox, while others use Chrome, Safari, or Microsoft Edge.

In the diagram below you can observe that in older browsers, the login box of Twitter does not render rounded corners correctly, while modern Chrome renders the corners as designed.

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 objective can be fulfilled with Cross Browser Testing of the product on every browser in scope.

Reasons for Cross Browser Issues

1. Font size mismatch in different browsers.
2. JavaScript engine implementations differ across Chrome (V8), Firefox (SpiderMonkey), Safari (JavaScriptCore), and Edge.
3. CSS and HTML validation differences, including vendor prefix handling.
4. Inconsistent or partial HTML5 and ECMAScript feature support in older browser versions.
5. Page alignment, div sizing, and flexbox or grid rendering variations.
6. Image orientation and color profile differences.
7. Browser incompatibility with the underlying operating system, including mobile WebView quirks on Android and iOS.

How to Do Cross Browser Testing

If we are using Selenium WebDriver, we can automate test cases against Chrome, Firefox, Microsoft Edge, and Safari browsers.

To execute test cases with different browsers on the same machine at the same time, we can integrate the TestNG framework with Selenium WebDriver. For broader OS and version coverage, the same suite can be pointed at cloud grids such as Sauce Labs, BrowserStack, or LambdaTest through a remote WebDriver endpoint.

Your testing.xml will look like this:

This testing.xml will map with the Test Case which looks like this:

Because the testing.xml has multiple Test tags (‘ChromeTest’, ‘FirefoxTest’, ‘EdgeTest’), this test case will execute once for each browser.

The first Test ‘ChromeTest’ will pass the value of parameter ‘browser’ as ‘chrome’, so ChromeDriver will be executed. This test case will run on the Chrome browser.

The second Test ‘FirefoxTest’ will pass the value of parameter ‘browser’ as ‘Firefox’, so FirefoxDriver will be executed. This test case will run on the Firefox browser. Adding an Edge or Safari test follows the same pattern.

Guru99CrossBrowserScript.java

Complete Code:

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.openqa.selenium.safari.SafariDriver;
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.gecko.driver", ".\\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 msedgedriver.exe
			System.setProperty("webdriver.edge.driver",".\\msedgedriver.exe");
			//create Edge instance
			driver = new EdgeDriver();
		}
		//Check if parameter passed as 'Safari'
		else if(browser.equalsIgnoreCase("Safari")){
			//SafariDriver ships with macOS, no driver path needed
			driver = new SafariDriver();
		}
		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("https://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="3" 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 testing.xml, select Run As, and click TestNG Suite.

Scaling with Cloud Browser Grids

Running Selenium WebDriver locally covers two or three browsers, but real users access sites from hundreds of OS and browser combinations. Cloud labs such as Sauce Labs, BrowserStack, and LambdaTest expose a remote WebDriver endpoint. Point the same Selenium tests at the grid, pass desired capabilities for the browser, version, OS, and resolution, and the suite scales horizontally without managing local drivers.

Modern grids also surface AI-assisted features such as visual regression diffing, self-healing element locators, and flakiness scoring, which reduce maintenance overhead on long-lived Cross Browser Testing suites.

Note: The given program was built and tested on Selenium 4, Chrome, Firefox, and Microsoft Edge. If the programs give an error, please update the driver binaries to match your installed browser version, or use Selenium Manager which resolves drivers automatically.

Download the Selenium Project Files for the Demo in this Tutorial

FAQs