appium微信公眾號H5頁面自動化測試

本文內容在以下環境運行成功：
Windows10
Python2.7
android-sdk_r24.4.1
Appium-windows-1.15.1
chromedriver_2.40
小米手機
微信7.0.13(webview66.0.3359)

環境之前已經搭建好了，還沒搭建好環境的看這里：https://www.cnblogs.com/songzhenhua/p/12831708.html

一、編寫微信Native部分代碼
可以用appium inspector錄制微信Native部分代碼，不會的看這：https://www.cnblogs.com/songzhenhua/p/12913938.html
我用例錄制的步驟為，打開微信-->點右上角搜索按鈕-->輸入：測試工程師小站-->點擊搜索結果中的公眾號-->點擊菜單：歷史消息

以上部分代碼為：

from appium import webdriver
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC
from selenium.webdriver.common.by import By

desired_caps = {}
desired_caps['platformName'] = 'Android'
desired_caps['platformVersion'] = '9'
desired_caps['deviceName'] = '63fa4de5'
desired_caps['appPackage'] = 'com.tencent.mm'
desired_caps['appActivity'] = '.ui.LauncherUI'
desired_caps['noReset'] = 'True'
desired_caps['chromeOptions'] = {'androidProcess': 'com.tencent.mm:tools'}

driver = webdriver.Remote('http://localhost:4723/wd/hub', desired_caps)

wait=WebDriverWait(driver, 10)
# 打開微信需要一定時間，這里我們用顯示等待，等搜索元素出現后再獲取，后面代碼大家自行根據需要添加
el1 = wait.until(EC.presence_of_element_located((By.ID, 'com.tencent.mm:id/f8y')))
el1.click() # 點擊搜索
time.sleep(1)
driver.find_element_by_id("com.tencent.mm:id/bhn").send_keys(u"測試工程師小站") # 輸入名稱
driver.find_element_by_id("com.tencent.mm:id/gbv").click() # 點擊公眾號
driver.find_element_by_id("com.tencent.mm:id/alv").click() # 點擊一級菜單
# 點擊二級菜單（歷史消息）
el2 = driver.find_element_by_xpath("/hierarchy/android.widget.FrameLayout/android.widget.FrameLayout/android.widget.ListView/android.widget.TextView[2]")
el2.click()

 

到此步微信打開了H5頁面(webview)，下面H5的自動化就和在PC上使用selenium自動化WEB一樣了，接下來進行一些准備工作。

二、編寫微信webview部分代碼
1.開啟微信debug模式
微信內置的瀏覽器，需要先開啟調試功能。在微信上隨便找個聊天欄，輸入：http://debugx5.qq.com

 

 

勾選：打開TBS內核Inspector調試功能

 

 

2.在PC上，打開Chrome瀏覽器，輸入：chrome://inspect/#devices
我們之前已經在微信上打開了H5頁面，可以在PC Chrome頁面上看到，並且看到微信webview的版本是66.0.3359

  

點擊inspect，打開元素調試頁面，和web是完全一樣的。注意這個工具必須得番牆后才能用哦，我也不知道Google為啥不弄成本地的，還非得連他們家服務器。

 

 

左側屏幕區域，支持鼠標滾輪和點擊，可以同步操作手機。點上面的箭頭(元素抓取工具)圖標，再點H5上的元素，就在右側上方定位元素，右側下方可以寫Xpath和CSS語句，來調試定位的准確性。

 

 

OK，我們繼續編寫H5頁面的自動化代碼，在打開的歷史消息H5，點擊第一篇文章，文章打開后點擊頁面最右下角的‘在看’按鈕。
以上源碼為：

driver.switch_to.context('WEBVIEW_com.tencent.mm:tools')
driver.find_element_by_xpath('//span[@class="weui_media_hd js_media"]').click() # 點擊第一個歷史消息
driver.find_element_by_xpath('//button[@id="js_like_btn"]').click() # 點擊在看

 

chromedriver不一致的坑：

切context運行后報錯，提示：
selenium.common.exceptions.WebDriverException: Message: An unknown server-side error occurred while processing the command. Original error: A new session could not be created. Details: session not created: This version of ChromeDriver only supports Chrome version 76

 

 

微信里面的 webview 版本號和 chromedriver 的版本號有一個對應的關系，兩者必須要匹配。
根據報錯信息，在下面這個文件里有對應關系表：
C:\Users\宋振華\AppData\Local\Programs\Appium\resources\app\node_modules\appium\node_modules\appium-chromedriver\lib\chromedriver.js

其中有一行，'2.40': '66.0.3359'

這表明微信的webview版本66.0.3359對應的chromedriver應該是2.40

這里有所有的chromedriver歷史下載
https://chromedriver.storage.googleapis.com/index.html

坑繼續，我下載后將原有的C:\Users\宋振華\AppData\Local\Programs\Appium\resources\app\node_modules\appium\node_modules\appium-chromedriver\chromedriver\win\chromedriver.exe
重命名成chromedriver_bak.exe，然后把下載的復制過來，運行，還是報錯。看日志，appium竟然發現2個chromedriver，看來重命名不管用，把舊的移走，只留新的。

巨坑的是，運行依然報錯，折騰了2小時，最后發現，我下載的是2.4，不是2.40，一個是版本四，一個是四十。。。
重新下載2.40，運行通過。

context搞錯的坑：

之前我已經看過別人的文章，微信中有很多個context，做H5的話要這樣：

在appium中context的切換時，識別webview的時候, 把com.tencent.mm:tools的webview識別成com.tencent.mm的webview. 從而導致context切換失敗。
所以這里必須加上這個參數ChromeOptions,這個是關鍵。
desired_caps['chromeOptions'] = {'androidProcess': 'com.tencent.mm:tools'}

