Cross Browser Testing Using Selenium

STC Admin

7 years ago

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.

S. No.	Microsoft IE	Google Chrome	Mozilla Firefox
1.	Look at the font size and dimensions on the Facebook web page on IE.	Different font size and dimensions from that of Microsoft IE and Mozilla Firefox.	Different font size and dimensions from that of Microsoft IE and Google Chrome.
2.	It has ‘Sign Up’ text on the button.	It has ‘Sign Up’ text on the button.	It has ‘Create an account’ text on the button.
3.	The left-hand side of the web page has no people connect image.	The left-hand side of the web page has no people connect image.	The left-hand side of the web page has people connect image.
4.	The right-hand side of the web page has heading in black color as ‘*Connect with friends and the world around you on Facebook.*’	The right-hand side of the web page has heading in black color as ‘*Connect with friends and the world around you on Facebook.*’	The right-hand side of the web page has heading in blue color as ‘*Facebook helps you connect and share with the people in your life.*’

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.

JavaScript behavior could be different on different web browsers.
CSS and HTML may behave in a different manner.
Some browsers do not support some of the HTML 5 tags.
The different browser has different page alignment.
Browsers may vary in image orientation.
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.

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.

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.

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.

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.


&amp;lt;br data-mce-bogus="1"&amp;gt;

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:

Happy Testing!!!