What a WebView Is and How to Test It

Convenience is something that we can never be fully satisfied with. This is why software developers are always made to push their limits to create a better user experience, without compromising functionality. All for the sake of saving the churn in today’s competitive business. People want convenience and this is why hybrid applications have been welcomed.

What is so unique about hybrid applications? WebViews!

Hybrid Applications

As the name suggests, they are a mixture of Native and Web Applications. They are available in application stores for download and require access authentication from the device like native apps, but they also have a browser embedded in the application (WebView) for rendering HTML. Instagram is a good example of a hybrid application.

Remember the time when, to access any third party link, we used to open it in a new browser on the device, resulting in moving us out from the application we wanted to use? This was a disaster for UX, which was resolved by creating an in-app browser window for facilitating third-party web pages as part of the activity layout. Kudos to WebViews!

Why Do You Need WebViews?

• They provide better control over your application’s UI.
• You don’t have to update the entire application if you just want to update the app's content, if, for example, you wish to publicize an upcoming sale on your application or some other exciting offer.
• You don’t get pushed onto another third-party application, but, rather, get redirected to an in-app browser that pulls the content from the web for you. This provides the convenience of staying in the intended application. Take Instagram for instance, where you need to swipe up in some stories and you are redirected to a webpage through an in-app browser, rather than opening the content in Chrome, Safari, Firefox, or any other browser. You can navigate the content freely on the redirected webpage by scrolling up/down, zooming in/out, or searching for a text.
• WebViews allow cross-platform development resulting in reduced development cost and flexibility for the developer. Note: We cannot make a single build of an application to work on multiple OSs though. We can only ease the development of another build with the help of web extensions through HTML, CSS, JavaScript, etc.
• Companies often aim to build a wrapper application of an existing web app. By doing so, companies aim to create a presence in the application stores with comparatively less effort. Also, frameworks like Ionic allow you to add an application to the app store and deploy to the mobile web as a PWA.

For Generating a WebView, a Developer Needs to:

• Develop an instance of a webview class.
• Embed a browser in your application.
• Add browser functionalities with the help of a WebView library.
• Add internet permission in the Android Manifest file.
• Add the code for WebView to open an in-app browser.

WebView Testing - Refers to creating and executing test cases for checking the effective working mechanisms of WebViews.

Keep a Note of the Following While Testing WebViews:

• Verify if the application is responding according to its intended behavior by interrupting the web page from loading.
• If your content is including hyperlinked email addresses in the WebView then make sure those hyperlinks are opening the mail application in your device when tapped.
• Test for a hyperlinked phone number in a similar way — is it routing the user to dial the app or not? Also, how is that hyperlink responding if a SIM card is not inserted in the device?
• Test the response of WebView in different network modes – 2G, 3G, WiFi, LTE.
• Special characters should be also be tested. Along with zooming in/out, navigating through the web content by scrolling up/down or navigating the screen by scrolling left/right.
• Test the tolerance of WebView against external factors like SMS, signal drop, notifications, call, etc.
• Test the behavior of your application when an external application is launched via a hyperlink from your web content.
• Vary orientation of your device and test that your web content is able to support them.
• Test if the graphics display is satisfactory.
• Compress the browser window and see if the text is being compressed appropriately.
• A cross-browser platform will be very helpful in testing the above-mentioned tips to test. It will also provide an idea as to how your WebView is being portrayed to the targeted audience. 

How to Perform WebView Testing

Espresso Web for Android WebView – This tool helps in examining and controlling the behavior of WebView UI components by reusing Atoms from the WebDriver API. It is one of the most commonly used tools for testing hybrid applications. It is required to check the Integration of an application’s native UI components and its WebView UI components.

Before using Espresso Web, you need to thoroughly analyze the source code of your website for determining hooks for its methods. This is why it could become very complex for large websites.

Alternative Approach

A different approach would involve forgetting the third-party code and focusing only on the Android-based code. Basically, a WebView maps elements of a website; allowing the user to interact with them through the Android View objects and their extensions. These views don’t have an ID making them inaccessible with findViewById(int id), nor can you access these IDs in your application package.

That doesn’t mean that you can’t track them. You can with the help of Android Device Monitor, a standalone tool for providing a UI to aid multiple tools for Android application analysis and debugging.

• You need to take a snapshot of every screen on the emulator with the Android Device Monitor.
• Get an idea of how the WebViews are internally structured.
• Perform actions on them with the help of UiAutomator.

This approach won’t require you to analyze the source code, and this way requires less effort in establishing and maintaining your code.

So now, if somebody starts a conversation on WebViews. I hope you will be able to crush it. Cheers!