淺談使用 Appium 進行 React Native 雙平台（iOS & Android）App 的 E2E 自動化測試

淺談使⽤用 Appium 進⾏行行 React Native 雙平台
（iOS & Android）App 的 E2E ⾃自動化測試
Patrick Wang (patw)

View Slide

Ford Europe - Side impact crash test. - https://ﬂic.kr/p/dwY36Y
• 前⾔言
• ⾃自動化測試中的 E2E
• Why Appium?
• 環境安裝
• 實際測試案例例影片展⽰示
• 腳本基礎架構
• 語法、⼩小技巧與坑
• 未盡之處
• 參參考資料

View Slide

前⾔言

View Slide

• 去年年底分享了了⽤用 Jest 寫前端單元測試 
 
 
 
 
 
• 今天分享 E2E 測試
• 視⾓角：非 App ⼯工程師初次嘗試 App E2E 測試
https://goo.gl/Mi1v4Q

View Slide

⾃自動化測試中的 E2E 測試

View Slide

⾃自動化測試

View Slide

E2E 很好，但...
A failing test does not directly benefit the user.
A bug fix directly benefits the user.
- Just Say No to More End-to-End Tests
2015 Google Testing Blog

View Slide

測試⾦金金字塔與甜筒
Move Fast & Don't Break Things
2014 GTAC (Google Test Automation Conference)

View Slide

70 / 20 / 10

View Slide

Why Appium?

View Slide

• 不必重編、加入測試 SDK 到原有的 App 中
• 跨平台
• iOS、Android、Windows、FirefoxOS
• Hybrid
• Mobile Web
• 能使⽤用任何 WebDriver 能夠⽀支援的語⾔言 
（JavaScript、Python、Ruby、Java、C#…）
• 能⾃自由選擇測試框架
• 發展多年年的社群⽣生態圈 & SauceLabs ⽀支持

View Slide


View Slide

也許可以做⾃自動化刷榜⼤大軍

View Slide

• iOS 同時多個裝置測試必須透過 SauceLabs 這樣的
服務
• 1.6.4 IDE 還不是很穩定，選擇器也不夠⽅方便便
• 1.6.4 IDE 沒有⾃自動腳本錄製功能，1.5.x 有
• 並不像 Jest 般都幫你包好好的服務（測試框架、斷
⾔言庫、測試報告等），必須⾃自⼰己上街買菜（？），⽽而
不是超值套餐
還有可以進步的地⽅方

View Slide

環境安裝

View Slide

• appium
• 詳情請⾒見見官⽅方⽂文件
• iOS、Android 都有各⾃自要裝的東⻄西
• appium-doctor
• appium desktop

View Slide

• npm install -g appium
• npm install -g appium-doctor
• xcode-select --install
• brew install carthage
• 安裝 JDK
• 安裝 Android SDK
• 設好環境變數 ($ANDROID_HOME、$JAVA_HOME)
• brew install libimobiledevice --HEAD （不要裝到 1.2.0 版哦）
• npm install -g ios-deploy
• sudo gem install xcpretty
• npm install app-inspector -g

View Slide


View Slide

https://github.com/appium/appium/blob/master/docs/en/writing-running-appium/caps.md

View Slide

{
"app": “/Project/news/ios/build/Build/Products/Debug-iphonesimulator/news.app", 
// iOS 其中⼀一個限制是無法測別⼈人家的 App
"newCommandTimeout": 60,
"platformName": "iOS",
"platformVersion": "10.3",
"deviceName": "iPhone 6s"
}
iPhone Simulator
{
"app": "/Users/patw/Library/Developer/Xcode/DerivedData/xxxx-drfnlsqbltdfekdfdijibwdepdfn/Build/Products/
Debug-iphoneos/xxxx.app",
"platformName": "iOS",
"deviceName": "XXXX IPhone",
"udid": "b0fbf219dc0a39239e6df30e166f01a6405f9636",
"xcodeOrgId": "XXXXXXXXXX",
"xcodeSigningId": "iPhone Developer"
}
iPhone 6s 實機

View Slide

Android
{
"platformName": "Android",
"deviceName": "ASUS_Z00LD - 5.0.2",
"app": "/Project/xxx/android/app/build/outputs/apk/app-debug.apk"  
// 有 apk 就⾏行行，所以也可以測別⼈人的 App
}

