Cross Browser Testing Using Selenium WebDriver (Guide)

In Today’s world, technology is changing at a very fast pace; every day, new applications and new web browsers are getting launched. To perform well in this competitive market, software engineers need to develop an application that is highly stable across all web browsers.

An end user can use any browser of his/her choice, and they expect normal behavior from the application. To make sure this happens, cross-browser testing comes into the picture.

What Is Cross Browser Testing in Selenium?

Cross-browser testing or browser compatibility testing is a process that consists of testing and verifying websites or applications to determine whether they behave as per expectations or not. It’s a Non-Functional testing process.

Cross-browser testing is done to ensure the compatibility of web applications on different OS, devices, and browsers. This way, developers ensure that the end users get the best results without coping with any technical issues.

Types of Cross Browser Testing (Manual vs Automated)

 A Developer/Tester can perform browser testing in two ways:

1. Manual Cross Browser Testing:

 Using this method, users can install multiple browsers on their machine, try accessing the web application in all of them, and make a list of issues that they are observing in those browsers (Opera, Firefox, Safari, Chrome, Edge, IE).

They can perform negative testing as well, by putting the wrong address or by making a change through inspect view. We will be creating test cases that will cover all scopes of cross-browser testing for manual performance.

2. Automated Cross Browser Testing with Selenium

When cross-browser testing is performed using Automation or without manual intervention using tools like Selenium, Cypress, Playwright, UFT, and many more.

While doing testing through automation, test developers need to write scripts with the help of automation tools to open multiple browsers and access the URL/web application, and assert multiple checks and validations. Post automation run, we will get the end report where we can see how all browsers behaved in the expected way.

How to Perform Cross Browser Testing Using Selenium WebDriver

The first question that comes to mind while talking about Selenium is “What exactly is Selenium?”

So the answer is very simple: Selenium is an open-source suite of tools primarily used for automating web applications for testing purposes. It provides APIs to interact with web elements and simulate user interactions, such as clicking buttons, filling out forms, and validating results. Selenium WebDriver is one of its key components, enabling cross-browser testing by automating browsers for various platforms.

We can perform Scripting in Selenium using multiple languages such as Ruby, Python, Java, C#, and many more. 

Before jumping into cross-browser testing using Selenium, first, we need to understand what WebDriver.

So, Selenium WebDriver is a web framework that helps us in invoking multiple browsers and performing cross-browser testing. Using this tool, we can automate web-based applications and validate whether they perform in the expected way or not. We get the option to choose a programming language and create test scripts.

Setting Up Selenium WebDriver for Cross Browser Testing (Java Example)

In Java, we need the Selenium WebDriver Java bindings. And we can use a build tool like Maven or Gradle to manage dependencies, or manually download the JAR file from the Selenium website.

// System Property for Chrome Driver        System.setProperty(“webdriver.chrome.driver”,”D:\\ChromeDriver\\chromedriver.exe”);                 // Instantiate a ChromeDriver class. WebDriver driver=new ChromeDriver();

Let’s Understand Cross Browser testing using Selenium with JAVA in detail:

Eclipse Installation:

Below are the prerequisites

In our Java Framework, we need a pom.xml, Testng.xml and a test case for cross-browser testing.

Pom.xml:

POM.xml stands for Project Object Model XML. It is a file used in Apache Maven, a popular build automation and project management tool in the Java ecosystem. The POM.xml file is an essential part of a Maven project and is used to define various project-related information, dependencies, and build configurations.

Overview of what the POM.xml file contains:

• Project Information: The POM.xml file defines basic information about the project, such as the project’s name, version, description, and other metadata.
• Project Dependencies: It lists the external dependencies required by the project to compile and run. Maven uses these declarations to automatically download the required libraries from repositories.
• Build Settings: The POM.xml file includes configurations related to the build process, such as the source directory, test directory, build output directory, and various plugins to be used during the build.
• Plugins: Maven plugins are used to perform various tasks during the build process. The POM.xml file specifies which plugins should be used and their configurations.
• Profiles: Profiles allow you to define different sets of configurations that can be activated based on certain conditions, such as the build environment or specific requirements.
• Parent POM: A POM.xml file can also inherit from a parent POM, which helps in maintaining consistency and reusability across multiple projects.

