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

* 前言
* 自動化測試中的 E2E
* Why Appium?
* 環境安裝
* 實際測試案例影片展示
* 腳本基礎架構
* 語法、小技巧與坑
* 未盡之處
* 參考資料

文章連結：http://blog.patw.me/archives/1326/reactnative-ios-android-e2e-testing-with-appium/

Transcript

1. 淺談使⽤用 Appium 進⾏行行 React Native 雙平台 （iOS & Android）App 的 E2E ⾃自動化測試 Patrick Wang (patw)
2. Ford Europe - Side impact crash test. - https://flic.kr/p/dwY36Y • 前⾔言 • ⾃自動化測試中的 E2E • Why Appium? • 環境安裝 • 實際測試案例例影片展⽰示 • 腳本基礎架構 • 語法、⼩小技巧與坑 • 未盡之處 • 參參考資料
3. 前⾔言
4. Ford Europe - Side impact crash test. - https://flic.kr/p/dwY36Y • 去年年底分享了了⽤用 Jest 寫前端單元測試
 
 
 
 
 
 • 今天分享 E2E 測試 • 視⾓角：非 App ⼯工程師初次嘗試 App E2E 測試 https://goo.gl/Mi1v4Q
5. ⾃自動化測試中的 E2E 測試
6. Ford Europe - Side impact crash test. - https://flic.kr/p/dwY36Y ⾃自動化測試
7. Ford Europe - Side impact crash test. - https://flic.kr/p/dwY36Y 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
8. Ford Europe - Side impact crash test. - https://flic.kr/p/dwY36Y 測試⾦金金字塔 與 甜筒 Move Fast & Don't Break Things 2014 GTAC (Google Test Automation Conference)
9. Ford Europe - Side impact crash test. - https://flic.kr/p/dwY36Y 70 / 20 / 10
10. Why Appium?
11. Ford Europe - Side impact crash test. - https://flic.kr/p/dwY36Y • 不必重編、加入測試 SDK 到原有的 App 中 • 跨平台 • iOS、Android、Windows、FirefoxOS • Hybrid • Mobile Web • 能使⽤用任何 WebDriver 能夠⽀支援的語⾔言
 （JavaScript、Python、Ruby、Java、C#…） • 能⾃自由選擇測試框架 • 發展多年年的社群⽣生態圈 & SauceLabs ⽀支持
12. Ford Europe - Side impact crash test. - https://flic.kr/p/dwY36Y
13. Ford Europe - Side impact crash test. - https://flic.kr/p/dwY36Y 也許可以做⾃自動化刷榜⼤大軍
14. Ford Europe - Side impact crash test. - https://flic.kr/p/dwY36Y • iOS 同時多個裝置測試必須透過 SauceLabs 這樣的 服務 • 1.6.4 IDE 還不是很穩定，選擇器也不夠⽅方便便 • 1.6.4 IDE 沒有⾃自動腳本錄製功能，1.5.x 有 • 並不像 Jest 般都幫你包好好的服務（測試框架、斷 ⾔言庫、測試報告等），必須⾃自⼰己上街買菜（？），⽽而 不是超值套餐 還有可以進步的地⽅方
15. 環境安裝
16. Ford Europe - Side impact crash test. - https://flic.kr/p/dwY36Y • appium • 詳情請⾒見見官⽅方⽂文件 • iOS、Android 都有各⾃自要裝的東⻄西 • appium-doctor • appium desktop
17. Ford Europe - Side impact crash test. - https://flic.kr/p/dwY36Y • 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
18. Ford Europe - Side impact crash test. - https://flic.kr/p/dwY36Y
19. Ford Europe - Side impact crash test. - https://flic.kr/p/dwY36Y
20. Ford Europe - Side impact crash test. - https://flic.kr/p/dwY36Y
21. Ford Europe - Side impact crash test. - https://flic.kr/p/dwY36Y https://github.com/appium/appium/blob/master/docs/en/writing-running-appium/caps.md
22. Ford Europe - Side impact crash test. - https://flic.kr/p/dwY36Y https://github.com/appium/appium/blob/master/docs/en/writing-running-appium/caps.md { "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", "newCommandTimeout": 60, "platformName": "iOS", "platformVersion": "10.3", "deviceName": "XXXX IPhone", "udid": "b0fbf219dc0a39239e6df30e166f01a6405f9636", "xcodeOrgId": "XXXXXXXXXX", "xcodeSigningId": "iPhone Developer" } iPhone 6s 實機
23. Ford Europe - Side impact crash test. - https://flic.kr/p/dwY36Y https://github.com/appium/appium/blob/master/docs/en/writing-running-appium/caps.md Android { "newCommandTimeout": 60, "platformName": "Android", "platformVersion": "5.0", "deviceName": "ASUS_Z00LD - 5.0.2", "app": "/Project/xxx/android/app/build/outputs/apk/app-debug.apk" 
 // 有 apk 就⾏行行，所以也可以測別⼈人的 App }
