Embed Size (px)
Citation preview
CROSS BROWSER TESTING USING BROWSERSTACK
By: Mary Geethu. C. A
Automation Test Engineer, RapidValue Solutions
Cross browser testing using BrowserStack
© RapidValue Solutions 2
Contents
Introduction .................................................................................................................................................................... 3
How does it work? .......................................................................................................................................................... 4
BrowserStack Live ......................................................................................................................................................... 5
BrowserStack Automate ................................................................................................................................................. 6
Setting your operating system, browser, and screen resolution ..................................................................................... 7
Run tests on mobile browsers ........................................................................................................................................ 7
Screenshots ................................................................................................................................................................. 11
Responsive .................................................................................................................................................................. 11
Conclusion ................................................................................................................................................................... 12
Cross browser testing using BrowserStack
© RapidValue Solutions 3
Introduction BrowserStack is a cross-browser testing tool which allows users to test websites in 700+ desktop and
mobile browsers. BrowserStack offers virtualization for:
Windows XP, 7 and 8
OSX Snow Leopard, Lion and Mountain Lion
iOS
Android
Opera Mobile
Depending on the operating system you choose, BrowserStack offers a number of supported browsers
for the specific OS.
Cross browser testing using BrowserStack
© RapidValue Solutions 4
How does it work? Browser stack follows a „pay as service‟ model and the pricing is reasonable. The registered users can sign and will
be allowed to access the dashboard, which offers a quick start dialogue.
This allows you to, easily, enter the URL, you'd like to test via the dropdowns, the target OS and browser version. You can fine tune things via the left panel which offers screen resolution choices and page rendering speed simulation. Clicking “start” commences the process of establishing the connection, via Flash, to the remote server and rendering the virtualized browser.
You have full access to the web page's functionality including menus, buttons, and so on. This also,
includes the developer tools that come with browsers. You have access to tools like Firefox Web
Developer Tools, the IE F12 Tools and the Chrome Developer Tools.
Cross browser testing using BrowserStack
© RapidValue Solutions 5
So, not only can you see how your pages will render across browsers but you can also, use the existing
tools to debug common issues.
BrowserStack Live The main area allows you to specify a public address or even use it to test internal applications on your
network. The dropdown menus on the upper left of the page allows you to choose the operating system
and browser.
The dropdown menus on the upper left of the page allow you to choose the operating system and
browser.
Cross browser testing using BrowserStack
© RapidValue Solutions 6
BrowserStack Automate BrowserStack Automate provides a platform to run automated browser tests using, either, the Selenium
or JavaScript testing framework. Tests can be customized, using capabilities, which are a series of key-
value pairs used to pass values to the tests. Selenium has a set of default capabilities, whereas
BrowserStack has created specific capabilities to increase the customization available to users.
BrowserStack supports various languages like Python, Ruby, Java, Perl, C# and Node js.
Automate test scripts in Java: Running your Selenium tests on BrowserStack requires a username and
an access key. To obtain your username and access keys, sign up for a „free trial‟ or „purchase‟ a plan.
BrowserStack supports Selenium automated tests, and running your tests on our cloud setup is simple
and straightforward.
//Download java driver bindings from http://www.seleniumhq.org/download/
Configuring Capabilities
To run on BrowserStack, the Selenium capabilities have to be changed. In this example, the browser is
Firefox.
WebDriver driver = new RemoteWebDriver(
Cross browser testing using BrowserStack
© RapidValue Solutions 7
new URL("http://USERNAME:[email protected]/wd/hub"), DesiredCapabilities.firefox() );
Setting your operating system, browser, and screen
resolution You can run your Selenium test scripts on any browser by specifying the browser name, version and
resolution in the input capabilities.
Parameter override rules: When specifying both default and BrowserStack-specific capabilities, the following rules define any overrides that take place:
If browser and browserName, both, are defined, browser has precedence (except
if browserName is Android, iPhone, or iPad, in which cases browser is ignored and the default
browser on those devices is selected).
If browser_version and version, both, are defined, browser_version has precedence.
If OS and platform, both, are defined, OS has precedence.
Platform and os_version cannot be defined together, if os has not been defined
os_version can, only, be defined when OS has been defined.
The value ANY, if given to any parameter, is same, as the parameter preference is not specified.
Default browser is chrome, when no browser is passed by the user or the selenium API
(implicitly).
The following example has Firefox selected as browser, 35.0 as browser version and 1024x768 as
resolution.
caps.setCapability("browser", "Firefox"); caps.setCapability("browser_version", "35.0"); caps.setCapability("os", "Windows"); caps.setCapability("os_version", "7"); caps.setCapability("resolution", "1024x768");
Run tests on mobile browsers
You can run your Selenium test scripts on iOS and Android devices by specifying the version and device
in the input capabilities. These capabilities are browserName and device. The following example
has iPhone selected as the browserName, and iPhone 5 as the device.
DesiredCapabilities caps = new DesiredCapabilities(); caps.setCapability("browserName", "iPhone");
Cross browser testing using BrowserStack
© RapidValue Solutions 8
caps.setPlatform(Platform.MAC); caps.setCapability("device", "iPhone 5");
Example: Sending an Email with Gmail
package com.rvs.automation;
import java.io.File;
import java.io.IOException;
import java.net.MalformedURLException;
import java.net.URL;
import java.util.List;
import org.apache.commons.io.FileUtils;
import org.openqa.selenium.By;
import org.openqa.selenium.OutputType;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.remote.DesiredCapabilities;
import org.openqa.selenium.remote.RemoteWebDriver;
import org.openqa.selenium.support.ui.ExpectedConditions;
import org.openqa.selenium.support.ui.WebDriverWait;
import org.testng.annotations.AfterTest;
import org.testng.annotations.BeforeTest;
import org.testng.annotations.Test;
public class SendMail{
WebDriverWait wait;
RemoteWebDriver driver;
public static final String USERNAME = "geethuca2";
public static final String AUTOMATE_KEY = "9Cqqo4xnu497CS3YTUXE";
public static final String URL = "http://" + USERNAME + ":" + AUTOMATE_KEY +
"@hub.browserstack.com/wd/hub";
Cross browser testing using BrowserStack
© RapidValue Solutions 9
@BeforeTest
public void setUp() throws MalformedURLException
{
DesiredCapabilities caps = new DesiredCapabilities();
caps.setCapability("browser", "Firefox");
caps.setCapability("browser_version", "35.0");
caps.setCapability("os", "Windows");
caps.setCapability("os_version", "7");
caps.setCapability("resolution", "1024x768");
caps.setCapability("browserstack.debug", "true");
driver = new RemoteWebDriver(new URL(URL), caps);
driver.navigate().to("http://www.gmail.com");
System.out.println(driver.getTitle());
wait=new WebDriverWait(driver, 10);
}
@Test
public void gudlyWebTest() throws InterruptedException, IOException
{
sendEmail();
}
Public void sendEmail()throws InterruptedException
{
//getting email textbox
WebElement Username= driver.findElement(By.xpath("//input[@id='Email']"));
Username.sendKeys("[email protected] ");
//getting password textbox
WebElement Password= driver.findElement(By.xpath("//input[@id='Passwd']"));
Password.sendKeys("Rapid123");
Cross browser testing using BrowserStack
© RapidValue Solutions 10
//clicking signin button
WebElement signin= driver.findElement(By.xpath("//input[@id='signIn']"));
signin.click();
System.out.println("your logging in");
//clicking compose button
WebElement compose= driver.findElement(By.xpath("//div[@class='T-I J-J5-Ji T-I-KE L3']"));
compose.click();
System.out.println("Loading Composer");
//entering „to‟ address field
WebElement toAddress= driver.findElement(By.name("to"));
toAddress.sendKeys("[email protected]");
//entering subject of mail
WebElement subject = driver.findElement(By.name("subjectbox"));
subject.sendKeys("Automated email");
//switch to frame
driver.switchTo().frame(driver.findElement(By.xpath("//iframe[contains(@tabindex,'1') and
contains(@frameborder,'0')]")));
//entering text into email body
driver.findElement(By.xpath("//*[@id=':ak']")).sendKeys("Hi" +"\n"+ " Sending an automated mail
");
//switching back from frame
driver.switchTo().defaultContent();
//clicking send button
driver.findElement(By.xpath("//div[text()='Send']")).click();
driver.manage().timeouts().implicitlyWait(100, TimeUnit.SECONDS);
System.out.println("Sending email");
}
}
}
Cross browser testing using BrowserStack
© RapidValue Solutions 11
@AfterTest
public void terminatetest()
{
driver.quit();
}
}
Screenshots
Screenshots are used to conduct rapid layout testing of websites. It can instantly generate screenshots of
a website across a range of 650+ browsers, by selecting 25 browsers at a time. The screenshots can,
then, be downloaded for comparison and future reference. BrowserStack also provides API access for
headless creation of screenshots over a selection of operating systems and browsers. Screenshots has
two third-party tools: ScreenShooter and Python API wrapper.
Responsive
Responsive is a feature used to test the responsiveness of website layouts and designs. Responsive
comes bundled with screenshots, and it operates in a similar way. It can generate screenshots over a
range of screen sizes, where the screen sizes are true to the devices, and have the actual resolutions
and viewports set.
BrowserStack provides the following devices in Responsive:
Device Resolution Size Viewport
iPhone 5S 640x1136 4 320x568
Galaxy S5 Mini
720x1280 4.5 360x640
Galaxy S5 1080x1920 5.1 360x640
Note 3 1080x1920 5.7 360x640
iPhone 6 750x1334 4.7 375x667
Nexus 4 738x1280 4.7 384x640
iPhone 6 Plus 1080x1920 5.5 414x736
Kindle Fire HDX 7
1200x1920 7 600x960
iPad Mini 2 1536 x 2048 7.9 768 x 1024
iPad Air 1536x2048 9.7 768 x 1024
Galaxy Tab 2 800x1280 10.1 800x1280
Windows 7 1280x1024 N/A 1280x1024
OS X Yosemite
1920x1080 N/A 1920x1080
Cross browser testing using BrowserStack
© RapidValue Solutions 12
Conclusion
You can create URLs with the testing options as parameters. This helps you to, instantly, start a browser
on BrowserStack. You can integrate these URLs into your application, bookmark them and also, share
them with others.
Local testing allows you to test your private and internal servers, along with public URLs, using the
BrowserStack Cloud. The BrowserStack Cloud has support for firewalls, proxies and Active Directory.
Cross browser testing using BrowserStack
© RapidValue Solutions 13
About US
RapidValue is a leading provider of end-to-end mobility, omnichannel and cloud solutions to enterprises
worldwide. Armed with a large team of experts in consulting and application development, along with
experience delivering global projects, we offer a range of mobility and cloud services across industry
verticals. RapidValue delivers its services to the world‟s top brands and Fortune 1000 companies, and
has offices in the United States and India.
Disclaimer:
This document contains information that is confidential and proprietary to RapidValue Solutions Inc. No part of it
may be used, circulated, quoted, or reproduced for distribution outside RapidValue. If you are not the intended
recipient of this report, you are hereby notified that the use, circulation, quoting, or reproducing of this report is
strictly prohibited and may be unlawful.
© RapidValue Solutions
www.rapidvaluesolutions.com/blog
www.rapidvaluesolutions.com
+1 877.643.1850
