appium01：appium定位H5頁面元素

目錄

目錄

• 擴展連接
• 一、 移動端的應用
  • 1.1 Native應用
  • 1.2 Web應用
  • 1.3 Hybird應用
• 二、 Hybird應用H5元素獲取
  • 2.1 思路
  • 2.2 步驟
    • 2.2.1 識別app中的H5視圖
    • 2.2.2 在桌面端的谷歌瀏覽器中識別這個H5界面
    • 2.2.3 代碼端進入H5視圖界面
    • 2.2.4 操作H5視圖界面元素
• 三、 appium操作H5元素代碼示例

擴展連接

https://blog.csdn.net/galen2016/article/details/53534366

一、 移動端的應用

        在手機移動端，支持3種應用格式：Native應用、Web應用以及Hybird應用。

1.1 Native應用

        Native，是安卓手機的原生應用，可以理解為普通的app；

1.2 Web應用

        Web應用依托於瀏覽器展示，也就是我們所說的網頁；

1.3 Hybird應用

        Hybird應用是介於Native和Web應用之間的應用模式，在Native應用中嵌入web頁面實現應用展示界面的個性化定制，也就是在應用中嵌入H5程序，比較常見的有微信小程序等，這些H5頁面再移動端通過Webview（Android提供的顯示網頁的系統控件）訪問。通過uiautomatorviewer在定位元素時，只有一個UI WebView的界面，無法獲取元素細節，如圖1.1所示。

二、 Hybird應用H5元素獲取

2.1 思路

        獲取Native應用的嵌入的H5頁面的元素，可以通過獲取該頁面的URL地址，然后在web端利用chrome瀏覽器，獲取該控件的定位語句，即可完成H5頁面元素的定位。

2.2 步驟

2.2.1 識別app中的H5視圖

        識別app中的H5視圖，可以打開手機的開發者模式，然后在開發者選項中打開顯示布局邊界的開關，打開開關之后，app的各個應用的組件的邊界就會顯示出來。如果是H5界面，可以看到，如下視圖（圖2.2）

         如果是H5界面，可以看到，如下視圖。

2.2.2 在桌面端的谷歌瀏覽器中識別這個H5界面

        對於Hybird中的H5界面，在谷歌瀏覽器中識別后，點擊inspect，可以查看，當前這個H5頁面的元素，谷歌瀏覽器識別app端Hybird應用H5頁面的的准備工作如下：

        ①手機和電腦連接上，打開手機開發者模式，啟動USB調試功能；

        ② 需要開發在打包代碼時，開啟webview的debug屬性setWebContentDebuggingEnabled(true)；

             但是，對於線上的開發包來說，一般都是把webview的debug屬性關閉了的，從線上包，在桌面端，基本無法獲取到hybird應用H5頁面，但是，我們可以利用第三方工具強制開啟webview的debug屬性。這里，我使用的第三方工具是VirtualXposed，安裝這個工具后，需要安裝WebviewDebugHook這個模塊才能正常使用

             需要注意，VirtualXposed是才發布的一個軟件，可能有一些bug。VirtualXposed這個模塊自帶了root環境，可以在非root的環境下運行Xposed，免去了手機root的麻煩，其下載地址如下https://github.com/android-hacker/VirtualXposed/releases，WebviewDebugHook的github地址如下https://github.com/feix760/WebViewDebugHook。上述兩個軟件都只需要下載apk包即可（如果使用Xposed，按安卓版本不同，會有兩個版本的Xposed安裝，在點擊進入WebViewDebugHook的github下載地址后，在幫助文檔中，有給適用於較低版本的Xposed的安裝地址http://repo.xposed.info/module/de.robv.android.xposed.installer，高版本地址在鏈接中有給出http://forum.xda-developers.com/showthread.php?t=3034811。）。需要注意的是，安裝了VirtualXposed之后，進入軟件后，VirtualXposed，會發現自動安裝了Xposed，而在安裝軟件時，會有兩個安裝選項，一個是VirtualXposed，一個是安卓系統上，對於上面提到的WebViewDebugHook模塊，以及我們所需要使用的應用，都需要安裝到VirtualXposed中。安裝好應用后，如下圖所示：

              注意： 對於騰訊系的應用（比如微信，默認使用的是X5內核），不是谷歌瀏覽器的內核，在使用Xposed+WebviewDebugHook的情況下(對於使用開啟webview的debug屬性的工程包或者VirtualXposed的環境，暫時不知道解決辦法)，需要在手機根目錄下建立一個debug.conf目錄文本內容如下：

    result_QProxy=false
    result_systemWebviewForceUsed=true
    setting_forceUseSystemWebview=true

        ③ 電腦安裝谷歌瀏覽器，在瀏覽器中輸入chorome://inspect/#devices,如下圖所示，可以顯示對應的H5頁面的url地址，但是顯示手機客戶端的url地址，需要進行一些設置：

             a）電腦需要能翻牆

             b） 如果電腦翻牆后，仍然沒有顯示對應app的url，需要修改C:\Windows\System32\drivers\etc\hosts

                         61.91.161.217 chrome-devtools-frontend.appspot.com

                         61.91.161.217 chrometophone.appspot.com

