Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Cross Browser Automation Using BrowserStack Cloud Services

DZone's Guide to

Cross Browser Automation Using BrowserStack Cloud Services

Want to make sure the code for you web application is working properly before sending off to production? Check out his cross browser automation tool.

· Web Dev Zone
Free Resource

Tips, tricks and tools for creating your own data-driven app, brought to you in partnership with Qlik.

First of all, I want to make my audience aware of the fact that BrowswerStack is not 0pen-sourced. It’s a proprietary product that comes in handy with a cost that you need t0 bare, but we all know good things comes with a cost. 

Let’s not change the topic of discussion and dive into how can we use the wonderful features of this tool.

BrowserStack is a cloud-based, cross-browser testing tool that enables developers to test their websites across various browsers on different operating systems and mobile devices, without requiring users to install virtual machines, devices, or emulators.

The subscription-based service was founded by IIT graduates Ritesh Arora and Nakul Aggarwal in 2011, and since then it has gained widespread acceptance in the web development community worldwide to test the layout and performance of a website from their desktop browsers.

To begin with, you need to register yourself with the ‘free trial’ version.

bs2

Next, login in with your registered credentials. This will take you to a pretty cool dashboard with a list of available devices and emulators they provide.

BS1.png

At the top of the dashboard, you will see a section which says ‘Automate.’ Click it and you will land on the cross-browser automation page, which will, initially, show an empty page suggesting that no test has been yet run.

BS1.png

In the automate section, you will see a ‘+’ symbol on top of the section entitled, ‘Username and Access Keys.’ Click that to get the username and ‘access key.’ Follow the screenshot.

BS3.png

bs-4.png

Keep your username and Access Key in handy. We will need it to configure our automation code base with BrowserStack services.

Based on my research, I found that the entire architecture of BrowserStack is based on Selenium Grid. Selenium Grid is yet another powerful product of the Selenium generation that helps you run distributed tests across machines. It uses a technique called 'Huband 'Node.' The Hub is the central point which will receive all the requests along with information on which browser, platform (i.e WINDOWS or LINUX), and where the test should be run. Based on the request received, it will distribute them to the registered nodes. Nodes are where the corresponding tests will run. Each node is a machine (can be a physical/virtual machine) that is registered with the hub. When we register a node, the hub has the information of the node and it will display the browser and configuration details of the nodes. I won’t dig much deeper into the concepts of Selenium grid in this blog. Let's get into configuring BrowserStack with the automation code base.

The pre-requisites required to do so are:

  1. Capabilities Object -  helps to configure the desired properties and platform for the tests.

  2. Remote WebDriver - used to hit the BrowserStack API.

Based on the preferences set in the desired capabilities instance, the Hub will point the tests to a node that matches the preferences. See the following code block:

final String USERNAME = "";
final String AUTOMATE_KEY = "";
 final String URL = "https://" + USERNAME + ":" + AUTOMATE_KEY + "@hub-cloud.browserstack.com/wd/hub";

try
 {
   DesiredCapabilities caps = new DesiredCapabilities();
   caps.setCapability("browser",browser);
   caps.setCapability("browser_version",browser_version);
   caps.setCapability("os",os);
   caps.setCapability("os_version",os_version);
   caps.setCapability("resolution",resolution);
   caps.setCapability("project","Project-1");
   caps.setCapability("build","1.0");
   caps.setCapability("browserstack.debug","true");
   caps.setCapability(CapabilityType.ACCEPT_SSL_CERTS, true);
   driver = new RemoteWebDriver(new URL(URL),caps);
 }
 catch(MalformedURLException e)
 {
   e.getMessage();
 }

I am using the testng.xml to pass the browser properties as parameters. Something like this:

<?xml version=”1.0″ encoding=”UTF-8″?>
<!DOCTYPE suite SYSTEM “http://testng.org/testng-1.0.dtd”&gt;
<suite thread-count=”3″ name=”Suite” parallel=”tests”>
<test name=”Test on Chrome”>
  <parameter name=”browser” value=”Chrome”/>
  <parameter name=”browser_version” value=”43.0″/>
  <parameter name=”os” value=”Windows”/>
  <parameter name=”os_version” value=”7″/>
  <parameter name=”resolution” value=”1024×768″/>
  <classes>
    <class name=”BrowserStack.ExecuteFunctionalities”/>
  </classes>
</test> <!– Test –>
<test name=”Test on Edge”>
  <parameter name=”browser” value=”Edge”/>
  <parameter name=”browser_version” value=”13.0″/>
  <parameter name=”os” value=”Windows”/>
  <parameter name=”os_version” value=”10″/>
  <parameter name=”resolution” value=”1024×768″/>
  <classes>
    <class name=”BrowserStack.ExecuteFunctionalities”/>
  </classes>
</test> <!– Test –>
<test name=”Test on Firefox”>
  <parameter name=”browser” value=”Firefox”/>
  <parameter name=”browser_version” value=”44.0″/>
  <parameter name=”os” value=”Windows”/>
  <parameter name=”os_version” value=”10″/>
  <parameter name=”resolution” value=”1024×768″/>
  <classes>
    <class name=”BrowserStack.ExecuteFunctionalities”/>
  </classes>
</test> <!– Test –>
</suite> <!– Suite –>

I have used the TestNG annotation parameters to get the value of the corresponding parameters and feed it to the capabilities object:

@org.testng.annotations.Parameters(value={"browser","browser_version","os","os_version","resolution"})

rsion","resolution"}) - Editorial Note: Read as one line of code.

Now we can run the desired test automation suite on BrowserStack. Each test run has a unique session idassociated with it and based on the session id, it fetches the required details for the test execution. Each test execution has three logs generated:

  1. text log which gives a textual representation of each process running in the background.

  2. Visual log gives an idea of how the tests are running on the browser end with screenshots.

  3. video log that provides a live recording of your test execution. It also provides the execution time for each test run.

bs5

bs-6

A quick fact, BrowserStack allows only 2 test to run in parallel. If you want to run more tests in parallel you have to implement the concept of Queuing. This allows you to launch an additional number of parallel tests with different browser configurations that will be queued in a sequence, for a seamless parallel execution. For instance, if you want to run 5 additional tests, apart from your subscribed limit of 2 parallel tests, BrowserStack will queue the additional 5 tests until one of the 2 initial tests finish, and a slot is available for execution. With queuing, you can worry less about managing your tests, and thus save development time.

That’s all folks.

Please follow this link for the code base for deploying your cross browser automation test suite on BrowserStack.

Explore data-driven apps with less coding and query writing, brought to you in partnership with Qlik.

Topics:
automation ,browserstack ,cross-browser testing ,web dev

Published at DZone with permission of Soumyajit Basu. See the original article here.

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}