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 -
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 -
Launching the browser would display corresponding information on chrome inspect panel -
Click the inspect link and it would open bring developer toolbar, displaying the elements of mobile site just like a desktop website.
Click on the “Switch to portrait screencast” in developer toolbar and you will see image of emulator in developer tool bar -
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 -
Doing any operation on device image on developer toolbar would also reflect it on emulator/device -
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 -
Now hit the escape key on your developer toolbar and start testing your element locators :)
