Skip to main content

Mobile site element identification on emulator or device

When writing automated test for desktop web application then it is quite easy to identify application elements. Almost all popular browsers have built-in developer tool bar to facilitate the element identification.
It is also quite easy to identify element locator for mobile app by appium directly for ios and android apps (or UIautomatorviewer for android apps on Ubuntu). But how do you identify application elements for mobile site? Chrome browser comes for our rescue. Chrome can be used to identify mobile site elements loaded on a mobile device or emulator.


Launch chrome:/inspect on the chrome browser and you would see following screen when no device/emulator is configured -


Screenshot from 2016-07-04 11:45:59.png
Make sure your emulator version is on Android 4.0 or higher. Once I launch the android emulator then it is listed on chrome inspect panel -


Screenshot from 2016-07-04 12:15:21.png


Launching the browser would display corresponding information on chrome inspect panel -


Screenshot from 2016-07-04 12:16:51.png


Click the inspect link and it would open bring developer toolbar, displaying the elements of mobile site just like a desktop website.


Screenshot from 2016-07-04 12:19:48.png


Click on the “Switch to portrait screencast” in developer toolbar and you will see image of emulator in developer tool bar -
Screenshot from 2016-07-04 12:25:15.png


Hence no need to switch back and forth between chrome and mobile device/emulator as you will be able to drive the mobile site UI from within developer toolbar -


Screenshot from 2016-07-04 12:28:16.png


Doing any operation on device image on developer toolbar would also reflect it on emulator/device  -


Screenshot from 2016-07-04 13:24:42.png


To bring control on a specific element, click the magnifying glass icon on developer toolbar and hover it on the element on which control is to be brought -


Screenshot from 2016-07-04 13:42:38.png


Screenshot from 2016-07-04 13:44:42.png


Now hit the escape key on your developer toolbar and start testing your element locators :)


Screenshot from 2016-07-04 14:07:48.png


Screenshot from 2016-07-04 14:14:06.png


Popular posts from this blog

Verify email confirmation using Selenium WebDriver

Note: If you are new to java and selenium then start with selenium java training videos .     How to Verify Email Confirmation Using Selenium 4 and JavaMail (2026 Guide) Updated: 2026 (Original article published August 02, 2011) Email confirmation is an integral part of most registration flows — account activation, password reset, multi-factor authentication, and onboarding emails. Sooner or later, every automation engineer faces the same challenge: How do we verify an email confirmation link inside a Selenium test without making the test slow and flaky? Many beginners try to automate Gmail UI using Selenium. That approach is fragile, slow, and tightly coupled to a third-party UI that changes frequently. A cleaner approach is this: Use Selenium for browser automation. Use JavaMail (IMAP) to read the email directly. Extract the confirmation link. Continue the test using Selenium. This guide shows a modern, production-ready approach using Selenium 4 and JavaMail . Why Not Auto...

Selenium Tutorial: Ant Build for Selenium Java project

Ant is a build tool which could be used to have your tests running either from command line or from Hudson CI tool. There is detailed documentation available for ant here but probably you need to know only a little part of it for you selenium tests. The essentials which are needed to know are: Project Target (ant execution point and collection of tasks) Tasks (could be as simple as compilation) And there would usually be following targets for Selenium tools - setClassPath - so that ant knows where you jar files are loadTestNG - so that you could use testng task in ant and use it to execute testng tests from ant init - created the build file clean - delete the build file compile - compiles the selenium tests run - executes the selenium tests Here is my project set up for ant -

Capture network traffic using WebDriver

We often come across testing requirements when we need to analyze the network traffic to find - HTTP status of page Analyze header information to find if right information is passed Validating parameters related to ajax requests etc Selenium 1 has had a way to capture n/w traffic but the feature does not always work as expected. At times Selenium 1 does not capture all n/w traffic, And given that Selenium 1 APIs are almost dead it is