An End-to-End BrowserStack Tutorial for Beginners

Are you someone who wants to run their test cases on multiple browsers or machines? Then this BrowserStack Tutorial is a must-read for you as without it, you could be spending a lot of time, money, and effort to set up the multiple browsers or machines needed to perform the offline tests using real devices. As a premier Automation Testing Company in the market, we have opted for a cloud testing platform like BrowserStack that provides real cloud devices that consist of different platforms, browsers, and devices. BrowserStack is a cloud-based web and mobile testing platform using which is predominantly used by testers to perform Cross-browser testing of various web and native mobile applications across different platforms, different browsers, and different devices. 

So it has been established that using the cloud is the optimal choice. But why BrowserStack in particular when there are other cloud testing platforms are available could be a question looming in your mind. You will find the answer to that question in detail in this BrowserStack Tutorial. We have mentioned all the wonders you could do using BrowserStack and explained how to do it as well.

Why BrowserStack?

BrowserStack can be used to avoid the complexity of switching between the operating systems, browsers, and its different versions. When it comes to mobile application testing, we can avoid the hassle of having to buy all the mobile devices that are available today to perform the testing. BrowserStack is very flexible and scalable, making it possible to test anywhere and anytime. We can use BrowserStack as a remote lab, and we can even use it as Real Desktop Browsers or Mobile Browsers. There is no setup required for using Browser Stack. We can use it directly on any independent machine by using the Browser Stack URL and its login credentials. Yes, it is that simple.

There are 4 main features of BrowserStack that we will be exploring in this blog and they are namely, Live, Automate, App Live, and App Automate. Let’s get the ball rolling by exploring the ‘Live’ feature.

BrowserStack Tutorial for Live/Manual Testing Feature

The Live option will help you perform manual testing in a list of real cloud device platforms like Android, iOS, Windows Phone, Windows, and Mac. Once you select any platform, it will show a list of browsers like Chrome, Mozilla, IE, UC Browser, and Safari with different versions. Once you have selected the browser of your choice, it will create a session and open a browser. You can simply enter the URL of the site and kick start your manual testing the same way you would do on a real device.

Key Features in Live:

1. Switch Browser:

If you want to check the compatibility of the testing site in another browser, it is not necessary to close the current browser to switch to the other one. You can simply choose the ‘Switch Browser’ option, and it will display the device platform and browser list from which you can select the device and browser.

2. Resolution:

If you need to test your site in different screen resolutions, then you can make use of the ‘Resolution’ option. Once the ‘Resolution’ option is selected, a list of the available resolutions will appear, and you can select the required resolution to carry on with your testing as per your needs.

3. Reporting a Bug using BrowserStack:

The primary objective of testing across so many platforms and devices is to identify and report the bugs that are present so that the end-user doesn’t face any difficulty. Once you have found a bug, you can report it by clicking on the Report a Bug option. After you click on this option, you will see an option box to highlight the issue on the page. You can highlight the issue by using different options like rectangle, circle, pencil, etc.

In addition to that, you can even select the mode to report a bug. There are so many tools like Jira, Trello, GitHub, and Slack through which you could report the bugs. You can even share it by email or download the issue page if needed.

4. Local Testing:

BrowserStack enables users to run tests on their internal development environments, on their localhost, or even behind a corporate firewall. This feature is called ‘Local Testing’.
Local Testing establishes a secure connection between the user’s machine and the BrowserStack cloud. Once Local Testing is set up, all the URLs will work straight out of the box, including the HTTPS URLs and also the ones behind a proxy or firewall.

BrowserStack local testing can be enabled for both ‘Live’ and ‘Automate’.

5. Local Testing Live

Download the BrowserStack local application from the local testing option and install it on your machine. Start the application, and you’ll see the BrowserStack local icon in the system tray area.

This enables Local Testing. Start a Live session and look for a green indicator on the Local Testing icon in the toolbar dock. You can launch the Live dashboard right from the app by just clicking on the BrowserStack Local app and navigating to Launch > Live.

To resolve all requests to local URLs via your machine, click on the Local Testing icon and check the ‘Resolve all URLs through my network’ option.

6. Local Testing Automate

We wanted to leave no stone unturned in this BrowserStack Tutorial and so we have listed the numerous Frameworks and languages that are supported in BrowserStack in the image below.

We can enable and disable local testing automatically using the code snippet in our test scripts. In this example, we have used Java language, and so it displays the Java BrowserStack local dependency. We need to add this dependency in pom.xml

