{"id":1762,"date":"2014-10-21T01:04:34","date_gmt":"2014-10-21T05:04:34","guid":{"rendered":"http:\/\/qxf2.com\/blog\/?p=1762"},"modified":"2018-03-05T09:25:18","modified_gmt":"2018-03-05T14:25:18","slug":"identify-ui-elements-mobile-apps","status":"publish","type":"post","link":"https:\/\/qxf2.com\/blog\/identify-ui-elements-mobile-apps\/","title":{"rendered":"Ways to identify UI elements in mobile apps"},"content":{"rendered":"

Problem:<\/strong> Many testers do not know how to identify UI elements in mobile apps.<\/p>\n

In this post, I explain about different ways to find UI elements in Android’s calculator app. I also show you examples of using Appium’s API with the different locator strategies. <\/p>\n

\n

Why this post?<\/h3>\n

Identifying UI elements is a key component of writing UI automation. Most testers know how to inspect a web application and uniquely identify the UI elements that they want. However, inspecting and identifying UI elements in a mobile application is still somewhat of a dark art for most testers. Case in point – when I was learning Appium, it was hard to find a single article that showed me the various options I have to identify UI elements. This post aims to rectify this problem. In this post you will learn different ways to identify and interact with UI elements in a mobile application. <\/p>\n

\n

uiautomatorviewer: Mobile’s Firebug<\/h3>\n

If you automate web application testing, you are sure to have used either developer tools or Firebug. uiautomatorviewer is a GUI tool to scan and analyze the UI components of an Android app. uiautomatorviewer comes with the Android SDK. Please make sure to install Android SDK<\/a> to follow along. <\/p>\n

To launch uiautomatorviewer, pull up your command prompt, navigate to your $android-sdk\/tools<\/em> directory and issue the command uiautomatorviewer<\/em>. Launch uiautomatorviewer and connect your Android device to your machine. Launch the calculator app. In uiautomatorviewer, click on the Device Screenshot<\/em> button (top left) to take the snapshot of the calculator app. You can now inspect the layout hierarchy and view the properties of the individual UI components that are displayed on the device.<\/p>\n

\"Screenshot<\/a>
Figure 1. Inspecting a mobile application<\/figcaption><\/figure>\n

NOTE 1: For more details on connecting your Android device to your computer, please refer to the Step 2 of our previous<\/a> blog.<\/p>\n

\n

Different ways of finding UI elements <\/h3>\n

Figure 1 is your path to happiness. You can use the properties of the elements found in the Node Detail<\/strong> table like text, class, resource-id, content-desc etc to find the UI components of the app. Here are a few locator strategies that map well with Appium’s API:
\n1. Finding element by xpath in mobile application
\n2. Finding mobile element by Android UIAutomator<\/p>\n

1. Finding element by xpath in mobile applications<\/strong>
\nTo write your xpath:
\na. start with the class<\/strong> \/\/class<\/code>
\nb. [OPTIONAL] add attributes @attribute=\"blah\"<\/code>
\nE.g.: XPath to identify the number 7 in the calculator app is<\/p>\n

\/\/android.widget.Button[@text='7']<\/pre>\n
With Python and Appium, your corresponding call would be:  <\/p>\n
driver.find_element_by_xpath(\"\/\/android.widget.Button[@text='7']\")<\/pre>\n
 2. Finding mobile elements by Android UIAutomator <\/strong>
\nAnother way to identify UI elements in a mobile application is via UiSelector. To do so,
\na. start with a new UiSelector object new UiSelector()<\/code>
\nb. dot-add any of the other properties of the element .text()<\/code>
\nE.g.: To identify the number 7 in the calculator app:<\/p>\n
new UiSelector().text(\"7\")<\/pre>\n
With Python and Appium, your corresponding call would be:<\/p>\n
driver.find_element_by_android_uiautomator('new UiSelector().text(\"7\")')<\/pre>\n
NOTE: This method uses properties such as text, content-desc, resorurce id etc to find elements. Please refer to this<\/a> link for more details.<\/p>\n
Here are a few shortcuts to identifying elements that are specific to Appium:
\n1. Via accessibility ID: On Android, you can use the string in content-desc.
\nE.g.: To identify the delete button in the calculator,<\/p>\n
driver.find_element_by_accessibility_id('delete')<\/pre>\n
2. Finding element by Id: Corresponds to the resource-id field
\nE.g.: To identify the number 7 in the calculator app<\/p>\n
driver.find_element_by_id(\"com.android.calculator2:id\/digit7\")<\/pre>\n
3. Finding element by class name
\nE.g.: To find the text\/results box in the calculator app<\/p>\n
driver.find_element_by_class_name(\"android.widget.EditText\")<\/pre>\n
\n
An example Appium + Python script with different locator strategies<\/h3>\n
I am providing a fully functioning Python script for you to practice your locator strategies. Challenge yourself to identify different elements in the calculator app and make corresponding changes to this script.<\/p>\n
\r\n\"\"\"\r\nQxf2: Example script to run one test against calculator app\r\nThe test will show you how you can find UI elements by various methods like xpath, id, accessibility_id and android UIautomator\r\non a android calculator app\r\n\r\n\"\"\"\r\nimport os\r\nimport unittest, time\r\nfrom appium import webdriver\r\nfrom time import sleep\r\n\r\nclass Android_Calculator(unittest.TestCase):\r\n    \"Class to run tests for android calculator\"\r\n    def setUp(self):\r\n        \"Setup for the test\"\r\n        desired_caps = {}\r\n        desired_caps['platformName'] = 'Android'\r\n        desired_caps['platformVersion'] = '4.4'\r\n        desired_caps['deviceName'] = 'Moto E'\r\n        # Get the package and activity name of the calculator to launch the calculator app\r\n        desired_caps['appPackage'] = 'com.android.calculator2'\r\n        desired_caps['appActivity'] = 'com.android.calculator2.Calculator'\r\n        self.driver = webdriver.Remote('http:\/\/localhost:4723\/wd\/hub', desired_caps)\r\n\r\n    def tearDown(self):\r\n        \"Tear down the test\"\r\n        self.driver.quit()\r\n\r\n    def test_calculator(self):\r\n        \"Testing android calculator\"\r\n        self.driver.implicitly_wait(10)\r\n        # Find the UI element using xpath  \r\n        self.driver.find_element_by_xpath(\"\/\/android.widget.Button[@text='7']\").click()\r\n        self.driver.find_element_by_xpath(\"\/\/android.widget.Button[@resource-id='com.android.calculator2:id\/mul']\").click()\r\n\r\n        # Find UI element using id\r\n        self.driver.find_element_by_id(\"com.android.calculator2:id\/digit7\").click()\r\n        \r\n        # Find UI element using accessibility_id\r\n        self.driver.find_element_by_accessibility_id('delete').click()\r\n        \r\n        # Find UI element using android UIautomator\r\n        self.driver.find_element_by_android_uiautomator('new UiSelector().text(\"3\")').click()\r\n        self.driver.find_element_by_android_uiautomator('new UiSelector().resourceId(\"com.android.calculator2:id\/equal\")').click()\r\n\r\n        # Find UI element using class name\r\n        result=self.driver.find_element_by_class_name(\"android.widget.EditText\")\r\n        print result.get_attribute('text')\r\n               \r\n#---START OF SCRIPT\r\nif __name__ == '__main__':\r\n    suite = unittest.TestLoader().loadTestsFromTestCase(Android_Calculator)\r\n    unittest.TextTestRunner(verbosity=2).run(suite)\r\n<\/pre>\n
\n
If you have read so far, you may be interested in our open-sourced Python-based mobile automation framework<\/a>.Happy inspecting! Happy locating! <\/p>\n
\n