Problem

You want to inspect the user interface (UI) of an application to find the layout hierarchy and view the properties associated with the elements.

Solution

With the Appium graphical user interface (GUI) app , you can use a built-in utility Appium Inspector to find elements for native iOS apps.

1. In Appium’s iOS Settings, provide the path of the iOS app that you want to find elements for (Figure 2-1). A sample iOS app is saved in the src/test/resources/apps/ folder of the code that you have checked out for this chapter (AppiumRecipesBook).

   

   Figure 2-1. App path of the .app file for iOS

2. In Appium’s General Settings, select the Prelaunch Application check box, as shown in Figure 2-2.

   

   Figure 2-2. Selecting the Prelaunch Application check box

   Note If Prelaunch Application is not selected, Appium will launch the app when you click the Appium Inspector icon.

3. Click the Launch button to launch the Appium server. Wait for the Appium server to start and wait for Appium to launch the iOS simulator with the desired app opened.

4. Click the magnifying glass icon in the top-left corner in the Appium GUI app (Figure 2-3). The Appium Inspector window will open with the application’s current state captured.

   

   Figure 2-3. Appium Inspector

5. Now you want to find the properties of the first text box available onscreen. Double-click the element on the screen in the right panel in the Appium Inspector window.

6. Once you select the element in the right panel, all the properties of that element will be displayed in the middle panel, and the hierarchy will be displayed in the left panel, as shown in Figure 2-4.

   

   Figure 2-4. Element properties in iOS

7. For this particular text field, you can check the attributes such as name, type, label, xpath, and so on, and you can use these attributes in test scripts.

8. You can select elements in the hierarchy viewer , and they will be selected in the right panel.

9. Now if you select the third element from the bottom in the [UIAwindow] area, then details of that element will be visible in the middle panel, and that element will also be selected in the right panel, as shown in Figure 2-5.

   

   Figure 2-5. Appium Inspector details

How It Works

You can access Appium Inspector by clicking the magnifying glass icon next to the Launch button. The Appium server must be running with an app open or Appium Inspector will not work. Once Appium Inspector is up, then you can select an element to check its various attributes such as name, value, xpath, and so on.

Appium Inspector is used to accomplish the following:

• Identify and understand the element hierarchy

• Find attributes of the element/object

• Record your manual actions with the app

Problem

Although Appium has a built-in utility Appium Inspector for identifying elements , it does not work properly and efficiently for Android native apps. You want to use UIAutomatorViewer to find elements in an Android native app.

Solution

To use UI Automator Viewer, the Android software development kit (SDK) must be installed, and the path must be updated for the Android SDK.

For Android native apps, you can use UI Automator Viewer by following these steps :

1. Open the Genymotion emulator and install the ApiDemos-debug.apk app on it.

2. Go to the location where you downloaded the Android SDK, go to the Tools folder, and double-click uiautomatorviewer.

   Or, if the Android SDK path is set, go to a terminal, type uiautomatorviewer, and press Enter.

   Your screen should match Figure 2-6.

   

   Figure 2-6. UI Automator Viewer

3. Clicking the devices icon on the left takes a snapshot of the screen that’s open on the device/emulator, as shown in Figure 2-7.

   

   Figure 2-7. UI Automator Viewer default screen

4. Now you want to find properties of the Accessibility button (the first option available on the screen). Double-click the element on the screen in the left panel in the UI Automator Viewer window.

5. Once you select the element in the left panel, all the properties of that element will be displayed in the bottom-right panel, and the hierarchy will be displayed in top-right panel, as shown in Figure 2-8.

   

   Figure 2-8. UI Automator Viewer details screen

6. For this particular field, you can check the attributes such as text, resource-id, class, content-desc, and so on, and you can use these attributes in test cases.

7. You can select elements in the hierarchy viewer also. They will be selected in the left panel, and their properties will be displayed in the bottom-right panel.

8. Now if you select the second TextView in the top-right window (Figure 2-9), you will see details of that element in the bottom-right panel; that element will also be selected in the left panel.

   

   Figure 2-9. UI Automator Viewer details screen

How It Works

UI Automator Viewer is an inspector tool provided by Google that lets you inspect the UI of an application to find the layout hierarchy and view the properties associated with the controls. It will work only if an emulator/device is live and an app is opened in the emulator . Once UI Automator Viewer is up, then a particular element can be selected to check its various attributes such as resource-id, class, and so on.

Problem