24. Ford Europe - Side impact crash test. - https://flic.kr/p/dwY36Y Inspector
25. Ford Europe - Side impact crash test. - https://flic.kr/p/dwY36Y https://www.slideshare.net/SvetaFedik/appium-46718886 v1.5.x
26. Ford Europe - Side impact crash test. - https://flic.kr/p/dwY36Y Macaca App Inspector
27. Ford Europe - Side impact crash test. - https://flic.kr/p/dwY36Y 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 出來來

28. 實際案例例展⽰示
29. Ford Europe - Side impact crash test. - https://flic.kr/p/dwY36Y • 推播（Push Notification） • Pull to Refresh • 往下滑動直到找到某個元素
30. Ford Europe - Side impact crash test. - https://flic.kr/p/dwY36Y 推播（Push Notification） • 透過 OneSignal + react-native-onesignal 實作。測試時要注意的 是，Android ⼿手機接收到推播時畫⾯面當下不能在 App 中，不然有可 能會看到「對話框」型的推播通知，⽽而不是出現在通知列列。 Android 可以透過 .deviceKeyEvent(3) 發送 Home 鍵指令以返回桌 ⾯面。 • 「滑開通知列列」在 Android 可以⽤用 .openNotifications() ⽅方法達成， ⽽而 iOS 得⽤用 TouchAction ⾃自⼰己模擬出 swipe 的動作。
 • Android • iPhone
31. Ford Europe - Side impact crash test. - https://flic.kr/p/dwY36Y 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
32. Ford Europe - Side impact crash test. - https://flic.kr/p/dwY36Y 測試往下滑動直到找到某個元素 • 每個單篇⽂文章詳細⾴頁都有「相關⽂文章」的區塊，但各篇 ⽂文章長短不⼀一，有可能滾好幾個⾴頁⾯面才會看到該區塊， ⽽而 App 機制上⼜又為了了省資源⽽而不會把「不在可⾒見見範圍」 的元素 render 出來來，這樣是無法透過 XPath 選取到的， 只好⾃自⼰己實作「往下捲動直到找到某元素」的機制。
 • Android • iPhone
33. 腳本基礎架構
34. Ford Europe - Side impact crash test. - https://flic.kr/p/dwY36Y 1. 參參考 react-native-start-kit，再加上 Android 測試 yarn add --dev appium@^1.6.4 appium-doctor@^1.4.2 babel-polyfill@^6.23.0 
 babel-core@6.14.0 caching-transform@^1.0.1 mocha@^3.1.0 sinon-chai@^2.9.0 wd@^1.2.0
35. Ford Europe - Side impact crash test. - https://flic.kr/p/dwY36Y
36. Ford Europe - Side impact crash test. - https://flic.kr/p/dwY36Y appium/utils/compile.js
37. Ford Europe - Side impact crash test. - https://flic.kr/p/dwY36Y appium/utils/setup.js
38. Ford Europe - Side impact crash test. - https://flic.kr/p/dwY36Y test/mocha.opts
39. Ford Europe - Side impact crash test. - https://flic.kr/p/dwY36Y appium/actionServer.js
40. Ford Europe - Side impact crash test. - https://flic.kr/p/dwY36Y appium/appiumUtils.js
41. Ford Europe - Side impact crash test. - https://flic.kr/p/dwY36Y appium/webDriver.js - (1/4)
42. Ford Europe - Side impact crash test. - https://flic.kr/p/dwY36Y appium/webDriver.js - (2/4)
43. Ford Europe - Side impact crash test. - https://flic.kr/p/dwY36Y appium/webDriver.js - (3/4)
44. Ford Europe - Side impact crash test. - https://flic.kr/p/dwY36Y appium/webDriver.js - (4/4)
45. Ford Europe - Side impact crash test. - https://flic.kr/p/dwY36Y appium/testConfig.js - (1/2)
46. Ford Europe - Side impact crash test. - https://flic.kr/p/dwY36Y appium/testConfig.js - (2/2)
47. Ford Europe - Side impact crash test. - https://flic.kr/p/dwY36Y appium/scripts/build-test-*.sh
48. Ford Europe - Side impact crash test. - https://flic.kr/p/dwY36Y appium/scripts/push-test-notification.sh
49. 語法、⼩小技巧與坑
50. Ford Europe - Side impact crash test. - https://flic.kr/p/dwY36Y • 可參參考 Appium 官⽅方 repo 中的 demo • wd API • 這篇也滿多寫法可參參考的 • Appium Page Object Modal 範例例 
 可以以⾴頁⾯面為單位，將元素及動作的細節封裝起來來， 隱藏測試腳本細節，結構更更動後也更更容易易修改 • 让 Appium 项⽬目稍微优雅点 [Node 版] • Android KeyCodes 官網⽂文件 參參考資料
