app自動(dòng)化測(cè)試(Android)–App 控件定位
客戶(hù)端的頁(yè)面通過(guò) XML 來(lái)實(shí)現(xiàn) UI 的布局亮钦,頁(yè)面的 UI 布局作為一個(gè)樹(shù)形結(jié)構(gòu),而樹(shù)葉被定義為節(jié)點(diǎn)。這里的節(jié)點(diǎn)也就對(duì)應(yīng)了要定位的元素销斟,節(jié)點(diǎn)的上級(jí)節(jié)點(diǎn)咐汞,定義了元素的布局結(jié)構(gòu)栽连。在 XML 布局中可以使用 XPath 進(jìn)行節(jié)點(diǎn)的定位腊嗡。
App的布局結(jié)構(gòu)
[[圖片上傳失敗...(image-593212-1654652224421)]
1080×607 155 KB](https://ceshiren.com/uploads/default/original/3X/1/d/1d0c729e53157c8761d85ea68520872e48e72b96.png)
從上面這張圖中可以看到最左側(cè)是應(yīng)用的頁(yè)面的展示轰枝,中間部分展示了這個(gè)頁(yè)面的樹(shù)形結(jié)構(gòu)的 XML 代碼衣盾。
其中包含的內(nèi)容為:
節(jié)點(diǎn) node
節(jié)點(diǎn)屬性:包括 clickable(是否可點(diǎn)擊)寺旺、content-desc(內(nèi)容)、resource-id(元素 id)势决、text(文本)阻塑、bounds(坐標(biāo))等。
通過(guò) ID 定位
在 Android 系統(tǒng)元素的 ID 稱(chēng)為 resource-id果复,使用頁(yè)面分析工具比如 Appium Inspector 能夠獲取元素的唯一標(biāo)識(shí)是 ID 屬性陈莽,可以使用 ID 進(jìn)行元素定位,方便快捷。
示例代碼如下:
- Python 版本
<pre class="copy-codeblocks" style="font-family: Consolas, Menlo, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace; font-size: 15.008px; display: block; position: relative; overflow: visible; color: rgb(34, 34, 34); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">driver.find_element(By.ID, "android:id/text1").click()
</pre>
- Java 版本
<pre class="copy-codeblocks" style="font-family: Consolas, Menlo, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace; font-size: 15.008px; display: block; position: relative; overflow: visible; color: rgb(34, 34, 34); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">driver.findElement(By.id("android:id/text1")).click();
</pre>
注意 resource-id 對(duì)應(yīng)的屬性(包名:id/id 值)走搁,在使用這個(gè)屬性的時(shí)候要把它當(dāng)作一個(gè)整體独柑。
通過(guò) Accessibility 定位
當(dāng)分析工具能抓取到的 content-desc 的屬性值是唯一時(shí),可以采用 Accessibility 的定位方式私植,示例代碼:
- Python 版本
<pre class="copy-codeblocks" style="font-family: Consolas, Menlo, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace; font-size: 15.008px; display: block; position: relative; overflow: visible; color: rgb(34, 34, 34); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">driver.find_element_by_accessibility_id("Accessibility")
</pre>
- Java 版本
<pre class="copy-codeblocks" style="font-family: Consolas, Menlo, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace; font-size: 15.008px; display: block; position: relative; overflow: visible; color: rgb(34, 34, 34); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">driver.findElementByAccessibilityId("Accessibility");
</pre>
通過(guò) XPath 定位
與 Selenium 類(lèi)似忌栅,可以使用 XPath 的定位方式完成頁(yè)面的元素定位。XPath 分為絕對(duì)路徑定位與相對(duì)路徑定位兩種形式曲稼,下面介紹的都是相對(duì)定位的形式索绪。
XPath:resource-id 屬性定位
元素可以通過(guò) resource-id 定位。
格式:
<pre class="copy-codeblocks" style="font-family: Consolas, Menlo, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace; font-size: 15.008px; display: block; position: relative; overflow: visible; color: rgb(34, 34, 34); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">//*[@resource-id='resource-id屬性']
</pre>
示例代碼:
- Python 版本
<pre class="copy-codeblocks" style="font-family: Consolas, Menlo, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace; font-size: 15.008px; display: block; position: relative; overflow: visible; color: rgb(34, 34, 34); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">driver.find_element(By.XPATH, \ '//*[@resource-id="rl_login_phone"]')
</pre>
- Java 版本
<pre class="copy-codeblocks" style="font-family: Consolas, Menlo, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace; font-size: 15.008px; display: block; position: relative; overflow: visible; color: rgb(34, 34, 34); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">driver.findElement(By.xpath(\ "http://*[@resource-id=\"rl_login_phone\"]"));
</pre>
XPath:text 屬性定位
元素可以通過(guò) text 文本屬性定位贫悄。
格式:
<pre class="copy-codeblocks" style="font-family: Consolas, Menlo, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace; font-size: 15.008px; display: block; position: relative; overflow: visible; color: rgb(34, 34, 34); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">//*[@text=’text文本屬性’]
</pre>
示例代碼如下
- Python 版本
<pre class="copy-codeblocks" style="font-family: Consolas, Menlo, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace; font-size: 15.008px; display: block; position: relative; overflow: visible; color: rgb(34, 34, 34); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">driver.find_element(By.XPATH,'//*[@text="我的"]')
</pre>
- Java 版本
<pre class="copy-codeblocks" style="font-family: Consolas, Menlo, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace; font-size: 15.008px; display: block; position: relative; overflow: visible; color: rgb(34, 34, 34); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">driver.findElement(By.xpath("http://*[@text=\"我的\"]"));
</pre>
XPath:class 屬性定位
元素可以通過(guò) class 定位瑞驱。
格式:
<pre class="copy-codeblocks" style="font-family: Consolas, Menlo, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace; font-size: 15.008px; display: block; position: relative; overflow: visible; color: rgb(34, 34, 34); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">//*[@class=’class 屬性’]
</pre>
示例代碼:
- Python 版本
<pre class="copy-codeblocks" style="font-family: Consolas, Menlo, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace; font-size: 15.008px; display: block; position: relative; overflow: visible; color: rgb(34, 34, 34); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">driver.find_element(By.XPATH,\ '//*[@class="android.widget.EditText"]')
</pre>
- Java 版本
<pre class="copy-codeblocks" style="font-family: Consolas, Menlo, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace; font-size: 15.008px; display: block; position: relative; overflow: visible; color: rgb(34, 34, 34); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">driver.findElement(By.xpath(\ "http://*[@class=\"android.widget.EditText\"]"));
</pre>
XPath:content-desc 屬性定位
元素可以通過(guò) content-desc 定位。
格式:
<pre class="copy-codeblocks" style="font-family: Consolas, Menlo, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace; font-size: 15.008px; display: block; position: relative; overflow: visible; color: rgb(34, 34, 34); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">//*[@content-desc='content-desc 屬性']
</pre>
示例代碼:
- Python 版本
<pre class="copy-codeblocks" style="font-family: Consolas, Menlo, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace; font-size: 15.008px; display: block; position: relative; overflow: visible; color: rgb(34, 34, 34); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">driver.find_element((By.XPATH,\ '//*[@content-desc="搜索"]')
</pre>
- Java 版本
<pre class="copy-codeblocks" style="font-family: Consolas, Menlo, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace; font-size: 15.008px; display: block; position: relative; overflow: visible; color: rgb(34, 34, 34); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">driver.findElement(By.xpath(\ "http://*[@content-desc=\"搜索\"]");
</pre>
uiautomatorviewer介紹
使用 Android SDK(sdk/tools/uiautomatorviewer)路徑下自帶的 uiautomatorviewer 工具也可以抓取當(dāng)前頁(yè)面的元素窄坦。
提前配置 sdk/tools/ 路徑到環(huán)境變量 $PATH 中唤反,直接在命令行輸入下面的命令:
<pre class="copy-codeblocks" style="font-family: Consolas, Menlo, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace; font-size: 15.008px; display: block; position: relative; overflow: visible; color: rgb(34, 34, 34); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">uiautomatorviewer
</pre>
可以打開(kāi)下面這樣一個(gè)頁(yè)面,點(diǎn)擊頁(yè)面左上角第二個(gè)圖標(biāo)(Android 手機(jī)圖標(biāo))嫡丙,就可以獲取下面的 uiautomatorviewer 快照?qǐng)D:
[[圖片上傳失敗...(image-78056b-1654652224421)]
1066×756 158 KB](https://ceshiren.com/uploads/default/original/3X/0/7/07e4f97a5ec92b5923d086a0371626307e879c08.png)
uiautomatorviewer 抓取快照展示出來(lái)的元素屬性是經(jīng)過(guò)解析的拴袭,如果想要查看 XML DOM 的真實(shí)結(jié)構(gòu)可以打印 pagesource ,得到的內(nèi)容如下曙博,紅色框起來(lái)的部分為上圖的定位的 XML DOM 中的一個(gè)節(jié)點(diǎn):
[[圖片上傳失敗...(image-4ea33f-1654652224421)]
975×299 55.5 KB](https://ceshiren.com/uploads/default/original/3X/b/0/b0c1331009c2047a263fcd316c65bd7f31455f71.png)
通過(guò)圖片分析拥刻,android.widget.TextView 是文本類(lèi)型的節(jié)點(diǎn),其中包含的屬性信息都在上面的 uiautomatorviewer 快照?qǐng)D中有展示父泳。如果只想定位 Android 系統(tǒng)的頁(yè)面元素般哼,可以直接使用 uiautomatorviewer,速度快并且不需要配置任何參數(shù)惠窄,直接點(diǎn)擊獲取頁(yè)面的圖標(biāo)就可以將客戶(hù)端頁(yè)面抓取出來(lái)蒸眠。
另外,uiautomatorviewer 只能抓取 android8 以下的版本杆融,如果要抓取 android8 以上的版本的頁(yè)面信息楞卡,可以使用 Appium Inspector 或 WEditor。