Tuesday 16 February 2016

Testing WebViews using Espresso Web



Testing app with Web Views is now possible with Espresso Web. Espresso allows various Web Interactions which we can use to construct our test cases. locating UI element for Web Views is different as UIAutomator cannot detect the Web UI element hence we will use Chrome inspector to locate the UI element which I have already explained here.

In this post I will cover frequently used web iterations so that you can immediately start writing test cases for Web views.Web view test cases takes little more time as we need to add explicit wait because loading of web page depends on the internet connection.

Video Tutorial -



App under testing -
Suppose you have a app with a Web page Displaying a Login screen which displays page Title "WELCOME". The app also displays two text-boxes first to enter email id and second to enter password and there are two button "Cancel" and "Submit". After click on Submit the page shows "Successfully Logged In".

Test Scenario-
1. First test that title "WELCOME" is displayed.
2.Test that two text-boxes are displayed and two buttons are also displayed.
3. Enter email is and password.
4. click on Submit
5. Test Success Message is displayed.

Test Case Example -


@RunWith(AndroidJUnit4.class)
@FixMethodOrder(MethodSorters.NAME_ASCENDING)
@LargeTest
public class WebViewSample {

@Rule
public ActivityTestRule<MainActivity> mActivityRule = new ActivityTestRule<>(MainActivity.class); 

@Before
public void setUp()
{
    // enable java script for web page to perform web interactions     

      onWebView().forceJavascriptEnabled();   
}

@Test
public void testWebPage()throws Exception
{
    // check WELCOME text is present
    onWebView().withElement(findElement(Locator.ID, "welcome_text"))
   .check(webMatches(getText(), containsString("WELCOME")));
    //Check UI elements text boxes and buttons are present on the page
    onWebView().check(webContent(hasElementWithId("email_edit")));
    onWebView().check(webContent(hasElementWithId("password_edit")));
    onWebView().check(webContent(hasElementWithId("cancel_button")));
    onWebView().check(webContent(hasElementWithId("submit_button")));
    //enter email id and password
    onWebView().withElement(findElement(Locator.ID,"email_edit")).perform(clearElement()); 
    onWebView().withElement(findElement(Locator.ID,"email_edit")).perform(webKeys("anujabhatt88@gmail.com"));
    onWebView().withElement(findElement(Locator.ID,"password_edit")).perform(webKeys("12345"));
    //click on submit button
    onWebView().withElement(findElement(Locator.ID,"submit_button")).perform(webClick());
    //Explicit wait for submission
    Thread.sleep(3000);
    //Check for successful submission
    onWebView().withElement(findElement(Locator.ID, "display_text"))
   .check(webMatches(getText(), containsString("Successfully Logged In")));

}
}

I hope this post helps you find your code coverage for your test suit :)
Please Share your feedback in comments section below and follow QA Automated to get latest post update.Happy Testing :-)

8 comments:

  1. @Anuja: This is a great blog and i see it really helpful. I would definitely encourage my friends interested in learning automation to go through it.

    I had a question related to Espresso-Web library or your above code sample.

    I just started using espresso-web for my mobile application(hybrid app) and when i follow the above instructions, it does not find the elements(username and password) in the first page of my app which i thought was using webview. But after further digging in to code, i found that its not a webview and its using chrome custom tab (https://developer.chrome.com/multidevice/android/customtabs).

    Have you ever used Espresso-web to find/validate UI elements inactivities(mobile pages) that use chrome custom tab? If yes, it would be great if you can help me with any sample code or urls/link.


    ReplyDelete
    Replies
    1. Thanks a lot for reading and sharing my blog. I have not came across custom tab testing yet. But I will explore this more and once I get a answer I will add it to my blog soon. Please Like my FB page or join google+ to get my latest post updates

      Thanks,
      Anuja

      Delete
  2. Hey. I have an hybrid app where when i click a button in native component, i get redirected to login page (web view component). I added following lines of code right after i click a button in native component to automate the login steps(enter user name, password and click sign in button). When i run the test, i see the webview page being loaded but it does not enter the username, password and fails with following error. Can you please advice what am i doing wrong here?

    Lines of code:
    =============
    .......
    //Enter username, password and click sign in button
    onWebView().forceJavascriptEnabled();
    onWebView().withElement(findElement(Locator.ID, "user")).perform(webKeys("test"));
    onWebView().withElement(findElement(Locator.ID, "passwd")).perform(webKeys("test1234"));
    onWebView().withElement(findElement(Locator.ID, "submit")).perform(webClick());
    .......

    ERROR:
    ======
    android.support.test.espresso.NoActivityResumedException: No activities in stage RESUMED. Did you forget to launch the activity. (test.getActivity() or similar)?

    ReplyDelete
    Replies
    1. Hi, even I am seeing the same issue while trying to access webviews in Hybrid app. Have you got any solution?

      Delete
    2. Hi Arun.. were you able to solve this problem?

      Delete
  3. @Anuja, I'm trying interact with web elements but I do not getting. I need to import some library?

    ReplyDelete
  4. Do you have example how to deal with Modal window (such as pop up)

    ReplyDelete