Search icon CANCEL
Subscription
0
Cart icon
Your Cart (0 item)
Close icon
You have no products in your basket yet
Save more on your purchases! discount-offer-chevron-icon
Savings automatically calculated. No voucher code required.
Arrow left icon
All Products
Best Sellers
New Releases
Books
Videos
Audiobooks
Learning Hub
Newsletter Hub
Free Learning
Arrow right icon
timer SALE ENDS IN
0 Days
:
00 Hours
:
00 Minutes
:
00 Seconds

Cross-browser Tests using Selenium WebDriver

Save for later
  • 18 min read
  • 25 Mar 2015

article-image

In this article by Prashanth Sams, author of the book Selenium Essentials, helps you to perform efficient compatibility tests. Here, we will also learn about how to run tests on cloud.

You will cover the following topics in the article:

  • Selenium WebDriver compatibility tests
  • Selenium cross-browser tests on cloud
  • Selenium headless browser testing

(For more resources related to this topic, see here.)

Selenium WebDriver compatibility tests

Selenium WebDriver handles browser compatibility tests on almost every popular browser, including Chrome, Firefox, Internet Explorer, Safari, and Opera. In general, every browser's JavaScript engine differs from the others, and each browser interprets the HTML tags differently. The WebDriver API drives the web browser as the real user would drive it. By default, FirefoxDriver comes with the selenium-server-standalone.jar library added; however, for Chrome, IE, Safari, and Opera, there are libraries that need to be added or instantiated externally.

Let's see how we can instantiate each of the following browsers through its own driver:

  • Mozilla Firefox: The selenium-server-standalone library is bundled with FirefoxDriver to initialize and run tests in a Firefox browser. FirefoxDriver is added to the Firefox profile as a file extension on starting a new instance of FirefoxDriver. Please check the Firefox versions and its suitable drivers at http://selenium.googlecode.com/git/java/CHANGELOG.

    The following is the code snippet to kick start Mozilla Firefox:

    WebDriver driver = new FirefoxDriver();

  • Google Chrome: Unlike FirefoxDriver, the ChromeDriver is an external library file that makes use of WebDriver's wire protocol to run Selenium tests in a Google Chrome web browser. The following is the code snippet to kick start Google Chrome:
    System.setProperty("webdriver.chrome.driver","C:\chromedriver.exe");
    WebDriver driver = new ChromeDriver();

    To download ChromeDriver, refer to http://chromedriver.storage.googleapis.com/index.html.

  • Internet Explorer: IEDriverServer is an executable file that uses the WebDriver wire protocol to control the IE browser in Windows. Currently, IEDriverServer supports the IE versions 6, 7, 8, 9, and 10. The following code snippet helps you to instantiate IEDriverServer:
    System.setProperty("webdriver.ie.driver","C:\IEDriverServer.exe");
    DesiredCapabilities dc = DesiredCapabilities.internetExplorer();
    dc.setCapability(InternetExplorerDriver.INTRODUCE_FLAKINESS_BY_IGNORING_SECURITY_DOMAINS, true);
    WebDriver driver = new InternetExplorerDriver(dc);

    To download IEDriverServer, refer to http://selenium-release.storage.googleapis.com/index.html.

  • Apple Safari: Similar to FirefoxDriver, SafariDriver is internally bound with the latest Selenium servers, which starts the Apple Safari browser without any external library. SafariDriver supports the Safari browser versions 5.1.x and runs only on MAC. For more details, refer to http://elementalselenium.com/tips/69-safari.

    The following code snippet helps you to instantiate SafariDriver:

    WebDriver driver = new SafariDriver();

  • Opera: OperaPrestoDriver (formerly called OperaDriver) is available only for Presto-based Opera browsers. Currently, it does not support Opera versions 12.x and above. However, the recent releases (Opera 15.x and above) of Blink-based Opera browsers are handled using OperaChromiumDriver. For more details, refer to https://github.com/operasoftware/operachromiumdriver.

    The following code snippet helps you to instantiate OperaChrumiumDriver:

    DesiredCapabilities capabilities = new DesiredCapabilities();
    capabilities.setCapability("opera.binary", "C://Program Files (x86)//Opera//opera.exe");
    capabilities.setCapability("opera.log.level", "CONFIG");
    WebDriver driver = new OperaDriver(capabilities);

    To download OperaChromiumDriver, refer to https://github.com/operasoftware/operachromiumdriver/releases.

