1. 前言

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

[[317971]]

今天我們聊聊如何在微信小程序上進(jìn)行自動(dòng)化操作。

2. 微信小程序

小程序內(nèi)嵌于微信內(nèi)部，頁面包含 Native 原生元素和 Web 元素，相當(dāng)于一個(gè)混合應(yīng)用。

并且，小程序 Web 部分是基于騰訊 X5 內(nèi)核開發(fā)的，也是一個(gè)特殊的 WebView。

那小程序如何做自動(dòng)化呢?

主要方法包含：UiAutomator 原生、基于 WebView 、基于微信官方自動(dòng)化 SDK

下面將這些方式逐一進(jìn)行說明

3. 原生

原生的自動(dòng)化就是利用 UiAutomator2 捕獲到元素 UI 樹，然后利用元素屬性及層級(jí)關(guān)系及坐標(biāo)值來定位元素，執(zhí)行一系列自動(dòng)化操作。

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

雖然利用這種方法來進(jìn)行元素定位存在一定難度，但是還是可以利用元素的層級(jí)關(guān)系來補(bǔ)充這個(gè)缺點(diǎn)。

4. WebView

網(wǎng)絡(luò)上大部分的教程都是基于 WebView 來完成的自動(dòng)化。

首先，需要打開微信的調(diào)試功能，文件傳輸助手中輸入：debugx5.qq.com 進(jìn)入，勾選上 ：打開 TBS 內(nèi)核 Inspector 調(diào)試功能。

接著，在 Chrome 上輸入下面的命令進(jìn)行到設(shè)備和頁面管理頁面

chrome://inspect/#devices

點(diǎn)擊對(duì)應(yīng)的頁面項(xiàng)，即能在開發(fā)者工具內(nèi)展示小程序目標(biāo)頁面完整的 HTML 元素信息。

自動(dòng)化的操作就很簡(jiǎn)單了。比如使用 Appium 的話，直接將對(duì)應(yīng)的小程序發(fā)送到文件發(fā)送助手中，作為自動(dòng)化開始的入口。

切換到小程序所有的 Context ，最后，利用 Css 選擇器去選擇網(wǎng)頁元素進(jìn)行一系列自動(dòng)化操作。

需要說明的是，這種方式在微信 7.X 后，默認(rèn)已經(jīng)無法基于 WebView 完成自動(dòng)化操作了，這個(gè)可以降低 ChromeDriver 的版本來對(duì)應(yīng)微信 x5 內(nèi)核的版本。

5. 官方 SDK

微信官方提供了小程序自動(dòng)化 SDK，作為一款標(biāo)準(zhǔn)的測(cè)試框架，支持真機(jī)和模擬器。

如果是自己公司開發(fā)的小程序，完全可以配置小程序開發(fā)者工具，利用官方提供的 API 編寫簡(jiǎn)單的腳本，指向項(xiàng)目地址，借助 npm 命令完成自動(dòng)化操作。

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

6. 對(duì)比

上面提到的小程序自動(dòng)化的 3 種方式，各有優(yōu)缺點(diǎn)。

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

另外，使用 WebView 做小程序的自動(dòng)化對(duì) ChromeDriver 的版本及 x5 內(nèi)核版本有要求，需要保證統(tǒng)一。