Automated UI Testing in PhoneGap Apps

I normally don’t write posts to talk about a specific product from another company, but this is the first product that I have seen which lets you do automated UI testing in PhoneGap applications, so I figured I’d share…

Automated testing is often a critical step in enterprise application development. I’m sure most everyone out there is familiar with automated unit testing, where you write specific code to test and validate business logic or processes within your application. This can be done on the client side or on the server side, and there are lots of existing tools and languages that can be leveraged for automated unit testing.  For PhoneGap applications, you can write unit tests that evaluate your JavaScript logic to verify proper behavior in your apps using a number of tools, but these only test JS execution and logic.

Automated UI testing enables you to test the GUI of your application. It allows you to make sure proper buttons or controls are displayed wherever they are supposed to be displayed, that they have the proper user interaction, and generally that your application’s user interface is functioning properly. There are numerous tools to enable automated UI testing on the desktop by recording user input and turning that user input into reproducible scripts. However on mobile devices, there aren’t as many options. You can write code to create test scripts for both iOS and Android, but writing these tests for PhoneGap applications could get challenging.

Recently, while attending the 360iDev conference, I was introduced to Telerik’s Test Studio for iOS applications. At first glance, I thought “oh, that’s cool, automated ui tests for native iOS apps”, but doubted it would work with PhoneGap apps. It turns out I was wrong. You can use it to record and automate UI tests for native, web, or hybrid iOS applications. Below is a video of it in action with the “Walkable” PhoneGap app that I recently released.  You can record test scripts, and play them back at any time, and it will evaluate whether the test was a success of failure if the UI responds as it did in the original script.

Test Studio allows you to capture user input in your iOS application and play it back as a script without touching or interacting with the application yourself.  There are just a few steps to get it up and running:

  • Download and install Test Studio application and mobile testing SDK.
  • Configure a testable build of your application – Note: Do not follow the “quick instructions” in the confirmation email you get when you download the SDK – it left out a step, follow these instructions instead.
  • Deploy your app to your device.
  • Launch Test Studio, and follow the UI prompts to “Record A Test”.
  • At any time, access and execute any existing script.

However, be forewarned, it is not seamless and error-free. I’ve noticed in testing my own applications that when executing recorded scripts, Test Studio often attempts to execute steps before my HTML DOM elements actually exist.  This is a common issue in automated UI testing, especially when testing single-page dynamic HTML applications – regardless of whether they are PhoneGap or in a desktop browser. You have to be very deliberate and precise when you record your steps, and at certain points, I had to manually introduce a wait period in the script to enable enough time for my HTML DOM elements to be created.   In Test Studio, there are a few ways you can do this:

  • Introduce a finite “wait” duration
  • Test to see if the HTML elements exist before continuing with script execution

You can also go back and edit/add steps to existing tests.  It can be a painstaking process to record accurate UI test scripts, but can be useful for QA processes for many applications.

2 replies on “Automated UI Testing in PhoneGap Apps”