緣起，為什么要進行小程式自動化測驗
隨著微信小程式的功能和生態日益完善，很多公司的產品業務形態逐漸從 App 延升到微信小程式、微信公眾號等，小程式專案頁面越來越多，業務邏輯也越來越復雜，全手工測驗已無法滿足快速增長的業務需求，
然而，由于小程式本身的一些特性，導致業界目前缺乏成熟完善的解決方案，總會出現各種問題（包括騰訊微信官方提供的自動化工具），如何做好小程式的自動化測驗就成為測驗同學當下普遍面臨的一個難題，
今天要帶來的是：微信小程式自動化測驗的一些最佳實踐心得，包括微信小程式的基本測驗技術和操作方法，以及如何利用 Appium 的 WebView 測驗技術 + adb proxy 完成微信小程式的自動化測驗（可能是目前最實用的小程式自動化測驗技術），并附上 Python 版原始碼，
需要什么資源軟體別花錢來這看看
配套視頻教程：《微信小程式自動化測驗》內容包括：小程式搜索測驗腳本撰寫、技術選型、小程式測驗常見問題，進階學習文末加群群里有鏈接提取碼要找管理！
小程式運行環境
平臺差異：盡管各運行環境是十分相似的，但是還是有些許區別：
JavaScript 語法和 API 支持不一致：語法上開發者可以通過開啟 ES6 轉 ES5 的功能來規避（詳情）；此外，小程式基礎庫內置了必要的Polyfill，來彌補API的差異，
WXSS 渲染表現不一致：盡管可以通過開啟樣式補全來規避大部分的問題，還是建議開發者需要在 iOS 和 Android 上分別檢查小程式的真實表現，
微信小程式技術架構
微信小程式技術架構如下圖所示：
使用 Chrome 除錯小程式
用 Chrome 瀏覽器提供的 inspect 分析工具，在瀏覽器中輸入如下地址：
chrome://inspect/#devices
使用 Chrome 瀏覽器查看手機上打開的 WebView 行程與基本資訊：
可以使用 chrome inspect 分析微信小程式的控制元件結構與布局：
使用 console 執行自己的 JavaScript 代碼：
小程式的性能測驗
這里附一張小程式性能測驗圖：
微信小程式的自動化測驗
微信小程式自動化測驗的關鍵步驟
1.Native 原生自動化方式，
- 使用 Appium 即可完成，缺點就是控制元件定位不夠準確，無法深入小程式內部；
2.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"] = "程式員一凡 yifan.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，常見錯誤等），請點擊此處，- ??如果這篇文章對你有用，記得點個贊????加個關注，你的每一個點贊我都認真的當成了喜歡~
- ??我們下期見！??????
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/376879.html
標籤：其他