Cross Browser Testing with Selenium

Why is it Needed?

Although browser vendors adhere to Open Web Standards, they have their own interpretations. Because different browsers render HTML, CSS, and JavaScript in different ways, thoroughly debugging a website's source code isn't enough to ensure that it will look and behave as intended across all browsers (or different versions of a single browser).

As a result, web developers are responsible for abstracting browser differences. Cross-browser compatibility testing aids in this by identifying browser-specific compatibility issues, allowing them to be quickly debugged. It ensures that a website does not alienate a significant portion of its target audience simply because it is not compatible with their browser-OS.

The Code

As previously stated, Selenium is the most widely used automation testing tool for various functions. Selenium supports cross-browser testing, which can be accomplished by following the steps below:

1. Selenium WebDriver can be used to automate test cases in Internet Explorer, Firefox, Chrome, and Safari.
2. A TestNG framework can be integrated with Selenium WebDriver to simultaneously run test cases in multiple browsers on the same machine.
3. Write the test cases. The article includes code that will test the Browserstack home page on Chrome, Edge, and Firefox.

Let's look at how to test a website across three different browsers.

package co.test.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-testNew folderchromedriver.exe");
driver = new ChromeDriver();
 
}
else if(browser.equalsIgnoreCase("Edge")){
//set path to Edge.exe
System.setProperty("webdriver.edge.driver","C:Selenium-java-testMicrosoftWebDriver.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("<a href="https://www.test.com/">https://www.test.com/</a>");
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();
}
}

We perform actions on a website in the above code, such as logging in and searching for a Selenium course. However, we would like to test cross-browser compatibility with three different browsers, namely Google Chrome, Mozilla Firefox, and Microsoft Edge. That's why, in this code, we have set the system properties of all three browsers. After that, we perform actions on the website using locators. So that's it for my class file. To run the program, you'll need a TestNG XML file containing the above class file's dependencies. The TestNG file is shown in the code below.

<?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="co.test.pages.CrossBrowserScript">
</class>
</classes>
</test>
<test name="FirefoxTest">
<parameter name="browser" value="Firefox" />
<classes>
<class name="co.test.pages.CrossBrowserScript">
</class>
</classes>
</test>
<test name="EdgeTest">
<parameter name="browser" value="Edge" />
<classes>
<class name="co.test.pages.CrossBrowserScript">
</class>
</classes>
</test>
</suite>

We are specifying different classes for the drives in the above XML file so that we can instantiate browsers to run the test cases on the website. That's the way things work.

Check this out : Xpath in Selenium

Also see, Locators in Selenium

Frequently Asked Questions

1. What is TestNG?
   Cédric Beust created TestNG, a testing framework for the Java programming language that was inspired by JUnit and NUnit. TestNG was created with the goal of covering a wider range of test categories, such as unit, functional, end-to-end, integration, and so on, with more powerful and user-friendly functionalities.
    
2. Why should we choose libraries and frameworks cautiously for cross browser testing with selenium?
   Web app testing necessitates the use of libraries and frameworks. Keep in mind that while the latest CSS frameworks can assist in creating the most vivid and dynamic user experience, they may not be compatible with all browsers because each browser has its own rendering engine.
    
3. Why should we use proper Javascript libraries and task runners for cross browser testing with selenium?
   Because JavaScript is so important in web app development, choosing the right JavaScript resources that meet site requirements and support compatible browsers is critical.
   Task runners have a variety of options from which to choose. Grunt and Gulp are unique in that they can be automated to meet specific needs. Compilation, linting, minification, and other features that improve code quality after compilation also improve overall application performance.
    
4. We should carefully identify and analyze the Browser-OS configuration. Why?
   QAs must decide which browsers and operating systems should be used to test a website. Every browser has multiple versions, and some update on a regular basis – at least once a month. To perform cross browser testing with Selenium, you must first determine which browser, browser versions, and operating system are required. Prioritize the combinations that the target audience's largest segments are most likely to use.
    
5. How to Optimize Internet Explorer?
   Advanced CSS styles and frameworks are not supported by Internet Explorer. Even if a site is the pinnacle of aesthetic appeal, many of its design elements are likely to be distorted when accessed via Internet Explorer. Create a separate stylesheet for IE and add a doctype hack to fix this.

Conclusion

Cross-browser testing with Selenium is critical because it ensures that the web application is cross-browser compatible and provides a consistent user experience.
We hope that this blog has helped you enhance your knowledge regarding cross-browser testing using Selenium and if you would like to learn more, check out our articles on Coding Ninjas Studio. Do upvote our blog to help other ninjas grow. Happy Coding!