yii.
← Writing
Flutter 技術 · · 7 min read

你知道 Maestro 嗎，兼具人性的自動化測試框架，Flutter 品質就靠它了 — Part 1: 介紹與使用

這篇寫於 2023 年。工具和 API 變化很快，部分步驟可能已經不適用。

來自 Mobile.dev 出產的好物

Maestro 是一個完整的 End-to-End 測試框架，提供豐富的文件和 API 給開發者使用，其中的連續模式就很符合人性化，像是自動 hot-reload 一樣，能夠有效幫助撰寫測試，而且讓非開發者也能參與，這點非常加分，整體來說體驗很不錯。

本範例除了提供基本的測試範例，也有自己撰寫的 Script ，為了進行自動化多 flow 驗證，在最後提供結果報告，很適合與 CI 做整合。

如果好奇有關 Maestro 的其他文章，可以點下方連結跳轉：

Maestro 特點#

  • E2E 測試框架，使用 yaml 定義測試流程
  • 容忍非同步和延遲，預設會自動等待操作完成，無需撰寫 sleep()
  • 運行後能夠持續監控測試文件的變動，並在它們發生變化時重新運行，不需要再次編譯
  • 主流 Mobile 平台都有支援，Android、iOS、Flutter、React Native
  • 支援 CI Integration，自動上傳到 Maestro 平台進行測試
  • 支援 Pull Request Integration，發 PR 後自動進行測試驗證以及性能分析
  • 支援 Crash Analysis，每個情況都附有螢幕錄影、Log、Stacktrace
  • 支援 APP Size Analysis，了解哪個部分容量佔比較大，可以進行特定優化
  • 支援 Memory Leaks Analysis，查看洩漏狀況與原因
  • 支援 Performance Analysis，測量啟動時間、執行時間，查看函式的呼叫以及耗時

安裝 Maestro CLI#

curl -Ls "https://get.maestro.mobile.dev" | bash

iOS 設備的前置設定#

  • 需要 Facebook IDB(iOS Debug Bridge) 工具，就像是 Android adb 工具，可以跟設備互動，查看資訊、安裝、監控還能模擬手勢操作，適合自動化測試
brew tap facebook/fb
brew install facebook/fb/idb-companion

查看設備清單與ID

 xcrun simctl list

透過 idb 啟動要運行測試的模擬器

idb_companion --boot <id of the iOS device>

透過 idb 連結測試模擬器，驗證是否正常，沒問題就可以將此運行關閉

idb_companion --udid <id of the iOS device>

透過 idb 關閉模擬器

idb_companion --shutdown F7CABB3C-DD6F-432D-A86F-5884287D2261

提醒：測試目前無法跑在實際的手機設備

運行 APP#

在測試執行前要確保已經有安裝過 APP 到模擬器，Maestro 會根據 packageName 或 bundleId 自動尋找到指定 APP 並啟動執行測試驗證

  1. IDE 運行安裝 APP
  2. Android 指令安裝
  3. iOS 指令安裝

Android 安裝

adb install sample.apk

iOS 安裝

xcrun simctl install Booted Test.app

撰寫測試#

請查看本文的第二章節，有講解所有的操作指令，點擊以下連結跳轉

你知道 Maestro 嗎，兼具人性的自動化測試框架，Flutter 品質就靠它了 — Part 2: 指令與操作告訴你 Maestro 有支援哪些指令yii · writing

執行 Debug 連續測試#

  • 運行 Continuous Mode
  • 運行時皆為 Hot reload 模式，即時監聽 yaml 檔案的更新，不需要重新編譯即可重新運行
  • 測試過程的檢查條件會根據操作逐一確認
  • Enter → 點擊後刷新重來
maestro test -c flows/LaunchApp.yaml

當 yaml 檔的流程撰寫有誤時，會即時提醒

執行單一 Flow 測試#

整個流程會自動執行操作，並完成驗證，最後顯示通過結果

maestro test maestro/flows/GoThirdAndScroll.yaml

執行完整多 Flow 測試#

  • 測試整個資料夾，每個情境都驗證，並在運行後生成測試報告
  • 不包含子資料夾
  • 加上 --format junit 生成 XML 結果報告
  • 加上 —-output result.xml 修改匯出名稱
// 1.
maestro test flows/

// 2.
maestro test --format junit flows/

缺點

當需要驗證多個 flow 測試時會無法正常完成，從第二個 flow 開始不會自動操作，例如：點擊按鈕、滾動等互動行為，必須手動操作畫面讓 Maestro 檢查，是個很不方便的過程。

優化

這邊我透過撰寫 Shell Script 來解決問題，逐一進行個別的 flow 驗證，可以查看專案的 /scripts/run_test.sh 檔案。

主要的想法就是把測試目錄裡的每個 flow 檔案都進行逐一驗證，並記錄成功與失敗的數量，最後顯示我需要的結果報告，並附帶測試通過率。如果需要的話，後續就能夠接著整合 CI，測試沒問題才能進行後續的 APP 建置。

以下展示透過 script 驗證多個 flow 測試，最後提供結果

Maestro Studio 工作室#

  • 方便的輔助工具
  • 抓取所有的 UI 元素，也可以搜尋關鍵字
  • 生成每個元素的基本測試指令，讓使用者可以直接複製使用

錄製影片#

  • 方便的錄影功能，不需要清空桌面與調整視窗位置，它會幫你自動調整為合適位置並進行錄製，最後產出一個下載連結
  • 非常適合需要向外部展示、分享的時候
maestro record test.yaml

Maestro 錄製完成的影片，是不是非常方便，搭配簡潔好看的背景，一目了然

缺點#

  • Maestro 無法在桌面應用以及網頁應用上運行

Conclusion#

在本文中我們說明什麼是 Maestro E2E Testing，這個工具支援的功能與能做的事情很豐富，算是很棒的一套 solution。它透過 idb 對模擬器進行一些操作，驗證常見的使用者情境，而我透過自訂義的 Script 優化測試流程，並在最後取得最終報告，能幫我們解省許多時間。

另外 Maestro Studio 與錄製功能體驗下來感覺都很不錯，是其他測試框架比較沒有支援的功能，能夠給予一定的幫助，儘管不是開發者也能寫出完整的測試流程，這點就讓人很感興趣，推薦大家去了解它。

如果你在使用 Maestro 的過程中有遇到問題，也歡迎留言跟我說，我們來討論一下。本系列的其他章節會說明更詳細的資訊，以及如何用它來幫助專案，有時間的話快去看看吧！

Next#

你知道 Maestro 嗎，兼具人性的自動化測試框架，Flutter 品質就靠它了 — Part 2: 指令與操作告訴你 Maestro 有支援哪些指令yii · writing

Source Code#

GitHub - chyiiiiiiiiiiii/maestro_e2e_testing_example_app: Maestro makes us write E2E testing easilyMaestro is a complete test framework that provides rich docs and APIs for developers to use. The continuous mode is…github.com

About#

Contribution#

如果覺得文章不錯的話可以贊助，讓我有更多動力和熱情分享學習紀錄和生活！請我喝一杯咖啡吧～

https://www.buymeacoffee.com/yiichenhi

希望有幫助到你/妳，歡迎追蹤我，方便瀏覽最新的文章～

本文原刊登於 Medium。