Testing Android and iOS Mobile Applications on real devices using BrowserStack

Testing Android and iOS Mobile Applications on real devices using BrowserStack

To ensure comprehensive mobile app testing, it is essential to do 360-degree testing for functions, appearance, and performance on multiple devices with various configurations, sizes, resolutions, and platforms.

There are three ways to conduct mobile app testing:

  1. Emulators for Android devices and Simulators for iOS devices
  2. Real physical devices
  3. Cloud-based real devices platform

Testing an application on different platforms, including emulators and simulators, as well as physical devices, comes with a set of challenges.

Emulators and Simulators:

 When it comes to emulators and simulators, creating multiple virtual devices with different configurations can be difficult, and they may not accurately replicate real-world situations compared to physical devices.

Physical devices:

 On the other hand, testing on physical devices poses its own set of difficulties. It requires a large number of devices to test app compatibility with different configurations, and the list of devices keeps changing as new models are introduced to the market. Additionally, cross-location testing can be challenging since carrying multiple devices across different locations can be cumbersome.

To address these challenges, a possible solution is to use cloud-based platforms for testing applications in real-world conditions. By doing so, we can perform robust testing with a variety of devices and configurations without the need to physically acquire and maintain them.

Cloud-based platform (BrowserStack) :

 BrowserStack is a cloud-based real devices platform that provides support for both manual and automated testing of mobile apps for both Android and iOS devices. 

One of its standout features is the App Live feature, which allows users to manually test their mobile apps on over 3000 real Android and iOS devices.

BrowserStack also supports 15+ native features, such as GPS, network simulation, and localization, which can be used to test mobile apps in real-world scenarios. 

Other features include debugging apps, viewing crash reports and logs, inspecting UI elements, and using stack traces to find and fix bugs instantly. These features make it easy for developers to identify and fix issues quickly and efficiently.

Furthermore, BrowserStack supports testing across different environments, including Dev, QA, Staging, and Production apps from the play store or app store. This makes it easy for developers to test their apps in various environments and ensure that they are working correctly in each environment.

To test a mobile app on BrowserStack, follow these steps:

1. Create a BrowserStack account by signing up at https://www.browserstack.com/users/sign_up

2. Log in to your BrowserStack account.

3. Navigate to the “App Live” section.

4. Here in the left panel “SELECT SOURCE” you can see different options available to upload or install apps.

i. Uploaded Apps – You can upload an apk or ipa file here.

ii. Sync with App Centre – If you have access to the app center you can use this option to directly install the app from App Centre.

iii. Install via TestFlight – While testing on iOS devices you can install the app directly from TestFlight also.

iv. Install via Play Store – Select a device, sign in to the play store and install the app if available on Play Store.

v. Install via App Store – Select a device, sign in to the App store and install an app, if available on App Store.

Now let’s explore how to upload apk file from a local machine using Upload Apps here…

i. Click on Upload – Select apk/ipa file from your local machine to be uploaded.

ii. Select the uploaded apk/ipa file and device from the list of available devices in the right panel.

iii. You can select any device from the list for the selected device category.

iv. Once you click on the device name the device will be launched and the app will be installed on it.

 Now once the app is launched on the selected device you can start testing the app.

Let’s explore various features that can be used effectively while testing…

1. Report Bug:

If you find a bug while testing, BrowserStack provides the option to highlight the bug on the screen and add a bug description. 

You can download the image to include it in the defect report later or send a screenshot to the developer or your team via email. 

Additionally, you can share the image using various applications such as Jira, Slack, GitHub, etc. This option is visible in the screenshot below.

Then click on Cancel to return back to the testing screen.

2. Record Session:

This feature can capture a video recording of a sequence of events that led to a bug.

Choose the screen to be recorded.

After recording a session using BrowserStack, you can stop the sharing by clicking on the “Stop Sharing” button. Then, you can download the recording for later use.

3. Switch Device  

This feature allows users to switch to another device at any point in time to test the same app on different devices. 

The toolbar on the right side of BrowserStack provides various features to simulate real device features, including:

  • View open apps on the device.
  • Kill existing apps if they become unresponsive or test app behavior on a relaunch.
  • Capture screenshots, similar to taking screenshots on a physical phone.
  • Rotate the screen to test the app’s responsiveness to different screen orientations.

Some other important features are:

  1. Change Location: This feature is used to test app behavior and response across different geographical locations. You can use the “Device GPS” option to set the exact latitude and longitude coordinates or the “IP Location (Beta)” option to select a specific region from a list of locations. See the screenshot below for reference.
  1. Change Language – This feature can be used to test apps in different languages. 
  1. File & Media – This feature allows you to transfer various types of files to and from the device during testing.

On the right-hand side of the window, we have the following options in the Dev Tools section:

  1. INSPECT (BETA) –This option is used to find element locators for app automation testing.
  1. NETWORK Tab – This feature is useful for monitoring backend HTTP requests and responses in real-time. It can help you to debug the cause of failures during certain events in the app.

On the BrowserStack cloud platform, you can also test various native device features just like physical devices. These include:

  • Geolocation testing
  • Push notifications
  • Pre-loaded images
  • Network simulation
  • Testing dependent apps
  • Uninstalling apps

Conclusion:

Overall, BrowserStack is a convenient and easy-to-use cloud-based real devices platform that provides a wide range of features for mobile app testing. Its support for manual and automated testing, along with its native features and ability to test across different environments, makes it a popular choice among developers.

Read more blogs here

Inspecting Webview App Element using Chrome Extension

Inspecting Webview App Element using Chrome Extension

Inspecting the WebView element using the Chrome browser is the easiest and most efficient way. So in this blog, I am going to explain how to inspect the WebView element using the chrome browser. Let’s first understand what WebView is and why to use it.

What Is A WebView?

It is widely used to display web pages in an application. The web pages and web apps can reuse in an Android application. The content used to display inside a WebView is responsive and mobile-friendly and because of this, it works better towards providing a better user experience.

Now let’s see how to inspect elements on Android WebView

1) The first step is you need to connect your mobile device to your system.

2) The second step is you need to go to your chrome browser and go to chrome://chrome-urls/ then you will see the result like the below screenshot:

3) You need to select “chrome://inspect/” from that list.

4) Click on it and it will open a window like this. There is an option to discover USB devices in it. It will display information about the devices that are currently attached to the system.

5) Now launch the app on your mobile device, and for inspecting the element just click on inspect.

This will open a new chrome window containing all the UI details of that screen.

Now you can inspect the elements for the webview app like you inspect for the website. By following these steps you will get a better understanding of how you can inspect a webview using a chrome browser and how you can locate your desired elements.

Below is the link for your reference to inspect webViews and get locators.

http://www.qaautomationsimplified.com/android/android-automation-how-to-inspect-webviews-and-get-locators/

Conclusion:

According to my experience, this is the most effective and easier way to inspect WebView elements using the chrome browser.

Read more blogs here