在8個月前，我開始了我的實習生活
我主要是負責撰寫及維護 MobileWeb、APP 的 自動化 End to End (E2E) test
E2E test 是什麼？
E2E test就是以使用者的角度出發，對真實系統(網頁、APP )進行測試
會從開啟瀏覽器開始，一步步的操作與輸入，讓瀏覽器與後端 API 進行互動
然後透過最終的顯示狀態來診斷其結果是否符合預期。
MobileWeb 的 E2E Test - Testcafe
我最開始接觸的 test framework 是 Testcafe
我覺得Testcafe 對初學者來說算是蠻容易學的工具
因為他可以使用錄製的方式，來將對網頁的操作轉換成程式碼(如圖一)
就能很簡單的製作出一個自動化測試腳本
不過相對於自己撰寫程式碼來說錄製會遇到更多的限制
(圖一)只要對左邊的網頁操作，右邊就會列出動作
像是之前我們有遇到幾個問題
第一個問題是只用錄製的話是無法處理 Native Dialogs，test case 會直接fail
解決方法就是在會遇到 Native Dialogs 的 case 都加上”setNativeDialogHandler(() => true)”
第二個問題是 Testcafe 執行速度太快，只要遇到瀏覽器回應速度較慢時，就很容易造成 case fail
這狀況又很常發生重要流程上(例如:加商品進購物車時)
所以我們後來的解決辦法是用 hooks 先確定 api 已經有回應了再繼續執行下去
(圖二) hooks 的寫法
(圖三) MobileWeb 模擬使用者登入並加商品進購物車
APP 的 E2E Test - Detox
最近 APP 雙平台正式上線，我也開始寫 APP 的 E2E test
想當初選 app 的 test framework 也是一波三折
原本是想使用Android Studio 的 Espresso Test Recorder
但後來發現它不太適合寫React Native 架構的 E2E test，所以最後我們是選擇 Detox
剛開始接觸 Detox，真的是滿滿挫折
像是一開始要建立環境，我原本覺得有官方的文件應該不難
但事情不是憨人所想的這麼簡單，背後還是有些他沒列，但我必須安裝的套件(例如：CocoaPods)
我們在設 testID 時就有踩到一個坑，當item頁推疊時，因為它們的testID都是一樣的
所以 Detox 就無法執行，我們的解決辦法是再加上父層的 testID (變化如圖四)
(圖四)寫法從第一行改為第二行
(圖五) 模擬使用者逛APP
E2E的維護
到目前為止，我們所寫的 test case 已經累積到137個，其中包含了登入、加商品進購物車、結帳等等重要流程
固定每天晚上會在 bitbucket pipelines 上跑一次 E2E test
當有發現 fail 時，就要快速的將它修好，讓 E2E 能維持在 All pass
當 test case fail 時，首先要先試試看能不能重現出來，基本上能重現出來的都好解決
因為能比較容易得找到問題點，通常都會是因為 UI 的變動所造成的，最怕的就是無法重現
就像前陣子在 bitbucket pipelines 上跑 E2E test 特別不穩定，幾乎都會出現 fail，但又重現不出來，這種狀況就很難處理
所以我通常都是會先把它記錄起來，然後再從截圖畫面及錯誤訊息看看有沒有辦法推測出 fail 原因
(圖六) 讓人心累的 Fail
(圖七) Test case Fail 的截圖畫面
(圖八) 令人感動的一週 All pass
來 Verybuy 的感想
我覺得我很幸運，能到 VeryBuy 來實習，學習到很多，也接觸到很多在學校不會接觸到的
工作環境很舒適，中午吃飽飯後還可以去拉花，喝個拿鐵放鬆一下
最重要的是大家人都很好很可愛，不管我問什麼問題，大家都會很樂意的回答我幫助我
真的非常感謝 VeryBuy 的各位
未來也請大家多多指教了！
by 芳
