本文為霍格沃茲測試學院測試大咖公開課《微信小程序自動化測試》圖文整理精華版。
隨着微信小程序的功能和生態日益完善，很多公司的產品業務形態逐漸從 App 延升到微信小程序、微信公眾號等。小程序項目頁面越來越多，業務邏輯也越來越復雜，全手工測試已無法滿足快速增長的業務需求。
然而，由於小程序本身的一些特性，導致業界目前缺乏成熟完善的解決方案，總會出現各種問題（包括騰訊微信官方提供的自動化工具）。如何做好小程序的自動化測試就成為測試同學當下普遍面臨的一個痛點難題。
本節課就主要分享下微信小程序自動化測試的一些最佳實踐心得，包括微信小程序的基本測試技術和操作方法，以及如何利用 Appium 的 WebView 測試技術 + adb proxy 完成微信小程序的自動化測試（可能是目前最實用的小程序自動化測試技術），並附上 Python 版源碼。
小程序運行環境
平台差異：盡管各運行環境是十分相似的，但是還是有些許區別：
JavaScript 語法和 API 支持不一致：語法上開發者可以通過開啟 ES6 轉 ES5 的功能來規避（詳情）；此外，小程序基礎庫內置了必要的Polyfill，來彌補API的差異。
WXSS 渲染表現不一致：盡管可以通過開啟樣式補全來規避大部分的問題，還是建議開發者需要在 iOS 和 Android 上分別檢查小程序的真實表現。
微信小程序技術架構
- 微信小程序技術架構如下圖所示：
使用 Chrome 調試小程序
- 用 Chrome 瀏覽器提供的 inspect 分析工具，在瀏覽器中輸入如下地址：
chrome://inspect/#devices
- 1
-
使用 Chrome 瀏覽器查看手機上打開的 WebView 進程與基本信息：
-
可以使用 chrome inspect 分析微信小程序的控件結構與布局：
-
使用 console 執行自己的 JavaScript 代碼：
小程序的性能測試
- 這里附一張小程序性能測試圖：
微信小程序的自動化測試
- 微信小程序自動化測試的關鍵步驟
- Native 原生自動化方式。
- 使用 Appium 即可完成，缺點就是控件定位不夠准確，無法深入小程序內部；
- Webview 自動化方式：可以獲取更多小程序內部質量數據。
- 設置 chromedriver 正確版本
- 設置 chrome option 傳遞給 chromedriver
- 使用 adb proxy 解決 fix chromedriver 的 bug
為什么仍然有很多人搞不定？
- 低版本的 chromedriver 在高版本的手機上有 bug
- chromedriver 與微信定制的 chrome 內核對接實現上有問題
解決方案：如何 fix it？
- chromedriver 沒有使用 adb 命令，而是使用了 adb 協議
- 參考課程中提到的 adb proxy 源代碼
源碼-微信小程序自動化測試 Python 版代碼示例
class TestWXMicroWebView: # 為了演示方便，未使用page object模式 def setup(self): caps = {} caps["platformName"] = "android" caps["deviceName"] = "測試人社區 ceshiren.com" caps["appPackage"] = "com.tencent.mm" caps["appActivity"] = "com.tencent.mm.ui.LauncherUI" caps["noReset"] = True caps['unicodeKeyboard'] = True caps['resetKeyboard'] = True caps['chromedriverExecutable'] = \ '/Users/seveniruby/projects/chromedriver/chromedrivers/chromedriver_78.0.3904.11' # options = ChromeOptions() # options.add_experimental_option('androidProcess', 'com.tencent.mm:appbrand0') caps['chromeOptions'] = { 'androidProcess': 'com.tencent.mm:appbrand0' } caps['adbPort'] = 5038 self.driver = webdriver.Remote("http://localhost:4723/wd/hub", caps) self.driver.implicitly_wait(30) self.driver.find_element(By.XPATH, "//*[@text='通訊錄']") self.driver.implicitly_wait(10) self.enter_micro_program() print(self.driver.contexts) def enter_micro_program(self): # 原生自動化測試 size = self.driver.get_window_size() self.driver.swipe(size['width'] * 0.5, size['height'] * 0.4, size['width'] * 0.5, size['height'] * 0.9) self.driver.find_element(By.CLASS_NAME, 'android.widget.EditText').click() self.driver.find_element(By.XPATH, "//*[@text='取消']") self.driver.find_element(By.CLASS_NAME, "android.widget.EditText").send_keys("雪球") self.driver.find_element(By.CLASS_NAME, 'android.widget.Button') self.driver.find_element(By.CLASS_NAME, 'android.widget.Button').click() self.driver.find_element(By.XPATH, "//*[@text='自選']") def find_top_window(self): for window in self.driver.window_handles: print(window) if ":VISIBLE" in self.driver.title: print(self.driver.title) else: self.driver.switch_to.window(window) def test_search_webview(self): # 進入webview self.driver.switch_to.context('WEBVIEW_xweb') self.driver.implicitly_wait(10) self.find_top_window() # css定位 self.driver.find_element(By.CSS_SELECTOR, "[src*=stock_add]").click() # 等待新窗口 WebDriverWait(self.driver, 30).until(lambda x: len(self.driver.window_handles) > 2) self.find_top_window() self.driver.find_element(By.CSS_SELECTOR, "._input").click() # 輸入 self.driver.switch_to.context("NATIVE_APP") ActionChains(self.driver).send_keys("alibaba").perform() # 點擊 self.driver.switch_to.context('WEBVIEW_xweb') self.driver.find_element(By.CSS_SELECTOR, ".stock__item") self.driver.find_element(By.CSS_SELECTOR, ".stock__item").click()
小程序自動化測試需要跨過的幾個坎
- WebView 開關 /x5 內核調試開關
- ChromeOption 選項需要填寫
- WebView 版本和 ChromeDriver 版本對應問題
- 低版本 ChromeDriver 需要修復 ps 命令的 bug
- Context API 有一定的延遲需要等待
以上，更多內容（ChromeDriver 的資料與 WebView 自動化關鍵代碼，Appium 配置，mapping.json，常見錯誤等），請點擊下方鏈接入群獲取。