Cross Browser Testing using Selenium WebDriver: Tutorial

Selenium is a test automation framework popular for cross browser testing as it offers browser automation support to different browsers such as chrome, firefox, IE and edge with its browser specific WebDrivers.

Cross browser testing with Selenium helps ensure that the web apps look and function alike irrespective of the browser that it is accessed from. You can create test scripts using different programming languages like Java, Python, PHP, etc using Selenium. You can test your web apps on different browsers like Google Chrome, Safari, Firefox, IE, Edge, Opera etc.

What is Selenium WebDriver?

Selenium WebDriver is an open-source tool that automates web browser actions, allowing testers to control browsers programmatically. It supports several programming languages, including Java, Python, C#, and JavaScript, making it versatile and accessible to a broad range of developers.

How does selenium help with Cross Browser Testing?

Selenium supports Cross Browser Testing. By using browser-specific drivers (like ChromeDriver for Chrome or GeckoDriver for Firefox), Selenium WebDriver interacts directly with each browser, simulating real user actions such as clicking, typing, and navigating between pages.

WebDriver is especially valuable for cross-browser testing. It helps teams test their web applications across multiple browsers and operating systems to ensure consistent functionality and appearance.

For example, a test script created with Selenium WebDriver can run on Chrome, Firefox, Safari, and Edge, identifying any browser-specific issues that might affect user experience.

This capability is essential in a diverse web environment, where users access applications on various browsers and devices.

Run Selenium Webdriver Test for Free

What is Cross Browser Testing in Selenium?

Cross browser testing refers to testing a website in multiple browsers like IE, Chrome, Firefox to check its efficacy on each. Cross-browser compatibility is the ability of the website or web application to function across different browsers and operating systems.

However, manually testing a website across multiple browsers is exceptionally tedious. Consider a situation in which 100 test cases have to be run manually. Now imagine that the same tests have to be run on five different browsers. The time taken becomes exponentially longer. However, if these tests are automated using Selenium, then they can be run simultaneously and in far less time. It will also prevent any issue arising from human error.

Why is Cross Browser Testing Important?

Browser vendors follow Open Web Standards, but they have their own interpretations of them. Since they each render HTML, CSS, and JavaScript in unique ways, thoroughly debugging a website’s source code is not enough to ensure that the site will look and behave as intended on different browsers (or different versions of a single browser).

So it falls to web developers to abstract browser differences. Cross browser compatibility testing helps with that by pinpointing browser-specific compatibility errors so they can be debugged quickly. It helps ensure that a site is not alienating a significant part of its target audience–simply because the website does not work on their browser OS.

To know more about what features are analyzed, how to select a browser, and when to go for cross-browser testing, refer to this article on Cross Browser Testing.

Now, let’s look at how to perform cross-browser testing using Selenium.

How to do Cross Browser Testing using Selenium WebDriver?

As already mentioned, Selenium is the most popular automation testing tool for various functionalities. Cross-browser testing is one such feature supported by Selenium, which can be performed via the steps below:

Step1: Test cases can be automated using Internet Explorer, Firefox, Chrome, and Safari browsers with the help of Selenium WebDriver

Step 2: To execute test cases with different browsers in the same machine at the same time a TestNG framework can be integrated with Selenium WebDriver.

Step3: Write the test cases. The article features code that will test the BrowserStack home page on three different browsers – Chrome, Edge, and Firefox.

package com.qa.testcases;
import java.time.Duration;
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.testng.Assert;
import org.testng.annotations.BeforeTest;
import org.testng.annotations.Parameters;
import org.testng.annotations.Test;

public class CrossBrowserTestingScript {
      WebDriver driver;

      @BeforeTest
      @Parameters("browser")
      public void setup(String browser) throws Exception {
            if (browser.equalsIgnoreCase("firefox")) {
                  driver = new FirefoxDriver();
            } else if (browser.equalsIgnoreCase("chrome")) {
                  driver = new ChromeDriver();
            } else if (browser.equalsIgnoreCase("Edge")) {
                  driver = new EdgeDriver();
            } else {
                  throw new Exception("Incorrect Browser");
            }
            driver.manage().timeouts().implicitlyWait(Duration.ofSeconds(5));
      }

      @Test
      public void verifyTitle() {
            driver.get("https://www.browserstack.com/");
            System.out.println("Title is: " + driver.getTitle());
            Assert.assertEquals(driver.getTitle(), "Most Reliable App & Cross Browser Testing Platform | BrowserStack");
            driver.quit();
      }

}

