Cross Browser Testing Using Selenium

• STC Admin
• August 28, 2017

In this chapter, we are going to discuss Cross browser testing using Selenium Webdriver. It is a kind of functional testing that tests whether the application under test is working as expected across available web browsers.

Many times we might have observed that for the same web URL, a website running on Google Chrome looks different from that the other running on MozillaFirefox or Microsoft IE. Here, is the following example.

In the following screenshot, we have browsed Facebook URL on Microsoft IE.

In the following screenshot, we have browsed Facebook URL on Google Chrome.

In the following screenshot, we have browsed Facebook URL on Mozilla Firefox.

Following is the comparison of above three screenshots on a different web browser.

Above comparison proves that the same website URL behaves differently on different web browsers. There could be other reasons that demands cross browser testing as follows.

1. JavaScript behavior could be different on different web browsers.
2. CSS and HTML may behave in a different manner.
3. Some browsers do not support some of the HTML 5 tags.
4. The different browser has different page alignment.
5. Browsers may vary in image orientation.
6. Other incompatible features, etc.

Because of these variations, the cross browser testing is a challenge and such an application should be tested separately on these browsers by using appropriate Selenium web driver.

Cross Browser Testing using Selenium Webdriver

Selenium Web driver has support for different web browsers and for each web browser following are the WebDriver classes.

• FirefoxDriver – This WebDriver class is used when we test a web application using Mozilla Firefox web browser.
• ChromeDriver – This WebDriver class is used when we test a web application using Google Chrome web browser.
• InternetExplorerDriver – This WebDriver class is used when we test a web application using Microsoft IE web browser.
• SafariDriver – This WebDriver class is used when we test a web application using Safari web browser.

Let’s understand these WebDrivers with the following examples.

1. FirefoxDriver

Following is the program that uses Firefox driver to fetch the heading on the Facebook page.

package seleniumpackage;

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.firefox.FirefoxDriver;

public class CrossBrowserTesting {

public static void main(String[] args) {

//declaration and instantiation of objects/variable
WebDriver driverFF = new FirefoxDriver();
String baseWebUrl = "https://www.facebook.com/";
driverFF.get(baseWebUrl);

//String heading = driverFF.findElement(By.tagName("h2")).getText();
String heading = driverFF.findElement(By.xpath("//*[@id='content']/div/div/div/div[2]/div[1]/div[1]"))
.getText();
System.out.println("Heading on the Web Page is: "+ heading);

//closing Firefox Browser
driverFF.close();

//Exiting the System
System.exit(0);
}
}

Explanation of code

• In the above program, we first instantiate FirefoxDriver class and then use that instance to invoke and load Facebook login page.
• Using the driver instance, we find the element on that web page using the XPath as ‘//body/div/div/div/div/div/div/div/div/div/div’ which is a heading on the Facebook
• We are fetching the text from this web element and displaying in the console as ‘Heading on the Web Page is: Facebook helps you connect and share with the people in your life.’

In the above test, only Mozilla Firefox browser will be used throughout the testing as we are invoking Firefox web driver.

2. Internet Explorer Driver