<dependency>
    <groupId>com.browserstack</groupId>
    <artifactId>browserstack-local-java</artifactId>
    <version>1.0.3</version>
</dependency>

This code snippet starts and stops BrowserStack local while running our test scripts.

import com.browserstack.local.Local;

# creates an instance of Local
Local bsLocal = new Local();

# replace <browserstack-accesskey> with your key. You can also set an environment variable - "BROWSERSTACK_ACCESS_KEY".
HashMap<String, String> bsLocalArgs = new HashMap<String, String>();
bsLocalArgs.put("key", "<browserstack-accesskey>");

# starts the Local instance with the required arguments
bsLocal.start(bsLocalArgs);

# check if BrowserStack local instance is running
System.out.println(bsLocal.isRunning());

#stop the Local instance
bsLocal.stop();

Steps involved in enabling BrowserStack local automate via command line:

1. Download the appropriate binary for your system:

• OS X (10.7 and above)
• Linux 32-bit
• Linux 64-bit
• Windows (XP and above)

2. Unzip the binary to a folder/directory on your machine.

3. Open your command-line interface and navigate to the folder containing the Local binary.

4. Run the binary using the following command:

BrowserStackLocal.exe --key sdfsdfsdfsgfggffsgdfg

After establishing the Local Testing connection, set the browserstack.local capability to true by adding the following snippet to your script:

caps.setCapability("browserstack.local", "true");

BrowserStack Tutorial for using the Automate Feature:

With the help of the ‘Automate’ feature we can use BrowserStack’s real cloud devices to automate our test scripts. The same languages and frameworks that were supported in Local Testing Automate will also be supported for Automate. So we can choose any language and framework from the list that we saw earlier. In this BrowserStack Tutorial, we will be using java to explain the BrowserStack Automate feature.

a) Selecting the OS and device/browser combination

You can easily select the OS and Device/Browser combination you’d like to test on, using the drop-down menus as shown below.

For the above-selected combination, the BrowserStack sample code will be automatically generated. Now we can set up the sample code in the framework to run our test scripts in BrowserStack. Write the variables for the user name and access key. Pass the user name and password in BrowserStack URL. Set the desired capabilities to see the logs. We are setting the desired capabilities to tell the web driver, to choose the mentioned operating system, browser, and browser version. Create the object for the web driver and get the URL to open the website.

import org.openqa.selenium.By;
import org.openqa.selenium.Platform;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.remote.DesiredCapabilities;
import org.openqa.selenium.remote.RemoteWebDriver;
import org.openqa.selenium.JavascriptExecutor;
import java.net.URL;
import org.openqa.selenium.support.ui.ExpectedConditions;
import org.openqa.selenium.support.ui.WebDriverWait;
public class JavaSample {
  public static final String AUTOMATE_USERNAME = "<USERNAME>";
  public static final String AUTOMATE_ACCESS_KEY = "<ACCESSKEY>";
  public static final String URL = "https://" + AUTOMATE_USERNAME + ":" + AUTOMATE_ACCESS_KEY + "@hub-cloud.browserstack.com/wd/hub";
  public static void main(String[] args) throws Exception {
    DesiredCapabilities caps = new DesiredCapabilities();
    caps.setCapability("browserName", "iPhone");
    caps.setCapability("device", "iPhone 11");
    caps.setCapability("realMobile", "true");
    caps.setCapability("os_version", "14.0");
    caps.setCapability("name", "BStack-[Java] Sample Test"); // test name
    caps.setCapability("build", "BStack Build Number 1"); // CI/CD job or build name
    WebDriver driver = new RemoteWebDriver(new URL(URL), caps);
    driver.get("https://www.google.com");
    WebElement element = driver.findElement(By.name("q"));
    element.sendKeys("BrowserStack");
    element.submit();
    // Setting the status of test as 'passed' or 'failed' based on the condition; if title of the web page contains 'BrowserStack'
    WebDriverWait wait = new WebDriverWait(driver, 5);
    try {
     wait.until(ExpectedConditions.titleContains("BrowserStack"));
     markTestStatus("passed","Yaay title contains 'BrowserStack'!",driver);
    }
    catch(Exception e) {
     markTestStatus("failed","Naay title does not contain 'BrowserStack'!",driver);
    }
    System.out.println(driver.getTitle());
    driver.quit();
  }
  // This method accepts the status, reason and WebDriver instance and marks the test on BrowserStack
  public static void markTestStatus(String status, String reason, WebDriver driver) {
 JavascriptExecutor jse = (JavascriptExecutor)driver;
 jse.executeScript("browserstack_executor: {\"action\": \"setSessionStatus\", \"arguments\": {\"status\": \""+status+"\", \"reason\": \""+reason+"\"}}");
  }
} 

