How can I test my responsive (hybrid) mobile app - Part 3

In this series I’ll be uncovering the various techniques and tools that can help you get started to manually test a mobile web or hybrid app.

Manual testing is a great way for verifying layouts and basic functionality. Automated tests afford us more verification but require a different set of tools and deeper understanding that’s not part of this series.

In [part 1](how-can-i-test-my-responsive-mobile-app-part-1), we tested with online and browser plug-ins to capture bugs.

In [part 2](how-can-i-test-my-responsive-mobile-app-part-2), we focused on emulators and mobile web apps.

Part 3, we shift our focus to hybrid mobile apps covering,

This post is great for anyone looking to get a flavour of how to test an app in a hybrid environment or if you’re a newbie hybrider who wants to expand their testing knowledge.

What is a hybrid app? #

In essence, its a web app that can access special device features if it needs to in an agnostic manner. It’s installed directly from an app store. This gives it the power to be cross platform by default.

Aforementioned device features may include filesystem or camera access. Increasingly, HTML5 is closing the gap but as new mobile operating systems are constantly being released there’s always some catching up to do.

Tools such as Cordova/PhoneGap, Trigger.IO & Sencha Touch make this easy. In this post I’ll be working exclusively with Cordova version 3.3.0.

If you’re new to using Cordova I’ll help you setup and get started as getting Android up and running is slightly a bit involved. If you’re familiar with Cordova you can skip the setup and get straight to the testing!

Up and running #

I’m still using Up App for this. We need to install the Cordova CLI toolkit while ensuring both iOS and Android build dependencies are configured correctly.

Again, I’m running this on a Mac OSX machine with Xcode installed. You can follow instructions from [part 2](how-can-i-test-my-responsive-mobile-app-part-2) on installing the iOS simulator to help. Provided we’re ready to go let’s get started.

Install Node.js #

Configure Android #

If you haven’t already, follow the steps from [part 2](how-can-i-test-my-responsive-mobile-app-part-2) to get Android with Genymotion setup. Then,

Install Cordova #

Finally, we’re ready for Cordova,

For Up App, I navigated to my Documents directory then typed these commands (on the same Terminal window),

$ cordova create UpAppHybrid com.ezosaleh.UpAppHybrid UpAppHybrid
$ cd UpAppHybrid
$ cordova platform add ios
$ cordova platform add android

This gets a very basic shell app configured with both iOS & Android build capabilities.

To truely get up and running you need to setup your own web app within the Cordova project. Have a look at this for a basic demo. Further getting started notes are found here for iOS & Android.

Build & run the local iOS simulator #

This is where we arrive at the meat of this post. Traditionally, you can interact with a Cordova project using Xcode directly,

Build and run sans Xcode! #

If you’re a command line junkie, Cordova has a mature toolbelt that allows us to stop the constant dance of opening and closing Xcode. Open Terminal unless its already open - last time we install anything I promise,

$ brew install -g ios-sim

Now navigate back to your project directory,

$ cordova build iOS
$ cordova emulate ios

This will bring up the emulator and load the app for you all in a oner. No Xcode in sight!

Build & run the local Android emulator sans Eclipse! #

So, here’s a twist. Most posts out there will urge you to install the Eclipse IDE to be able to run emulators locally. This is a bit of hassle considering that unlike Xcode, which provides us with build tools, running Eclipse is a bit of a personal preference. Hence, we don’t really need it.

Luckily, we can utilise our Android setup from [part 2](how-can-i-test-my-responsive-mobile-app-part-2) using Genymotion quite easily,

Android adb recognises the Genymotion VM as a physical device. That’s why the last instruction works.

Hybrid apps and cloud testing #

I’ve saved this for last as you need a bit of imagination to get this up and running.

Cloud based testing is great because it removes the need to install numerous emulator environments on you’re machine - its all taken care of by someone else. This is ideal for Android as the explosion of devices, OS versions and screen sizes is mind boggling.

iOS is different, for now there’s only a handful of devices and OSes to test on. So, if push came to shove you can use Xcode to install more simulators.

Mobile web apps, unlike hybrid apps, are simple to test. You point to a web url from a cloud hosted emulator and get going. Hybrid apps are more complex because you’re essentially installing an application on an emulator. I haven’t found any services that allow you to perform this manually. Any services that do are primarily powered by automated testing using tools such as Appium.

For the next section I’ll be concentrating on Android as its more open. I’m ignoring iOS, because of the reasons I mentioned earlier as well as constraints imposed by app signing requirements.

So, how do we get this cloud thing going? Luckily, I found a couple of workarounds - feel free to get in touch with more :)

Cordova serve #

The simplest route. It utilises the fact that you can serve your cordova app just like a normal web app locally from your machine.

However, there is a huge catch: this approach is useless if you’re using any native extensions!

If you’re not,

We can now use a service like BrowserStack and point it to our local running web app the same way you would do with any web app.

Let’s do a quick run using BrowserStack running on Chrome. BrowserStack will detect Chrome and install a proxying plugin to simplify config,

For me, this started the app on an Android Google Nexus 7. I then clicked on Android from the platforms list which then navigates to the Android version of the app served locally from my machine!

Note: A few alerts pop up when selecting Android from the platforms list, just click cancel and you’ll be fine.

Self hosting Android apps #

Unlike iOS, Android allows developers to install apps from anywhere on any device. That is, we can point a web browser to a url hosting the app archive which will both download and install the app on a cloud based emulator.

Dropbox to the rescue! Let’s add our .apk file to Dropbox and ensure we obtain a publicly shareable link for it. The same can be done with any cloud based storage service. But first, let’s locate the app’s .apk file,

Now we can run the cloud emulator and install the app.

This will download the app and ask if you want to install it. After installation the app should be open on the emulator for you test. You can do the same on various cloud based emulators combinations to replicate a multitude of environments.

The end #

We made it! We’ve reached the end of the manual testing series. You can now test a mobile app whether online or hybrid using a plethora of techniques. From browser plugins to cloud and command line wizardry including an understanding of the ways of the hybrid mobile app.

Use this power for good and enjoy ;-)

P.S. Learn faster about mobile development directly from your inbox!


Now read this

The coffee in Vancouver, Part 1

Is adventurous. That’s the best way I can describe it after having spent a month in the rainy city. It is the same experience I encounter when learning a new programming language. 1st, I start with disbelief, then an ‘Aha’. Finally, I... Continue →