Selenium Webdriver - Cross Browser Testing

---

---

The test case developed in Selenium Webdriver should be able to run in multiple browsers like Chrome, Firefox, Safari, Edge, and so on with minor updates to the test case. This helps to check if the application under test is working as per the requirements in all the browsers.

Why is Cross Browser Testing Beneficial?

Often on working on any applications for example, e-commerce or on travel reservations, and so on, we observe that while doing the payment, or adding products to cart, the applications are taking too much time for page load on a specific browser.

As a user, we promptly infer that there may be an error or an ongoing issue in that application, and we move towards a different company website having the similar products and functionalities.

The web application and apps built on JavaScript, HTML, and CSS render dissimilarly, in spite of the fact browser vendors are based on the Open Web Standards. This results in representation of applications different in different browsers. The source code debugging of any application does not give any insight on how it will be represented in different browsers.

Thus cross browser testing is beneficial to detect compatibility issues of any application in any browser earlier so that it can be used widely for all kinds of users rather than any targeted user group. Also, while doing automated cross browser testing, we may end up creating a test suite with parallel execution, which will help us to scale up the test.

The cross browser testing ensures that which has been application built can be used smoothly with a nice user participation irrespective of any browsers or operating systems.

Example

Let us take an example of the below page, where we have the New User button on the Welcome Page.

On clicking the New User button, we will be navigating to the Registration page, having the Welcome, Register text as shown in the below image.

For the above example, we would do a cross browser testing of the above functionalities in Chrome, and Edge browsers. In order to run the tests simultaneously in two browsers in the same local system, we would take the help of TestNg unit test automation framework. All the test cases would be under the same CrossBrw package. We would run the test in both the browsers by passing the values using the @Parameters tag in the test class BrowserTest.java and specified the parameter = browser and its value = Chrome, and value = Edge in the testng.xml file.

Code Implementation on test class BrowserTest.java.

package CrossBrw;

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.testng.annotations.*;
import java.util.concurrent.TimeUnit;

public class BrowserTest {
   WebDriver driver;
   @BeforeTest
   @Parameters("browser")
   public void setup(String browser) throws Exception{

      // Initiate browser driver as per browser value
      if (browser.equalsIgnoreCase("Chrome")) {
         driver = new ChromeDriver();
         System.out.println("Browser opened in Chrome");
      } else if (browser.equalsIgnoreCase("Edge")) {
         driver = new EdgeDriver();
         System.out.println("Browser opened in Edge");
      }
	  
      // adding implicit wait of 12 secs
      driver.manage().timeouts().implicitlyWait(10, TimeUnit.SECONDS);

      // Opening the webpage
      driver.get("https://www.tutorialspoint.com/selenium/practice/login.php");
   }

   @Test(priority = 1)
   public void verifyWelcomePageHeading() {
      WebElement t = driver.findElement(By.xpath("//*[@id='signInForm']/h1"));
      System.out.println("Page heading in Welcome Page: " +  t.getText());
   }

   @Test(priority = 2)
   public void moveToRegisterPage() {
      WebElement btn = driver.findElement(By.xpath("//*[@id='signInForm']/div[3]/a"));
      btn.click();
   }

   @Test(priority = 3)
   public void verifyRegisterPageHeading() {
      WebElement t = driver.findElement(By.xpath("//*[@id='signupForm']/h1"));
      System.out.println("Page heading in Register Page: " + t.getText());
   }

   @AfterTest
   public void teardown() { 
   
      // quitting browser
      driver.quit();
   }
}

Configurations in testng.xml.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE suite SYSTEM "http://testng.org/testng-1.0.dtd">
<suite name="All Test Suite" thread-count="5" parallel="tests">
   <test thread-count="5" name="ChromeTest">
      <parameter name="browser" value="Chrome"></parameter>
      <classes>
         <class name="CrossBrw.BrowserTest"/>
      </classes>
   </test> <!-- Test -->
   <test thread-count="5" name="EdgeTest">
      <parameter name="browser" value="Edge"></parameter>
      <classes>
         <class name="CrossBrw.BrowserTest"/>
      </classes>
   </test>
</suite>

Dependencies in pom.xml.

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
   xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
   xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 
   http://maven.apache.org/xsd/maven-4.0.0.xsd">
   <modelVersion>4.0.0</modelVersion>

   <groupId>org.example</groupId>
   <artifactId>SeleniumJava</artifactId>
   <version>1.0-SNAPSHOT</version>

   <properties>
      <maven.compiler.source>16</maven.compiler.source>
      <maven.compiler.target>16</maven.compiler.target>
      <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
   </properties>

   <!-- https://mvnrepository.com/artifact/org.seleniumhq.selenium/selenium-java -->
   <dependencies>
      <dependency>
         <groupId>org.seleniumhq.selenium</groupId>
         <artifactId>selenium-java</artifactId>
         <version>4.11.0</version>
      </dependency>

      <!-- https://mvnrepository.com/artifact/org.testng/testng -->
      <dependency>
         <groupId>org.testng</groupId>
         <artifactId>testng</artifactId>
         <version>7.9.0</version>
         <scope>test</scope>
      </dependency>
   </dependencies>
</project>

We would need to run the test from the testng.xml file, by right clicking on it, and selecting the option Run testng.xml.

Output

Browser opened in Chrome
Browser opened in Edge
Page heading in Welcome Page: Welcome, Login In
Page heading in Register Page: Welcome,Register
Page heading in Welcome Page: Welcome, Login In
Page heading in Register Page: Welcome,Register
===============================================
All Test Suite
Total tests run: 6, Passes: 6, Failures: 0, Skips: 0
===============================================

Process finished with exit code 0

In the above example, we had first passed the parameter browser and its values Chrome, and Edge within the testng.xml files. Within the test class BrowserTest.java, we had executed the test methods - verifyWelcomePageHeading(), moveToRegisterPage(), and verifyRegisterPageHeading() once in Chrome, and then in Edge.

We had taken help of the TestNG test framework along with Selenium Webdriver, to implement the cross browser testing and retrieved the page headers with the messages two times(once in Chrome, and then Edge) in the console - Page heading in Welcome Page: Welcome, Login In, Page heading in Register Page: Welcome,Register, Page heading in Welcome Page: Welcome, Login In, and Page heading in Register Page: Welcome,Register. We had also obtained the messages for the test method setup() having the @BeforeTest annotation in the console - Browser opened in Chrome, and Browser opened in Edge.

The result in the console shows Total tests run: 6, as there are three methods with @Test annotations - verifyWelcomePageHeading(), moveToRegisterPage(), and verifyRegisterPageHeading() were executed twice(for Chrome, and Edge).

Finally, the message Passes: 6, and Process finished with exit code 0 was received, signifying successful execution of the code.

This concludes our comprehensive take on the tutorial on Selenium Webdriver - Cross Browser Testing. Weve started with describing cross browser testing, and why cross browser testing is beneficial, and an example illustrating how to use a cross browser along with Selenium and TestNG. This equips you with in-depth knowledge of the cross browser testing. It is wise to keep practicing what youve learned and exploring others relevant to Selenium to deepen your understanding and expand your horizons.