TestNG

TestNG (Next Generation) is one of the most widely used unit-testing frameworks implemented for Java. It runs Selenium-based browser compatibility tests with the most popular browsers. The Eclipse IDE users must ensure that the TestNG plugin is integrated with the IDE manually. However, the TestNG plugin is bundled with IntelliJ IDEA as default. The testng.xml file is a TestNG build file to control test execution; the XML file can run through Maven tests using POM.xmlwith the help of the following code snippet:

<plugin>
   <groupId>org.apache.maven.plugins</groupId>
   <artifactId>maven-surefire-plugin</artifactId>
   <version>2.12.2</version>
   <configuration>
     <suiteXmlFiles>
     <suiteXmlFile>testng.xml</suiteXmlFile>
     </suiteXmlFiles>
   </configuration>
</plugin>

To create a testng.xml file, right-click on the project folder in the Eclipse IDE, navigate to TestNG | Convert to TestNG, and click on Convert to TestNG, as shown in the following screenshot:

cross-browser-tests-using-selenium-webdriver-img-0

The testng.xml file manages the entire tests; it acts as a mini data source by passing the parameters directly into the test methods. The location of the testng.xml file is hsown in the following screenshot:

cross-browser-tests-using-selenium-webdriver-img-1

As an example, create a Selenium project (for example, Selenium Essentials) along with the testng.xml file, as shown in the previous screenshot. Modify the testng.xml file with the following tags:

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE suite SYSTEM "http://testng.org/testng-1.0.dtd">
<suite name="Suite" verbose="3" parallel="tests" thread-count="5">
 
<test name="Test on Firefox">
   <parameter name="browser" value="Firefox" />
   <classes>
     <class name="package.classname" />
     </classes>
</test>
 
<test name="Test on Chrome">
   <parameter name="browser" value="Chrome" />
   <classes>
   <class name="package.classname" />
   </classes>
</test>
 
<test name="Test on InternetExplorer">
   <parameter name="browser" value="InternetExplorer" />
   <classes>
      <class name="package.classname" />
   </classes>
</test>
 
<test name="Test on Safari">
   <parameter name="browser" value="Safari" />
   <classes>
     <class name="package.classname" />
   </classes>
</test>
 
<test name="Test on Opera">
   <parameter name="browser" value="Opera" />
   <classes>
     <class name="package.classname" />
   </classes>
</test>
</suite>
<!-- Suite -->

Download all the external drivers except FirefoxDriver and SafariDriver, extract the zipped folders, and locate the external drivers in the test script as mentioned in the preceding snippets for each browser.

The following Java snippet will explain to you how you can get parameters directly from the testng.xml file and how you can run cross-browser tests as a whole:

