Inspect Element in Mobile Web Application

Let’s see, How can you inspect Element in Mobile Web application. In the previous tutorials, You have seen  How can manage the Data and Time Elements in Appium. In this tutorial, we will see how can you find the Elements in  Mobile Web Application.

 

The way your web content behaves on mobile can be different from the desktop Web Application experience. To find the Elements of Mobile Web Application You need to use Chrome DevTools to debug the site.

You will learn how to use the Chrome DevTools to debug the site live on the Android device and how to Inspect elements of Mobile Web Application.

 

Chrome DevTools helps us in following:

  • Debugging websites in the browser.

  • Screencasting lives to your development machine from your Android device.

  • Debugging WebViews in native Android apps.

To begin with Chrome DevTools, you need:

  1. Chrome 32 or later installed on your machine.

  2. For browser debugging: Android 4.0+ and Chrome for Android on the device

  3. Your Mobile Device should be connected with your Desktop machine.

Note: Remote debugging requires your version of desktop Chrome to be newer than the version of Chrome for Android on your device. For best results, use Chrome Canary browser (Mac/Windows).

To find the Elements on your Desktop device, Your device should be connected to your desktop machine. And the complete setup for APPIUM should be done on your machine.

 

Discover Device and Find Elements on Chrome

Connect the device to the machine, do the following steps:

1) On the desktop, Chrome browser, navigate to chrome://inspect and confirm that Discover USB devices are checked.

Inspect Element of Mobile Web App

 

2) Now open a Chrome browser on the device and after that refresh the Chrome window on the machine.

This will display the entry of the opened Chrome browser on the device. Type www.amazon.in in the space given and click on Open.

Inspect Element of Mobile Web App

 

3) Notice the website is opened in the device now.

4) Same is displayed on the Chrome browser on the machine as well. Now click on the inspect link.

 

5) Inspect, will allow to investigate the HTML elements of the website opened on the connected device. A new instance of Chrome DevTools will launch on the computer. From this instance, you can interact with the selected browser tab on your device in real time.

Inspect Element of Mobile Web App

Inspect Element of Mobile Web App

 

In Above attached image, We are trying to locate Login Button in Amazon app. You can see the HTML view of the Login button is highlighted in the right panel. From this you can generate the CSS Selector or XPaths of Mobile Application elements and automate Mobile Web Application.

 

So using this way, You can find the Mobile Web Application Elements and Automate your Mobile Web Applications.

0 Comment

Leave a Reply