Introduction to WebView
One feature of mobile platforms is the ability to embed a chromeless web 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
java.lang.Object
↳ android.view.View
↳ android.view.ViewGroup
↳ android.widget.AbsoluteLayout
↳ android.webkit.WebView
↳ android.view.View
↳ android.view.ViewGroup
↳ android.widget.AbsoluteLayout
↳ android.webkit.WebView
In one line we can say, Hybrid Apps are the apps which contains both Native View and Web View.
One major principle followed by Appium which provide appium an advantage over Calabash automation tool is that, inAppium 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 andDESKTOP_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 automationName as “Selendroid” only for apps which are build for Android version < 4.4
We will manually launch app using appium server by:
1) Browse apk to launch from local folder.
2) Select desired capability automationName as “Selendroid” and other mandatory parameters like platformname,platformversion, launch activity
3) Click play button to start server
4) App gets launched. If we closely see Appium server running logs then we can see it starts selendroid server on local host at port 8080
5) If selendroid server started properly then on hitting below URL it will return below json string
jSON String : {“value”:{“supportedApps”:[],”build”:{“browserName”:”selendroid”,”version”:”0.12.0″},”os”:{“arch”:”armeabi-v7a”,”version”:”19″,”name”:”Android”},”supportedDevices”:[]},”status”:0}
5) To start inspecting app we hit this url http://localhost:8080/inspector it will automatically redirect tohttp://localhost:8080/inspector/session/88ce8684-d785-4a24-9157-80967becc60d/ by taking session id if selendroid serveris running and now we get option to inspect app elements so in our e.g. what we did is:
- 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.
Comments
Post a Comment