Espresso Web - UI Test Framework For Android Webview

Espresso web library give you an Espresso-like feel to interacting with WebViews. From espresso 2.2 webview support module was added to the espresso lineup.

Prerequisite - You must have used espresso for native UI test cases. otherwise some of the methods you don't know we have used in code. 

Espresso Web allows to perform ViewActions using Web Driver Atoms. Atoms is a thin wrapper around javascript. So it turns out specifying element and action are executed by the atoms. DriverAtom is utils collection class with useful methods like clearElement, webClick, webKeys etc.

Some time in mobile application we open web pages inside our app for some of features like login or registration or various payment methods etc. and those module required to test thoroughly so to do that espresso provide Espresso Web Api.


There are many ways to identify HTML element to perform action on element like using its Id, Name, Tag ,XPath etc you can find more about in Locator class in espresso web library. In this tutorial I am going to write the most used Locators for writing test cases for web pages in android.

Gradle file change

// For espresso web view testcases
androidTestImplementation 'com.android.support.test.espresso:espresso-web:3.0.2'

OR if you are using androidx libraries add

androidTestImplementation 'androidx.test.espresso:espresso-web:3.1.0'

private void withIdHasTextInWebView(int webViewId, String elementId, String text) {
    Web.onWebView(ViewMatchers.withId(webViewId))
            .withElement(DriverAtoms.findElement(Locator.ID, elementId))
            .withNoTimeout()
            .check(WebViewAssertions.webMatches(DriverAtoms.getText(),
             Matchers.equalTo(text)));
}

In above code as you can see we are testing weather particular element has given text (label test) in HTML code in webview. To find element from HTML code we are using static findElement() method from DriverAtoms util class.   WithNoTimeout() method disable wait of javascript thread. Javascript takes some time pause of few millisecond before delivering result but we don't want that to happen so we are using this method. After that we are using check() method same as we have in espresso core library.

private void withTagHasTextInWebView(int webViewId, String tagName, String text) {
    Web.onWebView(ViewMatchers.withId(webViewId))
            .withElement(DriverAtoms.findElement(Locator.TAG_NAME, tagName))
            .withNoTimeout()
            .check(WebViewAssertions.webMatches(DriverAtoms.getText(),
                Matchers.equalTo(text)));
}

You can also perform above test on the basis of element tag also. If you know element tag instead of its Id or have same id used for multiple elements. So as you can see we are testing particular label with "xyz" tag have "xyz" text.

private void withXPathHasTextInWebView(int webViewId, String xpath, String text) {
    Web.onWebView(ViewMatchers.withId(webViewId))
            .withElement(DriverAtoms.findElement(Locator.XPATH, xpath))
            .withNoTimeout()
            .check(WebViewAssertions.webMatches(DriverAtoms.getText(),
                    Matchers.equalTo(text)));
}

Some time you don't know Id or even element have no Tag defined but still we need to test particular label has given text or not. so espresso even support XPath of the element from HTML code.

That's it from my side. Now run the app and see the result. If you have any query please let me know in below comment box.

keep coding... :)

Source code