Exploring Ways to Test Ionic Apps

Testing is a critical part of any app development. Hybrid apps, such as Cordova/Ionic are particularly interesting, because they are based on HTML/CSS/JS, allowing for a wide variety of emulators using web browsers. The key is to understand the limitations and benefits of the different ways to go about testing. Typically early on, testing is really prototyping, where emulation is used to get frequent feedback on the flow and look of the app, and fidelity of the emulation is not as important. Let's take a look at the various methods to test your Ionic app and when each is best used in the product lifecycle.

Ionic Serve

Ionic Serve is a native capability from the Ionic team, allowing for quick browser testing of your app. It is essentially just a local web server that runs the HTML/JS files used in your Ionic project. The advantage is that any browser, such as Chrome, can run your app. The major catch with this method is that plugins do not work since the plugins interact with the native device, which a browser would not recognize. This includes capabilities such as inappbrowser, push notifications, etc.

Using Ionic Serve is very straightforward:

ionic serve

Using this command by itself is a little disappointing, as you'll notice that the app takes up the entire web browser window, likely not the size of the mobile device you intended. However, Ionic Serve becomes much more powerful if you take advantage of the flags, such as:

ionic serve --lab

This runs the same server, but creates a virtual android and ios device within a browser window, so you can see how your app would appear on each of these devices. I'm still waiting for an update that allows for "synced" views between the two devices, but the capability is still impressive thus far.

One killer feature of ionic serve is "live reload" that allows real-time editing of apps by monitoring the ionic project files for changes. That means I can make edits in my development IDE and instantly see the results in a browser window running Ionic Serve. I have to applaud the Ionic team on this one, because it really is quite seamless and elegant to use. It reloads the same page you were on, so you don't have to click back to the page your working on. Live reload defaults to true, so you don't have to add extra flags.

Another issue you may run into is cross-origin restrictions that may not allow the local server running the app to make external calls, such as to your backend API. Ionic Serve does have a workaround that involves setting up a proxy, but this does require modifying a line of code, which I without fail forget to change back before I deploy the app. (There are some fancier ways to semi-automate this as the Ionic team explains here.) Alternatively, you can add this quite handy Chrome plugin to allow cross-origin requests.

I find that Ionic Serve is best used when developing the UI and layout. The live reload makes frequent changes to HTML and CSS very easy to see real-time without waiting for an android app to compile and load on your device.

Ripple Emulator

Ripple is a free emulator aimed at Cordova/Ionic mobile apps, similar to Ionic Serve. Install and run with:

npm install -g ripple-emulator
ripple emulate

If you are using Visual Studio for your development, Visual Studio tools for Cordova includes the Ripple Emulator, which you can then conveniently launch straight from VS. Ripple is one of my favorite emulators for quickly testing the navigation and functionality of the app. It launches much quicker than deploying to a device, but like Ionic Serve does not support plugins. It does however, emulate some mobile functions, including the accelerator and location features, but I have had no need to use them.

Since Ripple runs in a browser, it supports many of the Chrome tools, including the inspector. This is especially helpful if you need to investigate a CSS/HTML issue and test changes directly in the browser without modifying code.

The only downside to Ripple is that it does technically reload when you change any of the project files, but it reloads the entire emulator from the start, meaning you have to navigate back to the page you were working on. There are probably some work-arounds, but its nice that Ionic Serve has that feature polished out-of-the-box.

Device

All of the above methods are great for testing aimed at early and frequent feedback, but as the app matures, nothing can replace actual testing on the device. For android, the following command starts the app:

ionic run android

Make sure you have a real Android device connected and it is in USB debugging mode, otherwise this command will launch the android emulator, which in my experience does not have much more benefit than the previous methods and is slower/more difficult to use.

Again, this run command has several options that expand its usefulness. A recently released feature is the ability to use live reload directly on the device - meaning that plugin should run correctly, but you'll still need to handle the cross-origin restrictions. The following adds live reload, as well as console/device log outputs:

ionic run android -l -c -s

Because I wasted much time trying to figure this out, you do need to be connected to the same network to use this feature, which translates to: Make sure you have your WiFi on! (and connected to same network of course). I assumed that all of this communication could happen just fine over that little cable I've connected to the PC, but apparently that doesn't do the trick.

Conclusion

And there you have a quick overview of the different methods to test your apps. With web browser testing, you can quickly prototype and design an app, but eventually you must run directly on device for plugin support and more high fidelity testing.

Brandon Brown

Read more posts by this author.