Know How to Perform Cross Browser Testing Using Selenium

With the increasing demand for automation testing, Selenium is one such tool which perfectly fits for Cross Browser Testing of a website. It is very necessary to check the compatibility and performance of the websites on different browsers and operating systems. So, this article on Cross Browser testing using Selenium will help you understand these concepts in depth. For further details, you can refer to the Selenium Course.

Below are the topics covered in this article:

• What is Cross Browser Testing?
• Why do you need Cross Browser testing?
• How to perform Cross Browser testing?
• Demo using Selenium

What is Cross Browser Testing?

Cross-browser testing is nothing but testing the application in multiple browsers like IE, Chrome, Firefox so that we can test our application effectively. Cross-browser compatibility is the ability of a website or web application to function across different browsers and operating systems. 

For Example– Say you have 20 test cases to execute manually.  You can complete this task in a day or two. But, if the same test cases have to be executed in five browsers, then probably you will take a week to complete it. However, if you automate these 20 test cases and run them, then it will not take more than an hour or two depending on the test case complexity. So that’s where cross-browser testing comes into the picture.

Now, let’s move further and see why do you need Cross Browser Testing in Selenium.

Why do you need Cross Browser Testing?

Every website is comprised of three major technologies i.e. HTML5, CSS3, and JavaScript. However, there are n number of technologies in the backend like Python, Ruby, etc can be used. But, in the front end and in the rendering, only these three technologies are used.

Also, each browser uses a completely different rendering engine to compute these three technologies. For example, Chrome uses Blink, Firefox uses Gecko and IE uses edge HTML and Chakra,  because of which the same website would be rendered completely differently by all these different browsers. And that’s exactly why you need cross-browser testing. That means the website should work perfectly fine, in all the different browser versions and in different operating systems. So to ensure that it works fine, cross-browser testing is required.

Along with that, I have listed a few reasons that depict the need for Cross Browser Testing.

• Browser compatibility with different OS.
• Image orientation.
• Each browser has a different orientation of Javascript which can cause issue sometimes.
• Font size mismatch or not rendered properly.
• Compatibility with the new web framework.

Now let’s move further and understand how to perform Cross Browser Testing.

How to Perform Cross Browser Testing?

Cross-browser testing is basically running the same set of test cases multiple times on different browsers. This type of repeated task is best suited for automation. Thus, it’s more cost and time effective to perform this testing by using tools. Now let’s see how it is performed using selenium web driver.

Step1: If we are using Selenium WebDriver, we can automate test cases using Internet Explorer, FireFox, Chrome, Safari browsers.

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

Step3: Finally, you can write the test cases and execute the code.

Now, let’s see how to perform cross-browser testing of Edureka website on three different browsers

Demo using Selenium WebDriver

package co.edureka.pages;

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 CrossBrowserScript {

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("webdriver.gecko.driver", "C:geckodriver-v0.23.0-win64geckodriver.exe");
driver = new FirefoxDriver();
}

//Check if parameter passed as 'chrome'
else if(browser.equalsIgnoreCase("chrome")){
//set path to chromedriver.exe
System.setProperty("webdriver.chrome.driver", "C:Selenium-java-edurekaNew folderchromedriver.exe");
driver = new ChromeDriver();

}
else if(browser.equalsIgnoreCase("Edge")){
//set path to Edge.exe
System.setProperty("webdriver.edge.driver","C:Selenium-java-edurekaMicrosoftWebDriver.exe");;span style="font-family: verdana, geneva, sans-serif; font-size: 14px;">//create Edge instance</span>
driver = new EdgeDriver();
}
else{
//If no browser passed throw exception
throw new Exception("Browser is not correct");
}
driver.manage().timeouts().implicitlyWait(10, TimeUnit.SECONDS);
}

@Test
public void testParameterWithXML() throws InterruptedException{
driver.get("https://www.edureka.co/");
WebElement Login = driver.findElement(By.linkText("Log In"));
//Hit login button
Login.click();
Thread.sleep(4000);
WebElement userName = driver.findElement(By.id("si_popup_email"));
//Fill user name
userName.sendKeys("your email id");
Thread.sleep(4000);
//Find password'WebElement password = driver.findElement(By.id("si_popup_passwd"));
//Fill password
password.sendKeys("your password");
Thread.sleep(6000);

WebElement Next = driver.findElement(By.xpath("//button[@class='clik_btn_log btn-block']"));
//Hit search button
Next.click();
Thread.sleep(4000);
WebElement search = driver.findElement(By.cssSelector("#search-inp"));
//Fill search box
search.sendKeys("Selenium");
Thread.sleep(4000);
//Hit search button

WebElement searchbtn = driver.findElement(By.xpath("//span[@class='typeahead__button']"));
searchbtn.click();
}
}

In the above code, I am performing actions on Edureka website like logging in to the website and searching for Selenium course. but, I want to check the cross-browser compatibility on three different browsers i.e Google Chrome, Mozilla Firefox, and Microsoft Edge. That’s why I have set the system properties of all the 3 browsers in my code. After that using locators I am performing actions on the website. So this is all about my class file. Now in order to execute the program, you need a TestNG XML file which contains the dependencies of the above class file. Below code depicts the TestNG file.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE suite SYSTEM "http://testng.org/testng-1.0.dtd">
<suite name="TestSuite" thread-count="2" parallel="tests" >
<test name="ChromeTest">
<parameter name="browser" value="Chrome"/>
<classes>
<class name="co.edureka.pages.CrossBrowserScript">
</class>
</classes>
</test>
<test name="FirefoxTest">
<parameter name="browser" value="Firefox" />
<classes>
<class name="co.edureka.pages.CrossBrowserScript">
</class>
</classes>
</test>
<test name="EdgeTest">
<parameter name="browser" value="Edge" />
<classes>
<class name="co.edureka.pages.CrossBrowserScript">
</class>
</classes>
</test>
</suite>

In the above XML file, I am specifying different classes for the drives so that it will help us in instantiating the browsers to execute the test cases on the website. That’s how it works.

With this, we come to an end of this article on Cross Browser Testing using Selenium Webdriver. I hope you understood the concepts and it added value to your knowledge.

Got a question for us? Please mention it in the comments section of Cross Browser Testing using the Selenium article and we will get back to you.