View Slide

Inspector

View Slide

https://www.slideshare.net/SvetaFedik/appium-46718886
v1.5.x

View Slide

Macaca App Inspector

View Slide

1.5.x 版
• 優點：
• 可以觀察完整的 XPath
• 相較 1.6.4 版穩定
• 功能比較多（可以把動作錄成程式碼、 
有⼀一些不同的⼿手勢等等）
• 缺點：
• iOS + Xcode 8.3 以上版本跑不起來來，不⽀支援此
版本的 Xcode。但 Android 可⾏行行。
• 介⾯面比較醜
1.6.4 版
• 優點：
• 介⾯面美觀多了了
• 可以跑 iOS + Xcode 8.3 以上版本了了
• 似乎整合進更更多服務（SauceLabs）
• xpath 比較短，是⽤用 * + 第幾個的⽅方式列列的
• 缺點
• 介⾯面簡潔到第⼀一次不⼤大知道 
該怎麼設定 New Session
• 不⼤大穩定，遇過好幾次開好的 Session 掛掉， 
只能重開
• 如果有 accessibility id、name、label 或 type 的
情況下，就不會列列 XPath 出來來 

View Slide

實際案例例展⽰示

View Slide

• 推播（Push Notiﬁcation）
• Pull to Refresh
• 往下滑動直到找到某個元素

View Slide

推播（Push Notiﬁcation）
• 透過 OneSignal + react-native-onesignal 實作。測試時要注意的
是，Android ⼿手機接收到推播時畫⾯面當下不能在 App 中，不然有可
能會看到「對話框」型的推播通知，⽽而不是出現在通知列列。
Android 可以透過 .deviceKeyEvent(3) 發送 Home 鍵指令以返回桌
⾯面。
• 「滑開通知列列」在 Android 可以⽤用 .openNotiﬁcations() ⽅方法達成，
⽽而 iOS 得⽤用 TouchAction ⾃自⼰己模擬出 swipe 的動作。 
• Android
• iPhone

View Slide

Pull to Refresh
• 情境：透過 react-native-scrollable-tab-view
0.7.3（搭配 react-native 0.43.4）實作 pull to
refresh 的功能會踩到這個雷，Android 上 pull 到⼀一
半有機會會卡死 loading 的圈圈。詳情請⾒見見它的這張
issue。
• x 軸也必須有 >=18 的偏移量量，否則不會觸發卡住的
問題
• Android

View Slide

測試往下滑動直到找到某個元素
• 每個單篇⽂文章詳細⾴頁都有「相關⽂文章」的區塊，但各篇
⽂文章長短不⼀一，有可能滾好幾個⾴頁⾯面才會看到該區塊，
⽽而 App 機制上⼜又為了了省資源⽽而不會把「不在可⾒見見範圍」
的元素 render 出來來，這樣是無法透過 XPath 選取到的，
只好⾃自⼰己實作「往下捲動直到找到某元素」的機制。 
• Android
• iPhone

View Slide

腳本基礎架構

View Slide

1. 參參考 react-native-start-kit，再加上 Android 測試
yarn add --dev [email protected]^1.6.4 [email protected]^1.4.2 [email protected]^6.23.0  
[email protected] [email protected]^1.0.1 [email protected]^3.1.0 [email protected]^2.9.0
[email protected]^1.2.0

View Slide


View Slide

appium/utils/compile.js

View Slide

appium/utils/setup.js

View Slide

test/mocha.opts

View Slide

appium/actionServer.js

View Slide

appium/appiumUtils.js

View Slide

appium/webDriver.js - (1/4)

View Slide


View Slide

appium/testConﬁg.js - (1/2)

View Slide

appium/testConﬁg.js - (2/2)

View Slide

appium/scripts/build-test-*.sh

View Slide

appium/scripts/push-test-notiﬁcation.sh

View Slide

語法、⼩小技巧與坑

View Slide

• 可參參考 Appium 官⽅方 repo 中的 demo
• wd API
• 這篇也滿多寫法可參參考的
• Appium Page Object Modal 範例例  
可以以⾴頁⾯面為單位，將元素及動作的細節封裝起來來，
隱藏測試腳本細節，結構更更動後也更更容易易修改
• 让 Appium 项⽬目稍微优雅点 [Node 版]
• Android KeyCodes 官網⽂文件
參參考資料

