As you learned in the previous chapter, In order to  perform automation it’s necessary to locate the unique selectors for:

• Mobile Applications and
• Mobile Web Browser(Chrome).

However, if you haven’t already realized (you soon will!), finding these unique elements can sometimes be painful. And this is where the Appium Inspector comes into play.

Appium inspection is known by many names such as Element Extraction, UI Element Identification, Locator Finding, etc. It is the process by which you can locate or find elements in your mobile application (native only).

Appium inspection is a standard procedure to identify the UI elements of a mobile app uniquely. It works with both real devices or simulators(iOS) or emulators(Android).

NOTE: The Appium Inspection tool does not support finding the locators on Web Browser(Chrome) as it is specifically designed to fetch the attributes for Native Mobile Application only.

The Appium Desktop Application is a combination of the Appium server itself and the Element inspector, which is designed to help you discover all the visible elements of your mobile application while developing your test scripts.

You can use it for native apps...

• To identify and understand the element hierarchy: For developers this may be trivial but for testers it is definitely useful information on how certain UI elements are aligned with each other and what other layers/fragments/etc the app may have.
  
  
• To find the name, description, value and other attributes of the element/object: Objects have certain characteristics that can be identified through this tool and then used with the xpath command.
  
  
• To record your manual actions with the app: In order to record your actions, you need either the Appium Inspector or some other tool that can access those elements.

Different element inspector tools that helps you to identify elements in mobile app

There are many different tools that help you inspect elements in mobile apps. But we will cover the most important and used Element Inspectors:

• Appium Inspector:

You can use this inspector for both Android and iOS apps (for iOS apps, you would need a Mac)

• UiAutomatorViewer(Android):

This is a tool provided by Android Studio that lets you inspect elements in your mobile app.

There is one important factor in that the way you inspect elements in mobile app is exactly the same in UIAutomatorViewer and Appium Desktop Inspector. The are slight differences in the UI of both the tools, but the underlying logic of identifying elements remains the same.

Appium Desktop Inspector uses the same methods as UI Automator Viewer to identify the elements in your mobile app:

• Find element by ID
• Find element by ClassName
• Find element by Accessibility ID
• Find element by XPath

Also, the properties of the mobile elements, such as resource-id, content-desc, text etc, will be the same in both the tools. We will explore UIAutomatorViewer(For Android) in the next chapter.

• Accessibility Inspector(iOS):

The Accessibility Inspector is a tool that shows all of the properties and values, methods (actions that can occur from elements on the screen), and position of the object that's currently being selected on the screen.

In this chapter we will discuss the most used and popular tools to find the unique and correct element locator.

Element extraction on mobile native applications using Appium Inspector

• Open the Appium Desktop Application:

• Start the Server by clicking on the Start Server button

• Click on the Search button and open the Appium Inspector Session.

• As we discussed in Chapter 3 you need to provide the correct set of Desired Capabilities.

Android:

   {     
      "platformName":   "Android",     
      "platformVersion":   "8.1", //<<Android Version of connected Device>>     
      "app":   "/path/to/.apk/file",
      "deviceName":   "c33143r", //<<get device name using: $ adb devices>>     
      "automationName":   "UiAutomator2"   
   }   

iOS(Real Device):

   {     
      "platformName": "iOS", 
      "platformVersion":   "11.4",
      "app":   "/path/to/.ipa/file",
      "deviceName": "John’s   iPhone", //<<get it using iTunes>>
      "udid":   "bea36e2b0262ae4b77bd3463bd462922ee935d24", //<<get it using   iTunes>>
      "automationName":   "XCUITest"
   }   

iOS(Simulator):

   {     
      "platformName": "iOS",
      "platformVersion":   "11.4",
      "app":   "/Users/username/Downloads/sample.ipa",
      "deviceName": "iPhone   X", //<<(iPhone 7, iPhone 7 Plus etc..)You can get devices from:   "$ instruments -s devices">>
      "automationName":   "XCUITest"
   }   

Below are the screenshots of Desired Capabilities for Android(Real Device) and iOS(Real Device and Simulator).

.

• You can also save the Desired Capabilities for a particular configuration by clicking on the Save/Save As.. button.

• Click on the Start Session button - it will take some time because the Appium server will install the mentioned app to your connected device/simulator and then it will analyze the Application XML and underlying structure. After some time you can see the window similar to:

As you can see you can get the XML structure of all the visible elements on the screen. Using the best or most appropriate locators strategy(accessibility id, id, class name, xpath etc.) you can get the valid unique locators. Additionally, Appium inspector supports many features:

• A great feature of Appium is it will give you the best locator strategies listed automatically, so in the above image you can see that Appium is suggesting accessibility id and xpath selectors for the selected TextField on the screen. Isn’t that convenient?

• But we have only looked at the first initialized screen.

What if you are navigating to another page and want to find elements on that screen? Would Appium fetch the new screenshot and extract the XML structure automatically?

