Cross Browser Testing using Selenium

 HOME

What is Cross Browser Testing?

Cross Browser is a technique in which a web application tests on different browsers and operating systems.  Cross Browser testing, make sure that the site rendered the same in every browser.

Suppose, we have to execute 25 tests cases to test a web application on Google Chrome Browser and it takes around 4 hrs to execute these tests. However, we do not know if a user is going to access the web application on which browser. Therefore, now the same set of test cases need to executes on Firefox, Edge, Internet Explorer, Safari and Opera.

Therefore, now we need to execute 25*6=150 test cases and test execution hour changes from 4 to 24 hrs to check that the web application is working as expected. What is the best approach to handle this situation is to automate these tests and perform cross browser testing

Why do we need to perform cross browser testing?

Each website is built by anyone or combination of these technologies – HTML, CSS and Javascript. Each browser uses different rendering engines to compute these technologies. Chrome uses Blink, WebKit on iOS, V8 JavaScript engine, Firefox uses Gecko, Edge usesChromium-based with Blink and V8 engines, Safari uses Webkit rendering engine, IE uses Trident and so on.

1) Font size, image orientation and alignment mismatch in different browsers

2) Different browser is compatible with different operating systems

3) CSS,HTML validation difference can be there

Lets see an example of Cross Browser testing using TestNG

Step 1 – We have used Selenium Webdriver with TestNG to automate the test cases to run on browsers – Chrome, Firefox and Edge

Step 2 – The test are running on all 3 browsers in parallel as we have used  parallel=“tests”

Step 3 – thread-count=”3″ means that 3 threads will start and each browser will use a thread

Step 4 –   @Parameters(“browser”) – parameter will be passed from testng.xml

import java.util.concurrent.TimeUnit;
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.AfterClass;
import org.testng.annotations.BeforeClass;
import org.testng.annotations.Parameters;
import org.testng.annotations.Test;
import junit.framework.Assert;
 
public class TestNGCrossBrowserDemo {
      WebDriver driver;
 
       @BeforeClass
       @Parameters("browser")
       public void setup(String browser) throws Exception {
 
          // Check if parameter passed from TestNG is 'firefox'
          if (browser.equalsIgnoreCase("firefox")) {
 
                // set path to geckodriver.exe and create gecko instance
                 System.setProperty("webdriver.gecko.driver",
                                                            "C:\\Users\\Vibha\\Desktop\\SeleniumKT\\geckodriver-v0.27.0-win64\\geckodriver.exe");
                 driver = new FirefoxDriver();
                 System.out.println("Browser Started:" + browser);
          }
 
          // Check if parameter passed as 'chrome'
           else if (browser.equalsIgnoreCase("chrome")) {
 
                // set path to chromedriver.exe and create chromeinstance
                  System.setProperty("webdriver.chrome.driver",
                                                "C:\\Users\\Vibha\\Desktop\\SeleniumKT\\chromedriver_win32\\chromedriver.exe");
                   driver = new ChromeDriver();
                   System.out.println("Browser Started:" + browser);
          }
 
          // Check if parameter passed as 'edge'
           else if (browser.equalsIgnoreCase("Edge")) {
 
               // set path to chromedriver.exe and create edge instance
                System.setProperty("webdriver.edge.driver",
                                                      "C:\\Users\\Vibha\\Desktop\\SeleniumKT\\edgedriver_win64\\msedgedriver.exe");
               driver = new EdgeDriver();
                System.out.println("Browser Started:" + browser);
           }
 
           else {
                  // If no browser passed throw exception
                    throw new Exception("Browser is not correct");
           }
        driver.manage().timeouts().implicitlyWait(10, TimeUnit.SECONDS);
        driver.manage().window().maximize();
       }
 
        @Test
        public void testTitle() throws InterruptedException {
                        driver.get("https://configureselenium.blogspot.com/2019/10/testng-what-is-testng.html");
              String actualTitle = driver.getTitle();
              System.out.println("Title- " + actualTitle);
 
              System.out.println("Test Case One with Thread Id:- " + Thread.currentThread().getId());
               Assert.assertEquals("TestNG Framework - Introduction to TestNG", actualTitle);
            }
 
      @AfterClass
      public void afterTest() {

       // close the browser
       driver.quit();
    }
}

Output

Browser Started:Edge
Browser Started:Chrome
Title- TestNG Framework - Introduction to TestNG
Test Case One with Thread Id:- 15
Title- TestNG Framework - Introduction to TestNG
Test Case One with Thread Id:- 13Browser Started:Firefox
Title- TestNG Framework - Introduction to TestNG
Test Case One with Thread Id:- 14

We need to specify the values of browser in the TestNG XML file that will pass to the test case file.

<?xml version="1.0"encoding="UTF-8"?>
<!DOCTYPE suite SYSTEM "http://testng.org/testng-1.0.dtd">
<suite name="TestSuite"thread-count="3" parallel="tests">
<test name="ChromeTest">
<parameter name="browser"value="Chrome" />
<classes>
<class name="com.selenium.testng.TestNGDemo.TestNGCrossBrowserDemo">
</class>
</classes>
</test>
<test name="FirefoxTest">
<parameter name="browser"value="Firefox" />
<classes>
<class name="com.selenium.testng.TestNGDemo.TestNGCrossBrowserDemo">
</class>
</classes>
</test>
<test name="EdgeTest">
<parameter name="browser"value="Edge" /> 
<classes>
<class name="com.selenium.testng.TestNGDemo.TestNGCrossBrowserDemo">
</class>
</classes>
</test>
</suite>

To execute this program, we need to Right click on the program and select Run as – TestNG Test

The test execution result looks like as shown below. It shows the test execution status of all the tests. As, in this program, 3 tests are executed and all 3 of them passes. The same result can be depicted from below image

TestNG generates various type of reports under test-output folder like emailable-report.html, index.html, testng-results.xml

We are interested in ’emailable-report.html’ report. Open ’emailable-report.html’, as this is a html report open it with browser. Below image shows emailable-report.html.

TestNG also produce “index.html” report and it resides under test-output folder. Below image shows index.html report.

We are done! Congratulations on making it through this tutorial and hope you found it useful! Happy Learning!!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s