b) Execution process:

• Once the script starts its execution, it will trigger the BrowserStack to run the script.
• Every script execution will be maintained as a session with a unique session ID.
• Under ‘All projects’, the scripts that are running and the ones that have been executed will be displayed.
• Once the Script has started execution, all the logs will start getting recorded.
• We can see a live video about what’s happening during the execution in BrowserStack.
• Once the execution has been completed successfully, the Status will be changed from ‘Running’ to ‘Completed’. It will be denoted using a Green color dot.
• If the execution has failed because of any error, then the Status will be ‘Errors’.
• If the session had timed out, then the Status will be mentioned as “Timeout”, and the status will be denoted using a Yellow color dot.

Observe the automate tab. We can see the test name on the left side of the tab, where BrowserStack enables us to debug the code with the help of Text Logs, Visual Logs, and Video of the session

• Text Logs: They provide all the Information with the details of actions and timing.
• Visual Logs: They provide the details with screenshots.

• Video: It records all the actions done through the automated script. It helps to identify the exact root cause of any error during execution.

It also has the option to play or download the video, using which we can watch the video in the dashboard or download it and use it to debug the error.

c) Run Tests in Parallel

On BrowserStack, we can run multiple Selenium WebDriver tests at the same time across various browser, device, and OS combinations. This is called Parallel Testing. Parallel Testing gives us the same benefits as running a multi-threaded application. We wanted to make sure that our BrowserStack Tutorial does more than just introduce you to the tool. We wanted everyone reading this blog to make use of BrowserStack’s full potential.

With Parallel Testing, we can run the same test on different browser/device combinations i.e. cross-browser testing, or run different tests on the same or different browser/device combinations as explained above. Parallel Testing will help us drastically reduce the run time of our test suite, resulting in faster build times and faster releases.

We can start testing in parallel using any of the popular test frameworks, and some of the popular frameworks are mentioned below:

• TestNG
• Gauge
• JBehave
• JUnit
• Selenide
• Serenity

Here, we are going to use the TestNG framework to explain Parallel Testing in detail.

To run the tests on multiple browsers in parallel with TestNG on BrowserStack Automate, follow the below steps:

1. Clone the testng-browserstack repo on GitHub (if not already done):

2. git clone https://github.com/browserstack/testng-browserstack.git

3. cd testng-browserstack

4. Install the dependencies using the following command:

5. mvn compile

6. Update parallel.conf.json files within the testng-browserstack/src/test/resources/conf directory with your BrowserStack credentials as shown below:
parallel.conf.json

 {
   "server": "hub-cloud.browserstack.com",
   "user": "USERNAME",
   "key": "ACCESSKEY",
   "capabilities": {
     "build": "testng-browserstack",
     "name": "Bstack-[TestNG] Parallel Test",
     "browserstack.debug": true
   },
   "environments": {
     "chrome": {
       "browser": "chrome"
     },
     "firefox": {
       "browser": "firefox"
     },
     "safari": {
       "os": "OS X",
       "browser": "safari"
     },
     "ie": {
       "browser": "internet explorer"
     }
   }
 }

7. You can now run your tests in parallel on BrowserStack using the following command

 mvn test -P parallel

d) How to Run tests in parallel without a framework

We have also demonstrated how to run tests in parallel without a framework using a sample script that shows a multi-threaded Java program in this BrowserStack Tutorial. Before we head on to the script, let’s take a look at its salient points.

• The same script is run across 3 different browser/device combinations viz. iPhone 12 Pro, Samsung Galaxy S20, and Safari on Big Sur.
• The capabilities are being populated in a HashTable, and that is being passed on to the test function.
• The test function has been written as a separate method, and it takes care of the starting of the test for each of the browsers after iterating on the HashTable that is passed on to it.
• Multi-threading has been implemented by defining multiple classes, all of which implement the Runnable Java class.
• The main class contains the main() method, and all the 3 threads are invoked from the main class

 import java.net.MalformedURLException;