To interact with elements to perform actions, you need to first find the elements. Since Appium extends Selenium, all generic locator strategies such as name, id, xpath, and so on, are available in Appium, and these can be used effectively in Appium. In this book, you will focus on locator strategies specific to Appium.

Accessibility ID is one strategy that is available for both the Android and iOS platforms and is very stable. Let’s understand to use accessibility ID to find elements.

Solution

How It Works

Accessibility identifiers are identifiers that app developers attach to important elements so that people with disabilities can meaningfully interpret the UI. So, you can expect that most of the elements that are important to end users will have an accessibility identifier defined, thus making it one of the best candidates of locator strategies.

The accessibility ID is generally the name or content-desc attribute of an element. Since name and text remain the same for both the Android and iOS platforms, the same accessibility ID can be used for both platforms, and therefore you can use one test case for both platforms.

At the same time, you need to be cautious because the text/name field can change a lot during the app life cycle, which will break both the Android and iOS test cases. However, ideally one fix should fix both test cases.

Problem

Using common strategies for both the Android and iOS platforms has its own advantages, but accessibility IDs are limited to elements that a user really interacts with such as buttons. What about elements that do not have any specific ID associated with them such as search results or catalog options?

Using XPaths for such elements would be very slow for native apps. You want to use an iOS-specific strategy called iOSUIAutomation, which is fast and reliable.

Solution

As explained in the previous recipe, let’s use Appium Inspector for the TestApp iOS application.

1. Select the first text box in the right panel and observe the properties in the middle panel, as shown in Figure 2-12.

   

   Figure 2-12. iOSUIAutomation for iOS

2. Go to the AppiumSampleTestCaseiOS class and use the following code to interact with the first and second text boxes present in the app:

   // enter data in first text box
   wait.until(ExpectedConditions.presenceOfElementLocated(MobileBy.IosUIAutomation(".textFields()[0]")));
   driver.findElement(MobileBy.IosUIAutomation(".textFields()[0]")).sendKeys("1");
   
   // enter data in second text box
   wait.until(ExpectedConditions.presenceOfElementLocated(MobileBy.IosUIAutomation(".textFields()[1]")));
   driver.findElement(MobileBy.IosUIAutomation(".textFields()[1]")).sendKeys("2");

3. Use the following code to interact with the Compute Sum button and then with the “???” label:

   // click on compute Sum Button
   driver.findElement(MobileBy.IosUIAutomation(".buttons().firstWithPredicate("name=='ComputeSumButton'")")).click();
   // print value of ‘???’ label
   System.out.println(driver.findElement(MobileBy.IosUIAutomation(".staticTexts().firstWithPredicate("name=='Answer'")")).getText());

How It Works

iOSUIAutomation is an element-finding strategy powered by Apple specifically for the iOS platform. Since it is native to iOS, it’s much faster than XPath, and it’s much more powerful and flexible because it knows more platform-specific elements as compared to a generic XPath one.

iOSUIAutomation has predicates that allow you to select a specific element based on whether a condition is true.

If you are comfortable with XPath expressions or if you just copy the XPath expressions given by Appium Inspector, it’s easy to convert XPath expressions to iOSUIAutomation. The rule of thumb for such a conversion is that the UIAElementArray numbering begins at 0, unlike XPath expressions where the index counting starts at 1. Take a look at these examples of simple expressions:

XPath: /UIATableView[2]/UIATableCell[@label = 'Olivia'][1]

iOS predicate: tableViews()[1].cells().firstWithPredicate("label == 'Olivia' ")

Problem

You learned how to use the iOSUIAutomation locator strategy for iOS. Similarly, Let’s learn to use AndroidUIAutomator for Android native apps.

Solution

As explained in previous recipes, you can use UI Automator Viewer for the API Demo Android application .

1. Select any element in the left panel and observe the properties in the bottom-right panel, as shown in Figure 2-13.

   

   Figure 2-13. Android UI Automator for Android

2. As described in Chapter 1, go to the AppiumSampleTestCaseAndroid class and use the following code to interact with the first menu option:

   //using classname and index
   driver.findElement(MobileBy.AndroidUIAutomator("className("android.widget.TextView").index(2)")).click();
   
   //using text filter
   driver.findElement(MobileBy.AndroidUIAutomator("text("Alarm")")).click();
   
   driver.navigate().back();
   driver.navigate().back();
   
   //using content-desc
   driver.findElement(MobileBy.AndroidUIAutomator("description("Accessibility")")).click();

How It Works

