Browser_Stack_Intro

What is Browser Stack?
• Browser Stack is an cloud web and mobile testing platform that provides developers with
the ability to test their websites and mobile applications across on-demand browsers,
operating systems and real mobile devices. They have following primary products:

Why Browser Stack?
1. we can avoidthe
hassle of having to
buy all the mobile
devices that are
availabletodayto
perform
the testing.
2.We can use
Browser Stack as a
remote lab, and we
can even use it as
Real Desktop
Browsers or
MobileBrowsers.
3. There is no setup
required for using
Browser Stack.
4. We can use it
directly on any
independent
machine by using
the Browser Stack
URL and its
login credentials

Typesof Live
Testing
These Kind of testing we can do on the browser stack platform.

• Access the Browser stack URL: https://www.browserstack.com/
This attachmentis as per latest browser stack UI, it might get modified in future.

AvailableOS forthe livetesting.

2. Choose Live option
We have Live,
Automate and Percy
options for websites
testing as per current
UI.

3. enter the testing URL and click on Start Test

4. Choose OS(Window or Mac) and Browser(chrome, Firefox, IE etc.) for Web testing or Real
devices for mobile testing.

Login page is appeared after accessing the URL.

We can reportany issuesto JIRAfromtheBrowserstacktesting
platformafterclickingon reporta bug(observe in previous
slide).

Since we are using trial version we will be getting 1 min of access of each browser. If we want
some more time then need to purchase a plan. This screen will appear once we will try to use
same browser version which is already used once.

Browser Stack Automate option helps to run the automation script on the
browser stack platform. We can select the specific browser and OS where
we want to run the automated scripts. That will provide us snippet of code
which we can copy and paste in our framework.

Clickon AutomateoptionavailablerighttoBrowserStack logoandfollowtheStepsto
get thesnippet ofcodes.

Select thetestOS andBrowser and thencopy thecode andpaste insideyourframework.

Note: Add this snippet of code and execute the automatedscripts. Automationscript
will execute on the browser stack platform and execution detailswill be getting
generated.

Observe The
execution result
on the Browser
stack platform
Note: Browser stack generates the execution video recording which we can get on the same screen by
scrolling window little bit down. Observe next slide.

Browser stack execution summary in form of recording. We
can expand it and get some more details.

We can play
and observe
the
recording, do
wnload the
recording or
can get
different exec
ution logs
from here.
Note: We can direct report bug in JIRA after integrating Jira. We haveReport bug option at top right corner next to delete
session.

It helps to Instant access to Real Device Cloudand Test nativeand hybridapps on its wide range of physicalmobile and
tablet devices for the most accuratetesting results.

List of BrowserStack RealMobile& Tablet Devicesfor App LiveTesting

App Live
home
screen
We can installthe
app from different
sources
for the testing as
mentioned under
select source
section

Upload your app option:
We can select the upload your
app option and click on upload
option it will ask for apk
location and once you select it
will start download. Later we
need to select one device and
it will launch the application in
same device.

Install via play store: you need to click on installvia play store optionand select test device. Later it will ask for sign
in credentialand then you can installit from playstore.
Note: Sign in credentialis require for test flight also.

• Browser Stack App Automate enables you to test
native and hybrid mobile applications using Appium
automation framework. It's easy to run your Appium
tests written in Java on real Android and iOS devices
on Browser Stack.

Runyourfirst Build
Runa sampleTestNGtestbuildon BrowserStack by changing a fewlines in the
codeusingthesesimplesteps:
// Maven users can add this dependency to project's POM
<dependency>
<groupId>io.appium</groupId>
<artifactId>java-client</artifactId>
<version>7.0.0</version>
</dependency>

