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

Where is my defect ID?

Don't you feel ecstatic when your automated tests find bug? After all tests finding bugs give us a sense of accomplishment, is not it? And this is followed by usual cycle of defect reporting, retesting and hopefully closure of defect. But at times defects are deferred to next or future releases. Which causes test method to fail for subsequent releases. And if you are dealing with a test suite having 100s of tests then it may become difficult to remember if there was a defect reported for a failing test? How do you deal with such situation. How about adding defect-id to @description tag of TestNG test. Hence it is reported on automated test report and we would know if defect exists for a failing test - How do you track defect-id of a failing test?

Return only first or last element from webelements collection

We often come across situation when there are multiple elements on a page and we probably like to exercise only a few of them using selenium webdriver. May be just first and last element. For example on a search result page we may like to click on only first and last link and not all. This is when Iterables API comes handy. (By the way I am assuming that you have already completed watching selenium training videos :)). Once we have collection of web element then we can use Iterables to get only first or last element as following - Consider that we fetch collection of element as - List< WebElement > webElements = getDriver().findElements(By. id ( "htmlID" ));   Now we can get the first web element from this collection as -  WebElement firstElement = Iterables. getFirst (webElements,  getDriver().findElement(By. id ( "defaultElement" )));   Herein second argument -   (getDriver().findElement(By. id ( "defaultElement" )))    in the me

Selenium Tutorial: Pattern Mathing using Selenium

I must confess I have never been admirer of Regular Expression but then there are times you can not escape from it, especially while working on a website which has dynamic contents appeared in static text and you want to validate it. like - "Validate that this text appears and there is 123 here and 456 here" And the test condition is 123 and 456 could be any three digits but number if digits should not be more than three. In a crude way we can at least test this - Assert.assertTrue(selenium.getText("elementLocator").contains("Validate that this text appears and there is")); but what if text goes wrong after "and there is"... what if more than 3 digits appear in text. This is where pattern matching/regular expression comes for our rescue and we can use matches method of String class to achieve same. So the assertion would be - String text = selenium.getText("elementLocator"); Assert.assertTrue(text.matches("Validate