import java.net.URL;
import java.util.Hashtable;
import java.util.Iterator;
import java.util.Set;
import java.util.concurrent.TimeUnit;
import org.openqa.selenium.By;
import org.openqa.selenium.JavascriptExecutor;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
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;
class TestClass1 implements Runnable {
 public void run() {
  Hashtable<String, String> capsHashtable = new Hashtable<String, String>();
  capsHashtable.put("device", "iPhone 12 Pro");
  capsHashtable.put("real_mobile", "true");
  capsHashtable.put("os_version", "14");
    capsHashtable.put("build", "BStack-[Java] Sample Build");
  capsHashtable.put("name", "Thread 1");
  mainTestClass r1 = new mainTestClass();
  r1.executeTest(capsHashtable);
  }
}
class TestClass2 implements Runnable {
  public void run() {
  Hashtable<String, String> capsHashtable = new Hashtable<String, String>();
  capsHashtable.put("device", "Samsung Galaxy S20");
  capsHashtable.put("real_mobile", "true");
  capsHashtable.put("os_version", "11.0");
  capsHashtable.put("build", "BStack-[Java] Sample Build");
  capsHashtable.put("name", "Thread 2");
  mainTestClass r1 = new mainTestClass();
    r1.executeTest(capsHashtable);
  }
}
class TestClass3 implements Runnable {
 public void run() {
  Hashtable<String, String> capsHashtable = new Hashtable<String, String>();
  capsHashtable.put("browser", "safari");
  capsHashtable.put("browser_version", "14");
  capsHashtable.put("os", "OS X");
  capsHashtable.put("os_version", "Big Sur");
  capsHashtable.put("build", "BStack-[Java] Sample Build");
  capsHashtable.put("name", "Thread 3");
  mainTestClass r1 = new mainTestClass();
    r1.executeTest(capsHashtable);
  }
}
public class mainTestClass {
  public static final String USERNAME = "USERNAME";
  public static final String AUTOMATE_KEY = "ACCESSKEY";
  public static final String URL = "https://" + USERNAME + ":" + AUTOMATE_KEY + "@hub-cloud.browserstack.com/wd/hub";
  public static void main(String[] args) throws Exception {
   Thread object1 = new Thread(new TestClass1());
    object1.start();
    Thread object2 = new Thread(new TestClass2());
    object2.start();
    Thread object3 = new Thread(new TestClass3());
    object3.start();
  }
 public void executeTest(Hashtable<String, String> capsHashtable) {
  String key;
   DesiredCapabilities caps = new DesiredCapabilities();
  // Iterate over the hashtable and set the capabilities
  Set<String> keys = capsHashtable.keySet();
    Iterator<String> itr = keys.iterator();
    while (itr.hasNext()) {
       key = itr.next();
       caps.setCapability(key, capsHashtable.get(key));
    }
    WebDriver driver;
  try {
   driver = new RemoteWebDriver(new URL(URL), caps);
     JavascriptExecutor jse = (JavascriptExecutor)driver;
     // Searching for 'BrowserStack' on google.com
     driver.get("https://www.google.com");
     WebElement element = driver.findElement(By.name("q"));
     element.sendKeys("BrowserStack");
     element.submit();
   // Setting the status of test as 'passed' or 'failed' based on the condition; if title of the web page contains 'BrowserStack'
   WebDriverWait wait = new WebDriverWait(driver, 5);
     try {
      wait.until(ExpectedConditions.titleContains("BrowserStack"));
      jse.executeScript("browserstack_executor: {\"action\": \"setSessionStatus\", \"arguments\": {\"status\": \"passed\", \"reason\": \"Title matched!\"}}");
     }
     catch(Exception e) {
      jse.executeScript("browserstack_executor: {\"action\": \"setSessionStatus\", \"arguments\": {\"status\":\"failed\", \"reason\": \"Title not matched\"}}");
     }
     System.out.println(driver.getTitle());
     driver.quit();
  } catch (MalformedURLException e) {
   e.printStackTrace();
  }
 }
}

BrowserStack Tutorial for using the APP LIVE Feature

So the last feature that we will be seeing in this BrowserStack Tutorial is the App Live function that helps us to do native app testing in a list of real cloud devices. To use the native app in the BrowserStack devices, we can use the Upload or URL option.

a) Uploading/Testing the App

Click on the upload app button, and a system dialog window will open.

