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 uses Chromium-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 Selenium and TestNG.
Step 1 – Add the below dependencies to the POM.xml, in case of Maven project.
<dependencies>
<dependency>
<groupId>org.seleniumhq.selenium</groupId>
<artifactId>selenium-java</artifactId>
<version>3.141.59</version>
</dependency>
<dependency>
<groupId>io.github.bonigarcia</groupId>
<artifactId>webdrivermanager</artifactId>
<version>5.2.1</version>
</dependency>
<dependency>
<groupId>org.testng</groupId>
<artifactId>testng</artifactId>
<version>7.5</version>
<scope>test</scope>
</dependency>
</dependencies>
Step 2 – We have used Selenium WebDriver with TestNG to automate the test cases to run on 3 different browsers – Chrome, Firefox and Edge
Step 3 – The test are running on all 3 browsers in parallel as we have used parallel=“tests”
Step 4 – thread-count=”3″ means that 3 threads will start and each browser will use a thread
Step 5 – @Parameters(“browser”) – parameter will be passed from testng.xml. To know more about @Parameters in TestNG, please refer to this tutorial.
Let us create a helper class which contains the methods to initialize the browser and close the browser.
import java.util.concurrent.TimeUnit;
import org.openqa.selenium.WebDriver;
import org.testng.annotations.AfterMethod;
import org.testng.annotations.BeforeMethod;
import org.testng.annotations.Parameters;
import io.github.bonigarcia.wdm.WebDriverManager;
public class BaseClass {
WebDriver driver;
@BeforeMethod
@Parameters("browser")
public void setup(String browser) throws Exception {
if (browser.equalsIgnoreCase("firefox")) {
driver = WebDriverManager.firefoxdriver().create();
System.out.println("Browser Started:" + browser);
} else if (browser.equalsIgnoreCase("chrome")) {
driver = WebDriverManager.chromedriver().create();
System.out.println("Browser Started:" + browser);
} else if (browser.equalsIgnoreCase("edge")) {
driver = WebDriverManager.edgedriver().create();
System.out.println("Browser Started:" + browser);
} else {
throw new Exception("Browser is not correct");
}
driver.get("https://opensource-demo.orangehrmlive.com/");
driver.manage().timeouts().implicitlyWait(10, TimeUnit.SECONDS);
driver.manage().window().maximize();
}
@AfterMethod
public void closeBrowser() {
driver.quit();
}
}
CrossBrowserTests
import static org.testng.Assert.assertTrue;
import org.openqa.selenium.By;
import org.testng.Assert;
import org.testng.annotations.Test;
public class CrossBrowserTests extends BaseClass{
@Test
public void invalidLoginTest() throws InterruptedException {
System.out.println("Test Case1");
driver.get("https://opensource-demo.orangehrmlive.com/");
driver.manage().window().maximize();
driver.findElement(By.name("txtUsername")).sendKeys("admin123123");
driver.findElement(By.name("txtPassword")).sendKeys("adm");
driver.findElement(By.id("btnLogin")).click();
String expectedError = driver.findElement(By.id("spanMessage")).getText();
Assert.assertTrue(expectedError.contains("Invalid credentials"));
}
@Test
public void verifyLinkedIn() {
System.out.println("Test Case2");
driver.manage().window().maximize();
Boolean linkedInIcon = driver.findElement(By.xpath("//*[@id='social-icons']/a[1]/img")).isEnabled();
assertTrue(linkedInIcon);
}
@Test
public void validLoginTest() throws InterruptedException {
System.out.println("Test Case3");
driver.findElement(By.name("txtUsername")).sendKeys("Admin");
driver.findElement(By.name("txtPassword")).sendKeys("admin123");
driver.findElement(By.id("btnLogin")).click();
String expectedTitle = driver.findElement(By.xpath("//*[@id='content']/div/div[1]/h1")).getText();
Assert.assertTrue(expectedTitle.contains("Dashboard"));
}
}
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 "https://testng.org/testng-1.0.dtd">
<suite name="Suite" parallel="tests" thread-count="3">
<test name="Chrome Test">
<parameter name="browser" value="chrome" />
<classes>
<class name="com.example.crossbrowser.CrossBrowserTests"/>
</classes>
</test> <!-- Test -->
<test name="firefox Test">
<parameter name="browser" value="firefox" />
<classes>
<class name="com.example.crossbrowser.CrossBrowserTests"/>
</classes>
</test> <!-- Test -->
<test name="Edge Test">
<parameter name="browser" value="edge" />
<classes>
<class name="com.example.crossbrowser.CrossBrowserTests"/>
</classes>
</test> <!-- Test -->
</suite> <!-- 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 Report Generation
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!!
QA Automation Expert 