@BeforeTest
@Parameters({"browser"})
public void setUp(String browser) throws MalformedURLException {
if (browser.equalsIgnoreCase("Firefox")) {
   System.out.println("Running Firefox");
   driver = new FirefoxDriver();
} else if (browser.equalsIgnoreCase("chrome")) {
   System.out.println("Running Chrome");
System.setProperty("webdriver.chrome.driver", "C:\chromedriver.exe");
   driver = new ChromeDriver();
} else if (browser.equalsIgnoreCase("InternetExplorer")) {
   System.out.println("Running Internet Explorer");
System.setProperty("webdriver.ie.driver", "C:\IEDriverServer.exe");
DesiredCapabilities dc = DesiredCapabilities.internetExplorer();
   dc.setCapability
(InternetExplorerDriver.INTRODUCE_FLAKINESS_BY_IGNORING_SECURITY_DOMAINS, true); //If IE fail to work, please remove this line and remove enable protected mode for all the 4 zones from Internet options    driver = new InternetExplorerDriver(dc); } else if (browser.equalsIgnoreCase("safari")) {    System.out.println("Running Safari");    driver = new SafariDriver(); } else if (browser.equalsIgnoreCase("opera")) {    System.out.println("Running Opera"); // driver = new OperaDriver();       --Use this if the location is set properly--    DesiredCapabilities capabilities = new DesiredCapabilities(); capabilities.setCapability("opera.binary", "C://Program Files (x86)//Opera//opera.exe");    capabilities.setCapability("opera.log.level", "CONFIG");    driver = new OperaDriver(capabilities); } }

SafariDriver is not yet stable. A few of the major issues in SafariDriver are as follows:

  • SafariDriver won't work properly in Windows
  • SafariDriver does not support modal dialog box interaction
  • You cannot navigate forward or backwards in browser history through SafariDriver

Selenium cross-browser tests on the cloud

The ability to automate Selenium tests on the cloud is quite interesting, with instant access to real devices. Sauce Labs, BrowserStack, and TestingBot are the leading web-based tools used for cross-browser compatibility checking. These tools contain unique test automation features, such as diagnosing failures through screenshots and video, executing parallel tests, running Appium mobile automation tests, executing tests on internal local servers, and so on.

SauceLabs

SauceLabs is the standard Selenium test automation web app to do cross-browser compatibility tests on the cloud. It lets you automate tests on your favorite programming languages using test frameworks such as JUnit, TestNG, Rspec, and many more. SauceLabs cloud tests can also be executed from the Selenium Builder IDE interface. Check for the available SauceLabs devices, OS, and platforms at https://saucelabs.com/platforms.

Access the websitefrom your web browser, log in, and obtain the Sauce username and Access Key. Make use of the obtained credentials to drive tests over the SauceLabs cloud. SauceLabs creates a new instance of the virtual machine while launching the tests. Parallel automation tests are also possible using SauceLabs. The following is a Java program to run tests over the SauceLabs cloud:

package packagename;
 
import java.net.URL;
import org.openqa.selenium.remote.DesiredCapabilities;
import org.openqa.selenium.remote.RemoteWebDriver;
import java.lang.reflect.*;
 
public class saucelabs {
 
private WebDriver driver;
 
@Parameters({"username", "key", "browser", "browserVersion"})
@BeforeMethod
public void setUp(@Optional("yourusername") String username,
                    @Optional("youraccesskey") String key,
                     @Optional("iphone") String browser,
                     @Optional("5.0") String browserVersion,
                     Method method) throws Exception {
 
// Choose the browser, version, and platform to test
DesiredCapabilities capabilities = new DesiredCapabilities();
capabilities.setBrowserName(browser);
capabilities.setCapability("version", browserVersion);
capabilities.setCapability("platform", Platform.MAC);
capabilities.setCapability("name", method.getName());
// Create the connection to SauceLabs to run the tests
this.driver = new RemoteWebDriver(
new URL("http://" + username + ":" + key + "@ondemand.saucelabs.com:80/wd/hub"), capabilities);
}
 
@Test
public void Selenium_Essentials() throws Exception {
   // Make the browser get the page and check its title
driver.get("http://www.google.com");
System.out.println("Page title is: " + driver.getTitle());
Assert.assertEquals("Google", driver.getTitle());
WebElement element = driver.findElement(By.name("q"));
element.sendKeys("Selenium Essentials");
element.submit();
}
@AfterMethod
public void tearDown() throws Exception {
driver.quit();
}
}

SauceLabs has a setup similar to BrowserStack on test execution and generates detailed logs. The breakpoints feature allows the user to manually take control over the virtual machine and pause tests, which helps the user to investigate and debug problems. By capturing JavaScript's console log, the JS errors and network requests are displayed for quick diagnosis while running tests against Google Chrome browser.

cross-browser-tests-using-selenium-webdriver-img-2

BrowserStack

Unlock access to the largest independent learning library in Tech for FREE!
Get unlimited access to 7500+ expert-authored eBooks and video courses covering every tech area you can think of.
Renews at $15.99/month. Cancel anytime

BrowserStack is a cloud-testing web app to access virtual machines instantly. It allows users to perform multi-browser testing of their applications on different platforms. It provides a setup similar to SauceLabs for cloud-based automation using Selenium.

Access the site https://www.browserstack.com from your web browser, log in, and obtain the BrowserStack username and Access Key. Make use of the obtained credentials to drive tests over the BrowserStack cloud.

For example, the following generic Java program with TestNG provides a detailed overview of the process that runs on the BrowserStack cloud. Customize the browser name, version, platform, and so on, using capabilities. Let's see the Java program we just talked about:

package packagename;
 
import org.openqa.selenium.remote.DesiredCapabilities;
import org.openqa.selenium.remote.RemoteWebDriver;
 
public class browserstack {
 
public static final String USERNAME = "yourusername";
public static final String ACCESS_KEY = "youraccesskey";
public static final String URL = "http://" + USERNAME + ":" + ACCESS_KEY + "@hub.browserstack.com/wd/hub";
 
private WebDriver driver;
 
@BeforeClass
public void setUp() throws Exception {
   DesiredCapabilities caps = new DesiredCapabilities();
   caps.setCapability("browser", "Firefox");
   caps.setCapability("browser_version", "23.0");
   caps.setCapability("os", "Windows");
   caps.setCapability("os_version", "XP");
   caps.setCapability("browserstack.debug", "true");
//This enable Visual Logs
 
   driver = new RemoteWebDriver(new URL(URL), caps);
}
 
@Test
public void testOnCloud() throws Exception {
   driver.get("http://www.google.com");
   System.out.println("Page title is: " + driver.getTitle());
   Assert.assertEquals("Google", driver.getTitle());
   WebElement element = driver.findElement(By.name("q"));
   element.sendKeys("seleniumworks");
   element.submit();
}
 
@AfterClass
public void tearDown() throws Exception {
   driver.quit();
}
}

The app generates and stores test logs for the user to access anytime. The generated logs provide a detailed analysis with step-by-step explanations. To enhance the test speed, run parallel Selenium tests on the BrowserStack cloud; however, the automation plan has to be upgraded to increase the number of parallel test runs.

TestingBot

TestingBot also provides a setup similar to BrowserStack and SauceLabs for cloud-based cross-browser test automation using Selenium. It records a video of the running tests to analyze problems and debug. Additionally, it provides support to capture the screenshots on test failure. To run local Selenium tests, it provides an SSH tunnel tool that lets you run tests against local servers or other web servers. TestingBot uses Amazon's cloud infrastructure to run Selenium scripts in various browsers.

Access the site https://testingbot.com/, log in, and obtain Client Key and Client Secret from your TestingBot account. Make use of the obtained credentials to drive tests over the TestingBot cloud.

Let's see an example Java test program with TestNG using the Eclipse IDE that runs on the TestingBot cloud:

package packagename;
 
import java.net.URL;
 
import org.openqa.selenium.remote.DesiredCapabilities;
import org.openqa.selenium.remote.RemoteWebDriver;
 
public class testingbot {
private WebDriver driver;
 
@BeforeClass
public void setUp() throws Exception {
DesiredCapabilitiescapabillities = DesiredCapabilities.firefox();
   capabillities.setCapability("version", "24");
   capabillities.setCapability("platform", Platform.WINDOWS);
   capabillities.setCapability("name", "testOnCloud");
   capabillities.setCapability("screenshot", true);
   capabillities.setCapability("screenrecorder", true);
   driver = new RemoteWebDriver(
new URL
("http://ClientKey:[email protected]:4444/wd/hub"), capabillities); }   @Test public void testOnCloud() throws Exception {    driver.get
     ("http://www.google.co.in/?gws_rd=cr&ei=zS_mUryqJoeMrQf-yICYCA");    driver.findElement(By.id("gbqfq")).clear();    WebElement element = driver.findElement(By.id("gbqfq"));    element.sendKeys("selenium"); Assert.assertEquals("selenium - Google Search", driver.getTitle()); }   @AfterClass public void tearDown() throws Exception {    driver.quit(); } }

Click on the Tests tab to check the log results. The logs are well organized with test steps, screenshots, videos, and a summary. Screenshots are captured on each and every step to make the tests more precise, as follows:

capabillities.setCapability("screenshot", true); // screenshot
capabillities.setCapability("screenrecorder", true); // video capture

TestingBot provides a unique feature by scheduling and running tests directly from the site. The tests can be prescheduled to repeat tests any number of times on a daily or weekly basis. It's even more accurate on scheduling the test start time. You will be apprised of test failures with an alert through e-mail, an API call, an SMS, or a Prowl notification. This feature enables error handling to rerun failed tests automatically as per the user settings.

cross-browser-tests-using-selenium-webdriver-img-3

Launch Selenium IDE, record tests, and save the test case or test suite in default format (HTML). Access the https://testingbot.com/ URL from your web browser and click on the Test Lab tab. Now, try to upload the already-saved Selenium test case, select the OS platform and browser name and version. Finally, save the settings and execute tests. The test results are recorded and displayed under Tests.

Selenium headless browser testing

A headless browser is a web browser without Graphical User Interface (GUI). It accesses and renders web pages but doesn't show them to any human being. A headless browser should be able to parse JavaScript. Currently, most of the systems encourage tests against headless browsers due to its efficiency and time-saving properties. PhantomJS and HTMLUnit are the most commonly used headless browsers. Capybara-webkit is another efficient headless WebKit for rails-based applications.

PhantomJS

PhantomJS is a headless WebKit scriptable with JavaScript API. It is generally used for headless testing of web applications that comes with built-in GhostDriver. Tests on PhantomJs are obviously fast since it has fast and native support for various web standards, such as DOM handling, CSS selector, JSON, canvas, and SVG. In general, WebKit is a layout engine that allows the web browsers to render web pages. Some of the browsers, such as Safari and Chrome, use WebKit.

Apparently, PhantomJS is not a test framework; it is a headless browser that is used only to launch tests via a suitable test runner called GhostDriver. GhostDriver is a JS implementation of WebDriver Wire Protocol for PhantomJS; WebDriver Wire Protocol is a standard API that communicates with the browser. By default, the GhostDriver is embedded with PhantomJS.

To download PhantomJS, refer to http://phantomjs.org/download.html.

Download PhantomJS, extract the zipped file (for example, phantomjs-1.x.x-windows.zip for Windows) and locate the phantomjs.exe folder. Add the following imports to your test code:

import org.openqa.selenium.phantomjs.PhantomJSDriver;
import org.openqa.selenium.phantomjs.PhantomJSDriverService;
import org.openqa.selenium.remote.DesiredCapabilities;

Introduce PhantomJSDriver using capabilities to enable or disable JavaScript or to locate the phantomjs executable file path:

DesiredCapabilities caps = new DesiredCapabilities();

caps.setCapability("takesScreenshot", true);
caps.setJavascriptEnabled(true); // not really needed; JS is enabled by default
caps.setCapability(PhantomJSDriverService.PHANTOMJS_EXECUTABLE_PATH_PROPERTY, "C:/phantomjs.exe");
WebDriver driver = new PhantomJSDriver(caps);

Alternatively, PhantomJSDriver can also be initialized as follows:

System.setProperty("phantomjs.binary.path", "/phantomjs.exe");
WebDriver driver = new PhantomJSDriver();

PhantomJS supports screen capture as well. Since PhantomJS is a WebKit and a real layout and rendering engine, it is feasible to capture a web page as a screenshot. It can be set as follows:

caps.setCapability("takesScreenshot", true);

The following is the test snippet to capture a screenshot on test run:

File scrFile = ((TakesScreenshot)driver).getScreenshotAs(OutputType.FILE);
FileUtils.copyFile(scrFile, new File("c:\sample.jpeg"),true);

For example, check the following test program for more details:

package packagename;
 
import java.io.File;
import java.util.concurrent.TimeUnit;
import org.apache.commons.io.FileUtils;
import org.openqa.selenium.*;
import org.openqa.selenium.phantomjs.PhantomJSDriver;
 
public class phantomjs {
private WebDriver driver;
private String baseUrl;
 
@BeforeTest
public void setUp() throws Exception {
System.setProperty("phantomjs.binary.path", "/phantomjs.exe");
   driver = new PhantomJSDriver();
   baseUrl = "https://www.google.co.in";
driver.manage().timeouts().implicitlyWait(30, TimeUnit.SECONDS);
}
 
@Test
public void headlesstest() throws Exception {
driver.get(baseUrl + "/");
driver.findElement(By.name("q")).sendKeys("selenium essentials");
File scrFile = ((TakesScreenshot) driver).getScreenshotAs(OutputType.FILE);
FileUtils.copyFile(scrFile, new File("c:\screen_shot.jpeg"), true);
}
 
@AfterTest
public void tearDown() throws Exception {
   driver.quit();
}
}

HTMLUnitDriver

HTMLUnit is a headless (GUI-less) browser written in Java and is typically used for testing. HTMLUnitDriver, which is based on HTMLUnit, is the fastest and most lightweight implementation of WebDriver. It runs tests using a plain HTTP request, which is quicker than launching a browser and executes tests way faster than other drivers. The HTMLUnitDriver is added to the latest Selenium servers (2.35 or above).

The JavaScript engine used by HTMLUnit (Rhino) is unique and different from any other popular browsers available on the market. HTMLUnitDriver supports JavaScript and is platform independent. By default, the JavaScript support for HTMLUnitDriver is disabled. Enabling JavaScript in HTMLUnitDriver slows down the test execution; however, it is advised to enable JavaScript support because most of the modern sites are Ajax-based web apps. By enabling JavaScript, it also throws a number of JavaScript warning messages in the console during test execution. The following snippet lets you enable JavaScript for HTMLUnitDriver:

HtmlUnitDriver driver = new HtmlUnitDriver();
driver.setJavascriptEnabled(true); // enable JavaScript

The following line of code is an alternate way to enable JavaScript:

HtmlUnitDriver driver = new HtmlUnitDriver(true);

The following piece of code lets you handle a transparent proxy using HTMLUnitDriver:

HtmlUnitDriver driver = new HtmlUnitDriver();
driver.setProxy("xxx.xxx.xxx.xxx", port); // set proxy for handling Transparent Proxy
driver.setJavascriptEnabled(true); // enable JavaScript [this emulate IE's js by default]

HTMLUnitDriver can emulate the popular browser's JavaScript in a better way. By default, HTMLUnitDriver emulates IE's JavaScript. For example, to handle the Firefox web browser with version 17, use the following snippet:

HtmlUnitDriver driver = new HtmlUnitDriver(BrowserVersion.FIREFOX_17);
driver.setJavascriptEnabled(true);
Here is the snippet to emulate a specific browser's JavaScript using capabilities:
DesiredCapabilities capabilities = DesiredCapabilities.htmlUnit();
driver = new HtmlUnitDriver(capabilities);
DesiredCapabilities capabilities = DesiredCapabilities.firefox();
capabilities.setBrowserName("Mozilla/5.0 (X11; Linux x86_64; rv:24.0) Gecko/20100101 Firefox/24.0");
capabilities.setVersion("24.0");
driver = new HtmlUnitDriver(capabilities);

Summary

In this article, you learned to perform efficient compatibility tests and also learned about how to run tests on cloud.

Resources for Article:


Further resources on this subject: