Introduction to WebView

One feature of mobile platforms is the ability to embed a chromelessweb browser inside of a ‘native‘ application these are called ‘webviews’. Android developers use “android.webkit.WebView” class to implement webview inside an app. Class hierarchy goes as shown below

In one line we can say, Hybrid Apps are the apps which contains both Native View and Web View.

One major principle followed by Appiumwhich provide appium an advantage over Calabash automation tool is that, in Appium it is not required to change the app under test. We automate same app which goes to production. Appium allows us to test WebApps and Hybrid Apps using it’s built in support via Chromedriver. We can use selenium webdriver existing methods to automate webview’s inside hybrid app.

Conditions to Inspect WebView Elements

We can use Chrome DevTools to debug and inspect WebView content in Android applications.

It requires Android version 4.4 or later i.e. API level >=19.

WebView debugging should be enabled; developer must enable ‘setWebContentsDebuggingEnabled’ flag in the WebView class. This flag enables debugging of web contents (HTML / CSS / JavaScript) loaded into any WebViews of app.

Chrome browser with version 32 or greater to be installed on desktop and Android device and DESKTOP_ANDROID_CHROME_BROWSER_VERSION >= ANDROID_DEVICE _CHROME_BROWSER_VERSION

In addition to this, Appium during automation recognize the WebView context only if webview debugging is enabled from within app. We can inspect webview on LOLLIPOP / KITKAT Android devices.

Appium also uses Selendroid under the hood for webview support on devices older than 4.4. To use this feature of appium, it is mandatory to specify “automationName” as “selendroid” in desired capabilities passed to Appium server. If our hybrid app under test is build in such a way that it supports minimum Android version 4.0.4 (API Level 14) and max Android version 4.3 (API level 18) then we can inspect webview elements and execute our automation tests using selendroid mode of appium.

How to Inspect and Automate WebView in Hybrid App

The sad part is UIAutomatorViewer does not help us in inspecting elements which are under WebView.

We can inspect these elements which are under WebView in 2 ways:

Using Selendroid Inspector

Using Appium tool by running appium with desired capability automationNameas “Selendroid” only for apps which are build for Android version < 4.4

We clicked a button with an id we got from selendroid inspector which navigates us to webview and it also generated equivalent Java code for click action.

We see on button click webview appears and selendroid inspector generated completed html source of webview. Again like in step 1 if we perform click actions on text box, button, select drop down selendroid will generate equivalent Java code.

Using Chrome Remote debugger

Only for apps which supports Android version 4.4+ or API level >18. Here important point to note is appium works for API level >17 but chrome remote debugger works for API level >18 i.e we can use this chrome feature for API level>18

1)Type “chrome://inspect/#devices” in chrome browser

2) Open app with enabled webview debugger in device listed with adb

3) Click inspect link and we can inspect elements under webview.

Inspecting Email text input field

Inspecting Password input text field

Inspecting Login submit button field

Writing script to automate WebView

We can follow below 4 steps to automate a webview

Navigate to a portion of your app where a web view is active

Call getContext() method which will returns a list of contexts we can access, like ‘NATIVE_APP’ or ‘WEBVIEW_1’

Call context() method with the id of the context we want to access i.e. WEBVIEW_1 which is the name of webview context of the app .This puts Appium session into a mode where all commands are interpreted as being intended for automating the web view, rather than the native portion of the app. For example, if you run getElementByTagName, it will operate on the DOM of the web view, rather than return UIAElements/MobileElements/Native WebElements.

To stop automating in the web view context we can simply call the context again with id NATIVE_APP i.e. the name native context of the app.

Author: Amit Jain

My name is Amit Jain. I work as a manual and automation tester both as Individual Contributor role. I have total 8 years of testing experience. I worked for Ecommerce,Retail domain projects in mobile and web both. I work for an IT company in Noida. I feel it is very important for every tester to look more and more inside system to make it better.