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,
- Setting up a Cordova based app.
- Testing with a local iOS simulator.
- Testing with a local iOS simulator minus Xcode.
- Testing with a local Android emulator minus Eclipse.
- Workarounds for testing with cloud based emulators.
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 #
- Open Terminal.
- Run this command:
brew -v
- If you can’t see something similar to: Homebrew [version no.] then install it.
- Run this command to install brew:
ruby -e "$(curl -fsSL https://raw.github.com/Homebrew/homebrew/go/install)"
- Run this command to install Node.js:
brew install node
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,
- Navigate to the (android-sdk-macosx) folder.
- In the tools folder right click the android Unix executable file and select open.
- The Android SDK Manager should appear.
- Select the Android 4.4 SDK Components (it powers the cordova build command)
- Click install packages.
- Follow the Mac OSX instructions to ensure Cordova can execute Android commands.
- Open Terminal.
- Run this command to install Ant:
brew install ant
Install Cordova #
Finally, we’re ready for Cordova,
- Open Terminal unless its already open.
- Run this command to install Cordova:
npm install -g cordova
- You can create a new cordova project using these instructions
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,
- Open Terminal unless its already open.
- Ensure you’re in the project’s directory, eg:
cd path/to/UpAppHybrid.
- Run this command:
cordova prepare ios
- Run this command:
open .
- Using Finder open platforms/ios
- Double click on the file with an extension of .xcodeproj, eg: UpAppHybrid.xcodeproj
- Follow these instructions to deploy to the simulator.
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,
- Open Terminal unless its already open.
- Ensure you’re in the project’s directory, eg:
cd path/to/UpAppHybrid
. - Run this command:
cordova prepare android
- Start Genymotion and play your device - mine is Nexus 4 running Kitkat.
- Wait for the emulator to load.
- Go back to your Terminal.
- Run this command:
cordova run android
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,
- Open Terminal unless its already open.
- Ensure you’re in the project’s directory, eg: cd path/to/UpAppHybrid.
- Run this command: cordova serve 3000
- Open a web browser and point the URL to: http://localhost:3000
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,
- Open Chrome.
- Sign in to BrowserStack
- On the main dashboard select ‘Test an internal URL’ tab.
- Configure host: localhost
- Configure port: 3000
- Click finish
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,
- Open Terminal unless its already open.
- Ensure you’re in the project’s directory, eg: cd path/to/UpAppHybrid.
- Run this command: open .
- Using Finder open platforms/android/bin
- You should find a file ending with *-debug.apk - in my case its UpAppHybrid-debug.apk.
- Add the file to your Dropbox folder and ensure that its publicly accessible.
Now we can run the cloud emulator and install the app.
- Sign in to BrowserStack
- On the main dashboard select an Android VM combination.
- Start testing without a URL.
- Point the web browser to the *-debug.apk shareable link from Dropbox.
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!