View Slide

選擇器
RN 有個叫 testID 的屬性，⽂文件在此，但在 Android 似乎沒有作⽤用，所以有些⼈人就
改⽤用 accessibilityLabel 作為測試時的選取標的，但這個屬性原意是給需要無障
礙的使⽤用者使⽤用的，移作測試不⼤大不符合語意，但似乎是⽬目前最好的解法了了（不知道
官⽅方為何⼀一直不收相關的 Pull Request?）。
不過要注意的是，這些屬性都只能加在 RN 原⽣生的元件（例例如：View、
TouchableOpacity 之類的）上，⾃自訂或第三⽅方元件若若沒有實作傳遞到原⽣生元件就會
無效。

View Slide

觀察 XML 結構
• XPath Tester - 可以測試篩選器選出什什麼樣的結果
• Xpath generator - 可以⽤用點擊的⽅方式產⽣生篩選器
除了了⽤用上⾯面提到的 Inspector 之外...

View Slide

得到 XPath 之後，我們可以透過 wd 中的 elementById 或是
elementByXPath 選擇，詳⾒見見 wd API 說明⽂文件，可以依需採⽤用
waitForElementByXX 及 elementByXXIfExists 等⽅方式使⽤用，或是使⽤用
async/await 來來非同步地等待尋找元素。

View Slide

Set the amount of time the driver should wait when searching for elements.
Android 鍵盤事件 https://developer.android.com/reference/android/view/KeyEvent.html
每次跑 test case 之前，先回 home，避免奇怪的情況

View Slide

把常⽤用⽅方法抽出來來

View Slide

相當於模擬從 A 點按壓開始、延遲 1000 毫秒、再移動到 B 點、
最後放開的⼀一連串串動作，也就是 swipe 實際的⾏行行為。要特別注意
的是，iOS 系統上 B 點的 x, y 的值指的是偏移量量，⽽而 Android 則
真的是指 B 點座標（因此往上拖動就不能是負的值了了）。wait
的部分在 Android 上不能太短，不然會沒有效果，建議就⽤用
1000 ⼀一秒吧。
透過 TouchAction 模擬 swipe ⼿手勢

View Slide

捲動直到找到某元素
Determine if an element is currently displayed.

View Slide

印出 Log - (1/2)
可以抓到 console.log 中的字串串
這邊我們設⼀一組特別的 tag，⽅方便便追蹤
iOS ⽤用 syslog、Android ⽤用 logcat
iOS 有 syslog, crashlog 跟 performance

View Slide

印出 Log - (2/2)
在 component 中埋入 log
可以抓出這些特殊的 log， 
再來來看怎麼判斷是否符合期望

View Slide

未竟之處

View Slide

1. 將測試腳本優化重構，⾴頁⾯面細節抽象化 
（例例如 Page Object Modal 的作法）、常⽤用動作抽出
2. 尚未整合進 CI 流程中
3. 產出測試報告 
（現有很簡略略的 mocha reporter。也許加上錯誤擷圖）
4. 多機平⾏行行測試
5. 需求規格如何轉變為 Test Case 的流程 
以及如何挑選哪些情境成為 E2E 的案例例

View Slide

參參考資料

View Slide

• Appium + React Native Quickstart
• Appium - TesterHome - 中國的 TesterHome，有專屬 Appium 的版
塊，很多經驗分享
• React Native Android 上跑 Appium 的⼀一个坑
• [⼲干货] 关于 Appium 的⼀一点分享
• appium + iOS10.2 + Xcode8.2.1 +React Native 完成⾃自动化测试
• 内置并⾏行行执⾏行行、获取所有⽇日志、ExtentReports 报告的 Appium 测
试框架分享
• iOS Test Automation @WalmartLabs

View Slide

Thanks

View Slide

淺談使用 Appium 進行 React Native 雙平台（iOS & Android）App 的 E2E 自動化測試

淺談使用 Appium 進行 React Native 雙平台（iOS & Android）App 的 E2E 自動化測試

Patrick Wang

More Decks by Patrick Wang

Other Decks in Programming

Featured

Transcript