Step 2:
Example:
/* Note the "app_url" valuefor the sample app. Thisvalue
uniquelyidentifies the app on Browser Stack. */
{"app_url":"bs://c700ce60cf13ae8ed97705a55b8e022f13c58
27c"}
/* In your test script, use this "app_url"value to specify the
applicationunder test using the "app"capability.During test
execution, the sample app will automaticallybe installedand
launchedon the device being tested. */
caps.setCapability("app",
"bs://c700ce60cf13ae8ed97705a55b8e022f13c5827c")

Steps3:
Configuretestscript
• Using desiredcapabilities
Desired capabilitiesare a series of key-valuepairs
that allow you to configure your Appium tests on
Browser Stack. Let's start with most importantones.
• Set access credentials
Use browser stack. user and browser stack.
key variables to set your Browser Stack access
credentialsThisis required to authenticateyour tests.
• Specify application under test
Use the app capabilityto specify your uploadedapp
that will be installedon device during test execution.
Set its valueusing the app_urlobtainedin Step 2.
• Set the device to run the test on
Use the device and os_version capabilityto specify
the device for testing.
a. Android. b. Google Pixel 3[observe different
availabledevices in next couple of slides]
• Create remote web driver
Next, initializea remote web driver to start a new test
session on Browser Stack. You are all set to remotely
test your app on Browser Stack devices!
• Write a test case
Add an existing test case or write a new one using
different Appium commands. We haveprovided a
test case for our sample app but make sure you edit it
to test your own app !

List of Browser StackReal Mobile &
TabletDevices for AppAutomate
Testing

package android;
import java.net.URL;
import java.util.List;
import java.util.function.Function;
import java.net.MalformedURLException;
import io.appium.java_client.MobileBy;
import io.appium.java_client.android.AndroidDriver;
import io.appium.java_client.android.AndroidElement;
import org.openqa.selenium.support.ui.ExpectedConditions;
import org.openqa.selenium.support.ui.WebDriverWait;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.remote.DesiredCapabilities;
public class BrowserStackSample {
public static void main(String[] args) throws MalformedURLException, InterruptedException {
DesiredCapabilities caps = new DesiredCapabilities();
// Set your access credentials
caps.setCapability("browserstack.user", "mithileshsingh_D98GPT");
caps.setCapability("browserstack.key", "DvpabBSodXe2oklk4CCd");
// Set URL of the application under test
caps.setCapability("app", "bs://c700ce60cf13ae8ed97705a55b8e022f13c5827c");
// Specify device and os_version for testing
caps.setCapability("device", "Google Pixel 3");
caps.setCapability("os_version", "9.0");
// Set other BrowserStack capabilities
caps.setCapability("project", "First Java Project");
caps.setCapability("build", "browserstack-build-1");
// Initialise the remote Webdriver using BrowserStack remote URL
// and desired capabilities defined above
AndroidDriver<AndroidElement> driver = new AndroidDriver<AndroidElement>(
new URL("http://hub.browserstack.com/wd/hub"), caps);
// Test case for the BrowserStack sample Androidapp.
// If you have uploadedyourapp, update the test case here.
AndroidElement searchElement = (AndroidElement) new WebDriverWait(driver,
30).until(
ExpectedConditions.elementToBeClickable(
MobileBy.AccessibilityId("Search Wikipedia")));
searchElement.click();
AndroidElement insertTextElement = (AndroidElement)
new WebDriverWait(driver, 30).until(
ExpectedConditions.elementToBeClickable(
MobileBy.id("org.wikipedia.alpha:id/search_src_text")));
insertTextElement.sendKeys("BrowserStack");
Thread.sleep(5000);
List<AndroidElement> allProductsName = driver.findElementsByClassName(
"android.widget.TextView");
assert(allProductsName.size() > 0);
// Invoke driver.quit() after the test is done to indicate that the test is
completed.
driver.quit();
}
}
Example code
this is applicable in my case, Browser
stack will suggest code for you once
you will login and navigate to app
automate option and select your OS
and device.

Step4:
Executeyourtestscript
• You are now ready to run your first
Appium test on Browser Stack. Copy the
code snippet on right side and paste it in
your local file. On your local machine,
open the terminal/command prompt and
navigate to the folder containing your test
script. Build and run the test script just like
any other Java program using your
project’s preferred build tools (E.g. Maven,
Gradle).
# Using Maven
mvn test -P <android-first-test>

Viewtestresultson dashboard
This is same which we discussed in Browser Stack automateoption. That
was for web testing and this (app automate) is for mobile testing

BrowserStack Integrations
Cypress.io
Jenkins
Selenium
Bitbucket
Circle CI
GitHub
TravisCI
WordPress
Visual Studio IDE
Appium
Jira Software
Trello
Slack
Earl Grey
Espresso
Javascript Testing

BrowserStack Competitors
• Sauce Labs
• Perfecto, by Perforce
• Experitest
• Cross Browser Testing
• Lambda Test
• AWS Device Farm

Note:
• I am not covering Percy tool in this ppt because
it's a separate topic which deals with visual
testing. So will cover this in visual testing
introduction ppt.
• If you want to see the end to end test framework
integrated with Browser stack platform visit this
link: https://github.com/mithilesh777/softwaret
esting/tree/master/Selenium_BS_integration

Browser_Stack_Intro

More Related Content

Browser_Stack_Intro