Following is the program that uses InternetExplorer driver to fetch the heading on the Facebook page. InternetExplorerDriver requires an additional driver file known as ‘IEDriverServer.exe’ that can be downloaded from the Selenium website (http://www.seleniumhq.org/download/) and this exe file is required to be placed in the project directory and need to be configured accordingly as shown below.

package seleniumpackage;

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.ie.InternetExplorerDriver;

public class UsingIEWebDriver {
public static void main(String[] args) {

//declaration and instantiation of objects/variables
WebDriver driverIE = new InternetExplorerDriver();
String baseWebUrl = "https://www.facebook.com/";
driverIE.get(baseWebUrl);
String heading = driverIE.findElement(By.xpath("//*[@id='content']/div/div/div/div[2]/div[1]/div[1]"))
.getText();
System.out.println("Heading on the Web Page is: "+ heading);

//closing IE Browser
driverIE.close();

//Exiting the System
System.exit(0);
}
}

Explanation of code

• In the above program, we first instantiate InternetExplorerDriver class and then use that instance to invoke and load Facebook login page.
• Using the driver instance, we find the element on that web page using the XPath as ‘//body/div/div/div/div/div/div/div/div/h2’ which is a heading on the Facebook
• We are fetching the text from this web element and displaying in the console as ‘Heading on the Web Page is: Connect with friends and the World around you on Facebook.’

In the above test, only Microsoft IE browser will be used throughout the testing as we are invoking InternetExplorer web driver.

3. Google Chrome Driver

Following is the program that uses Chrome driver to fetch the heading on the Facebook page. ChromeDriver requires an additional driver file known as ‘chromedriver.exe’ that can be downloaded from the Selenium website (http://www.seleniumhq.org/download/) and this exe file is required to be placed in the project directory and need to be configured accordingly as shown below.

//declaration and instantiation of objects/variables
System.setProperty("webdriver.chrome.driver", ".//chromedriver.exe");
WebDriver driverGC = new ChromeDriver();

package seleniumpackage;

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;

public class UsingChromeWebDriver {
public static void main(String[] args) {

//declaration and instantiation of objects/variables
System.setProperty("webdriver.chrome.driver", ".//chromedriver.exe");
WebDriver driverGC = new ChromeDriver();
String baseWebUrl = "https://www.facebook.com/";
driverGC.get(baseWebUrl);
String heading = driverGC.findElement(By.xpath("//*[@id='content']/div/div/div/div[2]/div[1]/div[1]"))
.getText();
System.out.println("Heading on the Web Page is: "+ heading);

//closing Google Chrome Browser
driverGC.close();

//Exiting the System
System.exit(0);
}
}

Explanation of code

• In the above program, we first instantiate ChromeDriver class and then use that instance to invoke and load Facebook login page.
• Using the driver instance, we find the element on that web page using the XPath as ‘//body/div/div/div/div/div/div/div/div/h2’ which is a heading on the Facebook
• We are fetching the text from this web element and displaying in the console as ‘Heading on the Web Page is: Connect with friends and the World around you on Facebook.’

In the above test, only Google Chrome browser will be used throughout the testing as we are invoking Chrome web driver.

4. Safari Driver

Following is the program that uses Safari driver to fetch the heading on the Facebook page. Before we can start testing any web application using Safari web browser, we need to manually install an extension known as ‘SafariDriver.safariextz’ after downloading it from Selenium website (http://www.seleniumhq.org/download/) at the following link.

<br data-mce-bogus="1">

Explanation of code

• In the above program, we first instantiate SafariDriver class and then use that instance to invoke and load Facebook login page.
• Using the driver instance, we find the element on that web page using the XPath as ‘//body/div/div/div/div/div/div/div/div/h2’ which is a heading on the Facebook
• We are fetching the text from this web element and displaying in the console as ‘Heading on the Web Page is: Connect with friends and the World around you on Facebook.’

In the above test, only Safari browser will be used throughout the testing as we are invoking Safari web driver.

Output Console for Chrome, IE, and Safari.

Conclusion

In this chapter, we have discussed the need for cross browser testing and implemented the use of various Selenium web drivers for testing Facebook login page to understand the difference in the testing across different web browsers.

Download all above source code from here: Download Code

⇓ Subscribe below ⇓

If you are not a regular reader of this website then highly recommends you to Sign up for our free email newsletter!! Sign up just providing your email address below:

Check email in your inbox for confirmation to get latest updates Software Testing for free.

Happy Testing!!!

Download 200+ Software Testing Interview Questions and Answers PDF!!

Popular Tutorial Series

Recent Posts

• What Exactly Is a Test Environment in Software Testing?
• Selenium Vs Playwright: Which Tool is Better?
• Top 10 RPA Tools for 2025
• The Ultimate Robotic Process Automation Tutorial Series
• Accelerate your Oracle EBS Testing with OpKey’s AI powered Continuous Test Automation Platform
• What The various DevOps Tools List?