What Is Cross Browser Testing In Selenium & How To Perform It
Cross Browser Testing is a sort of testing to confirm if an application works across various browsers true to its form and degrades in a graceful manner.
It is a crucial process that helps in confirming the application’s compatibility with various programs. This is relevant to both web as well as mobile applications.
While checking the site’s functionality, testers attempt to perform tests on every single imaginable browser along with various browser versions.
These tests are frequently performed utilizing Selenium Automation Testing as it has all the necessary features to enable cross-program testing.
What Is Cross Browser Testing In Selenium?
Cross-browser testing alludes to testing a site in numerous browsers like Internet Explorer, Chrome and Firefox to check its viability on each of the browsers.
Cross-browser compatibility is the capacity of the site or web application to work across various browsers and frameworks.
Quick read – How to Become a Pen Tester
Manually testing a site over different browsers is an incredibly time-taking process. Consider a circumstance wherein 100 test cases must be run manually.
Now envision that same tests must be run on five unique browsers.
The time taken turns out to be exponentially more.
Although, if these tests are automated utilizing Selenium, they can be run altogether and in relatively less time. It will likewise forestall any issue emerging from human error.
Why Is Cross Browser Testing So Significant?
Each site comprises of three significant technologies, such as HTML5, CSS3, and JavaScript.
Although, there are n number of backend technologies like Python, Ruby, and so on that can also be utilized. However, in the front end as well in the rendering, just these three technologies are utilized.
Additionally, every browser utilizes a totally unique rendering engine to compute and register these three technologies.
For instance, Chrome utilizes Blink, Firefox utilizes Gecko and IE utilizes Edge HTML and Chakra, due to which the same site would be rendered in a totally different manner by all these browsers.
This is why it is essential to learn cross-browser testing, which implies that the site should work entirely fine, in all the diverse browser versions and adaptations as well as in various operating systems.
So to guarantee that it works fine, cross-program testing is required.
What Is The Requirement For Cross Browser Testing?
The following are some of the crucial reasons for the requirement of Cross Browser Testing:
- To ensure that there is browser compatibility with various operating systems.
- To make sure that there is proper image orientation.
- To resolve the problem which arises when every program has an alternate orientation of Javascript, which can cause issues here and there.
- To solve the problem of font size mismatch when it is not rendered correctly.
- To get a proper mobile view of website.
How To Perform Cross Browser Testing Utilizing Selenium?
Selenium is the most famous automation testing apparatus for different functionalities. Cross-browser testing is one such element supported by Selenium, which can be performed by undertaking the following steps:
Step 1: Test cases can be automated utilizing Internet Explorer, Firefox, Chrome, Safari programs with the assistance of Selenium WebDriver.
Step 2: To execute test cases with various browsers in the same machine simultaneously, a TestNG system can be coordinated with Selenium WebDriver.
Step 3: Writing the test cases. This article highlights code that will test the homepage on three unique browsers – Chrome, Edge, and Firefox.
package com.lambdatest.Tests;
import java.net.MalformedURLException;
import java.net.URL;
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.openqa.selenium.remote.DesiredCapabilities;
import org.openqa.selenium.remote.RemoteWebDriver;
import org.testng.Assert;
import org.testng.annotations.AfterSuite;
import org.testng.annotations.AfterTest;
import org.testng.annotations.BeforeSuite;
import org.testng.annotations.BeforeTest;
import org.testng.annotations.Parameters;
import org.testng.annotations.Test;
@SuppressWarnings("unused")
public class SingleTest {
private WebDriver driver;
/**
* This function will execute before each Test tag in testng.xml
*
* @param browser
* @param version
* @param platform
* @throws Exception
*/
@BeforeTest
@Parameters(value={"browser","version","platform"})
public void setup(String browser, String version, String platform) throws Exception {
System.out.println("Reached setup = "+browser+", "+version+", "+platform);
String username = System.getenv("LT_USERNAME");
String authkey = System.getenv("LT_ACCESS_KEY");
String hub = "@hub.lambdatest.com/wd/hub";
DesiredCapabilities capabilities = new DesiredCapabilities();
capabilities.setCapability("browser", browser);
capabilities.setCapability("version", version);
capabilities.setCapability("platform", platform); // If this cap isn't specified, it will just get the any available one
capabilities.setCapability("build", "Cross Browser Automation");
capabilities.setCapability("name", "Cross Browser Automation");
capabilities.setCapability("network", true); // To enable network logs
capabilities.setCapability("visual", true); // To enable step by step screenshot
capabilities.setCapability("video", true); // To enable video recording
capabilities.setCapability("console", true); // To capture console logs
System.out.println("Reached setup = "+browser);
// Check if parameter passed from TestNG is 'firefox'
if (browser.equalsIgnoreCase("firefox")) {
// create firefox instance
System.setProperty("Path of your gecko driver",
"C:\\Users\\LenovoE14\\Downloads\\geckodriver-v0.26.0-win64\\geckodriver.exe");
driver = new FirefoxDriver();
}
// Check if parameter passed as 'chrome'
else if (browser.equalsIgnoreCase("chrome")) {
try {
System.out.println("Reached Crome block");
// set path to chromedriver.exe
System.setProperty("webdriver.chrome.driver",
"C:\\Users\\LenovoE14\\Downloads\\chromedriver_win32\\chromedriver.exe");
driver = new ChromeDriver();
}
catch(Exception e)
{
System.out.println(e.getMessage());
}
} else if (browser.equalsIgnoreCase("Edge")) {
// set path to Edge.exe
System.setProperty("Path of your edge driver",
"C:\\Users\\LenovoE14\\Downloads\\edgedriver\\edgedriver.exe");
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.lambdatest.com/");
WebElement userMail = driver.findElement(By.id("useremail"));
// Fill user email
userMail.sendKeys("rishabhps@lambdatest.com");
Thread.sleep(4000);
WebElement submitBtn = driver.findElement(By.id("submit"));
// Hit Start Free Trial button
submitBtn.click();
Thread.sleep(4000);
}
@AfterTest
public void tearDown() {
driver.quit();
}
}
The code above attempts to get to the website page through three distinctive internet browsers by setting the framework properties of the particular browsers. In order to run the tests, it is imperative to compose the testng.xml file.
<!DOCTYPE suite SYSTEM "http://testng.org/testng-1.0.dtd">
<suite name="TestSuite" thread-count="1" parallel="tests">
<test name="ChromeTest">
<parameter name="browser" value="Chrome" />
<parameter name="version" value="85" />
<parameter name="platform" value="Windows 10" />
<classes>
<class name="com.lambdatest.Tests.SingleTest">
</class>
</classes>
</test>
</suite>
In this XML file, the code determines various classes for the drives to start up the browsers to execute various test cases on the site. That is how it works.
Best Practices For Cross Browser Testing In Selenium
These are some of the best practices to follow while performing multi-browser testing utilizing Selenium.
Pick Libraries & Systems Carefully
Testing web applications require libraries and systems.
Before initiating development, remember that the most recent CSS frameworks can help make the most distinctive and dynamic user experience.
However, they probably won’t be compatible with each browser since every browser has a particular rendering engine. Before utilizing the most recent CSS or JS libraries or systems, carefully read browser rules to make sure if they are supported or not.
Utilize Appropriate Javascript Libraries & Task Runners
JavaScript assumes a significant part in web application development, so it is essential to utilize the correct JavaScript assets that meet website prerequisites and offer viable browser support.
Among task runners, there are various choices to look over. Grunt and Gulp stand standout from the rest, in light of the fact that they can be automated by prerequisites.
They likewise upgrade the general application execution by providing compilation, linting, minification and other features that improve code quality after compilation.
Cautiously Distinguish and Investigate the Browser-OS Setup
QAs need to choose which browsers and frameworks, a site should be tested on. Each program has different adaptations, and a few browsers even update constantly – in any event, once per month. Hence, it is important to confirm which browser, browser variants, and OS are needed to perform cross-browser testing utilizing Selenium.
Organize the segments that the biggest sections of the intended target group is probably going to utilize.
Suggested –
