Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

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

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

9b2c27c2123feb9b02865c44b86456d0?s=128

Patrick Wang

May 14, 2017
Tweet

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