微信小程序自動化測試系列分享
一、Minium 簡介
minium 是微信團隊爲小程序專門開發的自動化框架，我們可以用它來做小程序的UI自動化測試，但是它的能力卻不僅僅在於UI自動化。
正是得益於官方訂製打造，所以對於小程序很多原生內容和特性的支持自然也是非常獨到的，比如：
- 直接對函數進行 mock
- 直接跳轉到小程序某個頁面
- 直接設置頁面數據
這些能力是其他的一些工具做不到的。不僅如此，還有諸多其他特性也非常的吸引人：
- 支持一套腳本，iOS & Android & 模擬器，三端運行
- 提供豐富的頁面跳轉方式，看不到也能去得到
- 可以獲取和設置小程序頁面數據，讓測試不止點點點
- 可以直接觸發小程序元素綁定事件
- 支持往 AppSerive 注入代碼片段執行
- 可以調用部分 wx 對象上的接口
- 支持 Mock wx 對象上的接口
- 支持 Hook wx 對象上的接口
- 通過 suite 方式管理用例，config 管理運行設備
- ...
這些內容會在後續的分享出陸續帶來。
二、環境搭建
主要是三大件：
- Python 3.8及以上
- 微信開發者工具
- 微信版本 >= 7.0.7
語言是基於Python來的，而且框架中某些接口也是繼承了unittest.TestCase，所以對於熟悉Python和unittest的童鞋來說，無疑又降低了上手難度。
如果是小白的話其實也不用過於擔心，可以抽時間快速學習一下基礎知識也可以上手實操。學習資源搜索引擎裏就太多啦，這裏放置一個菜鳥教程的學習鏈接。
Python 和 微信開發者工具的下載傳送門：
1. 安裝 minium 框架
在Python和開發者工具都安裝完成後，就可以安裝minium框架了。打開cmd輸入命令：
pip3 install https://minitest.weixin.qq.com/minium/Python/dist/minium-latest.zip
等待自動安裝完成即可。
2. 下載官方示例小程序項目
官方有一個小程序示例項目，我覺得很適合學習使用，這裏是小程序碼，拿出微信掃描可以直接體驗。
使用git直接clone：
git clone https://github.com/wechat-miniprogram/miniprogram-demo.git
下載到本地之後，先cd到miniprogram-demo中，然後npm i。接着再cd到miniprogram中，再次npm i。
等待依賴安裝完成後，再開發者工具裏編譯成功，就可以看到小程序了。
3. 環境檢查
都弄完之後可以對環境進行一波檢查確認。
在命令行裏輸入：
minitest -v
出現如下表示安裝成功。
接着，開發者工具自動化能力檢查，命令行輸入：
"path/to/cli" auto --project "path/to/project" --auto-port 9420
注意這裏不是直接複製粘貼執行，這裏：
path/to/cli：指代開發者工具cli命令路徑。macOS: <安裝路徑>/Contents/MacOS/cli， Windows: <安裝路徑>/cli.batpath/to/project: 指代填寫存放小程序源碼的目錄地址，文件夾中需要包含有project.config.json文件
以我win10本地爲例最後輸入的檢查命令：
"D:\Program Files (x86)\Tencent\微信web開發者工具\cli.bat" auto --project "D:\my-miniprogram\miniprogram-demo" --auto-port 9420
看到了如下，表示安裝成功，而且開發者工具也會被啓動。
如果你看到了error，也不要擔心，可以直接輸入y自動打開，也可以到工具裏手動打開。
三、代碼示例
新建一段Python代碼來試驗一下。
我本地是pycharm，項目結構如下：
1. 代碼內容
以下代碼內容可以直接複製。
first_test.py
import minium
class ComponentTest(minium.MiniTest):
def test_ui_op(self):
self.page.get_element("view", inner_text="視圖容器").click()
self.page.get_element(".navigator-text", inner_text="swiper").click()
self.page.get_elements("switch")[0].click()
self.page.get_elements("switch")[1].click()
print("test_ui_op執行測試")
suite.json
{
"pkg_list": [
{
"case_list": [
"test_*"
],
"pkg": "testmodule1.*_test"
}
]
}
config.json
這裏替換上你自己本地的對應路徑。
{
"project_path": "D:\\my-miniprogram\\miniprogram-demo",
"dev_tool_path": "D:\\Program Files (x86)\\Tencent\\微信web開發者工具\\cli.bat",
"debug_mode": "warn"
}
這裏dubug我暫時改成了warn，不然控制檯出的內容太多了。
2. 執行代碼
在項目根目錄下，輸入命令：
minitest -m test.first_test -c config.json -g -s suite.json
可以看到微信開發者工具在執行代碼裏的動作。
控制檯也有對應的輸出。
測試完成後，開發者工具裏的項目會自動關閉掉。
3. 查看測試報告
在項目中的outputs裏存放了測試結果，我們可以方便的生成一份網頁版的報告。
python -m http.server 12345 -d outputs
打開瀏覽器，訪問http://localhost:12345即可查看報告。
測試報告的內容還是比較豐富的：
- 數據彙總
- 執行環境
- 用例說明
- 運行截圖
- 相關代碼堆棧
- 運行日誌
到這裏，一次簡單的微信小程序UI自動化體驗就完成了，後面就可以開始愉快的玩耍了。
感興趣的童鞋點個贊吧，也歡迎關注我一起交流。
