Before inspecting elements we will learn about DOM , locators.
What is DOM?
DOM stands for Document Object Model. In simple words, DOM specifies the structural representation of HTML elements. There are many ways through which we can identify and locate a web element using DOM.
- driver.findElementsByAccessibilityId("");
- driver.findElementsByClassName("");
- driver.findElementsByXPath("");
- driver.findElementById("");
- driver.findElement(By.id(""));
- driver.findElement(By.className(""));
- driver.findElement(By.xpath(""));
Also we have customized xpath locators. Those we will discuss later.
You must be thinking there is one method shown in 2 ways. Such as
driver.findElement(By.id("")); and driver.findElementById("");
The first one is suited for Android and the last one for iOS.
What are locators?
By using Locators we can access the web page elements such as textboxes, links, checkboxes, radio buttons, seek bar etc. While the app is being developed, a clear and consistent locator should be given.
Different locators:
Id, AccessibilityId, ClassName, xpath, content-desc etc.
Inspecting Page elements using UIAutomatorviewer
Pre-requisites:
The device/emulator is up and running.
USB debugging is enabled.
Device is detected by adb.
The desired app is opened on mobile.
Steps:
- Go to the ~/ANDROID_HOME/tools/bin/ folder.
- Run the uiautomatorviewer batch file (for windows) or sh file (for mac).
- This will open the windows as shown below.
4. Then it will capture the screenshot and show it with Page object hierarchy and attributes with values.
Inspecting Page elements using Appium inspector
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).
Pre-requisites:
For Android.
- A standalone version of Appium (not via npm) is installed.
- The device/emulator is up and running.
- USB debugging is enabled.
- Device is detected by adb.
- The apk is available.
- The apk is not available and the app is already installed then we can use app package and activity.
Steps:
- Launch Appium server.
- This will show the below window.
3. Click to the search button, this will take you to the next setting desired capabilities screen.
4. Set the correct desired capabilities as your device/emulator/simulator and click to start the session.
5. And we have reached the screen from which we can inspect the element.
6. For iOS, we can set the desired capabilities as
7. If app is already installed we can use as below (Android)
8. For iOS
Let's start creating locators
Take a look at the below screenshots taken from an android app using uiautomatorviewer. The highlighted element has most of the attributes. Let's create locators for the same element in many ways.
Such as:
driver.findElement(By.xpath("//android.widget.TextView[@content-desc=’Verify Phone Number’]"));
driver.findElement(By.xpath("//android.widget.TextView[@index=’0’]"));
driver.findElement(By.xpath("//android.widget.TextView[@content-desc=’Verify Phone Number’ and @index=’0’]"));
driver.findElement(By.xpath("//*[contains,(@content-desc=’Verify Phone Number’)]"));
List<MobileElement> parent = driver.findElements(By.xpath("//android.view.ViewGroup[@index='9]"));
parent.get(0).click();
Few more locators:
driver.findElement(By.xpath("//android.widget.TextView[@text=’Verify Phone Number’ and @index=’0’]"));
driver.findElement(By.xpath("//android.widget.TextView[@index=’0’]"));
driver.findElement(By.xpath("//*[contains,(@resource-id=’android:id/button1’)]"));
driver.findElement(By.xpath("//*[@resource-id=’android:id/button1’]"));