Browserstack Tutorial: App And Browser Testing Platform [GUIDE]

Learn How To Use Browserstack Mobile App and Cross Browser Testing Platform In This Detailed Hands-on Browserstack Tutorial:

BrowserStack is the testing platform, to test the websites and mobile applications.

We can test a web application in multiple browsers and mobile applications in all the mobile devices without any virtual machines, devices, and emulators.

When it comes to a mobile application, we can test the Android and iOS mobile applications.

What Is BrowserStack?

Browser Stack is a cloud-based testing tool. Using this tool, developers and testers can do the cross-browser testing of various web and mobile applications in different web browsers.

What Is Cross Browser Testing?

Cross-browser testing is functional testing. We perform this testing to check if the application is working as expected or not in different web browsers for the different operating systems. Here, we can run the test cases manually or by doing automation by specifying the various browsers in the automation scripts.

Suggested Read => Beginners Guide To Cross-Browser Testing

Why BrowserStack?

In real-time, it is difficult to test an application in different browsers using multiple operating systems, with varying versions.

It will cost a lot to buy many computer machines to install different operating systems. It is even more difficult to buy all the android and iOS mobile devices that are available in the market today. Due to this reason, it is not practical to buy and set up all the devices.

Thus, we go with the BrowserStack to avoid the complexity of switching between the operating systems, browsers, and different versions.

When it comes to mobile application testing, we can avoid buying all the mobile devices that are available today. Browser Stack is very flexible and scalable. We can test anywhere and anytime with the help of Browser Stack.

We can use Browser Stack as a remote lab and can use this as Real Desktop Browsers. It gives us free Javascript unit tests and supports 750 configurations. There is no set up required for using Browser Stack. We can use it directly on any independent machine by using the Browser Stack URL and its login credentials.

BrowserStack History

BrowserStack was founded by Ritesh Arora and Nakul Aggarwal in Mumbai, India in the year 2011. It has around 25000 paid users and 2000000 registered users across 135 countries. Now many companies rely on Browser Stack for web and mobile application testing.

Features of BrowserStack

• Cross-browser testing with different browsers on different operating systems.
• Native app testing on mobile.
• Hybrid application testing.
• Automate web and mobile applications.

Testing The Web Application

#1) Sign up with BrowserStack.

#2) Log in to your account.

#3) Choose the live interactive cross-browser testing option from the products dropdown.

#4) You will see the OS list on the left side of the page. We have android, iOS, windows phone, windows 10, windows 8, Windows XP, Mac and much more.

#5) Choose any OS from the list. You will be able to see a list of browsers with different versions. We can see browsers like chrome, Mozilla Firefox, IE, opera, safari, etc. with different versions like Chrome 75, Chrome 74, Chrome 73, IE 11, IE 10, etc.

#6) Choose a particular browser of any version. The browser will be open. Enter the URL of the application. Start testing the application in the same way in which you do in the real system browsers.

Using Browser Stack Key Functions While Testing The Application

If you wish to choose any other browser, then click on the switch browser option. This will navigate you to the dashboard screen, where you can choose the other browser for testing.

If you wish to test the application on a different resolution, then click on the resolution icon, where a list of the available resolution will appear, you can select the required one and continue with testing.

Once you are done with testing in a particular browser, then click on the Stop session, and it will take you to the dashboard screen.

Creating Bug From BrowserStack

Click on Report a Bug 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 see the mode of option to report a bug, like where you wish to report a bug, by using Jira, Trello, GitHub, Slack or through by the email, or if you wish to download the issue page, etc. In this way, you can choose any option from the above list and proceed further to report a bug.

Testing The Mobile Application In Mobile Browsers

Choose the live interactive cross-browser testing option from the products dropdown. You will see the list of OS on the left side of the page. Click on the android option from that list. You can see the list of Android devices like Samsung, Motorola, Google, one plus, etc.

Mouseover on the device which you wish to test and you will be able to see the browsers like chrome, Mozilla Firefox, Safari, UC browser, etc. Choose the Browser and the selected browser will open.

Enter the URL of the application and start testing how you do it in the real system browser.

Testing Of Native Mobile Application In BrowserStack

Sign up to the Browser Stack account and Log in with the account. Choose the App Live – Interactive native and hybrid app testing option from the products dropdown.

You will see the 3 main tabs there i.e. to upload the app, list of Android devices and the list of iOS devices.

