In this blog we will discuss hybrid mobile apps automation, I will also provide an Appium example so that it would be easy to start with automating a hybrid mobile app.

What is hybrid application?

Hybrid mobile applications are developed using the combination of web technologies like HTML, JavaScript, and CSS along with native UI elements. These are bundled into a native application and can be viewed as a web page launching inside an iOS/Android application utilizing Mobile platform’s Webview. Functionally, a Webview is a minimal browser that presents a Web Content.

Some Tips:

Before going ahead with automating app I would suggest you, do some analysis about the user journeys on iOS and Android, because if you find that they are identical on both then we can utilize our script between these platforms.

If the entire hybrid application is webview based, adding ‘autoWebView’ as a desired capability will serve the purpose, otherwise we can switch contexts inside Appium tests. An application can have multiple contexts which include at least a Native view and zero or more web views.

Let’s start:

We will start our discussion with Inspecting web elements of our application. Let’s first see how to locate elements in Webview:

Prerequisite:

1. The application must be already launched inside simulator/ real device. (I am using simulators for this blog)
2. For iOS app, Web Inspector must be enabled (It is under Advanced Settings of Safari)

For Safari:

1. 1. Launch the Safari browser
   2. Navigate as Develop → Simulator → Select Application launched inside the simulator.

In below screenshot, www.wikipedia.org is opened inside Safari app

3. Click on Start Element Selection inside Web Inspector to select a required web element.

For chrome:

1. 1. Launch chrome browser
   2. Navigate to page chrome://inspect
   3. Click on inspect under the application listed below Devices Webview to select web elements

4. Use the arrow button to select an element from the left pane

Note: Apps inside ios simulators can only be web viewed inside Safari. Same is the case with Android apps which can be web viewed inside chrome.

Using Appium for testing hybrid Apps

As we all know for automating browsers, WebDriver is de-facto standard and Appium has extended this protocol for mobile automation by adding some mobile-specific methods. We can automate hybrid apps in the same way as we use Selenium for web apps, by notifying Appium the context (Webview or native). Once we are in webview, we can use all the commands that are in Selenium WebDriver API.

Switching to webview:

Depending upon the degree of hybrid or native features inside an application, we can switch context by two ways:

Automatic switch:

If the application under test starts with a webview then we can set Appium’s Desired Capability: autowebview to true, at the time of start of the session.

Explicit switch:

If you want to switch the context dynamically, you just need to add few steps into portion of Appium tests where the corresponding context is active in application.

We can follow following steps to switch between the contexts of application

1. Navigate to screen in your application where hybrid features are included.
2. Get all the contexts available such as NATIVE_APP or WEBVIEW_1
3. Switch to the available webview by setting its id to driver’s context.
4. To switch back to native view, we can again pass native context id to driver’s context.

Below is the complete code snippet:

// assuming we have a set of desired capabilities
driver = new AppiumDriver(new URL("http://127.0.0.1:4723"), capabilities);

// retrieve all the contexts available 
Set<String> contextNames = driver.getContextHandles(); // assume the contextNames has two entries: NATIVE_APP and WEBVIEW_1

// set context to WEBVIEW_1 
driver.context(contextNames.toArray()[1]); //do some actions inside app

//switch context back to native 
driver.context("NATIVE_APP");

//do more native testing if we want

driver.quit();

Few points to consider:

1. In webview context only the commands which are available inside selenium webdriver API can be used. Using mobile specific commands will result in an error. One such case is simulating swipe action which is not yet supported by selenium. In this case, we need to switch our app compulsory to native view.
2. For automating Android webviews Appium has inbuilt hybrid support via chromedriver
3. For automating iOS webviews, Appium establishes a custom remote debugger connection with the simulator which is on the same machine
4. Unfortunately, Appium cannot switch to webview when executing tests on the real iOS device. In such a case we need to utilize ios-WebKit-debugger proxy.
5. We can utilize @FindsBy annotation provided by selenium to specify location strategy for web elements inside hybrid app. In this way, same locators will be applicable to both platforms.

Now, you can start building your test scripts for hybrid Applications.