What is Cross Browser Testing Concept?
In 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.
So we need to move towards cross browser testing.(Testing web applications across multiple combinations of browsers)
Cross-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
Perform 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.
Please read the below topic only in case you are curious about how browsers work, else skip directly to the code part :)
Web Browser rendering:-
A 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,
Cascading Style Sheets (CSS)) and scripts (e.g., JavaScript or VBScript).
Now 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
(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
generated by different browsers can be very different, resulting in different rendering of elements on web browsers. So we move towards cross –browser testing.
Approach:-
We are going to leverage the data parameterization feature of TestNG to achieve cross browser testing in Selenium.
Code:-
XML File:-
Result:-
Note:-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.
In 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.
So we need to move towards cross browser testing.(Testing web applications across multiple combinations of browsers)
 |
| Cross Browser Testing |
Cross-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
Perform 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.
Please read the below topic only in case you are curious about how browsers work, else skip directly to the code part :)
Web Browser rendering:-
A 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,
Cascading Style Sheets (CSS)) and scripts (e.g., JavaScript or VBScript).
Now 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
(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
generated by different browsers can be very different, resulting in different rendering of elements on web browsers. So we move towards cross –browser testing.
Approach:-
We are going to leverage the data parameterization feature of TestNG to achieve cross browser testing in Selenium.
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(); } }
XML File:-
<!DOCTYPE suite SYSTEM "http://testng.org/testng-1.0.dtd" > <suite name="Suite" > <test name="Run in Firefox"> <parameter name="browser" value="firefox"></parameter> <classes> <class name="srcTest.DataParameterization"/> </classes> </test> <test name="Run in chrome"> <parameter name="browser" value="chrome"></parameter> <classes> <class name="srcTest.DataParameterization"/> </classes> </test> </suite>
Result:-
Note:-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.