Go to the app folder, choose the App which you want to test, and the app will be loaded successfully. We will be able to see the app under the uploaded apps section.

This is not the only way to get this done, and you can upload the app in other ways as well. For example, you can click on ‘View all sources’ and select any type of source through which you are going to upload the app.

After Uploading the App, select any device from the list of real Android or iOS devices. The device of your choice will be selected, and the app will be installed in it. Now you are all set to perform testing like how you would do using a real device.

b) Key Functions of App Live

1) Switch Device Function

Just like how you can shift from one browser to another, you can migrate from one device to another to perform your testing as well. Click on the ‘Switch device’ option, if you wish to switch the device at any given time. Once you are done with testing in a particular device, click on the Stop session option and it will navigate you to the dashboard page. Click on settings to choose the session time out and monitor size.
We can report the bug by clicking on the Report a bug option, just like how we discussed in the above Live Testing Section. Now let’s take a look at the web tool kit menu, which has some more options to operate the device feasibly and test the application.

Click on the ‘Rotate Device’ option to rotate the device horizontally or vertically. You can click on the ‘Install App’ option to install the new application. If you want to just close the app and not the device, then click on the ‘Kill app’ option. Click on ‘Change language’ to change the language for testing. If you are looking to check the complete device information, click on the ‘Device info’ icon.

2) Deleting the App

Click on the delete icon, and you will see the checkbox at each app. Select the checkbox, and click on the delete link and it is also important to keep in mind that it will delete the uploaded app automatically after the completion of 60 days from the date of upload.

BrowserStack Tutorial for using APP AUTOMATE Feature

BrowserStack App Automate enables you to test native and hybrid mobile applications using a testing framework.

Here, we are going to use Appium to explain about App Automate. It’s easy to run your Appium tests written in Java on real Android and iOS devices on BrowserStack. This guide will help you get started with your first test.

1. Setup

• You will need a BrowserStack username and access key

2. Upload your app

Upload your Android app (.apk or .aab file) or iOS app (.ipa file) to BrowserStack servers using our REST API. Here is an example cURL request to upload the app :

curl -u "USERNAME:ACESSKEY" \
-X POST "https://api-cloud.browserstack.com/app-automate/upload" \
-F file=@/path/to/app/file/Application-debug.apk

A sample response for the above request is shown below:

{
    "app_url":"bs://j3c874f21852ba57957a3fdc33f47514288c4ba4"
}

3. Setup and run your test

• Specify the application under test using the app capability. Use the app_url value returned at the time of app upload (Step 2) to set this capability.
• Specify the real Android or iOS device you want to test on, using the device capability.

import java.net.URL;
import java.util.List;
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.remote.DesiredCapabilities;

public class BrowserStackAndroid {

  public static String userName = "USERNAME";
  public static String accessKey = "ACCESSKEY";

  public static void main(String args[]) throws MalformedURLException, InterruptedException {
    DesiredCapabilities caps = new DesiredCapabilities();

    caps.setCapability("device", "Samsung Galaxy S8 Plus");
    caps.setCapability("os_version", "7.0");
    caps.setCapability("project", "My First Project");
    caps.setCapability("build", "My First Build");
    caps.setCapability("name", "Bstack-[Java] Sample Test");
    caps.setCapability("app", "<app_url>");

    AndroidDriver<AndroidElement> driver = new AndroidDriver<AndroidElement>(new URL("https://"+userName+":"+accessKey+"@hub-cloud.browserstack.com/wd/hub"), caps);

    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);

    // The driver.quit statement is required, otherwise the test continues to execute, leading to a timeout.
    driver.quit();
  }
}

4. Viewing test results

You can access the results of your test sessions on the App Automate dashboard as well as using our REST API. You can drill down into the details of a specific test session to view its execution details and debugging information such as video recording, network logs, and device logs.

Conclusion

We hope this BrowserStack Tutorial has been a good read for you, and that it was worth your time. Stating that BrowserStack is a highly resourceful tool is an understatement, as it has been instrumental in helping us provide the best Automation Testing Services. BrowserStack is one tool you should add to your arsenal as the benefits it brings to the table are of high value. Though there are alternatives available for this very same purpose, as a leading QA company, we at Codoid have always used BrowserStack for all our projects and that is why we have written this BrowserStack Tutorial as well. They are the pioneers in their domain, making them the best choice if you don’t want to take a chance with your testing just like us.

Frequently Asked Questions