Cross Browser Testing In Selenium

In this article, we will dive into Cross Browser Testing. It is a testing type that verifies if an application works as expected across multiple browsers, operating systems, and devices. We can perform Cross Browser Testing with automation and without automation. The automation Test Scripts can be recorded or created using endeavors like TestProject and Selenium.

By the end of this article, you will read What Is Cross Browser Testing, Benefits To Cross Browser Testing, How To Achieve Cross Browser Testing In Selenium, and TestProject.

Note: Code from this article is located on GitHub here.

Table of Contents

• What Is Cross Browser Testing
• Benefits To Cross Browser Testing
• How To Achieve Cross Browser Testing In Selenium
• Cross Browser Testing In Selenium Using TestProject
• Summary

---

What Is Cross Browser Testing

Cross Browser Testing ensures our Application Under Test (AUT) is compatible with each browser, operating system, and device. The objective is to compare an application’s expected behavior across various instances. There are cases when the same Test Script passes on one or more instances but fails on another instance. 🤔

Perhaps, the failure occurred due to our Test Script or the application. Have you ever tried to open a website using Internet Explorer but it did not work? Then opened the same website without a problem on Chrome. These types of issues are caught during Cross Browser Testing as the data from an AUT is rendered differently on every browser.

Benefits To Cross Browser Testing

We implement Cross Browser Testing by establishing a baseline. A baseline is a standard Test Script. The purpose is to examine how our AUT performs using one browser, one operating system, and one device. Afterward, we can build on the baseline with more combinations of browsers, operating systems, and devices.

I’m focusing on two benefits of Cross Browser Testing:
1. Time
2. Test Coverage

Time ⏰

It’s time-consuming to create and execute an individual Test Script for unique scenarios. Therefore, our Test Scripts are created with test data to execute combinations of data. The same Test Script can execute on Chrome and Windows for the first iteration then Firefox and Mac for the second iteration followed by more scenarios for subsequent iterations.

This saves time because we only created one Test Script rather than multiple Test Scripts for each scenario. The following are 2 code snippets for loading and getting the page title for TestProject’s Example page. One example is Cross Browser Testing and the other example has individual Test Scripts for 3 browsers (Chrome, Firefox, and Edge).

package tutorials.testproject;

import io.github.bonigarcia.wdm.WebDriverManager;
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.annotations.Parameters;
import org.testng.annotations.Test;

public class CrossBrowserTesting {

  WebDriver driver;

  @Test
  @Parameters ( {"BrowserType"} )
  public void testExamplePageOnMultipleBrowsers (String browserType) {
    if (browserType.equalsIgnoreCase("Chrome")) {
      WebDriverManager.chromedriver().setup();
      driver = new ChromeDriver();
    }
    else if (browserType.equalsIgnoreCase("Edge")) {
      WebDriverManager.edgedriver().setup();
      driver = new EdgeDriver();
    }
    else if (browserType.equalsIgnoreCase("Firefox")) {
      WebDriverManager.firefoxdriver().setup();
      driver = new FirefoxDriver();
    }
    driver.manage().window().maximize();
    driver.get("https://example.testproject.io/web/index.html");
    System.out.println(browserType + ": " + driver.getTitle());
  }
}

package tutorials.testproject;

import io.github.bonigarcia.wdm.WebDriverManager;
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.annotations.Test;

public class IndividualBrowserTesting {

  WebDriver driver;

  @Test
  public void testExamplePageOnMultipleBrowsersOnChrome () {
    WebDriverManager.chromedriver().setup();
    driver = new ChromeDriver();
    driver.manage().window().maximize();
    driver.get("https://example.testproject.io/web/index.html");
    System.out.println("Chrome: " + driver.getTitle());
  }

  @Test
  public void testExamplePageOnMultipleBrowsersOnFirefox () {
    WebDriverManager.firefoxdriver().setup();
    driver = new FirefoxDriver();
    driver.manage().window().maximize();
    driver.get("https://example.testproject.io/web/index.html");
    System.out.println("Chrome: " + driver.getTitle());
  }

  @Test
  public void testExamplePageOnMultipleBrowsersOnEdge () {
    WebDriverManager.edgedriver().setup();
    driver = new EdgeDriver();
    driver.manage().window().maximize();
    driver.get("https://example.testproject.io/web/index.html");
    System.out.println("Chrome: " + driver.getTitle());
  }
}

Test Coverage ✅

Test coverage is a technique that determines what is covered in our Test Scripts & how much is covered in our Test Scripts. We identify the features and make sure there are adequate Test Scripts for those features. Test coverage is a benefit because it allows us to measure the quality of our test cycles.

• What is covered in our Test Scripts depends on the requirements.
• How much is covered in our Test Scripts depends on the browsers and their distinct browser versions.

💡 Test coverage is an effective yardstick for our test process. Although, 100% coverage is difficult and likely a feature behaves offbeat according to the version.

How To Achieve Cross Browser Testing In Selenium

