Browser testing is the most difficult job in the industry. Do you wonder how? It is because every business launches a website. Sites are a prime mode to promote business, and not only that; you will be considered doing business only when you have a website especially if it is an online business.
Do you think is it enough to host a website?
No, and you need to provide the right information, great graphics, user-friendly access, and compatibility to be accessed by all devices. Yes, the last thing people use is a device to check your site. But the primary mode is using their smartphones, tablets, and ipads not only this, you never know if they are using a Windows or Mac device for the same. So your website must be compatible with every device from which it can be accessed.
This must have intrigued you to make a cross browser compatible website and check your existing website if this is compatible enough or not.
This will call a need to test your website across browsers and devices. You’d want to test it on iOS, Android, Windows, Mac, and yeah! don’t miss the different types of browsers as well. But the process of checking the same thing in different websites will become tiresome. After a point of time you’ll get bored and may even miss out on small details while testing.
Hence, you need some help in avoiding that. For this, you can automate your cross browser testing on a cross browser cloud grid. Selenium WebDriver API can help you in automating your testing hence reducing efforts and saving you a lot of time and manual labor.
We shall start from the basics of why Selenium WebDriver API and deep dive to steer clear all the questions revolving in your mind.
Comparative Study – Selenium IDE VS RC VS WebDriver
| Selenium IDE | Selenium RC | Selenium WebDriver | |
| Browser | Script execution can be recorded and played back with the best user interface and supports the Firefox browser | Script execution can be recorded and played back with the best user interface and additionally supports different browsers namely the Opera, Safari, Chrome, Internet Explorer, and Firefox. | Script execution can be recorded and played back with the best user interface and additionally supports different browsers namely the Opera, Safari, Chrome, Internet Explorer, and Firefox.
Some more such as the Android, iOS, Phantomjs, and HtmlUnit. |
| Language | Based on Javascript and supports all its extensions. | Goes well with multiple languages including Python, Perl, Ruby, C#, and Java. Note: Every language that makes an HTTP call can be used | Goes well with multiple languages including Python, Perl, Ruby, C#, and Java. |
| Platform | It works well on any platform name it Solaris, Mac, Linux, or Windows. | It works well on any platform name it Solaris, Mac, Linux, or Windows. | It works well on any platform name it Solaris, Mac, Linux, or Windows. |
| Test Framework | Generates code | C# – NUnit
Java – TestNG, JUnit3, JUnit4 Ruby – RSpec, Test:: Unit Python – Unittest |
C# – NUnit
Java – TestNG, JUnit4 Ruby – RSpec, Test:: Unit Python – Unittest |
| Script Creation | Creates bug reproduction scripts quickly | Creates robust and browser dependent regression automation tests. | |
| Browser Call | Works only with Firefox | Works with multiple browsers but works in the same fashion irrespective of the browser. | Works with multiple browsers but makes a direct call with each browser using that particular browser’s native (built-in) support. |
WebDriver API
WebDriver API reviews the device or the browser and makes a particular binding with the developer that will create a room to write the test script in any language. Also, this can be further executed on any browser using the WebDriver. Browsers that do not have WebDriver compatibility requires a download externally.
How to Drive the Browser Using WebDriver API
Installing WebDriver using Different Languages
Installing Selenium is the first step in setting up the project. Start writing the code by making use of Selenium commands. The appropriate codes are chosen based on the environment and the language used. Therefore let us discuss in detail about the 7 languages predominantly used in the browser creation.
- Java – We start with Java as most of the web applications use Java. Setting up Java projects with Selenium 2.0 is quick and simple with the help of Maven. This tool helps to download all the Java bindings to automatically create the project.
Use maven pom.xml (project configuration) file
Now it is ready to be imported on the IDE you prefer.
Steps in detail for your understanding.
- Create a folder which will be used to store all your Selenium project files.
- Create the pom.xml file using a text editor.
- Save this file in the folder. Note: Check the latest version of the pom.xml file.
- Run Maven using the command line CD in the project directory. mvn clean install
- Download gets over and imports the project on the environment you prefer.
Pom.xml file – Source
<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>com.mycompany.app</groupId>
<artifactId>my-app</artifactId>
<version>1.0-SNAPSHOT</version>
<properties>
<maven.compiler.source>1.7</maven.compiler.source>
<maven.compiler.target>1.7</maven.compiler.target>
</properties>
<dependencies>
<dependency>
<groupId>junit</groupId>
<artifactId>junit</artifactId>
<version>4.12</version>
<scope>test</scope>
</dependency>
</dependencies>
</project>
Include Selenium using the command given below in the command line for the respective languages.
| 2. Python | Pip install selenium |
| 3. Ruby | Gem install selenium-webdriver |
| 4. Javascript – node.js | Npm install selenium.webdriver |
Click the respective link given to download the file and get selenium-webdriver for C#, Perl and PHP.
| 5. C# | http://selenium-release.storage.googleapis.com/index.html |
| 6. Perl | https://metacpan.org/module/Selenium::Remote::Driver |
| 7. PHP | http://code.google.com/p/php-webdriver-bindings/ |
Running Test WebDriver Selenium in Different Browsers
Selenium Basic Code for initiating browser testing
Driver Setting – WebDriver driver = new FireFoxDriver ();
The interface WEBDRIVER is given a reference variable DRIVER for the class FIREFOXDRIVER.
Executing Selenium Command – driver.getTitle ();
This code is used to execute the selenium command after setting up the driver. This code will create an HTTP request internally and initiates the browser mentioned to decide the selenium command implementation.
With the help of the HTTP server, the code is sent back and forth to the browser and the automation script.
Accessing the driver classes – findElement(); close(); getClass(); and many more
These are some examples and you can find the complete methods by typing “driver.” in the editor or click “ctrl+space”
Setting up Selenium for FireFox is not required as it is present as default. However, you need to set the system property when you want to use WebDriver with other browsers.
- Chrome Browser
Download the driver from this link for Chrome. Chrome launching is easier when compared to other browsers.
Set system property WebDriver driver = new Chrome (); directing to the path of the ChromeDrive.exe file
Instantiate the ChromeDriver class
Alternatively, follow these instructions and do the same without any coding.
Click My Computer → Right Click on the Empty Space to get the properties → Click on Properties → Change Settings → Advanced → Environment Variables → System Variables → Path → Edit
In the edit, the tab doesn’t delete anything instead include a semicolon at the end and mention the path of the ChromeDriver.
Make sure you download the latest Chrome browser and the latest ChromeDriver.exe to avoid any errors.
- Internet Explorer
Download the driver using one of the links based on your system compatibility.
https://goo.gl/9Cqa4q – 32 Bit Windows
https://goo.gl/AtHQuv – 64 bit Windows
The class InternetExplorerDriver is used to control the browser. The process is the same as that of doing it for a Chrome but mentions the correct path.
- Safari
Download the Safari extension and then click the folder where you downloaded the file and double click on it to choose Install. After installation open preference pane and enable WebDriver browser extension. Restart the browser. You’re good to go.
- HTML Unit
HTML Unit driver does not have a GUI and it runs internally. Usually, this browser is not suitable for testing as it cannot do all functions as the others do. But, it is faster and lightweight WebDriver implementation can be used to test data.
It is not required to install any extra APIs but use the Selenium server’s detached jar file. HTML Unit Driver also captures the screenshots concurrently when the test is running.
Do not use it for javascript developed applications as it is not compatible.
- PhantomJS
This is also a driver that does not require GUI and hence called headless browser. Javascript API is used and web pages can be accessed easily. GhostDriver jar files can be downloaded here. Alternatively, use this link to download integrated PhantomJS and GhostDriver exe file. Also, download PhantomJS Driver and set the property file using the path and execute the script.
PhantomJs.binary.path
How to write automation code – a stepwise process
WebDriver Navigation Commands
Now, you got some idea about installing and running webdriver in the respective browsers and also how different languages drive the action.
In this section understand the commands used to navigate to a page. Followed by you can locate elements, test websites etc.
| Java | driver.get(“website address”); |
| Ruby | driver.get “website address” |
| Javascript | driver.get(‘website address’); |
| C# | driver.Url = “website address”; |
| Perl | $driver ->get(‘website address) |
| Python | driver.get(“website address”) |
Website address must be replaced by the address of the site you wish to call. Example – https://www.google.com/
Locate Elements
The Web elements are located with the help of the Find Element command. Usually “By” is the query object used to call the elements and different types of strategies used in“By” includes.
By ID
Use ID to locate the element on the web page. This method is effective when non-unique id creation and auto-generation of ids are avoided. Each language has its own way of using the syntax. The same is not documented here as people with understanding in programming can
use the syntax.
driver.findElement(By.id(“loginForm”))
By Class Name
The attribute on the DOM (Document Object Model) element is the class and finding multiple elements using Class is feasible.
driver.findElement(By.name(“password”))
By Name
The input element is obtained by finding the name attribute.
driver.findElement(By.name(“username”))
By Link
Fetching the link element using the visible text that matches the search. The same can be used with partial link text as well where the partial match is fetched.
By CSS
Use the W3C selector list and locate the UI element.
By XPath
Click on the F12 key using your keypad and pick the element you want to choose using the leftmost button. However, XPath is used in high-level automation testing.
CSS Vs XPath – Which is best for your browser
| CSS | XPath |
| Internet Explorer works fast with CSS | Not very efficient with Internet Explorer |
| With same capability, these selectors are shorter | XPath selectors are longer than the CSS |
| CSS cannot traverse through the DOM | XPath can quickly traverse the DOM |
Perform Action
Post navigation and located the web element, it’s time to interact. Yes, test interaction action will be performed by invoking the interaction method.
3 Basic Interaction methods are:
- sendKeys – Enter text is the action item. This can be entering the user name, password etc.
- submit – Followed by invoking the submit method to submit the details entered.
- Clear – When there is a need to delete, then the clear method is invoked.
Write the test
The structure of writing test includes two steps, namely the setting up of preconditions and then creating steps for test execution.
Before running the test, set the application in the testing mode. Make changes in the process status etc. Do this by altering the database values before making any click on the page.
Now, describe the test flow giving instructions about the test. What must be done after running the test when the expected result is obtained? Should we terminate the test or continue. Likewise, what is to be done when the test fails.
Example – In the above case, the login response could be positive or negative. It is important to make a plan before a response is expected. Every possible outcome must be considered and steps must be created accordingly.
Look forward to the Browser Response
Soon after the Submit method is invoked there is a wait time that will let the action performed to reach the server. The server will respond to the action performed and a waiting time must be defined by the tester to check the browser response.
Two methods followed in WebDriver API testing are
Implicit Wait – Define a fixed elapsed time applicable to every WebDriver interaction. But in general, it is not possible to define a fixed time and hence explicit wait is used however it has its own complexity.
Explicit Wait – A maximum wait time is defined and the waiting continues. Use WebDriverWait class with a maximum wait time. Using ExpectedConditions class and until a method to set the time. The same is shown with an example.
Managing Test and Tracking Test
The crucial step involved in automation testing is to run and record the test script. This will lead to evaluating the performance and function of the Application Under Test (AUT). In order to achieve this, there needs a test framework. This is decided based on the language used for coding.
| Java | JUnit |
| C# | NUnit |
| Python | Unittest or pyunit |
| Ruby | RUnit |
Test Framework working principle
Irrespective of the language used, the testing framework that follows XUnit follows assertion concept. Testing is nothing but checking the actual outcome with the expected outcome. Do this checking by implementing an assertion in which there is an exception thrown upon the assert condition fails.
The framework in general begins with the terminology assert and ends with the logical condition. Eg – assertEquals Refer the SeleniumHQ document to find more details about the assertion.
Test Execution – TestNG Execution Method
Mention a package to run → Be Specific about the TestNG group → Then provide a testing.xml file from outside to run → Execute all test in one class → Execute in one test method → Form a pattern for all tests matching them.
TestNG method will allow testing to happen in multiple browsers at the same time which is explained in the last coming sections.
Record the results
After testing is completed it is important to record which can be done by
- Logging framework
- Test framework
- Capturing a screenshot of the browser window
Quitting the test
The test gets concluded when you chose the quit method class. The quit test will let you run another test without application and resource state getting affected by the previous testing. The quit method will leave the browser application and closes all the pages. It also leaves the WebDriver server that was interacting with the browser. Finally, releases the WebDriver.
driver.quit();
Benefits Of Automation Browser Testing With WebDriver API
- Supports to test dynamic web pages that have elements which change even before the page gets reloaded.
- It offers a well-structured and widespread object-oriented API which will help in resolving any advanced web application testing issues.
- Headbrowsers like HTML Unit Driver and Phantom JS driver can be tested with WebDriver.
- The test can be executed on different machines and multiple browsers in parallel.
Cross Browser testing with WebDriver API
Why cross-browser? It is because technology has traveled a long way and people do not rely only on one browser to access the applications. This means that simultaneously testing must be performed to understand the web application compatibility across different browsers.
WebDriver API allows automated test cases to be used to test on all browsers concurrently. We would like to throw light on the same in the section below. Simple steps involved to achieve cross-browser testing using WebDriver API.
Integrate the TestNG framework and the WebDriver. This will let the test case execution in multiple browsers at the same time from the same system. The integration will let the report generation process to happen easily as WebDriver does not support generating reports.
If you haven’t written any TestNG script or are unfamiliar to it, read this blog post on First TestNG automation script.
Integration steps
- File → New → Java Project
- Type the project name and move to next page
- Import TestNG libraries to the current project. Libraries → Add Library → TestNG → Next
- Click Finish and now you can find all the libraries listed in your project.
- Include JAR files after downloading from the link and then reach the folder where you place the Selenium JAR Files and adding the external files.
- Click Finish and you have successfully integrated files in one folder.
Test.xml file will map the test case and multiple browser testing becomes part of the automation testing using the WebDriver API. The testing.xml will have multiple tags and hence the browser testing will occur in two browsers simultaneously.
Just refer back to the place where you downloaded the browser driver and then ensured that your system property is set for the respective browser. Here you will not have on the browser but multiple and hence the system property must be verified for all the browsers you have chosen to run your test.
Simple test case for your understanding
if (browser.equalsIgnoreCase(“chrome”)){
driver = new ChromeDriver();
}
else if (browser.equalsIgnoreCase(“safari”)){
System.setProperty(“webdriver.safari.driver”,”.\\safaridriver.exe”);
driver = new SafariDriver();
}
This example code is for two browsers and you can add multiple by modifying the code. In this case, the first test will pass through the safari browser and then on the chrome.
You need the testing.xml file to execute the test. Right click on it and choose run as TestNG.
Cross Browser Testing In A Nutshell
Selenium WebDriver, when integrated with TestNG, will let you perform multiple browser testing at the same time from a single machine. The browser name is passed to executing the testing.xml file and WebDriver reference is created in the test case.
Concluding thoughts
Do you now agree that automation testing is the best way to make sure your site is responsive across OS, browsers, and devices? The explanation given here are the usual steps followed in testing a web application. We have tried to cover as many languages and browsers to make you feel glad that everything is quick and perfect in automation testing.
Do not worry about the programming language the browser is designed because the underlying principle in browser testing remains the same. Only thing is to choose the right XUnit based on the coding language for testing.