Cross Browser Testing in Selenium : Tutorial

Cross browser testing with Selenium helps ensure that the web apps look and function alike irrespective of the browser that it is accessed from. You can create test scripts using different programming languages like Java, Python, PHP, etc using Selenium. You can test your web apps on different browsers like Google Chrome, Safari, Firefox, IE, Edge, Opera etc.

What is Cross Browser Testing in Selenium?

Cross browser testing refers to testing a website in multiple browsers like IE, Chrome, Firefox to check its efficacy on each. Cross-browser compatibility is the ability of the website or web application to function across different browsers and operating systems.

However, manually testing a website across multiple browsers is exceptionally tedious. Consider a situation in which 100 test cases have to be run manually. Now imagine that the same tests have to be run on five different browsers. The time taken becomes exponentially longer. However, if these tests are automated using Selenium, then they can be run simultaneously and in far less time. It will also prevent any issue arising from human error.

Why is Cross Browser Testing Important?

Browser vendors follow Open Web Standards, but they have their own interpretations of them. Since they each render HTML, CSS, and JavaScript in unique ways, thoroughly debugging a website’s source code is not enough to ensure that the site will look and behave as intended on different browsers (or different versions of a single browser).

So it falls to web developers to abstract browser differences. Cross browser compatibility testing helps with that by pinpointing browser-specific compatibility errors so they can be debugged quickly. It helps ensure that a site is not alienating a significant part of its target audience–simply because the website does not work on their browser OS.

To know more about what features are analyzed, how to select a browser, and when to go for cross-browser testing, refer to this article on Cross Browser Testing.

Now, let’s look at how to perform cross-browser testing using Selenium.

How to do Cross Browser Testing using Selenium?

As already mentioned, Selenium is the most popular automation testing tool for various functionalities. Cross-browser testing is one such feature supported by Selenium, which can be performed via the steps below:

Step1: Test cases can be automated using Internet Explorer, Firefox, Chrome, and Safari browsers with the help of Selenium WebDriver

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

Step3: Write the test cases. The article features code that will test the BrowserStack home page on three different browsers – Chrome, Edge, and Firefox.

package com.qa.testcases;
import java.time.Duration;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.edge.EdgeDriver;
import org.openqa.selenium.firefox.FirefoxDriver;
import org.testng.Assert;
import org.testng.annotations.BeforeTest;
import org.testng.annotations.Parameters;
import org.testng.annotations.Test;

public class CrossBrowserTestingScript {
      WebDriver driver;

      @BeforeTest
      @Parameters("browser")
      public void setup(String browser) throws Exception {
            if (browser.equalsIgnoreCase("firefox")) {
                  driver = new FirefoxDriver();
            } else if (browser.equalsIgnoreCase("chrome")) {
                  driver = new ChromeDriver();
            } else if (browser.equalsIgnoreCase("Edge")) {
                  driver = new EdgeDriver();
            } else {
                  throw new Exception("Incorrect Browser");
            }
            driver.manage().timeouts().implicitlyWait(Duration.ofSeconds(5));
      }

      @Test
      public void verifyTitle() {
            driver.get("https://www.browserstack.com/");
            System.out.println("Title is: " + driver.getTitle());
            Assert.assertEquals(driver.getTitle(), "Most Reliable App & Cross Browser Testing Platform | BrowserStack");
            driver.quit();
      }

}

The code above tries to access the BrowserStack page through three different web browsers by setting the system properties of the respective browsers. Now to run the test cases, let’s write the testng.xml file.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE suite SYSTEM "https://testng.org/testng-1.0.dtd">
<suite name="Suite" thread-count="5" parallel="tests">

      <test thread-count="5" name="ChromeTest">
            <parameter name="browser" value="chrome"></parameter>
            <classes>
                  <class name="com.qa.testcases.CrossBrowserTestingScript" />
            </classes>
      </test> <!-- Test -->

      <test thread-count="5" name="FirefoxTest">
            <parameter name="browser" value="firefox"></parameter>
            <classes>
                  <class name="com.qa.testcases.CrossBrowserTestingScript" />
            </classes>
      </test> <!-- Test -->
      <test thread-count="5" name="EdgeTest">
            <parameter name="browser" value="edge"></parameter>
            <classes>
                  <class name="com.qa.testcases.CrossBrowserTestingScript" />
            </classes>
      </test> <!-- Test -->
</suite> <!-- Suite -->

In this XML file, the code specifies different classes for the drives to instantiate the browsers to execute the test cases on the website. That’s how it works.

Run your first Selenium Test on BrowserStack for Free

Best practices to do Cross Browser Testing in Selenium

The following are best practices that should be adhered to while performing multi browser testing using Selenium.

• Choose libraries and frameworks cautiously

Testing web apps require libraries and frameworks. Before commencing development, keep in mind that the latest CSS frameworks can help create the most vivid and dynamic user experience, but they might not be compatible with every browser since every browser has a specific browser rendering engine. Before using the latest CSS or JS libraries or frameworks, read browser guidelines to determine if they support those libraries and frameworks.

• Use proper Javascript libraries and task runners

JavaScript plays an important role in web app development, so it is crucial to use the right JavaScript resources that meet site requirements and offer compatible browser support.

Among task runners, there are multiple options to choose from. Grunt and Gulp stand out because they can be automated according to requirements. They also enhance the overall application performance by providing compilation, linting, minification, and other features that improve code quality after compilation.

• Carefully identify and analyze the Browser-OS configuration

QAs need to decide which browsers and operating systems a site needs to be tested on. Every browser has multiple versions, and some browsers even update continuously – at least once a month. Thus, it is necessary to verify which browser, browser versions, and OS are required to perform cross browser testing using Selenium. Prioritize the combinations that the largest segments of the target audience is likely to use.

• Optimize Internet Explorer

Internet Explorer doesn’t support advanced CSS styles and framework. Even if a site is the absolute pinnacle of aesthetic appeal, chances are that many of its design elements will be distorted when accessed via IE. To remedy this, create a separate stylesheet for IE and add a hack in the doctype.

Conclusion

Performing cross browser testing using Selenium is of utmost importance as it ensures that the web-app is cross browser compatible and provides a robust user experience across the board.

As always, cross browser tests must be run on a real device cloud to get completely accurate results. BrowserStack’s cloud Selenium grid of 2000+ real browsers and devices allows testers to automated visual UI tests in real user conditions. Simply sign up, select a device-browser-OS combination, and start running tests for free.