<project xmlns=”http://maven.apache.org/POM/4.0.0″ xmlns:xsi=”http://www.w3.org/2001/XMLSchema-instance” xsi:schemaLocation=”http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd”> <modelVersion>4.0.0</modelVersion> <groupId>testframework</groupId> <artifactId>web-driver-3-cross-browser-framework</artifactId> <version>0.0.1-SNAPSHOT</version> <dependencies> <dependency> <groupId>org.seleniumhq.selenium</groupId> <artifactId>selenium-java</artifactId> <version>3.13.0</version> <scope>test</scope> </dependency> <!– https://github.com/bonigarcia/webdrivermanager –> <dependency> <groupId>io.github.bonigarcia</groupId> <artifactId>webdrivermanager</artifactId> <version>2.2.4</version> <scope>test</scope> </dependency> <dependency> <groupId>ch.qos.logback</groupId> <artifactId>logback-classic</artifactId> <version>1.0.13</version> <scope>test</scope> </dependency> <dependency> <groupId>org.testng</groupId> <artifactId>testng</artifactId> <version>6.14.3</version> <scope>test</scope> </dependency> <!– https://mvnrepository.com/artifact/com.codeborne/phantomjsdriver –> <dependency> <groupId>com.codeborne</groupId> <artifactId>phantomjsdriver</artifactId> <version>1.4.4</version> <scope>test</scope> </dependency> </dependencies> </project>

Configuring TestNG XML for Parallel Cross Browser Testing

TestNG XML is a configuration file used with the TestNG testing framework in Java. It is an XML file that allows you to define the test suite, test cases, test groups, test parameters, and various other configurations for your test execution. TestNG is an open-source testing framework inspired by JUnit and offers more features and flexibility for testing Java applications.

The TestNG XML file allows you to specify how your tests should be executed, which classes or methods to include or exclude, how to handle dependencies between tests, and how to generate test reports, among other things. It provides a powerful and flexible way to organize and execute your tests.

Below are some common elements that we can use in a TestNG XML file:

1. `<suite>`: The root element representing the test suite. It can contain more than one  `<test>` element.

2. `<test>`: Represents an individual test in the suite. You can define the test’s name, parallel execution settings, and list the test classes to be executed in the `<classes>` element.

3. `<classes>`: Contains a list of test classes that should be executed as part of the test.

4. `<groups>`: Allows you to specify which test groups to include or exclude from the test execution.

5. `<parameters>`: This enables you to set parameters that can be accessed from the test classes.

6. `<listeners>`: Allows you to configure test listeners, which can perform actions at various stages of the test execution.

7. `<reporters>`: Enables you to define test report output configurations.

<!DOCTYPE suite SYSTEM “http://testng.org/testng-1.0.dtd” > <suite name=”First Suite” verbose=”1″> <test name=”FirefoxTests”> <parameter name=”browser” value=”firefox”/> <packages> <package name=”com.Testframework.selenium.crossbrowser.framework.*”/> </packages> </test> <test name=”ChromeTests”> <parameter name=”browser” value=”chrome”/> <packages> <package name=”com.Testframework.selenium.crossbrowser.framework.*”/> </packages> </test> </suite>

Selenium Chrome Browser Test Example (Java)