我拿我們公司的H5頁面，是成功的。因為不方便展示，所以后來才換的微信公眾號文章，但是微信公眾號文章在這里是執行失敗的。報錯說H5上的元素沒找到。

因為公司H5成功，微信公眾號文章H5失敗，所以我懷疑是context不對，在執行上下文切換時，先打印出所有的上下文
print(driver.contexts)

結果為：
[u'NATIVE_APP', u'WEBVIEW_com.tencent.mm:appbrand0', u'WEBVIEW_com.tencent.mm:toolsmp', u'WEBVIEW_com.tencent.mm', u'WEBVIEW_com.tencent.mm:tool']

繼續查資料，在打開微信公眾號歷史的前提下，在CMD中輸入：
adb shell dumpsys activity top | findstr ACTIVITY
可以看到微信的只有一個進程，pid為19295

接着輸入：
adb shell ps 19295
可以看到其進程名是
com.tencent.mm:toolsmp

所以可以看到，微信自家的H5和外鏈的H5，用的不是同一個webview

 

 

我們把配置改為
desired_caps['chromeOptions'] = {'androidProcess': 'com.tencent.mm:toolsmp'}
把切換context的代碼改為
driver.switch_to.context('WEBVIEW_com.tencent.mm:toolsmp')

handle搞錯的坑：

選對了context，但運行依然報錯說找不到元素。因為之前准備功課時看到有人因為handle不對，所以找不到元素。handle可以理解成PC Chrome上的頁簽。
切換context后，打印所有handle：
hs = driver.window_handles
print hs

結果有4個handle：
[u'CDwindow-F9F8E326F86E25A8D42D015C7CE6BCB0', u'CDwindow-290B77B961BC04EE4F0CBAAC1A88DF02', u'CDwindow-39F2828759F3013A63BED60A6697F9EF', u'CDwindow-30357A847E5D5FF1FFEC6C06760052A6']

挨個試到第3個的時候成功了

driver.switch_to.window(hs[2]) # 轉到第3個handle
print driver.current_url # 打印當前url
print driver.page_source # 打印頁面頁面源碼

 

恩，打開那個url就是文章導航頁面，源碼里也有相應的元素。

然后我代碼里寫死了切第3個handle，即hs[2]，運行又找不到元素了。坑爹，原來微信H5 handle列表數量和位置是會變的。
那就遍歷handle，哪個里面有歷史文章名‘界面通用測試用例’（頁面上可定位的元素），那就對了。

hs = driver.window_handles
print hs
for handle in hs:
    driver.switch_to.window(handle)
    url = driver.current_url
    print url
    if u'界面通用測試用例' in driver.page_source:
        break

 

OK，上面已經能成功打開歷史文章中的第一篇，但是在點打開文章的‘在看’時，又找不到元素了，恩，我一下就想到，又打開的文章就是另一個handle了，如上遍歷一下，就可以找到。

 

 最終運行成功，演示視頻(其中有2處很慢，是在遍歷handle)：

 https://www.bilibili.com/video/BV1ba4y1e7qN/

 

全部代碼為：

#coding=utf-8

from appium import webdriver
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC
from selenium.webdriver.common.by import By
import time
import sys
reload(sys)
sys.setdefaultencoding('utf8')

desired_caps = {}
desired_caps['platformName'] = 'Android'
desired_caps['platformVersion'] = '9'
desired_caps['deviceName'] = '63fa4de5'
desired_caps['appPackage'] = 'com.tencent.mm'
desired_caps['appActivity'] = '.ui.LauncherUI'
desired_caps['noReset'] = 'True'
desired_caps['chromeOptions'] = {'androidProcess': 'com.tencent.mm:toolsmp'}

driver = webdriver.Remote('http://localhost:4723/wd/hub', desired_caps)
wait=WebDriverWait(driver, 10)
# 打開微信需要一定時間，這里我們用顯示等待，等搜索元素出現后再獲取，后面代碼大家自行根據需要添加
el1 = wait.until(EC.presence_of_element_located((By.ID, 'com.tencent.mm:id/f8y')))
el1.click()  # 點擊搜索
time.sleep(1)
driver.find_element_by_id("com.tencent.mm:id/bhn").send_keys(u"測試工程師小站")  # 輸入名稱
driver.find_element_by_id("com.tencent.mm:id/gbv").click()  # 點擊公眾號
driver.find_element_by_id("com.tencent.mm:id/alv").click()  # 點擊一級菜單
# 點擊二級菜單（歷史消息）
el2 = driver.find_element_by_xpath("/hierarchy/android.widget.FrameLayout/android.widget.FrameLayout/android.widget.ListView/android.widget.TextView[2]")
el2.click()
time.sleep(3)

# print(driver.contexts)
driver.switch_to.context('WEBVIEW_com.tencent.mm:toolsmp')

# 遍歷歷史消息頁面的handle
hs = driver.window_handles
print hs
for handle in hs:
    driver.switch_to.window(handle)
    url = driver.current_url
    print url
    if u'界面通用測試用例' in driver.page_source:
        break

driver.find_element_by_xpath('//span[@class="weui_media_hd js_media"]').click()  # 點擊第一個歷史消息
time.sleep(3)

# 遍歷文章頁面的handle
hs = driver.window_handles
print hs
for handle in hs:
    driver.switch_to.window(handle)
    url = driver.current_url
    print url
    if u'歷史文章推薦閱讀' in driver.page_source:
        break

driver.find_element_by_xpath('//button[@id="js_like_btn"]').click()  # 點擊在看

 

---------------------------------------------------------------------------------

關注微信公眾號(測試工程師小站)即可在手機上查閱，並可接收更多測試分享，發送【測試資料】更可獲取百G測試教程~