Skip to main content

Inspect and Automate WebView in Hybrid App

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
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.
  1. It requires Android version 4.4 or later i.e. API level >=19.
  2. 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.
  3. 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
  4. 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.
  5. 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.
WebView_1
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
WebView_2
WebView_3
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
WebView_4
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}
WebView_5
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.
WebView_6
  • 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.
WebView_7
WebView_8

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
WebView_9
2) Open app with enabled webview debugger in device listed with adb
WebView_10
3) Click inspect link and we can inspect elements under webview.
Inspecting Email text input field
WebView_11
Inspecting Password input text field
WebView_12
Inspecting Login submit button field
WebView_13

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

Popular posts from this blog

JMeter Exceeded Maximum Number of Redirects Error Solution

While running performance test, JMeter allows maximum 5 redirects by default. However, if your system demands more than 5 redirects, it may result in JMeter exceeded maximum number of redirects error. In this post, we have listed down steps to overcome this error. Actual error in JMeter: Response code: “Non HTTP response code: java.io.IOException” Response message: “Non HTTP response message: Exceeded maximum number of redirects: 5” This error is noticed because  JMeter  allows maximum 5 redirects by default and your system may be using more than 5 redirects. You need to increase this count to more than 5 in jmeter.properties file. Follow below steps to achieve this. Navigate to /bin directory of your JMeter installation. Locate jmeter.properties file and open it in any editor. Search for “httpsampler.max_redirects” property in opened file. Uncomment the above property by removing # before it. Change to value to more than 5 Eg. 20. Save the file and restart JMeter. If

SSO with SAML login scenario in JMeter

SAML(Security Assertion Markup Language) is increasingly being used to perform single sign-on(SSO) operations. As WikiPedia puts it, SAML is an XML-based open standard data format for exchanging authentication and authorization data between parties, in particular, between an identity provider and a service provider. With the rise in use of SAML in web applications, we may need to handle this in JMeter. This step-by-step tutorial shows SAML JMeter scenario to perform login operation. First request from JMeter is a GET request to fetch Login page. We need to fetch two values ‘SAMLRequest’ and ‘RelayState’ from the Login page response data. We can do this by using  Regular Expression Extractor . These two values need to be sent in POST request to service provider. Refer below image to see how to do this. We will get an HTML login page as a response to the request sent in 1st step. We need to fetch values of some hidden elements to pass it in the next request. We can do this b

A Tutorial to Send Email using JMeter

Sending email is a mundane activity in any professional’s life. It’s a common medium for communication nowadays. Therefore performance testing of email server is not only important but necessary for an organization. JMeter can be helpful to perform load testing in such scenarios. In this tutorial, we will see how JMeter can be used to send email. We will use SMTP Sampler of JMeter to send an email. JavaMail API is needed to enable email functionality in JMeter. Download it from  here  and paste the jar in JMeter’s lib folder. Now, perform below steps to configure SMTP Sampler. Add a new Thread Group under Test Plan. Right click on Thread Group and select Add–>Sampler–>SMTP Sampler. We need to populate SMTP server’s details in this sampler. We will use GMail for sending an email. For this, enter these values in SMTP Sampler fields. Server: smtp.googlemail.com, Port: 587. Provide values in Email Address From and To fields of Mail Settings section to specify sender and reci