UISelectorspecifies the elements in the layout hierarchy for native apps, filtered by properties such as text value, content description, class name, and state information. You can also target an element by its location in a layout hierarchy using index(), but this should be considered as a last resort. If there is more than one matching widget, the first widget in the tree is selected.

Problem

You want to find element properties of native elements for mobile web sites.

Solution

The following steps show how you can use the Safari developer plug-in to find iOS mobile web elements:

1. In your iOS simulator, go to Settings ➤ Safari ➤ Advanced and turn on Web Inspector (Figure 2-14).

   

   Figure 2-14. Mobile Safari setting: Web Inspector

2. In Safari on your computer, in the menu bar, click Safari ➤ Preferences ➤ Advanced and select the “Show Develop menu in menu bar” check box, as shown in Figure 2-15.

   

   Figure 2-15. Desktop Safari setting: Show Develop menu in menu bar

3. Check whether you can see the Develop menu in the Safari menu bar (Figure 2-16).

   

   Figure 2-16. Safari: Develop menu

4. If you can see the Develop menu in the menu bar, check whether you see your iOS simulator or iPhone in the Develop menu (Figure 2-17).

   

   Figure 2-17. Safari: iOS Simulator option

5. Open Safari in the simulator and then open Google.com (Figure 2-18).

   

   Figure 2-18. Google.com on mobile Safari

6. In Safari on your computer, select Develop ➤ iOS Simulator ➤ www.google.com , as shown in (Figure 2-19).

   

   Figure 2-19. Select the web site opened in the simulator in Safari on your computer

   Safari’s Web Inspector will open, and you can use it to find elements.

7. Find the ID of an element using the Safari plug-in. Here is an example of the Google search page :

   1. Navigate to https://www.google.com on your mobile Safari browser.

   2. Open Web Inspector and click the Inspect button.

   3. Open the simulator and in mobile Safari click the element you want to find a locator for.

   4. See that the locator of that element is highlighted in Safari’s Web Inspector.

You can now use the highlighted element property (Figure 2-20) in the Appium code.

Figure 2-20. Safari inspector for Google.com

Problem

You want to use the Chrome ADB plug-in to find Android mobile web elements.

Solution

You need to enable USB Debugging on the Android device so that it can be connected to a laptop.

1. Go to Settings ➤ About Phone and tap “Build number” seven times (Android 4.2 or above); then return to the previous screen and find “Developer options” (Figure 2-21).

   

   Figure 2-21. “Build number” item in “About phone” settings

2. Tap “Developer options” and click On in the developer settings. (You will get an alert to allow the developer settings; just click the OK button.) Make sure the “USB debugging” option is checked (Figure 2-22).

   

   Figure 2-22. “Developer options” settings and “USB debugging” option

3. Connect your Android device to your computer (you should have installed the USB driver for your device). After connecting, you will get an alert on your device to allow USB debugging; just tap OK.

4. Download and install the Chrome ADB plug-in from https://chrome.google.com/webstore/detail/adb/dpngiggdglpdnjdoaefidgiigpemgage?hl=en-GB . Make sure you have installed Chrome version 32 or newer.

5. Open Chrome on your computer and click the ADB plug-in icon, which is in the top-right corner, and click View Inspection Targets (Figure 2-23).

   

   Figure 2-23. Inspection targets in the Chrome ADB plug-in

6. Open Chrome on your device and navigate to the desired URL (Google.com).

7. Go to chrome://inspect/#devices. This page will display all the connected devices along with open tabs and web views. Make sure “Discover USB devices” is selected. Now click the “inspect” link to open the developer tools (Figure 2-24).

   

   Figure 2-24. Discovering USB devices

8. You will get the screen shown in Figure 2-25. Now click the screencast icon in the top-right corner to display your device screen. You are all set to find elements with the Chrome ADB plug-in.

   

   Figure 2-25. Screencast icon in Chrome ADB plug-in

9. Here you will find the ID of an element using the Chrome ADB plug-in remotely, with an example of the Google search page.

   1. Navigate to https://www.google.com on your mobile Chrome browser.

   2. Click the Inspect link from the ADB plug-in of your computer’s Chrome browser.

   3. Click the inspect element icon and mouse over the search box.

The property of that element will be highlighted and can be used for Appium tests (Figure 2-26).

Figure 2-26. ADB inspector for Google.com

How It Works

USB debugging should be enabled on the device so that it is recognized by a computer as a connected device. The Chrome ADB plug-in allows you to view all the connected devices and web views. Select the device/web view and click Inspect to view mobile web elements and their properties.