Unfortunately, the answer is NO, you need to manually click on Refresh Source & Screenshot button after changing the screen in order to get that screen’s elements selectors.F

• Appium Inspector also provides some actions on elements such as Swiping, Tap on Coordinates, etc.

• The Appium Inspector session also provides script recording functionality which can save a lot of time.

• Appium Inspector also supports the reverse case - meaning that by using the locator you can search for the element on the UI.

F

• There is also a feature where you can Attach to existing Session. You need to provide  just the session-id (as shown in the following screenshot). It is useful for when you already have an Appium session running. This (attaching session) is  possible because the inspector is an Appium client, not Appium server.

• You can inspect elements on another custom Appium server by providing the following information under the “Custom Server” tab:
• Remote Host Ip address.
• Remote Host Port.
• Remote Host Path.

• Appium supports element inspection on remote devices.

There are number of vendors that provide cloud based real-devices for testing mobile apps, including:

• Kobiton,
• Saucelabs,
• TestObject,
• Headspin,
• BrowserStack,
• Bitbar cloud,
• Kobiton.

Comparison between iOS & Android locator strategy

Below is the mapping between Attributes from Appium Inspector(or UiAutomatorViewer) and Appium Locator Strategy for Android/iOS.

Android

iOS

In this chapter we learned how to find elements using the Appium Inspector tool. In the next chapter we are going to see an alternative option UiAutomationViewer (only for Android) to inspect the UI elements. Before that, let’s turn to how we can use Appium to extract elements on the mobile web browser.

Element extraction on a mobile web browser

In this section we are going to talk about how we can get the UI locators for the websites which we will be automating in a Mobile Chrome browser.

Make sure you use the mobile version of the site you’re looking to test. For example, https://m.facebook.com is the mobile website, while https://www.facebook.com is the default website on Desktop. However, you can open https://m.facebook.com on your Desktop and can get the mobile view on your desktop. So ultimately the first thing is we need to get the Mobile website which we are interested in to be automated.

After getting the Website URL we need to find the locators of the elements we will be interacting with. This is a bit different to getting the elements from a Mobile Native application. On a Mobile Native application we can get the elements using the Appium Inspector while for Website automation we can get the UI elements from the browser itself, we don’t need to rely on any third party tool.

If you’re familiar with Selenium then you already know how to get website UI elements.

Below are the locator strategies to get the UI Element locators:

• ID
• Name
• Class Name
• CSS Locators
• XPath
• LinkText
• Partial Link Text

1)    ID

• Id = “m_login_email”for the “Mobile number or email address” textfiel.

• Selector Code:

driver.findElement(By.id("m_login_email"));

NOTE: If you assign ‘#’ before id name, it becomes the CSS Selector.

2)    Name

• Name = “email” for the “Mobile number or email address” text field

• Selector Code:

driver.findElement(By.name(“email”));

3)    Class Name

• Class Name = “_56bg _4u9z _5ruq” for the “Mobile number or email address” text-field. Please note that use this locator when the class name is defined only once in DOM. If more than one class name found in DOM, please don’t use it.

• Selector Code:

driver.findElement(By.className(“_56bg _4u9z   _5ruq”));

4)    CSS Selector

• CSS Selector = “._56bg._4u9z._5ruq” for the “Mobile number or email address” textfield.

• In order to use CSS Selector using Class Name, You need to remember that . should be placed at the first letter of class name and every space in class name must be replaced by . So as we seen on previous image that class name = “_56bg _4u9z _5ruq” for “Mobile number or email address” textfield.
  But we need to place . before the class name so it would be “._56bg _4u9z _5ruq” and we also need to replace space with . so the final CSS Selector would be “._56bg._4u9z._5ruq”

• In order to use CSS Selector using Id, You need to place # before the Id.
  So for Id = “m_login_email” the  CSS Selector = “#m_login_email”

• In order to use CSS Selector using Name or other Attribute, You need to define the attribute in square brackets like:

[attribute _name = ”attribute_value”]

For Name = “”
So for Name = “email” the  CSS Selector = “[name=’email’]”

• Selector Code:

driver.findElement(By.cssSelector("._56bg._4u9z._5ruq"));

NOTE: You can learn more about CSS selectors here: https://www.softwaretestinghelp.com/css-selector-selenium-locator-selenium-tutorial-6/

5)    XPath

• XPath Selector = “//*[@class=’_56bg _4u9z _5ruq’]”  OR “//input[@id='m_login_email']” OR “//input[@name='email']” for the “Mobile number or email address” textfield.

• This locator should be your last option to use as it is also unreliable, unstable and has performance issues like Native Mobile Applications.

• XPath is relative Path strategy so In order to create XPath using Class Name, You need to put the // first thing first, it means it will search the element anywhere on DOM. After // you can put the Tag name such as input, a, div etc. And last you need to put attributes in this format: 

[@attribute _name = “attribute_value”] so the final element XPath selector would be:  //*[@class="_56bg _4u9z _5ruq"] OR //input[@class="_56bg _4u9z _5ruq"]