51. Ford Europe - Side impact crash test. - https://flic.kr/p/dwY36Y 選擇器 RN 有個叫 testID 的屬性，⽂文件在此，但在 Android 似乎沒有作⽤用，所以有些⼈人就 改⽤用 accessibilityLabel 作為測試時的選取標的，但這個屬性原意是給需要無障 礙的使⽤用者使⽤用的，移作測試不⼤大不符合語意，但似乎是⽬目前最好的解法了了（不知道 官⽅方為何⼀一直不收相關的 Pull Request?）。 不過要注意的是，這些屬性都只能加在 RN 原⽣生的元件（例例如：View、 TouchableOpacity 之類的）上，⾃自訂或第三⽅方元件若若沒有實作傳遞到原⽣生元件就會 無效。
52. Ford Europe - Side impact crash test. - https://flic.kr/p/dwY36Y 觀察 XML 結構 • XPath Tester - 可以測試篩選器選出什什麼樣的結果 • Xpath generator - 可以⽤用點擊的⽅方式產⽣生篩選器 除了了⽤用上⾯面提到的 Inspector 之外...
53. Ford Europe - Side impact crash test. - https://flic.kr/p/dwY36Y 得到 XPath 之後，我們可以透過 wd 中的 elementById 或是 elementByXPath 選擇，詳⾒見見 wd API 說明⽂文件，可以依需採⽤用 waitForElementByXX 及 elementByXXIfExists 等⽅方式使⽤用，或是使⽤用 async/await 來來非同步地等待尋找元素。
54. Ford Europe - Side impact crash test. - https://flic.kr/p/dwY36Y 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，避免奇怪的情況
55. Ford Europe - Side impact crash test. - https://flic.kr/p/dwY36Y 把常⽤用⽅方法抽出來來
56. Ford Europe - Side impact crash test. - https://flic.kr/p/dwY36Y 相當於模擬從 A 點按壓開始、延遲 1000 毫秒、再移動到 B 點、 最後放開的⼀一連串串動作，也就是 swipe 實際的⾏行行為。要特別注意 的是，iOS 系統上 B 點的 x, y 的值指的是偏移量量，⽽而 Android 則 真的是指 B 點座標（因此往上拖動就不能是負的值了了）。wait 的部分在 Android 上不能太短，不然會沒有效果，建議就⽤用 1000 ⼀一秒吧。 透過 TouchAction 模擬 swipe ⼿手勢
57. Ford Europe - Side impact crash test. - https://flic.kr/p/dwY36Y 捲動直到找到某元素 Determine if an element is currently displayed.
58. Ford Europe - Side impact crash test. - https://flic.kr/p/dwY36Y 印出 Log - (1/2) 可以抓到 console.log 中的字串串 這邊我們設⼀一組特別的 tag，⽅方便便追蹤 iOS ⽤用 syslog、Android ⽤用 logcat iOS 有 syslog, crashlog 跟 performance
59. Ford Europe - Side impact crash test. - https://flic.kr/p/dwY36Y 印出 Log - (2/2) 在 component 中埋入 log 可以抓出這些特殊的 log，
 再來來看怎麼判斷是否符合期望
60. 未竟之處
61. Ford Europe - Side impact crash test. - https://flic.kr/p/dwY36Y 1. 將測試腳本優化重構，⾴頁⾯面細節抽象化
 （例例如 Page Object Modal 的作法）、常⽤用動作抽出 2. 尚未整合進 CI 流程中 3. 產出測試報告
 （現有很簡略略的 mocha reporter。也許加上錯誤擷圖） 4. 多機平⾏行行測試 5. 需求規格如何轉變為 Test Case 的流程
 以及如何挑選哪些情境成為 E2E 的案例例
62. 參參考資料
63. Ford Europe - Side impact crash test. - https://flic.kr/p/dwY36Y • 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
64. Thanks