Android Mobile Web Automation- Chrome ADB plugin for finding elements on Mobile Web/Hybrid App

People who have already used Selenium for web automation, knows how we can use Chrome and firefox plugins to find elements on web pages and use them in Selenium Automation code. But how do we do this for Mobile Websites?

We can use Chrome ADB (add-on) to find elements on Mobile-web/Hybrid App

Chrome ADB (add-on) allows to access source code of the mobile apps remotely. Download it from [here] (make sure you have installed chrome version 32 or later).

Follow below steps to use Chrome ADB plugin to find Mobile Web:

  1. Go to **‘Settings > About Phone’** and tap **‘Build number’ 7 times** (Android 4.2 or above) then return to the previous screen and find **‘Developer options’**.1
  2. Tap on the **‘Developer options’** and click on **‘On’** in the developer settings (You will get an alert to allow developer settings, just click the ok button), make sure **‘USB debugging’** option is checked.
  3. 2.png
  4. Open Chrome on desktop and click on the ADB plugin icon which is on top right corner and click on **‘View Inspection Target’**.3.png
  5. Connect your Android device with desktop (You should have installed the USB driver for your device). After connecting, you will get an alert on your device to allow USB debugging, just tap OK.
  6. Open chrome on your device and navigate desire URL (google.com).
  7. Once you setting up your device for debugging, then **_‘chrome://inspect/#devices’_** page will display all connected device along with open tabs and web views. Make sure **‘Discover USB Devices’** should be checked.4.png
  8. Now click on the **‘inspect’** link to open the developer tools, you will get the below screen. Now click on the screencast icon on the top right corner to display your device screen.
  9. Now we are all set to find elements with chrome ADB.  5.png
  10. Now, we are going to find the ID of an element using Chrome ADB plugin remotely. Here we are taking an example of Google search page.
    1. Navigate to https://www.google.com on your mobile chrome browser.
    2. Click on the inspect link from the ADB plugin of your desktop chrome browser.
    3. Click on the inspect element icon and mouse over on the search box.

6.png

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s