package com.testframework.selenium.crossbrowser; import org.openqa.selenium.WebDriver; import org.openqa.selenium.chrome.ChromeDriver; import org.openqa.selenium.edge.EdgeDriver; import org.openqa.selenium.firefox.FirefoxDriver; import org.openqa.selenium.ie.InternetExplorerDriver; import org.openqa.selenium.safari.SafariDriver; import org.testng.annotations.Ignore; import org.testng.annotations.Test; import io.WebDriverManager; public class CrossBrowserBasicsTest { @Test public void chromeBrowser() { // Chrome // Chrome Web Driver EXE WebDriverManager.chromedriver().setup(); // WebDriver Interface – Create an instance of the web driver of the browser WebDriver driver = new ChromeDriver(); // Launch a web page driver.get(“http://localhost:8080/pages/tables.html”); sleep(5); driver.quit(); } @Test public void firefoxBrowser() { // Firefox // Firefox Web Driver EXE WebDriverManager.firefoxdriver().setup(); // WebDriver Interface – Create an instance of the web driver of the browser WebDriver driver = new FirefoxDriver(); // Launch a web page driver.get(“http://localhost:8080/pages/tables.html”); sleep(5); driver.quit(); } @Test public void safariBrowser() { // Safari // Make sure you set Develop | Allow Remote Automation option from Safari’s main // menu // Couldn’t create a session: You can enable the ‘Allow Remote Automation’ // option in Safari’s Develop menu to control Safari via WebDriver. // Safari Web Driver EXE WebDriverManager.safaridriver().setup(); // WebDriver Interface – Create an instance of the web driver of the browser WebDriver driver = new SafariDriver(); // Launch a web page driver.get(“http://localhost:8080/pages/tables.html”); sleep(5); driver.quit(); } @Test @Ignore public void ieBrowser() { WebDriverManager.iedriver().setup(); // WebDriver Interface – Create an instance of the web driver of the browser WebDriver driver = new InternetExplorerDriver(); // Launch a web page driver.get(“http://localhost:8080/pages/tables.html”); sleep(5); driver.quit(); } @Test @Ignore public void edgeBrowser() { WebDriverManager.edgedriver().setup(); // WebDriver Interface – Create an instance of the web driver of the browser WebDriver driver = new EdgeDriver(); // Launch a web page driver.get(“http://localhost:8080/pages/tables.html”); sleep(5); driver.quit(); } private void sleep(int i) { try { Thread.sleep(i * 1000); } catch (InterruptedException e) { // TODO Auto-generated catch block e.printStackTrace(); } } }

Running Selenium Tests in Headless Chrome Mode

package com.testframework.selenium.crossbrowser; import org.openqa.selenium.WebDriver; import org.openqa.selenium.chrome.ChromeDriver; import org.openqa.selenium.chrome.ChromeOptions; import org.openqa.selenium.firefox.FirefoxDriver; import org.openqa.selenium.firefox.FirefoxOptions; import org.openqa.selenium.phantomjs.PhantomJSDriver; import org.testng.annotations.Test; import io.WebDriverManager; public class HeadlessBrowserBasicsTest { @Test public void chromeBrowser() { // Chrome // Chrome Web Driver EXE WebDriverManager.chromedriver().setup(); // WebDriver Interface – Create an instance of the web driver of the browser WebDriver driver = new ChromeDriver(); // Launch a web page driver.get(“http://localhost:8080/pages/tables.html”); sleep(5); driver.quit(); } @Test public void chromeBrowserHeadlessBrowsing() { // Chrome // Chrome Web Driver EXE WebDriverManager.chromedriver().setup(); ChromeOptions options = new ChromeOptions(); options.setHeadless(true); // WebDriver Interface – Create an instance of the web driver of the browser WebDriver driver = new ChromeDriver(options); // Launch a web page driver.get(“http://localhost:8080/pages/tables.html”); sleep(5); driver.quit(); } @Test public void firefoxBrowser() { // Firefox // Firefox Web Driver EXE WebDriverManager.firefoxdriver().setup(); // WebDriver Interface – Create an instance of the web driver of the browser WebDriver driver = new FirefoxDriver(); // Launch a web page driver.get(“http://localhost:8080/pages/tables.html”); sleep(5); driver.quit(); } @Test public void firefoxBrowserHeadlessBrowsing() { // Firefox // Firefox Web Driver EXE WebDriverManager.firefoxdriver().setup(); FirefoxOptions options = new FirefoxOptions(); options.setHeadless(true); // WebDriver Interface – Create an instance of the web driver of the browser WebDriver driver = new FirefoxDriver(options); // Launch a web page driver.get(“http://localhost:8080/pages/tables.html”); sleep(5); driver.quit(); } @Test public void phanthomJS() { WebDriverManager.phantomjs().setup(); WebDriver driver = new PhantomJSDriver(); // Launch a web page driver.get(“http://localhost:8080/pages/tables.html”); sleep(5); driver.quit(); } private void sleep(int i) { try { Thread.sleep(i * 1000); } catch (InterruptedException e) { // TODO Auto-generated catch block e.printStackTrace(); } } }

Now we will understand how to perform automation using Selenium for performing cross-browser testing using the most common scripting languages ( Ruby, Python, and C#)

Cross Browser Testing in Selenium Using Ruby

 Most importantly, Ruby is installed in the system, and then we will install the Gem for Selenium WebDriver.

ruby gem install selenium-webdriver

Ruby Selenium Test Example

require ‘selenium-webdriver’   # Define the desired browser (e.g., :chrome, :firefox, :safari) browser = :chrome  # Create a WebDriver instance driver = Selenium::WebDriver.for browser  # Navigate to a website driver.navigate.to ‘https://example.com’  # Perform tests or interactions # …  # Close the browser driver.quit

Cross Browser Testing in Selenium Using Python

 First, we need to make sure Python is installed in the system, and after tha,t we will perform the installation using the PIP command

bash pip install selenium

Python Selenium Test Example for Multiple Browsers

from selenium import webdriver   # Define the desired browser (e.g., ‘chrome’, ‘firefox’, ‘safari’, ‘opera’) browser = ‘chrome’   # Create a WebDriver instance for testcase driver = webdriver.Chrome() if browser == ‘chrome’ else webdriver.Firefox()   # Navigate to a website driver.get(‘https://example.com’)   # Perform tests # …   # Close browser driver.quit()

Cross Browser Testing in Selenium Using C#

Search for Selenium Webdriver and add the package. In the Package Explorer window:– Click on Browse,

Step1. In the Search box type Selenium Step2. Choose Selenium.Webdriver by Selenium Step3. On the window to the right, select the checkbox which shows Project Name Step 4. Click on Install

C# Selenium Test Example

using OpenQA.Selenium; using OpenQA.Selenium.Firefox; using OpenQA.Selenium.IE; using OpenQA.Selenium.Chrome; namespace MultipleBrowserTesting { [TestFixture(typeof(FirefoxDriver))] [TestFixture(typeof(ChromeDriver))] [TestFixture(typeof(InternetExplorerDriver))] public class BlogTest<TWebDriver> where TWebDriver : IWebDriver, new() { private IWebDriver _driver; [Test] public void Can_Visit_Google() {      _driver = new TWebDriver();        // Navigate      _driver.Manage().Window.Maximize();      _driver.Navigate().GoToUrl(“http://www.google.com/”); } [TestFixtureTearDown] public void FixtureTearDown() {      if (_driver != null)          _driver.Close(); } } }

Best Practices and Key Considerations for Cross Browser Testing

• Use Browser-specific Drivers: For each browser, you need to download and set up the appropriate WebDriver (e.g., ChromeDriver for Chrome, GeckoDriver for Firefox). Ensure you have the correct version of the driver that matches your browser version and update it whenever required.
• Handle Synchronization: Different browsers may have varying rendering speeds, which can lead to synchronization issues in your tests. Use explicit waits to ensure elements are present before interacting with them.
• Optimize for Internet Explorer: Its limited CSS support can cause layout issues. Address this with a dedicated IE stylesheet and a doctype hack to ensure a seamless experience for all users.
• Verify Layouts and CSS: Cross-browser testing should not only validate functionality but also ensure consistent layouts and CSS rendering across browsers.
• Use the Right Javascript libraries & task runners: Grab the right JavaScript “toolbox” for your site and browsers. Think of “task runners” as helpers: they organize, shrink code, and catch errors, making your site faster and testing smoother. Grunt and Gulp are popular choices, letting you customize tasks for extra speed. Choose tools that work best for your site and team, saving you time and effort on your test drive!
• Execute Tests on Multiple Browsers: It’s crucial to run your tests on various browsers, such as Chrome, Firefox, Safari, Edge, and others, to cover a wide range of user devices and preferences.
• Cloud-Based Testing Platforms: Consider using cloud-based testing platforms like TestGrid or Sauce Labs to easily scale your cross-browser testing across different OS and browser combinations.

Conclusion

Cross-browser testing with Selenium is an important step in ensuring a seamless user experience of web applications across various browsers and platforms. Selenium WebDriver, with its support for multiple programming languages, provides a great way to automate this testing process. In this article, we explored how to perform cross-browser testing using Selenium with code snippets in Ruby, Python, C#, and Java. By following these best practices, you can catch browser-specific issues early in the development cycle and deliver a high-quality web application to your users. Happy testing!