Cross-browser testing in Selenium

In this article, we’ll take a look at cross-browser testing. This is a type of testing that checks if an application works as expected across multiple browsers, operating systems, and devices. We can do cross-browser testing with and without automation. Automated test scripts can be written or created using programs such as TestProject and Selenium

By the end of this article, you will know about defining cross-browser testing, its advantages and working with it in Selenium and TestProject

Note: The code from this article is on GitHub here

What is cross-browser testing?

Cross-browser testing ensures that our application under test (AUT) is compatible with every browser, operating system, and device. The goal is to compare the expected behavior of the application in different cases. There are times when the same test script runs on one or more instances, but does not work on another instance.

Perhaps the crash was due to our test script or application. Have you ever tried to open a website using Internet Explorer but it didn’t work and then the same site opened without problems in Chrome? These issues are exposed during cross-browser testing because the data from AUT is displayed differently in each browser.

Benefits of cross-browser testing

We are doing cross-browser testing by setting baseline. The baseline is a standard test scenario. Its goal is to learn how our AUT works using one browser, one operating system, and one device. We can then use the baseline in other combinations of browsers, operating systems, and devices.

I’ll focus on two advantages cross-browser testing:

  1. Time

  2. Test coverage

Time

It takes a long time to create and execute an individual Test Script for unique scenarios. Therefore, our test scripts are created with test data to use combinations of both. The same test script can be run on Chrome and Windows for the first iteration, then Firefox and Mac for the second iteration, and then on other scripts for subsequent iterations.

This saves time as we only create one test case, not several. Following are 2 code snippets to download and get header for TestProject pages… One example is cross-browser testing, and another example contains separate test scripts for three 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 and to what extent in our test scenarios.

We define features and make sure there are adequate test cases for those features. Test coverage is an advantage because it allows us to measure the quality of our test runs.

  • What will be included in our test scripts depends on the requirements.

  • How much is covered in our test scenarios depends on browsers and their different versions.

Test coverage is an effective yardstick for the testing process. However, 100% coverage is difficult to achieve, and most likely the feature does not behave as it usually does in a particular version.

How do I cross-browser test in Selenium?

We do cross-browser testing in Selenium using its grid or test data. Selenium Grid simplifies the process and uses the test data as input. With Selenium Grid, our test scripts are executed in parallel on multiple remote devices. Commands are sent by the client to remote browser instances.

Test data can be stored in an Excel file, CSV, properties file, XML, or database. We can also combine TestNG with test data for conducting data-driven testing or cross-browser testing. For data-driven testing, the DataProvider annotation and the dataProvider attribute or dataProviderClass attribute allow our test case to receive an unlimited number of values.

When it comes to cross-browser testing, we can use the parameter tag and the Parameters annotation to pass in different browser names. Following are the code snippets displaying an XML file with a parameter tag and a test case 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 the option to place the tag at the test case level, at the test level, or at both levels. Note that the parameter tag has a name and value with data between double quotes. His name, i.e. “BrowserType” is passed to the test script through the @Parameters annotation, and the value, i.e. “Chrome” is passed to the if and else if statements.

The if and else if statements install Chrome, Edge, or Firefox. Each browser received commands from the same test script after being executed from an XML file. The following test results show how to boot successfully TestProject pageand the console prints the unique browser name and page title.

Cross browser testing in Selenium with TestProject

OpenSDK / Coded test

There are 2 ways to do cross browser testing using TestProject… We can use OpenSDK open source or AI-Powered Test Recorder… OpenSDK is wrapped in Selenium and supports Java, C #, or Python. Our test cases are like cross-browser testing in Selenium with minimal changes in code and dependencies. We have to enable TestProject dependency for Maven or Gradle, import browser drivers and pass 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

Via AI-Powered Test Recorder we create a new webJob, then select multiple browsers like Chrome, Edge and Firefox. The test in the TestProject allows us to select an additional CSV data source if we want to perform data-driven testing. Here are some screenshots showing the steps to perform cross-browser testing and reporting.

Here is a step-by-step demo of cross-browser testing with TestProject AI-Powered Test Recorder.

conclusions

In summary, cross-browser testing is a great way to use one test script and multiple browsers at the same time. Some of the benefits include time and test coverage. Time is our advantage as we do not create multiple test scripts for each browser. Test coverage is another benefit as we can test more than just the browser version for a particular browser.

Cross browser testing is done with Selenium and TestProject

TestProject allows us to create our own test scripts using Java, C # or Python after adding the open source OpenSDK. OpenSDK is a wrapper for Selenium, so it contains Selenium commands plus additional commands from TestProject. In addition, we can use TestProject’s AI-Powered Test Recorder to conduct cross-browser testing. This is a user-friendly process that only requires us to select the browser we want to use for cross-browser testing.


Translation of the article prepared as part of the course “Java QA Engineer. Basic”… We invite everyone to a two-day online intensive “Testing theory and practice in TestIT and Jira systems”… On the intensive course, we will learn what testing is and where it came from, who a tester is and what he does. We will study software development models, testing life cycle, checklists and test cases, as well as defects. In the second lesson, we will get acquainted with one of the main task and defect trackers – Jira, as well as practice in TestIT – a domestic development for solving problems of testing and ensuring software quality.

Leave a Reply