1. 前言

平常我們使用自動化主要是針對 App 端和 Web 端，另外還有兩種場景比較少用但是也很重要，分別是：瀏覽器、微信小程序。

今天我們聊聊如何在微信小程序上進行自動化操作。

2. 微信小程序

小程序內嵌於微信內部，頁面包含 Native 原生元素和 Web 元素，相當於一個混合應用。

並且，小程序 Web 部分是基於騰訊 X5 內核開發的，也是一個特殊的 WebView。

那小程序如何做自動化呢?

主要方法包含：UiAutomator 原生、基於 WebView 、基於微信官方自動化 SDK

下面將這些方式逐一進行說明

3. 原生

原生的自動化就是利用 UiAutomator2 捕獲到元素 UI 樹，然後利用元素屬性及層級關係及座標值來定位元素，執行一系列自動化操作。

但是原生有一個缺點，由於小程序基於 WebView，所以元素定位符缺失，很多屬性包含：content-desc、resource-id 不存在。

雖然利用這種方法來進行元素定位存在一定難度，但是還是可以利用元素的層級關係來補充這個缺點。

4. WebView

網絡上大部分的教程都是基於 WebView 來完成的自動化。

首先，需要打開微信的調試功能，文件傳輸助手中輸入：debugx5.qq.com 進入，勾選上 ：打開 TBS 內核 Inspector 調試功能。

接着，在 Chrome 上輸入下面的命令進行到設備和頁面管理頁面

chrome://inspect/#devices

點擊對應的頁面項，即能在開發者工具內展示小程序目標頁面完整的 HTML 元素信息。

自動化的操作就很簡單了。比如使用 Appium 的話，直接將對應的小程序發送到文件發送助手中，作爲自動化開始的入口。

切換到小程序所有的 Context ，最後，利用 Css 選擇器去選擇網頁元素進行一系列自動化操作。

需要說明的是，這種方式在微信 7.X 後，默認已經無法基於 WebView 完成自動化操作了，這個可以降低 ChromeDriver 的版本來對應微信 x5 內核的版本。

5. 官方 SDK

微信官方提供了小程序自動化 SDK，作爲一款標準的測試框架，支持真機和模擬器。

如果是自己公司開發的小程序，完全可以配置小程序開發者工具，利用官方提供的 API 編寫簡單的腳本，指向項目地址，藉助 npm 命令完成自動化操作。

如果是第三方小程序，這種方式就不適合了。

6. 對比

上面提到的小程序自動化的 3 種方式，各有優缺點。

如果是微信小程序源碼，建議使用官方 SDK 完成小程序的自動化，否則可以選擇原生和 WebView 中的一種。

另外，使用 WebView 做小程序的自動化對 ChromeDriver 的版本及 x5 內核版本有要求，需要保證統一。

相關文章