XCUITest Locators & How to find elements | BrowserStack

Suparna Khamaru
5 min readNov 15, 2022

--

XCUITest Locators aid in identifying and testing the UI elements in UI Layers of the application.

Ideally, It is a good practice to store all XCUI locators in a well segregated location in project, which can be either a:

These locators are then called in tests or page object classes for automation of test scenarios.

In the XCUITest API, the UI Elements are also known as XCUIElement. Hence, let us deep dive a bit on XCUIElement as well in the XCode environment.

What is an XCUIElement?

XCUIElement is an important class of the XCUITest API. It is an UI Element in an application under test. It provides us a way to test the app like an end user uses the app, perform some actions on the UI elements using gestures & keypad interactions.

What are the different XCUITest Locator Strategies?

There are different ways to inspect & use locators in XCUITest:

The convenient and most efficient way to locate elements for XCUITest is using accessibility identifiers. Unique identifier for an UI element set by the developer/QA in application’s source code.

Accessibility Identifiers can be added to the development code through both:

1. Storyboard after navigating to “Identity Inspector” view on the right panel

2. Functional programming by setting the identifier in dev source code itself by writing the below lines:

homeImageView3.accessibilityIdentifier = "homeImage3ForHomeScreen"

Find the app xml source using XPath. This is slower and has performance issues. Practically, not recommended to be used. Below is an Example of an element’s XPath extracted from BrowserStack Inspector:

It is usually the class name of the XCUI Element which begins with XCUIElementType. This is usually to be combined with another locator & is identified by ‘Type’ keyword.

It can be used if the Accessibility Identifier is not present in the app. However, it is preferred to add accessibility identifiers to all elements in the app.

HIERARCHY:

Button, 0x283f81f80, {{20.0, 635.5}, {374.0, 62.0}}, label: 'WWE Mayhem, No1. WWE Arcade Action Game'

TEST SCRIPT:

let gameRequired = "WWE Mayhem, No1. WWE Arcade Action Game" let buttonLabel = appStore . buttons [gameRequired] . firstMatch . label

Get the first Element. For an example, if there are 10 buttons in the app screen, the below command would return the first button in the screen.

app.buttons.firstMatch

Get any specific Element by Index. For an example, if there are 10 buttons in the app screen, the below command would return the 3rd button in the screen (considering, indexes start from 0).

app.buttons.element(boundBy: 2)

Get the descendent DOM elements of a specific selector using the commands below.

app.scrollViews["Main"].descendants(matching: .button)
app.scrollViews["Main"].children(matching: .button)

How to find elements in XCUITest?

There are different ways to find elements in XCUITest on XCode IDE, which are listed below:

Alternatively, other ways to inspect on Non-XCode environments are:

Debug View Hierarchy

Activated on Debug Mode only. It pauses the app in its current state, permitting the programmer to inspect and understand the UI hierarchy of any app.

Print accessibility hierarchy

Can be printed in Console section of Debug Area, using the below command

po print(app.debugDescription)

Can be printed if used in tests, by entering the command

print(app.debugDescription)

UI Test Recorder

Prints the required components inside test functions. Helpful for beginners and learners on initial stage

Accessibility Inspector

This is also helpful when user is accessing the app in blackbox way. Select XCode > Open Developer Tool > Accessibility Inspector > Select Simulator > Inspect element

Inspect Element using BrowserStack App Live

Locally building & setting up can be time consuming. Hence, this is a very handy usage which is both easy and fast to use. We will deep dive on this towards the end of this article.

Try BrowserStack App Live for free

Appium Inspector

Inspecting locator components via Appium Inspector is another way to find and locate elements in XCUITest. Although, this is not mostly used, when we are already in an XCode environment where we have total control of the dev and test environment.

Which elements to find using XCUITest?

Most applications using XCUITest use the below commands to find elements in the app.

How to find XCUITest Locators using BrowserStack

Steps 1: to Locate app elements in BrowserStack are as follows:

Step 2 Choose an iOS Device from the list of devices for testing and locating.

Step 3 Post device selection and app launch, go to ‘Inspect’ section, to locate the elements of the app using BrowserStack.

Step 4 Click on the above marked play icon on the inspect view to start locating elements.

Step 5 Perform the below actions by enlarging the accordions or by tapping on the app elements and explore the locators identifiable on the app on UI level.

Step 6 Locate all XCUI Elements by:

Conclusion

Bear in mind that XCUITest testing must be executed on real browsers for accurate results. Detect bugs before users do by testing software in real user conditions with BrowserStack.

Try BrowserStack App Live for free

Originally published at https://www.browserstack.com.

--

--

Suparna Khamaru
Suparna Khamaru

Written by Suparna Khamaru

I am passionate about iOS, Android, Web apps,API test, Automation & ACI— https://www.linkedin.com/in/suparnakhamaru/

No responses yet