How To Inspect WebView Using Chrome Browser?

As per the valuable information stated in my previous blog, I have already discussed how you can inspect the elements of a mobile app using UIAutomatorViewer. So, it is quite clear that by using UIAutomatorViewer you can easily inspect the elements of an application except for the WebView. However, in order to inspect WebView, we have some other options and I am going to now discuss one of them.

Since I have gone through many references for inspecting WebView and found out that there are actually many approaches to do the same. But what I found the most easier and better way to inspect the WebView is by inspecting it on Chrome browser. Moving ahead, now I am going to explain the complete procedure to inspect the WebView with the help of Chrome browser.

But before proceeding ahead with the discussion, we first need to know what actually a WebView is and why it is used in the applications. So, let’s first take a dive into the pool of basics!

What Is A WebView?

WebView is regarded as a view, which is used to display web pages in an application. One can mention HTML strings and with the help of WebView, you can also make it display in your application. It can really help in turning your application into a web application.

There are a variety of views in Android used to build the UI of the application. One of them is WebView, which is enriched with views that can be embedded in Activities and used to display Web pages. The ability of WebView is to display web pages in your application and has a lot of advantages as it helps with the reuse of Web pages and Web apps in an Android app.

Benefits of WebView in Mobile Apps

Below is a list of benefits that can be considered for considering the use of WebView in your mobile app:

  1. With the help of WebView, you can display external HTML content in your application.
  2. It allows you to add those SocialEngineAddons plugins into your app which are not natively integrated before.
  3. It allows you to integrate some third party plugins into your app which you can integrate only with the help of WebView.
  4. The “Single Sign-On” feature of the “REST API Plugin” is used to give the user a better experience. If a user logged-in an app and navigates to a WebView screen, then the user at that point of time will automatically logged-in to the WebView and can be able to see the content of that particular WebView as a logged-in user.
  5. The content which is used to display inside a WebView is responsive and mobile friendly and because of this, it works better towards providing a better user experience.
  6. The combination of Robust App Dashboard Menu provided in your mobile apps and the WebView feature is very powerful. This will allow the Real-time Updates in the mobile apps, which means that new content, with new menu-item, can be added/modified any time in your app from the Admin Panel and this will be reflected in all your mobile app at the same time, without performing any app upgrades.

Now, if you are going to inspect a WebView with the help of UIAutomator Viewer, you will only get the class name of the view which is android.webkit.WebView.

So, if you want to inspect the elements present inside the WebView, you need to go through a different technique. There are so many ways to inspect these elements, but I am going to tell you that how you can inspect these elements with the help of chrome browser’s inspector.

Before inspecting the WebView, you need to do some settings on your device first.

The first step is to enable USB debugging on your device, for this follow these steps:

  1. Go To Settings >> About Phone
  2. Go To Build Number
  3. Tap on it seven times to enable Developer Options
  4. Pres back and Go To Developer Options

5.Turn on USB Debugging

After completing these steps, connect your device to your system and go through these steps in order to inspect the elements present in the WebView.

Steps To Inspect WebView

There is a proper process for planning success, hence it is better to follow a step-by-step guide to inspect WebView:

  • Open Google Chrome and type URL: chrome://chrome-urls/, it will display a list of chrome urls.
  • You need to select “chrome://inspect/” from that list.

  • Click on it and it will open a window like this. Check discover USB devices in it and will display the device information which is currently attached to the system.

  • Now open the chrome browser on your device and open the app which you want to inspect. For example, if we need to inspect the WebView present inside the Amazon app then we first need to launch the app on chrome browser by entering the URL and navigate to that particular screen. After navigating chrome on your system will display some information along with some options regarding that screen.

  • Now, in order to inspect the elements present on that particular screen, just click on inspect. It will open a new window containing all the UI details of that screen. Although you need to make sure that the screen must be opened on the chrome browser of your device.

 

  • Now, select the inspector marked above and inspect whatever the element you want to inspect, it will display all the required details of the element.
  • For example, if you want to inspect the Buy Now button then select the inspector icon and move to the button and click on it. You will get all the required details.

  • As you can observe now it is showing all the attributes used for the Buy Now button. You can use these attributes to locate the elements in the same way as you are doing before in your test scripts, and you will easily be able to perform the tasks which are necessary for these elements.
  • For Example, if you want to locate the Buy Now button by its id attribute then you can use it in this way, WebElement buyButton=driver.findElement(By.id(“buy-now-button”));
  • In the same way, you can inspect any element present inside the WebView and can easily locate that element by writing the above-mentioned line of code and perform all the operations on it.

So, by following these steps you will get a better understanding that how you can inspect a WebView using chrome browser and how you can locate your desired elements. In my opinion, this is the most effective way to inspect and locate the elements, which is not possible by using UIAutomatorViewer!

Follow me!

1 thought on “How To Inspect WebView Using Chrome Browser?”

Leave a Comment