We achieve Cross Browser Testing in Selenium using its Grid or test data. Selenium Grid simplifies the process while test data is used as input. With Selenium Grid, our Test Scripts are executed in parallel on multiple remote machines. The commands are sent by a client to remote browser instances.

Test data can be stored in an Excel File, CSV File, Properties File, XML File, or database. We can also combine TestNG with the test data to achieve Data Driven Testing or Cross Browser Testing. For Data-Driven Testing, the DataProvider Annotation and dataProvider Attribute or dataProviderClass Attribute allows our Test Script to receive an unlimited number of values.

When it comes to Cross Browser Testing, we can use the parameter tag and Parameters Annotation for sending different browser names. The following are code snippets displaying an XML file with the parameter tag and Test Script with the Parameters Annotation.

<suite name="Cross Browser Testing">

    <test name = "Test On Chrome">
        <parameter name = "BrowserType" value="Chrome"/>
            <classes>
                <class name = "tutorials.testproject.CrossBrowserTesting"/>
            </classes>
    </test>

    <test name = "Test On Edge">
        <parameter name = "BrowserType" value="Edge"/>
        <classes>
            <class name = "tutorials.testproject.CrossBrowserTesting"/>
        </classes>
    </test>

    <test name = "Test On Firefox">
        <parameter name = "BrowserType" value="Firefox"/>
        <classes>
            <class name = "tutorials.testproject.CrossBrowserTesting"/>
        </classes>
    </test>

</suite>

package tutorials.testproject;

import io.github.bonigarcia.wdm.WebDriverManager;
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.annotations.Parameters;
import org.testng.annotations.Test;

public class CrossBrowserTesting {

  WebDriver driver;

  @Test
  @Parameters ( {"BrowserType"} )
  public void testExamplePageOnMultipleBrowsers (String browserType) {
    if (browserType.equalsIgnoreCase("Chrome")) {
      WebDriverManager.chromedriver().setup();
      driver = new ChromeDriver();
    }
    else if (browserType.equalsIgnoreCase("Edge")) {
      WebDriverManager.edgedriver().setup();
      driver = new EdgeDriver();
    }
    else if (browserType.equalsIgnoreCase("Firefox")) {
      WebDriverManager.firefoxdriver().setup();
      driver = new FirefoxDriver();
    }
    driver.manage().window().maximize();
    driver.get("https://example.testproject.io/web/index.html");
    System.out.println(browserType + ": " + driver.getTitle());
  }
}

In the XML file, the parameter tag is located at the test level. We have an option of placing the tag at the suite level, test level, or both levels. Notice the parameter tag has a name and value with data between the double-quotes. Its name, i.e. “BrowserType” gets passed to the Test Script via @Parameters Annotation while the value, i.e., “Chrome” gets passed to the if or else if statements.

The if and else if statements set up Chrome, Edge, or Firefox. Each browser received commands from the same Test Script after executing from the XML file. The following test results show how TestProject’s Example page loaded successfully and the console printing the unique browser name plus Page Title.

Cross Browser Testing in Selenium using TestProject

OpenSDK / Coded Test

There are 2 ways to execute Cross Browser Testing using TestProject. We can use the open-source OpenSDK or the AI-Powered Test Recorder. The OpenSDK wraps around Selenium and supports Java, C#, or Python. Our Test Scripts resemble Cross Browser Testing In Selenium with minimal changes to the code and dependency. We must include TestProject’s dependency for Maven or Gradle, import the browser drivers, and pass in the token.

<dependency>
     <groupId>io.testproject</groupId>
     <artifactId>java-sdk</artifactId>
     <version>0.65.0-RELEASE</version>
 </dependency>

implementation 'io.testproject:java-sdk:0.65.0-RELEASE'

import io.testproject.sdk.drivers.web.ChromeDriver;
import io.testproject.sdk.drivers.web.FirefoxDriver;
import io.testproject.sdk.drivers.web.EdgeDriver;

AI-Powered Test Recorder

With the AI-Powered Test Recorder, we create a new Web job then select multiple browsers such as Chrome, Edge, and Firefox. The test within TestProject’s Job allows us to select an optional CSV Data Source if we want to perform Data Driven Testing. Here are some screenshots that show steps for performing Cross Browser Testing and a report.

Here is a step-by-step demo about Cross Browser Testing with TestProject AI-Powered Test Recorder.

Summary

In Summary, Cross Browser Testing is a great way to leverage one Test Script and multiple browsers at the same time. Some of the benefits include time and test coverage. Time is a benefit because we skip creating multiple Test Scripts for each browser. Test coverage is another benefit because we can test more than the browser version for a particular browser.

Cross Browser Testing is achieved using Selenium & TestProject. TestProject allows us to create our own Test Scripts using Java, C#, or Python after adding the open-source OpenSDK. The OpenSDK is a Selenium wrapper so it contains Selenium commands plus extra commands from TestProject. In addition, we can use TestProject’s AI-Powered Test Recorder to execute Cross Browser Testing. It’s a user-friendly process that only requires us to select the browser we want to use for Cross Browser Testing.

Start your own Cross Browser Testing
using Selenium & TestProject 💪