The code above tries to access the BrowserStack page through three different web browsers by setting the system properties of the respective browsers. Now to run the test cases, let’s write the testng.xml file.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE suite SYSTEM "https://testng.org/testng-1.0.dtd">
<suite name="Suite" thread-count="5" parallel="tests">

      <test thread-count="5" name="ChromeTest">
            <parameter name="browser" value="chrome"></parameter>
            <classes>
                  <class name="com.qa.testcases.CrossBrowserTestingScript" />
            </classes>
      </test> <!-- Test -->

      <test thread-count="5" name="FirefoxTest">
            <parameter name="browser" value="firefox"></parameter>
            <classes>
                  <class name="com.qa.testcases.CrossBrowserTestingScript" />
            </classes>
      </test> <!-- Test -->
      <test thread-count="5" name="EdgeTest">
            <parameter name="browser" value="edge"></parameter>
            <classes>
                  <class name="com.qa.testcases.CrossBrowserTestingScript" />
            </classes>
      </test> <!-- Test -->
</suite> <!-- Suite -->

In this XML file, the code specifies different classes for the drives to instantiate the browsers to execute the test cases on the website. That’s how it works.

Run your first Selenium Test on BrowserStack for Free

Best practices to do Cross Browser Testing in Selenium

The following are best practices that should be adhered to while performing multi browser testing using Selenium.

• Choose libraries and frameworks cautiously

Testing web apps require libraries and frameworks. Before commencing development, keep in mind that the latest CSS frameworks can help create the most vivid and dynamic user experience, but they might not be compatible with every browser since every browser has a specific browser rendering engine. Before using the latest CSS or JS libraries or frameworks, read browser guidelines to determine if they support those libraries and frameworks.

• Use proper Javascript libraries and task runners

JavaScript plays an important role in web app development, so it is crucial to use the right JavaScript resources that meet site requirements and offer compatible browser support.

Among task runners, there are multiple options to choose from. Grunt and Gulp stand out because they can be automated according to requirements. They also enhance the overall application performance by providing compilation, linting, minification, and other features that improve code quality after compilation.

• Carefully identify and analyze the Browser-OS configuration

QAs need to decide which browsers and operating systems a site needs to be tested on. Every browser has multiple versions, and some browsers even update continuously – at least once a month. Thus, it is necessary to verify which browser, browser versions, and OS are required to perform cross browser testing using Selenium. Prioritize the combinations that the largest segments of the target audience is likely to use.

• Optimize Internet Explorer

Internet Explorer doesn’t support advanced CSS styles and framework. Even if a site is the absolute pinnacle of aesthetic appeal, chances are that many of its design elements will be distorted when accessed via IE. To remedy this, create a separate stylesheet for IE and add a hack in the doctype.

Talk to an Expert

Why Run Selenium WebDriver Tests on Real Devices?

Running Selenium WebDriver tests on real devices and browsers is essential to ensure a consistent, high-quality user experience. Each device and browser may render web pages differently. Hence, testing in real environments helps capture these variations accurately.

Unlike emulators or simulators, real devices provide genuine insights into how an application will perform for actual users. This approach helps identify and fix browser- or device-specific issues.

However, procuring the latest devices and maintaining various browser versions can be challenging and costly. A real device cloud platform is a practical solution, providing access to a wide range of device and browser combinations without needing physical infrastructure.

Testing on real devices delivers reliable performance insights and improves the accuracy of cross-browser testing efforts.

Why choose BrowserStack to execute Selenium WebDriver Tests?

BrowserStack Automate offers a real device cloud with a robust setup for executing Selenium WebDriver tests across various device and browser configurations. Here’s why BrowserStack stands out:

• Parallel Testing: BrowserStack Automate allows you to run tests in parallel across multiple devices and browser versions, which accelerates test execution and speeds up feedback loops, crucial for agile development.
• Real Devices and Browsers: By testing on actual devices and browsers, BrowserStack ensures accurate performance insights, giving you a reliable view of how applications behave on the latest devices without purchasing them.
• Dedicated Dashboard: BrowserStack Automate’s intuitive dashboard makes it easy to manage and track tests. It shows test statuses, device details, duration, and screenshots for comprehensive test analysis.
• Custom Reports: Generate detailed reports that include test outcomes, device and browser configurations, screenshots, and video recordings, which are valuable for debugging and documentation.
• Seamless CI/CD Integration: BrowserStack integrates smoothly with CI/CD tools like Jenkins, TeamCity, and TravisCI, enabling continuous, reliable testing for faster application delivery.

Conclusion

Cross-browser testing with Selenium WebDriver is essential for ensuring consistent functionality across various browsers, operating systems, and devices. By leveraging BrowserStack Automate and Cloud Selenium Grid, teams can efficiently run Selenium tests in parallel across more than 3,500 browser, OS, and device combinations.

This cloud-based approach reduces infrastructure costs, speeds up testing, and enhances coverage. It makes it easier to deliver a great user experience across diverse environments.

Try BrowserStack Now