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

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 -

Verify email confirmation using Selenium

Note: If you are new to java and selenium then start with selenium java training videos .     Email confirmation seems to be integral part of any registration process. I came across an application which lets you provide your email address. You can follow the sign up link in you mail and then complete the registration process. Lets consider we provide GMail address for it. Now if were to use only Selenium then we would have to follow following steps - Launch GMail using Selenium; Some how search for new mail in the list of available mails; Some how click on it; Parse the mail message; Get the registration link; Follow up with registration process What do you think of an approach in which you can

Appium and android mobile app automation

Next appium and Android mobile app automation video tutoria l is live. If you are new to appium then please check - appium-tutorial This video tutorial covers - Start vysor (Just for this session and not mobile automation :)) Start appium and start appium inspector Desired Capabilities platformName - Android deviceName - L2N0219828001013 (as seen on "adb devices") Saved Capability Sets Start Session Scan app elements using appium inspector Get appPackage and appActivity using "APK info" app Install "APK info" app and open app whose appPackage and appActivity are required i.e. calculator Check top section of app icon com.android.calculator2 is app package com.android.calculator2.Calculator is app activity testng.xml file settings for running Android app tests Test details com.seleniumtests.tests.mobile.AndroidAppTest and CalculatorScreen class View beautiful STF test report