混合元素app的H5元素定位
問題思考
在混合開發的App中，經常會有內嵌的H5頁面。那麽這些H5頁面元素該如何進行定位操作呢？
解決思路
針對這種場景直接使用前面所講的方法來進行定位是行不通的，因為前面的都是基於Andriod原生控件進行元素定位，而Web網頁是單獨的B/S架構，兩者的運行環境不同因此需要進行上下文（context）切換，然後對H5頁面元素進行定位操作。
context
簡介
Context的中文翻譯為：語境; 上下文; 背景; 環境，在開發中我們經常說“上下文”，那麽這個“上下文”到底是指什麽意思呢？
Android源碼中的註釋是這麽來解釋Context的：
Interface to global information about an application environment. This is an abstract class whose implementation is provided by the Android system. It allows access to application-specific resources and classes, as well as up-calls for application-level operations such as launching activities, broadcasting and receiving intents, etc.
翻譯如下：
關於應用程序環境的全局信息的接口。 這是一個抽象類，其實現由Android系統提供。 它允許訪問特定於應用程序的資源和類，以及對應用程序級操作的調用，如啟動活動、廣播和接收意圖等。
通俗理解
在程序中context我們可以理解為當前對象在程序中所處的一個環境。 比如前面提到的App一個界面是屬於Activity類型，也就是Android界面環境，但是當訪問內嵌的網頁是屬於另外一個環境（網頁環境），兩者處於不同的一個環境。
案例講解
dr.fone app 內嵌網頁地址：https://drfone.wondershare.com/backup.html
WebView
WebView是Android系統提供能顯示網頁的系統控件，它是一個特殊的View，同時它也是一個ViewGroup，可以有很多其他子View。
在Android 4.4以下(不包含4.4)系統WebView底層實現是采用WebKit(http://www.webkit.org/)內核，而在Android 4.4及其以上Google 采用了chromium(http://www.chromium.org/)作為系統WebView的底層內核支持。
這裏簡單介紹下基於Chromium 的Webview和基於Webkit webview的差異，基於Chromium Webview提供更廣的HTML5,CSS3,Javascript支持，在目前最新Android 系統版本5.0上基於chromium 37，Webview提供絕大多數的HTML5特性支持。Webkit JavaScript引起采用WebCore Javascript 在Android 4.4上換成了V8能直接提升JavaScript性能。另外Chromium 支持遠程調試(Chrome DevTools)。
H5元素定位環境搭建
資源下載
- Chrome PC瀏覽器：
- 官網下載地址
- 國內站點下載
- 手機版 Chrome
手機上安裝Chrome最好到Google play去安裝，手機上沒有Google play可以先安裝一個“GO谷歌安裝器” 安裝後註冊Google play賬號（由於眾所周知的網絡原因，Googleplay大陸地區無法使用）
- Chrome driver 下載地址
chrome driver要與Chrome的版本對應：
ChromeDriver版本與Chrome版本對應表
Appium Chromedriver 官方說明文檔
chromediver路徑 一般位於appium路徑中的...\node_modules\appium-chromedriver\chromedriver\win裏面，如下所示：運行chromedriver.exe可以查看到當前的版本信息。
C:\Users\Shuqing\AppData\Roaming\npm\node_modules\appium\node_modules\appium-chromedriver\chromedriver\win
- 逍遙模擬器（夜神模擬器由於操作系統兼容問題，無法獲取Webview context）
- dr.fone app 3.2.0
Tips：
以上所需資源可以在視頻下方【獲取素材】中第四章軟件素材——《H5元素定位軟件全家桶》文件夾中獲取！
操作步驟
- 手機與電腦連接，開啟USB調試模式，通過adb devices可查看到此設備。（設備系統Android 5.0以上）
- 電腦端、移動端必須安裝chrome瀏覽器。（盡量保證移動端chrome版本與PC端一致）根據對應的Chrome瀏覽器版本安裝對應的Chrome driver。
- App Webview開啟debug模式
- 在電腦端Chrome瀏覽器地址欄輸入chrome://inspect/#devices，進入調試模式
- 執行測試腳本
- 打開app對應的h5頁面，在 chrome://inspect/#devices 地址中，檢查是否顯示對應的webview，如沒有，則當前未開啟調試模式。
- 在自動化腳本中，進入到對應的H5頁面，打印輸出當前context,如果一直顯示為Natvie App，則webview未開啟。
Webview 調試模式檢查與開啟
基礎檢查方式
開啟方式
在app中配置如下代碼（在WebView類中調用靜態方法setWebContentsDebuggingEnabled）：
if (Build.VERSION.SDK_INT >=Build.VERSION_CODES.KITKAT) {
WebView.setWebContentsDebuggingEnabled(true);
註：此步驟，一般需要App開發人員開啟。
H5定位實踐案例
測試場景
啟動dr.fone app 進入backup H5頁面中的輸入郵箱並點擊提交，然後返回
測試環境
- 測試設備：逍遙模擬器 Android 5.1.1 /Chrome 66.0
- PC系統環境: Win10 64bit /Chrome 66.0
- 測試app: dr.fone3.2.0.apk
- H5頁面地址：https://drfone.wondershare.com/backup.html
需求分析
- 先進入到H5頁面，然後切換到context,再進行相關元素定位操作。
- conetext切換：可以通過contexts()方法來獲取到頁面的所有context,然後切換到H5頁面的context
- 在H5頁面進行元素定位操作
獲取方法實踐
contexts=driver.contexts
print(contexts)
#打印結果
[‘NATIVE_APP‘, ‘WEBVIEW_com.android.launcher‘, ‘WEBVIEW_com.wondershare.drfone‘, ‘WEBVIEW_com.psiphon3‘]
代碼實現
by_h5.py
from appium import webdriver
from selenium.webdriver.support.ui import WebDriverWait
desired_caps={}
desired_caps[‘platformName‘]=‘Android‘
desired_caps[‘platformVersion‘]=‘5.1.1‘
desired_caps[‘deviceName‘]=‘127.0.0.1:21503‘
desired_caps[‘app‘]=r‘C:\Users\Shuqing\Desktop\dr.fone3.2.0.apk‘
desired_caps[‘appPackage‘]=‘com.wondershare.drfone‘
desired_caps[‘appActivity‘]=‘com.wondershare.drfone.ui.activity.WelcomeActivity‘
driver = webdriver.Remote(‘http://localhost:4723/wd/hub‘, desired_caps)
driver.implicitly_wait(5)
print(‘click BackupBtn‘)
driver.find_element_by_id(‘com.wondershare.drfone:id/btnBackup‘).click()
WebDriverWait(driver,8).until(lambda x:x.find_element_by_id(‘com.wondershare.drfone:id/btnRecoverData‘))
print(‘click NextBtn‘)
driver.find_element_by_id(‘com.wondershare.drfone:id/btnRecoverData‘).click()
WebDriverWait(driver,8).until(lambda x:x.find_element_by_class_name(‘android.webkit.WebView‘))
contexts=driver.contexts
print(contexts)
#需android4.4及以上版本的系統中才會輸出更多的webview
print(‘switch conetext‘)
driver.switch_to.context(‘WEBVIEW_com.wondershare.drfone‘)
print(‘edit email‘)
driver.find_element_by_id(‘email‘).send_keys(‘[email protected]‘)
print(‘click sendBtn‘)
driver.find_element_by_class_name(‘btn_send‘).click()
#切換context 點擊返回
driver.switch_to.context(‘NATIVE_APP‘)
driver.find_element_by_class_name(‘android.widget.ImageButton‘).click()
報錯&解決方案
報錯1
raise exception_class(message, screen, stacktrace)
selenium.common.exceptions.WebDriverException:Message: An unknown server-side error occurred while processing the command.
Original error: Failed to start Chromedriver session: A new session could not be created.
(Original error: session not created exception: Chrome version must be >= 60.0.3112.0
報錯2
error: Chromedriver: Chromedriver exited unexpectedly with code null, signal SIGTERM
【解決方案】
下載對應版本的chromedriver驅動，放置在： {Appium path}\node_modules\appium\node_modules\appium-chromedriver\chromedriver\win 替換即可
參考資料
- https://www.jianshu.com/p/94e0f9ab3f1d
- https://testerhome.com/topics/7866
- https://blog.csdn.net/typename/article/details/40425275
- https://www.cnblogs.com/niansi/p/6754766.html
混合元素app的H5元素定位