How to inspect the Android Hybrid App web elements?

Chrome browser can be used to inspect the Android Hybrid Application specific web elements. Web Elements is nothing but the HTML/web controls such as text box, buttons, drop-down list, radio button, grid etc.

Hybrid Application is combination of both the Native and Web components. Web elements associated with the Hybrid application will re-use the web browser container for displaying the elements in the expected fashion. Hybrid application are developed using the HTML, CSS and Javascript. WebView can be visualized for the Android mobile application.

Please note, debugging option should enabled by the Android developer for the Hybrid mobile application. After enabling the debugging only, you could inspect the web elements using the Chrome browser. WebView debugging must be enabled from within your application. To enable WebView debugging, call the static method setWebContentsDebuggingEnabled on the WebView class.

Please contact your developer.

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
WebView.setWebContentsDebuggingEnabled(true);
}

Now the debugging option enabled and we are going to see, how to inspect the web elements for the sample hybrid mobile application of Apache Cordova developer app. Steps to invoke the chrome inspect as follows;

Now the debugging option enabled and we are going to see, how to inspect the web elements for the sample hybrid mobile application of Apache Cordova developer app.

Steps to invoke the chrome inspect as follows;

1. Ensure ADB driver installed in the windows x86/x64 laptop/desktop based on the installation of Android SDK

2. Ensure target device driver or PdaNet+ universal USB driver software installed in the laptop/desktop, which is used to connect the mobile device with the laptop/desktop

http://pdanet.co/

3. Ensure adb devices command displayed the target device information in the laptop/desktop as expected;

4. Open the Chrome browser and the browser version should be greater than 55.x and enter the below command in the URL and press the enter key;

chrome://inspect/

ADB command will start its action by acquiring the device and it’s information can be seen in the browser window as specified below;

5. Now open the Android Hybrid application in the mobile device, Follow the above step-4 and click the inspect link available in the browser as specified below;

After click the inspect link, another browser window should open and it will display the mobile device screen in the emulator view as specified below;

6. Now inspect the web elements by using the arrow button as mentioned below;

Click that arrow button and click the respective button in the left pane which is showing the application view in the emulator view;

After click the respective web element in the emulator view, you could see the complete web element information in the right pane as mentioned in the above screenshot.

Now, you could use the captured web element information in the Appium specific mobile application automation in the Eclipse IDE.

Happy scripting!!!