How to 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 that contain both Native View and Web View.

One major principle followed by Appium which provides 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; the 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 built 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 built 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

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}

WebView_5
5) To start inspecting app we hit this url http://localhost:8080/inspector it will automatically redirect to http://localhost:8080/inspector/session/88ce8684-d785-4a24-9157-80967becc60d/ by taking session id if selendroid server is 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.

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("https://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

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("https://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

How to Inspect and Automate WebView in Hybrid App

Introduction to WebView

Conditions to Inspect WebView Elements

How to Inspect and Automate WebView in Hybrid App

Using Selendroid Inspector

Using Chrome Remote debugger

Writing script to automate WebView

Author: Lakshay Sharma

Related posts