• Selector Code:

driver.findElement(By.xpath("//*[@class=’_56bg   _4u9z _5ruq’]"));

NOTE: You can learn more about XPath selectors here: https://www.guru99.com/xpath-selenium.html

6)    LinkText and Partial LinkText

• LinkText Selector = “Help Centre” for the Help Center link shown in the image below.

• Partial LinkText Selector = “Help Cent” will work the same way as above (full) LinkText locator.

• This locator strategy applies to get the UI Locator for the Link Text.

• Selector Code(Link Text):

driver.findElement(By.linkText("Help   Centre")).click();

• Selector Code(Partial Link Text):

driver.findElement(By.partialLinkText("Help   Cen")).click();

Mobile browser automation - Sample test case

Let’s put all that theory into some practice to help make the concept more concrete. We have created a sample automation test case/script which will:

• Open Chrome/Safari Browser on the relevant device.
• Fill the Username and Password.
• Click on the Login button.

Android

You can find the Android Code below:

import   io.appium.java_client.AppiumDriver;   
import   io.appium.java_client.android.AndroidDriver;   
import   io.appium.java_client.remote.AndroidMobileCapabilityType;
import   io.appium.java_client.remote.IOSMobileCapabilityType;
import   io.appium.java_client.remote.MobileCapabilityType;   
import   org.openqa.selenium.By;   
import   org.openqa.selenium.remote.BrowserType;   
import   org.openqa.selenium.remote.CapabilityType;   
import   org.openqa.selenium.remote.DesiredCapabilities;   
import   org.testng.annotations.BeforeTest;   
import   org.testng.annotations.Test;       
import   java.net.MalformedURLException;   
import java.net.URL;       
public class   AndroidBrowserTest {          
     public AndroidDriver driver;          
     @BeforeTest      
     public void setUp() throws   MalformedURLException {          
              String appiumServerURL =   "https://127.0.0.1:4723/wd/hub";              
              DesiredCapabilities dc = new   DesiredCapabilities();          
              dc.setCapability(MobileCapabilityType.PLATFORM_NAME,   "Android");            
              dc.setCapability(MobileCapabilityType.PLATFORM_VERSION,   "8.0");            
              dc.setCapability(MobileCapabilityType.BROWSER_NAME,   BrowserType.CHROME);          
              dc.setCapability(MobileCapabilityType.DEVICE_NAME,   "c4e3f3cd");            
              dc.setCapability(MobileCapabilityType.AUTOMATION_NAME,   "UiAutomator2");              
              driver = new AndroidDriver(new   URL(appiumServerURL), dc);      
  }
          
     @Test      
     public void verifyUserCanLoginToFaceBook()   throws InterruptedException {   
              String username = ""; //   Enter your valid facebook username          
              String password = ""; //   Enter your valid facebook password                
              driver.get("https://m.facebook.com/");          
              driver.findElement(By.id("m_login_email")).sendKeys(username);            
              driver.findElement(By.id("m_login_password")).sendKeys(password);            
              driver.findElement(By.name("login")).click();      
  }   
}   

iOS

You can find the iOS Code below:

import   io.appium.java_client.ios.IOSDriver;   
import   io.appium.java_client.ios.IOSElement;   
import   io.appium.java_client.remote.MobileCapabilityType;   
import   org.openqa.selenium.By;   
import   org.openqa.selenium.remote.BrowserType;   
import org.openqa.selenium.remote.DesiredCapabilities;   
import   org.testng.Assert;   
import   org.testng.annotations.BeforeTest;   
import   org.testng.annotations.Test;       
import   java.net.MalformedURLException;   
import java.net.URL;    
   
public class   iOSBrowserTest {       
     public IOSDriver<IOSElement>   driver;           
     @BeforeTest       
     public void setUp() throws   MalformedURLException {           
         String appiumServerURL =   "https://127.0.0.1:4723/wd/hub";               
         DesiredCapabilities dc = new   DesiredCapabilities();           
         dc.setCapability(MobileCapabilityType.PLATFORM_NAME,   "iOS");             
         dc.setCapability(MobileCapabilityType.PLATFORM_VERSION,   "11.4");             
         dc.setCapability(MobileCapabilityType.BROWSER_NAME,   BrowserType.SAFARI);             
         dc.setCapability(MobileCapabilityType.DEVICE_NAME, "iPhone   X");               
         driver = new IOSDriver<IOSElement>(new URL(appiumServerURL), dc);       
    }           

    @Test       
    public void   verifyValidUserCanLoginToFaceBook() throws InterruptedException {           
      String username = ""; //   Enter your valid facebook username           
      String password = ""; //   Enter your valid facebook password                 
      driver.get("https://m.facebook.com/");             
      driver.findElement(By.id("m_login_email")).sendKeys(username);           
      driver.findElement(By.id("m_login_password")).sendKeys(password);             
      driver.findElement(By.name("login")).click();       
    }   
}   

You can find this project on our Github page.