Finding an element using selector on an IOS mobile app is the prerequisite before we can interact with the element in our automated mobile UI tests. However, due to how app content is rendered in a native iOS app, the selector we can use to locate an app element is very much different from a web browser element. In this article, we will take a look at 3 common ways to determine the element selector to find an element in an iOS app for automated mobile UI tests.
在IOS移动应用程序上使用选择器查找元素是先决条件，然后我们才能在自动化移动UI测试中与该元素进行交互。 但是，由于如何在本机iOS应用程序中呈现应用程序内容，我们可以用来查找应用程序元素的选择器与Web浏览器元素有很大不同。 在本文中，我们将介绍3种常见的方法来确定元素选择器，以在iOS应用中查找元素以进行自动移动UI测试。
For a native iOS app, the app content is rendered via WKWebView (iOS 8.0 or later). The official XCTest framework developed by Apple offers a way to locate the element based on what each element is rendered into, in terms of its element type and element attributes in the WKWebView context. However, XCTest Framework only supports Swift and Objective-C, and therefore is not the ideal choice for many people to use for automated mobile UI testing when the iOS app is written in React Native instead of Swift.
对于本机iOS应用程序，该应用程序内容是通过WKWebView (iOS 8.0或更高版本)呈现的。 苹果公司开发的官方XCTest framework提供了一种方法，可根据WKWebView上下文中的元素类型和元素属性，根据每个元素的渲染内容来定位元素。 但是， XCTest Framework仅支持Swift和Objective-C，因此，当iOS应用是用React Native而不是Swift编写时， XCTest Framework并不是许多人进行自动移动UI测试的理想选择。
If you are already in the world of automated mobile UI testing, you probably have already heard of or been using the alternative — Appium XCUITest Driver (formerly the UIAutomation Driver for iOS). The Appium XCUITest Driver leverages Apple's XCTest Framework and its libraries under the hood in order to facilitate automation of your iOS app, and supports a wide variety of languages, including Java, Python, javascript, Ruby, C#, and PHP. We will be using the Appium XCUITest Driver as the example to look at how we can inspect the iOS application and find element selectors.
如果您已经处于自动化移动UI测试领域，那么您可能已经听说或正在使用替代方法Appium XCUITest Driver (以前UIAutomation Driver for iOS Appium XCUITest Driver UIAutomation Driver for iOS )。 Appium XCUITest Driver在Appium XCUITest Driver利用了Apple的XCTest框架及其库，以促进iOS应用程序的自动化，并支持多种语言，包括Java，Python，JavaScript，Ruby，C＃和PHP。 我们将以Appium XCUITest Driver为例，研究如何检查iOS应用程序并查找元素选择器。
XCTest Framework or Appium XCUITest Driver provides a way to interact with the app element programmatically, but we still need to identify the element selectors manually and provide the selectors to our automated UI tests to interact with the elements. However, since we have to use an iOS simulator or a real iOS device to open the app, there is no built-in inspector on the device to give us those information, like it usually does with Developer Tools in various browsers. There are 3 approaches I use frequently to inspect a native iOS app content and determine the selector to locate an element.
XCTest Framework或Appium XCUITest驱动程序提供了一种以编程方式与应用程序元素进行交互的方法，但是我们仍然需要手动识别元素选择器，并为我们的自动UI测试提供选择器以与元素进行交互。 但是，由于我们必须使用iOS模拟器或真实的iOS设备来打开该应用程序，因此该设备上没有内置的检查器来向我们提供这些信息，就像通常在各种浏览器中使用Developer Tools 。 我经常使用3种方法来检查本机iOS应用程序内容并确定用于定位元素的选择器。
By the way, the example iOS app we will use for demonstration is as below. It’s written with React Native and running on iOS simulator.
顺便说一下，我们将用于演示的示例iOS应用程序如下。 它是用React Native编写的，并在iOS模拟器上运行。
Screenshot of the example react-native app, running on iOS simulator
在iOS模拟器上运行的示例react-native应用程序的屏幕截图
Appium XCUITest Driver provides a method getPageSource() to directly print out the page source of the currently rendered app page in your terminal console. It's a quick way to see a full picture of all the elements in your app page, and identify the element type and attributes you can use to construct an element selector. All you need to do is to insert the below line of code in your automated UI tests (code example in Java):
Appium XCUITest Driver提供一种方法getPageSource()以直接在终端控制台中打印出当前呈现的应用程序页面的页面源。 这是查看应用程序页面中所有元素的完整图片，并标识可用于构造元素选择器的元素类型和属性的快速方法。 您需要做的就是在自动UI测试中插入以下代码行( Java代码示例)：
System.out.println(driver.getPageSource());Below is a snippet of the page source for the example app.
以下是示例应用程序的页面源代码。
<XCUIElementTypeOther type="XCUIElementTypeOther" name="Welcome to Example App" label="Welcome to Example App" enabled="true" visible="true" x="0" y="76" width="375" height="77">
<XCUIElementTypeStaticText type="XCUIElementTypeStaticText" value="Welcome to Example App" name="Welcome to Example App" label="Welcome to Example App" enabled="true" visible="true" x="24" y="100" width="327" height="29"/>
</XCUIElementTypeOther>
<XCUIElementTypeOther type="XCUIElementTypeOther" name="Section One This is the description for Section One." label="Section One This is the description for Section One." enabled="true" visible="true" x="0" y="184" width="375" height="55">
<XCUIElementTypeStaticText type="XCUIElementTypeStaticText" value="Section One" name="Section One" label="Section One" enabled="true" visible="true" x="24" y="184" width="327" height="25"/>
<XCUIElementTypeStaticText type="XCUIElementTypeStaticText" value="This is the description for Section One." name="This is the description for Section One." label="This is the description for Section One." enabled="true" visible="true" x="24" y="216" width="327" height="23"/>
</XCUIElementTypeOther>
<XCUIElementTypeOther type="XCUIElementTypeOther" name="Section Two This is the description for Section Two." label="Section Two This is the description for Section Two." enabled="true" visible="true" x="0" y="270" width="375" height="54">
<XCUIElementTypeStaticText type="XCUIElementTypeStaticText" value="Section Two" name="Section Two" label="Section Two" enabled="true" visible="true" x="24" y="270" width="327" height="25"/>
<XCUIElementTypeStaticText type="XCUIElementTypeStaticText" value="This is the description for Section Two." name="This is the description for Section Two." label="This is the description for Section Two." enabled="true" visible="true" x="24" y="302" width="327" height="23"/>
</XCUIElementTypeOther>
<XCUIElementTypeOther type="XCUIElementTypeOther" name="Section Three This is the description for Section Three. Example Button" label="Section Three This is the description for Section Three. Example Button" enabled="true" visible="true" x="0" y="356" width="375" height="113">
<XCUIElementTypeStaticText type="XCUIElementTypeStaticText" value="Section Three" name="Section Three" label="Section Three" enabled="true" visible="true" x="24" y="356" width="327" height="25"/>
<XCUIElementTypeStaticText type="XCUIElementTypeStaticText" value="This is the description for Section Three." name="This is the description for Section Three." label="This is the description for Section Three." enabled="true" visible="true" x="24" y="388" width="327" height="44"/>
<XCUIElementTypeButton type="XCUIElementTypeButton" name="Example Button" label="Example Button" enabled="true" visible="true" x="24" y="431" width="327" height="38"/>
</XCUIElementTypeOther>As you can see in above, the printed page source gives abundant information about each element including their type and attributes, with which we can use to determine the selector for each element. For example, for the Example Button button element, its page source is:
正如您在上面看到的，打印页面源提供了有关每个元素的大量信息，包括它们的类型和属性，我们可以使用这些信息来确定每个元素的选择器。 例如，对于“ Example Button按钮元素，其页面来源为：
<XCUIElementTypeButton type="XCUIElementTypeButton" name="Example Button" label="Example Button" enabled="true" visible="true" x="24" y="431" width="327" height="38"/> </XCUIElementTypeOther>We can easily determine its element selector to be:
我们可以轻松确定其元素选择器为：
driver.findElement(By.xpath("//XCUIElementTypeButton[@name='Example Button']"))Accessibility Inspector is a less well known but very useful tool developed by Apple to help developers improve the accessibility of their iOS apps. The tool is bundled with Xcode and you probably already have it installed on your Mac laptop. Accessibility Inspector inspects the iOS app for its accessibility features and issues, by parsing and identifying each element on the iOS app, and checking the element's type and accessibility labels. Since it provides detailed information about each element on the app, it can easily be used to identify the selector for each element in automated UI tests as well.
Accessibility Inspector是苹果公司开发的鲜为人知但非常有用的工具，可帮助开发人员改善其iOS应用程序的可访问性。 该工具与Xcode捆绑在一起，您可能已经在Mac笔记本电脑上安装了该工具。 可访问性检查器通过分析和识别iOS应用程序上的每个元素，并检查元素的类型和可访问性标签，检查iOS应用程序的可访问性功能和问题。 由于它提供了有关应用程序上每个元素的详细信息，因此它也可以轻松用于在自动UI测试中为每个元素标识选择器。
Below is an example of the information provided by Accessibility Inspector for the Example Button button element:
下面是Accessibility Inspector为“示例按钮”按钮元素提供的信息的示例：
Screenshot of Example App and Accessibility Inspector
示例应用程序和辅助功能检查器的屏幕截图
As you can see above, the Accessibility Inspector shows that the Example Button button element has Button type and Example Button label, with which we can use to determine the selector for this element as:
如上所示，辅助功能检查器显示Example Button按钮元素具有Button类型和Example Button标签，我们可以使用它们来确定该元素的选择器为：
driver.findElement(By.xpath("//XCUIElementTypeButton[@name='Example Button']"))Accessibility Inspector is not always straightforward to use at first in terms of determining the exact element selector, but it’s a quick and light-weight tool to easily get the job done once you are familiar with how Accessibility Inspector presents information about an app element.
首先，在确定确切的元素选择器方面，Accessibility Inspector并不总是一帆风顺的，但是，一旦您熟悉Accessibility Inspector如何显示有关应用程序元素的信息，它便是一种快速轻巧的工具，可以轻松地完成工作。
Appium Desktop is a desktop app developed by Appium team for Mac, Windows, and Linux. It's a popular tool used by many Appium developers to inspect app elements for iOS app as well as Android app in their automated mobile UI tests.
Appium Desktop是由Appium团队针对Mac，Windows和Linux开发的桌面应用程序。 这是许多Appium开发人员使用的流行工具，可以在其自动移动UI测试中检查iOS应用程序和Android应用程序的应用程序元素。
Below is what Appium Desktop shows about Example Button button element:
以下是Appium桌面显示的有关“ Example Button按钮元素的内容：
Screenshot of Example App and Appium Desktop
示例应用程序和Appium桌面的屏幕截图
As you can see, it shows a full hierarchy of the current app page in the middle section App Source, and a detailed list of information and attributes in the right section Selected Element. What's more useful is that it also suggests the best selector to use to locate the current element, by accessibility id or xpath, which is very convenient to just copy and use.
如您所见，在中间部分App Source显示了当前应用页面的完整层次结构，在右侧部分Selected Element了详细的信息和属性列表。 更有用的是，它还通过accessibility id或xpath提出了用于定位当前元素的最佳选择器，这对于复制和使用非常方便。
Appium Desktop provides other nice features in its UI as well, such as directly clicking/tapping with the selected element, and refreshing page source after app page is changed. You can refer to the official Appium Desktop code repo for more info.
Appium Desktop在其UI中还提供了其他不错的功能，例如直接单击/轻击所选元素，以及在更改应用程序页面后刷新页面源。 您可以参考官方的Appium Desktop代码存储库以获取更多信息。
In conclusion, Appium Desktop is a popular and recommended tool to use for inspecting app elements and determining element selectors on iOS app. It’s also useful to get a full picture of your app and page elements if you just get started to write UI tests for it. Once you are fairly familiar with the app and page structure, using driver.getPageSource() in your code directly or using Accessibility Inspector is a good alternative to quickly find element selectors with light-weight effort.
总之，Appium Desktop是一个流行且推荐的工具，可用于检查应用程序元素并确定iOS应用程序上的元素选择器。 如果您刚开始为其编写UI测试，则获得应用程序和页面元素的全貌也很有用。 一旦您对应用程序和页面结构相当熟悉，则可以直接在代码中使用driver.getPageSource()或使用Accessibility Inspector是轻巧快速找到元素选择器的一个不错的选择。