Appium: Hybrid(Ionic Cordova) iOS Automation on Real iPhone Device.

Appium automation of Ionic-Cordova hybrid app

One of the good parts of Appium is having compatibility with Hybrid mobile application automation.

But setting up Appium with iOS is a bit tricky part, but the process has become easier than ever. In this post, we will automate the ionic cordova hybrid iOS application with Appium.

Ionic Framework is an open-source UI toolkit for building performant, high-quality mobile and desktop apps using web technologies — HTML, CSS, and JavaScript — with integrations for popular frameworks like Angular and React. More is here.

Speaking about automation, We can divide this post into 3 sections:

1) Appium-iOS setup
2) Real device setup
3) Change context to Webview

Alright, enough talk let’s get started!

Step 1 — Appium-iOS setup

1. Below command will install Appium globally

npm i -g appium

2. Execute bootstrap.sh using

# Move to global node_modules and appium webdriveragent project.
cd /Users/imac/node_modules/appium/node_modules/appium-webdriveragent/
# Execute Scripts/bootstrap.sh
sh Scripts/bootstrap.sh

3. Run WebDriverAgentRunner with a real iPhone.

• Connect real iPhone device and make sure it’s connected properly
• Open WebDriverAgent.xcodeproj
• Make sure you automatically manage signing

Automatically manage signing for WebDriverAgentRunner

• Now Test the WebDriverAgentRunner with connected real device

Test WebDriverAgentRunner with connected real iPhone device

Test WebDriverAgentRunner successfully

NOTE: For more detailed information you can follow the first chapter on my book for Appium end-to-end automation

Step 2 — Real device setup

1. Go to Settings > Safari > Advanced and enable JavaScript, Web Inspector & Remote Automation.
2. You can also enable Experimental WebKit Features according to your need if you want.

Now you are in a good position to automate the hybrid app made in Ionic-Cordova using Appium.

Step 3— Change context to Webview

What is WebView and why do we care so much?
WebView is an embeddable browser that a native application can use to display web content. A WebView is just the browser engine part that you can insert sort of like an iframe into your native app and programmatically tell it what web content to load.

Hybrid app has 2 contexts:
1. NATIVE
2. WEBVIEW

We have to change the context to WEBVIEW first thing first before anything else, it will change the context and page source will be changed to HTML (unlike XML based in the NATIVE app)

NOTE: There is a great article about Webview, which gives really nice information: https://www.kirupa.com/apps/webview.htm

Sample Code:

Below is sample python code which will install your ionic ios application on your connected iPhone device, and once the app is installed it will open and print the contexts

NOTE: Sometimes it will give you only NATIVE context, but you have to put some static wait and keep retry until WEBVIEW context is found OR need to make sure that on particular screen WEBVIEW is there.

import unittest
from appium import webdriver
desired_caps = {}
desired_caps['platformName'] = 'iOS'
desired_caps['platformVersion'] = '13.3'
desired_caps['automationName'] = 'XCUITest'
desired_caps['deviceName'] = 'iPhone '
desired_caps['udid'] = '698a3fd1afb4455ab1adbf8a9b321623f1c4d36d'
desired_caps['app'] = '/path/to/your/ionic-app.ipa'
#desired_caps['autoWebview'] = 'true'
driver = webdriver.Remote('http://localhost:4723/wd/hub', desired_caps)
driver.contexts 
#this will return the Native and Webview contexts,for example: ['NATIVE_APP', 'WEBVIEW_4471.1']
driver.switch_to.context('WEBVIEW_4471.1')
#now context is changed to WEBVIEW and you are ready to automate hybrid app
driver.find_element_by_css_selector('#loginPage').click()

This short and simple technique will help you to automate the Ionic-Cordova hybrid iOS application. 🚀

Thank you