Home Guide Cross Browser Testing in Selenium : Tutorial

Cross Browser Testing in Selenium : Tutorial

By Neha Vaidya, Community Contributor -

When verifying website functionality, testers try to perform tests on all possible browsers and browser versions. These tests are often performed using Selenium as it is equipped to facilitate cross-browser testing. This article dives deep to understand how to perform cross browser testing using Selenium.

Topics covered in this article:

  • Overview of Cross Browser Testing in Selenium
  • How to perform Cross Browser testing
  • Best Practices for Multi-Browser Testing using Selenium

Let’s get started!

What is Cross Browser Testing in Selenium?

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 it. 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, 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 perform Cross Browser Testing using Selenium?

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, 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 test;
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 CrossBrowserTestingScript {
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("Path of your gecko driver");
driver = new FirefoxDriver();
}
//Check if parameter passed as 'chrome'
else if(browser.equalsIgnoreCase("chrome")){
//set path to chromedriver.exe
System.setProperty("Path of your chrome driver");
driver = new ChromeDriver();
}
else if(browser.equalsIgnoreCase("Edge")){
//set path to Edge.exe
System.setProperty("Path of edge driver”);
driver = new EdgeDriver();
}
else{
//If no browser is passed throw exception
throw new Exception("Incorrect Browser");
}
driver.manage().timeouts().implicitlyWait(10, TimeUnit.SECONDS);
}
@Test
public void testParameterWithXML() throws InterruptedException{
driver.get("https://www.browserstack.com/");
WebElement Login = driver.findElement(By.linkText("Sign in"));
//Hit Signin button
Login.click();
Thread.sleep(4000);
WebElement userName = driver.findElement(By.id("user_email_login"));
//Fill user name
userName.sendKeys("your email id");
Thread.sleep(4000);
//Find password'
WebElement password = driver.findElement(By.id("user_password"));
//Fill password
password.sendKeys("your password");
Thread.sleep(6000);
WebElement Signin= driver.findElement(By.(id("user_submit"));
//Hit search button
Signin.click();
Thread.sleep(4000);
}
}

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 "<a href="http://testng.org/testng-1.0.dtd">http://testng.org/testng-1.0.dtd</a>">
<suite name="TestSuite" thread-count="2" parallel="tests" >
<test name="ChromeTest">
<parameter name="browser" value="Chrome"/>
<classes>
<class name="test.CrossBrowserTestingScript">
</class>
</classes>
</test>
<test name="FirefoxTest">
<parameter name="browser" value="Firefox" />
<classes>
<class name="test.CrossBrowserTestingScript">
</class>
</classes>
</test>
<test name="EdgeTest">
<parameter name="browser" value="Edge" />
<classes>
<class name="test.CrossBrowserTestingScript">
</class>
</classes>
</test>
</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 for 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.

Conclusion

Performing cross browser testing using Selenium is of utmost importance as it ensures that the web-app is cross browser compatible and provides a robust user experience across the board.

As always, cross browser tests must be run on a real device cloud to get completely accurate results. BrowserStack’s cloud Selenium grid of 2000+ real browsers and devices allows testers to automated visual UI tests in real user conditions. Simply sign up, select a device-browser-OS combination, and start running tests for free.

BrowserStack Logo Run Selenium Tests on 2000+ Browsers & Devices Run a Free Test Now