Calabash with hybrid apps, webviews

Automating hybrid apps with Calabash

Hybrid apps

Hybrid mobile apps use HTML, CSS and Javascript to create the functionality and looks of the app instead of using native, platform-dependant elements. It's basically a mobile browser wrapped inside your app.

The usual business reasons to build a hybrid app over a native one are:

• utilising existing front-ender knowledge of web technologies, less native developer experience needed
• platform independence, you can use the same HTML, CSS, Javascript code on Android, iOS, Windows Phone - thus development time is reduced
• use of app development frameworks like PhoneGap or Titanium which might use hybrid technology

The main drawback of hybrid apps over native is performance. Your app will be slower and require more memory because of the additional browser component running and interpreting web elements. Also you might loose the native look and feel of the platform. (I would suggest going native if you have the budget.)

Testing hybrid apps with Calabash

In order to run integration tests on the hybrid app, you will need to interact with the web elements of the app. For the following examples I will use the Calabash framework for automation. (Calabash-Android v0.5.8, Calabash-iOS v0.14.0)

Calabash query for WebViews

The general Calabash query for WebView elements goes like this:

query("<WebView class> css:'<css selector>' <additional filters>")

The WebView class will depend on the platform (iOS or Android) and the WebView implementation used by the app. Ask the developers of the app or run a query("*") on Calabash console if you are in doubt. More on this topic later.

The css selector will filter for the html elements using id, class or tag name. Examples:

query("webView css:'#customerform'")
query("webView css:'.external-link'")
query("webView css:'a'")
touch("webView css:'a#customerform'")

The additional filters may be used to filter the web element more. Be aware that the text value of elements may be in the text or textContent attribute depending on the platform and the WebView class. (Use Calabash console queries to find out which to use.)

touch("webView css:'a' {textContent CONTAINS 'Expenses'}") 

You can use these queries in any Calabash commands that take a query string as a parameter, for example touch() or wait_for_element_exists().

You may have several WebViews in an app. You can query for all WebViews with the all keyword:

query("all webView css:'*'")

Summary of WebView class names

platform	WebView type	WebView class
iOS	UIWebView	webView UIWebView
	WKWebView	WKWebView
Android	Standard WebView	webView
	Crosswalk	org.xwalk.core.internal.XWalkContent
	Titanium	ti.modules.titanium.ui.widget.webview.TiUIWebView ti.modules.titanium.ui.widget.webview.TiUIWebView$NonHTCWebView
	PhoneGap Cordova	cordovaWebView

iOS WebViews classes

Currently on iOS you have two different WebView classes: UIWebView and WKWebView. Usually additional development frameworks (PhoneGap, Titanium, etc.) do not change the WebView classes.

UIWebView was the original class used by apps. You can refer to it in two ways:

query('webView')
query('UIWebView')

WKWebView is available from iOS 8. You can refer to it like this:

query('WKWebView')

Android WebViews classes

As for Android, the development framework (PhoneGap, Titanium, etc.) changes the WebView class in question.

Standard Android WebViews

If you are using the vanilla Android WebViews, go with the standard class name:

query('webView')

Crosswalk WebViews

The Crosswalk component is usually used to eliminate the WebView version dependencies for different Android OS and Chromium versions. You query like this:

query('org.xwalk.core.internal.XWalkContent') 

Titanium WebViews

The Titanium framework also provides it's own WebView class. You can refer to it as such:

query('ti.modules.titanium.ui.widget.webview.TiUIWebView$NonHTCWebView')

The NonHTCWebView part might sound strange, but it's an extension for the TiUIWebView class to avoid crashes on HTC Sense devices.

PhoneGap / Cordova WebViews

Apache Cordova is a set of device APIs that allow a mobile app developer to access native device function such as the camera or accelerometer from JavaScript. It also has its own WebView class. The PhoneGap framework uses the Cordova engine. In both cases, you can refer to the WebView like this:

query('cordovaWebView')

When clicking fails

In the past I have ran into some problems with the limited Calabash support of new WebView classes. If your queries execute, but touch commands fails, you can always try clicking via JavaScript like so:

evaluate_javascript("org.xwalk.core.internal.XWalkContent","document.getElementById('submit').click()")

This example clicks the web element with the id 'submit'.

Links - to read

• https://github.com/calabash/calabash-android/wiki/06-webview-support
• https://github.com/calabash/calabash-ios/wiki/06-WebView-Support
• https://github.com/calabash/calabash-ios/wiki/05-Query-syntax