Uploading The App

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

Go to the app folder, choose the App which you want to test and the app will be uploaded successfully. You will be able to see the app under the uploaded apps section. There we can upload the apps up to the size of 500 MB.

We can upload the app in other ways as well. Choose the App Live interactive native and hybrid app testing option from the products drop-down, and select the android real device or iOS real device tab.

Choose any device and it will open. Click on the play store. Sign in with the account and search the app which you wish to test. Download & install the app and Start Testing the application.

Similarly, we can upload the apps in many more ways i.e. by sync with the app center, by sync with hockeyapp, by installing with testflight, by installing with the app store, or by installing with the play store.

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 will delete the uploaded app automatically after the completion of 60 days from the date of upload.

Now observe the Android real devices Tab, click on this tab, and you will see the list of Android devices like Samsung, Motorola, Google, one plus, etc. with different device models. You can see the OS version and screen size in each model.

Now observe the iOS real devices Tab and click on this tab, you will see the list of iOS devices like iPhone and iPad with different device models. You can see the OS version and screen size in each model.

Click on any android or iOS device for testing. The particular Device will be open and the application will launch. Start testing how you do in the real device.

Using Browser Stack Key Functions While Native App Testing

Click on the Switch device option, if you wish to switch the device. Click on the Stop session option once you are done with testing in a particular device, and it will navigate to the dashboard page. Click on settings to choose the session time out and monitor size.

We can create the bug by clicking on the Report a bug option, just like what we discussed in the above web testing Section. Now, 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. Click on the install app to install the new application. Click on the kill app to just close the app and not the device. Click on Change language to change the language for testing. Click on device info to check the complete device information.

Comparison Of BrowserStack Testing Over Real Device Testing

Automate The Website Using Selenium Scripts

Let’s write the Selenium scripts and do automation testing in the Browser Stack. Download and install the latest version of Java. Download and install the latest version of Eclipse or another IDE.

We need to get the user name and access key from the Browser Stack. To get this, log in with the browser credentials, go-to products and click on Automate. Observe the user name and access key at the left-hand side. Note down the username and password.

Open the Eclipse IDE. Create the Java project, create the package, create the class file and add all the required Selenium jar files to the project. Write the variables for the user name and access key. Pass the URL, user name and password. Use annotations. Create the method.

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, get the URL to open the website. Write the wait implicit commands to wait until the application launch.

Write the code for testing commands like, Get the URL, to check the expected URL using assertion and other functionalities like, click, navigation, enter data and much more.

Run the script. Observe the automate tab. Check the test log of all the test steps and see the visual logs to see the screenshots of the website. Observe the console logs and network logs for other information.

Public class testbrowserstack
{
Public static String Username =”anand”;
Public static String accesskey =”anandaccess”;
public static final String URL = "https://" + username + ":" + accesskey + "@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 X");
caps.setCapability("realMobile", "true");
caps.setCapability("os_version", "11");
caps.setCapability("name", "Bstack-[Java] Sample Test");

WebDriver driver = new RemoteWebDriver(new URL(URL), caps);
driver.get("http://www.google.com");
WebElement element = driver.findElement(By.name("q"));

element.sendKeys("BrowserStack");
element.submit();

System.out.println(driver.getTitle());
driver.quit();

}

Advantages Of BrowserStack Testing

1. We can test all the major browsers from a single control point.
2. We can test the compatibility of the backward/older version of the browsers.
3. It supports both Manual and Automation testing.
4. We can test all the devices and browsers that are currently available in the market.
5. We can test the application in different resolutions.

Disadvantages Of BrowserStack Testing

1. Response time is not as good as a locally installed virtual machine.
2.  Browser Stack is not open-source.
3. Some bugs which we can find on real devices cannot be identified.

Conclusion

Using BrowserStack we can perform complete testing without the dependencies of installing any virtual machine. Browser Stack is more flexible & reliable to test and it indeed saves money and time.

It is like one big roof for all the devices, operating systems, browsers, and all with different versions. Hence, we can test all kinds of applications with Browser Stack.

Browser Stack can run on 200+ browsers and 40+ mobile devices. It can run tests on a cloud service. It is not an open-source platform. You need to pay to buy the license based on the plan you take and on the test which you want to run.

Have you used BrowserStack yet? If not, are you ready to give it a try today?