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.

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

URL : http://localhost:8080/wd/hub/status

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.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

package Appium;

import org.testng.annotations.Test;

import org.testng.annotations.AfterTest;

import org.testng.annotations.BeforeTest;

import io.appium.java_client.android.AndroidDriver;

import io.appium.java_client.AppiumDriver;

import java.net.MalformedURLException;

import java.net.URL;

import java.util.Set;

import org.openqa.selenium.By;

import org.openqa.selenium.WebElement;

import org.openqa.selenium.remote.DesiredCapabilities;

import org.openqa.selenium.support.ui.ExpectedConditions;

import org.openqa.selenium.support.ui.Select;

import org.openqa.selenium.support.ui.WebDriverWait;

public class WebViewSelendroidApp {

 public static AndroidDriver<WebElement> driver;

 public static AppiumDriver<WebElement> _driver;

 public static DesiredCapabilities cap = new DesiredCapabilities();

 @BeforeTest

 public void startAppium() throws MalformedURLException, InterruptedException{

  System.out.println("setUP() :: driver.AndroidDriver() executed");

  cap.setCapability("platformVersion","4.4.4");

  cap.setCapability("platformName","Android");

  cap.setCapability("deviceName","ZX1B32HNBD");

  cap.setCapability("app","C:\\Users\\WebView-test.apk");

  driver = new AndroidDriver<WebElement>(new URL("http://127.0.0.1:4725/wd/hub"),cap);

 }

 @Test

 public void AppLogin() throws InterruptedException{

  System.out.println("AppLogin() :: driver.start() executed");

  By webView = By.className("android.webkit.WebView");

  By title = By.id("android:id/title");

  WebDriverWait wait = new WebDriverWait(driver,300);

  driver.findElement(title).getText();

  Set<String> availableContexts1 = driver.getContextHandles();

  System.out.println("Total No of Context Found Before reaching WebView = "+ availableContexts1.size());

  System.out.println("Context Name is "+ availableContexts1);

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

  driver.findElement(By.id("com.mkyong.android:id/buttonUrl")).click();

  wait.until(ExpectedConditions.visibilityOfElementLocated(webView));

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

  Set<String> availableContexts = driver.getContextHandles();

  System.out.println("Total No of Context Found After we reach to WebView = "+ availableContexts.size());

  for(String context : availableContexts) {

   if(context.contains("WEBVIEW")){

    System.out.println("Context Name is " + context);

    // 4.3 Call context() method with the id of the context you want to access and change it to WEBVIEW_1

    //(This puts Appium session into a mode where all commands are interpreted as being intended for automating the web view)

    driver.context(context);

    break;

   }

  }

  String input_box_text = driver.findElement(By.id("name_input")).getAttribute("value");

  System.out.println("Pre written text inside text box is " + input_box_text);

  driver.findElement(By.id("name_input")).clear();

  driver.findElement(By.id("name_input")).sendKeys("Amit Jain"); System.out.println("No of dropdown on page "+ driver.findElements(By.xpath("//select")).size());

  int size=driver.findElements(By.xpath("//select")).get(0).findElements(By.xpath("//option")).size();

  System.out.println("No of Elements in dropdown "+ size);

  WebElement car = driver.findElement(By.name("car"));

  Select preferedCar=new Select(car);

  preferedCar.selectByIndex(2);

  System.out.println("Button Value is : " + driver.findElement(By.xpath("/html/body/form/div/input[2]")).getAttribute("value"));

  //Key code constant: Back key.

  //Constant Value: 4 (0x00000004)

  driver.sendKeyEvent(4);

  // 4.4 To stop automating in the web view context we can simply call the context again with id NATIVE_APP.

  for(String context : availableContexts) {

   if(context.contains("NATIVE")){

   System.out.println("We are Back to " + context);

   driver.context(context);

    if (driver.findElement(title).getText().equals("WebViewApp"))

    System.out.println("Context Switched");

   }

  }

 }

 @AfterTest(alwaysRun= true)

 public void tearDown(){

  driver.quit();

  System.out.println("tearDown() :: driver.quit() executed");

 }

} // end of class

Vivek Kumar

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 JMet...

NewAutomationWorld

Search This Blog