2.2.3 代碼端進入H5視圖界面

        在代碼端，進入H5視圖之后，才能回H5元素進行操作，進入H5視圖需要調用的語句是driver.switch_to.context(webview視圖)，示例代碼如下：(上述代碼需要在appium的14版本執行，在appium15版本，VirtualXposed中安裝的軟件會全部清空)

conf = ConfigParser()
conf.read("app.conf")
desired_caps_right = eval(conf.get("app", "desired_caps_right"))

driver = webdriver.Remote("http://127.0.0.1:4723/wd/hub", desired_caps_right)
time.sleep(5)


def getSize():
    x = driver.get_window_size()['width']
    y = driver.get_window_size()['height']
    return (x, y)

try:
    time.sleep(3)
    winSize = getSize()
    x1 = int(winSize[0] * 0.5)
    y1 = int(winSize[1] * 0.9)
    y2 = int(winSize[1] * 0.1)

    # 不能加時間，加了會有點擊操作
    driver.swipe(x1, y1, x1, y2)
    time.sleep(1)
    
    # 找到檸檬班app位置，進入檸檬班app
    app_ele = driver.find_elements_by_id("io.va.exposed:id/icon")[0]
    app_ele.click()
    time.sleep(5)
    
    # 點擊進入全程班
    qcb_ele = driver.find_element_by_xpath("//android.widget.TextView[@text=\'全程班\']")
    qcb_ele.click()

    time.sleep(3)
    # 打印contexts
    print(driver.contexts)

except Exception as e:
    print(e)
finally:
    driver.quit()

        contexts打印下圖所示(其 格式為WEBVIRE_context名稱)，該H5頁面的context就是最后一項，需要注意的是，獲取H5頁面的context需要開發輔助進行一些設置，設置方式如下：

        ①需要開發在打包時，開啟webview的debug屬性setWebContentDebuggingEnabled(true)；（這一步是獲取url的必須項）

        ②如果在手機模擬器中，可以打印該webview界面的context，但是在真機上沒有，此時，手機需要root；（如果使用了VirtualXposed,自帶root環境，也不需要進行設置）

2.2.4 操作H5視圖界面元素

        獲取到Hybird應用H5頁面的context后，可以通過driver.switch_to.context("webview名")進入H5頁面的context，之后就可以在這個界面，通過web頁面的定位方式對H5頁面的元素進行操作，由於web頁面，針對瀏覽器不同，會需要不同的驅動程序，非騰訊系應用，使用的是安卓自帶的谷歌瀏覽器解析以及渲染頁面的H5元素，所以需要安裝一個對應版本的谷歌驅動，將這個chromedriver放在appium安裝目錄下的\node_modules\appium\node_modules\appium-chromedriver\chromedriver\win下。(我的安卓系統內核谷歌瀏覽器為53版本，對應的驅動為2.23版本，各版本谷歌瀏覽器對應驅動版本如下：https://blog.csdn.net/huilan_same/article/details/51896672)，總結查看手機對應的谷歌瀏覽器版本有如下方法：

        ① 在chrome://inspect/#devices中可以查看手機谷歌瀏覽器的版本；

        ② （注意：這一操作在實操中並未找到） 在appium控制台中可以顯示當前系統webview的版本（搜索Webview version關鍵字，結果如圖2.6所示）；

         對於騰訊系機遇X5內核的應用，需要哪種驅動，筆者暫時不清楚，但找到一篇相關介紹的文章http://fantaxy025025.iteye.com/blog/2379692 。

三、 appium操作H5元素代碼示例

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

# 前期操作，進入H5視圖界面
prep_ele = driver.find_element_by_xpath('//android.,widget.TextView[@text=\"全程班\"]')
prep_ele .click()
time.sleep(5)

# 打印H5界面的上下文
contexts = driver.contexts
print(contexts)

# 切換進webview視圖
view_context = 'WEBVIEW_com.lemon.lemoonban' #view_context的值由contexts的打印中獲取
driver.seitch_to.context(view.context)

# 操作H5頁面元素
fav_button_id = 'js-bottom-fav'
driver.find_element_by_id(fav_button_id ).click()

# 切換回默認context
driver.switch_to.context(None)

        實際測試中，並沒有點擊到WebView中的收藏按鈕，由於無法獲取到該app開啟Webview的debug屬性的工程包，猜測是在VirtualXposed環境環境上點擊H5元素有問題導致的。

        嘗試過使用夜神模擬器，開啟root后，安裝Xposed，並在Xposed中安裝WebViewDebugHook模塊模塊，但在chrome端並不能獲取到對應H5界面的url。