How to do Cross Browser testing using Selenium – User friendly Tech help

What is Cross Browser Testing Concept?
nIn today’s world we as users have numerous list of available browsers, which introduces problems for web-application developers. Because web applications are expected to behave consistently across all of these browsers. However, because the standards for client-side technology are still evolving, there is a great deal of inconsistency in how different web browsers behave. These inconsistencies lead to what we call cross browser issues–differences in the way a web page looks and behaves in different browsers.
nSo we need to move towards cross browser testing.(Testing web applications across multiple combinations of browsers)n

n

n

n

n

Cross Browser Testing

n

nCross-browser issues can range from minor cosmetic problems like layout issues (differences in element position, size, visibility, or appearance.) to critical failures that involve the inaccessibility applications functionality. In both cases, the issue can result in the inability of the users to
nPerform one or more services provided by a web application, which results in losing of business. For example we are on amazon buying page but buy button is not visible in xyz browser, are we going to wait for that button or move to eBay to buy the same product.
n
nPlease read the below topic only in case you are curious about how browsers work, else skip directly to the code part 🙂
n
nWeb Browser rendering:-
nA web application follows a typical client-server computing model and usually consists of several server and client side components. Server side components get invoked when the web server receives a request (typically, from a remote user through a web browser like searching selenium tutorials on google). As a result of the server side execution, various client side components are dynamically generated and sent back to the web browser in the form of HTML pages. These pages, which are rendered by the browser, reference or contain resources such as images, animations, style information (i.e,
nCascading Style Sheets (CSS)) and scripts (e.g., JavaScript or VBScript).
n
nNow on client end meaning a web browser, it  consists of different subsystems that handle numerous functionalities, such as processing the client side components and managing the interactions of these components with system resources (e.g., network, display, file system).Among the subsystems of a browser, one of the main components is the layout engine(we are interested in this), which is responsible for rendering a web page by parsing the HTML tags in the page and applying to the relevant elements the style information contained in the CSS style sheets for the page. The browser also maintains a DOM
n(Document Object Model) representation of the web page in its memory to allow scripts associated with the page to query and modify web page elements. Although there is a standard definition for the DOM format, web browsers often deviate from such standard. Moreover, since most web pages have browser specific code to make them work on different browsers and platforms, the DOM
ngenerated by different browsers can be very different, resulting in different rendering of elements on web browsers. So we move towards cross –browser testing.

n

Approach:-
nWe are going to leverage the data parameterization feature of TestNG to achieve cross browser testing in Selenium.
n

n

Code:-

n

package srcTest;
import java.util.concurrent.TimeUnit;
import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.firefox.FirefoxDriver;
import org.testng.annotations.Parameters;
import org.testng.annotations.Test;
import org.testng.annotations.BeforeClass;
import org.testng.annotations.AfterClass;
public class CrossBrowser {
 private WebDriver driver; @Test
 public void login() {
 //Adding Implicit wait  driver.manage().timeouts().implicitlyWait(20, TimeUnit.SECONDS);
 //Maximize browser driver.manage().window().maximize();
 //Open the Login Application
 driver.get("http://www.ufthelp.com/p/testpage.html");
 //Fill the UserName and Password fields
 driver.findElement(By.id("userName")).sendKeys("uftHelp");
 driver.findElement(By.id("password")).sendKeys("Password");
 //Click the Sign in Button
 driver.findElement(By.id("SignIn")).click();
 //Clicking on the alert message driver.switchTo().alert().accept(); } @BeforeClass
 @Parameters({"browser"})
 public void BeforeClass(String browser) throws Exception {
 //Incase it is firefox browser 
 if(browser.equalsIgnoreCase("firefox")) { 
 driver = new FirefoxDriver(); }
 //Incase browser is chrome
 else if(browser.equalsIgnoreCase("chrome")) {
 System.setProperty("webdriver.chrome.driver", "D:\Automation\Selenium\MyCode\chromedriver_win32\chromedriver.exe");
 driver = new ChromeDriver(); }
 //Exit the Test without execution
 else {
 //Throw an exception for no matching browsers 
 throw new Exception("Invalid Browser"+browser); } } @AfterClass
 public void afterClass() {
 //Destroying the object  driver.quit();   }}

n

nXML File:-

n

n

nResult:–

nn

nNote:–While running the same code on different browsers we can have issues like Speed of execution, when things execute too quickly (which indicates that you need to add explicit waits to your test code) or timeout (which indicates that the explicit waits you have are too tight and need to be loosened). To avoid such scenarios we need to test the code on individual browsers and find the failures. Take each failed test, adjust the code as needed, and re-run until everything’s green.
n
nHow to write selenium test case using TestNG?

Matteo