『與善仁』Appium基礎 — 28、webview的操作方式

1、先了解什麼是Hybrid（混合）
2、識別Webview
3、context上下文
4、Webview和原生頁面之前的切換
5、綜合練習

我們之前說過的所有操作，都是對原生頁面的操作。

在手機APP中，除了原生頁面，還是有Webview頁面（也就是H5頁面），下面我們就說說對Webview頁面的操作。

1、先了解什麼是Hybrid（混合）

移動混合應用程式的App，即在移動應用程式中嵌入了Webview，通過Webview訪問網頁。

移動應用和Webview分別屬於兩個不同的上下文，移動應用默認的Context為」NATIVE_APP」，Webview默認的Context為」WEBVIEW_被測進程名稱」。

在測試Webview中的網頁內容時，需要切換到Webview的context下。（就相當於在APP中開啟了一個新的頁面。）

2、識別Webview

用UI Automator Viewer定位工具查看頁面，發現頁面上有些區域無法定位到，如下圖左邊紅色區域，只能定位到這個大框框，紅色框裡面的元素是無法識別的。

這時候可以查看元素屬性，如圖它的class屬性，上面寫著android.webkit.WebView，那毫無疑問這種頁面就是Webview了。

3、context上下文

（1）context的中文翻譯是上下文，環境。

當然學過Selenium的同學，也可以理解為句柄（handle），其實是一回事，反正知道是兩個不同的環境就行了。

（2）先獲取頁面是contexts環境，如下圖紅色區域，獲取的是一個list列表，這個列表包含了該介面中所有的頁面，包括原生頁面（native）和Webview頁面。

NATIVE_APP：這個就是native，也就是原生的頁面。

WEBVIEW_com.xxxx ：這個就是Webview頁面。

（3）當看到列印出來如有['NATIVE_APP', 'WEBVIEW_com.baidu.searchbox']的資訊，就說明獲取到Webview的context了（當然也有的APP有坑，可能明明有Webview，卻通過contexts獲取不到，這種需要特殊處理了）。

4、Webview和原生頁面之前的切換

要想操作Webview上的元素，第一步需要切換環境（跟Selenium的切換iframe，切換handle思路是一樣）

原生頁面切換Webview方法：switch_to.context(參數是具體webview的context)
Webview切換原生頁面方法：switch_to.context(原生頁面的context)

# 調用方式
# 由於已經獲取到contexts了，是一個list對象，取這個list的第二個參數就行，也就是contexts[1]
# contexts = ['NATIVE_APP', 'WEBVIEW_com.baidu.searchbox']
# 1.切換到webview
driver.switch_to.context(contexts[1])

# 2.切換到原生
driver.switch_to.context(contexts[0])

5、綜合練習

提示：

下面練習中，我把Android虛擬機的系統換成5.1.1版本了，7.1.2版本的Android虛擬機獲取不到Webview頁面的context，未找到原因。

"""
1.學習目標
    必須掌握APP中webview頁面的操作方法
2.操作步驟
    2.1 webview頁面概念----H5頁面

    2.2 識別webview頁面
        藉助元素定位工具,如果無法獲取頁面局部元素,只能定位整個頁面,
        該頁面他的class屬性值=android.webkit.webview,則該頁面是webview頁面

    2.3 操作webview頁面---相當於selenium中iframe操作步驟
        1.獲取到webview頁面的context
            獲取所有contexts包括原生頁面和webview
                driver.contexts
            獲取當前context
                driver.current_context
        2.進入webview
            driver.swith_to.context(具體webview頁面的context值)
        3.操作webview頁面中的元素
            操作方法和selenium中操作web頁面是一致的
            藉助chrome://inspect(需要梯子)
            操作過程中,注意chromedriver和手機本身瀏覽器內核版本匹配
        4.退出webview  等同於進入native
            回到原生頁面
            driver.switch_to（"NATIVE-APP"）

3.需求
    在百度appl操作webview頁面：微博登錄頁面
"""

# 1.導入appium和TouchAction
import time
from appium import webdriver

# 2.創建Desired capabilities對象，添加啟動參數
desired_caps = {
    "platformName": "Android",  # 系統名稱
    "platformVersion": "5.1.1",  # 系統版本
    "deviceName": "127.0.0.1:21503",  # 設備名稱
    "appPackage": "com.baidu.searchbox",  # APP包名
    "appActivity": ".MainActivity"  # APP啟動名
}

# 3.啟動APP
driver = webdriver.Remote("//127.0.0.1:4723/wd/hub", desired_caps)

# 4.操作APP
# 4.1 點擊未登錄
driver.wait_activity(".MainActivity", 10)
driver.find_element_by_android_uiautomator('new UiSelector().text("未登錄")').click()

# 4.2 點擊微博登錄按鈕
driver.wait_activity(".MainActivity", 10)
driver.find_element_by_accessibility_id("微博登錄").click()

# 4.3 獲取頁面所有的context
# 指native（原生）頁面和webview頁面
driver.wait_activity("com.sina.weibo.sdk.web.WeiboSdkWebActivity", 15)
contexts = driver.contexts
# 輸出結果：['NATIVE_APP', 'WEBVIEW_com.baidu.searchbox']
# 'NATIVE_APP' ： 代表原生頁面
# 'WEBVIEW_com.baidu.searchbox' ： 代表webview頁面
print(contexts)

# 4.3 進入webview中
driver.switch_to.context(contexts[1])
# 查看當前頁面的context
print(driver.current_context)
time.sleep(5)

# 4.4 操作webview頁面元素
# 定位微博登錄頁面的郵箱/手機輸入框。並輸入內容
# 操作方法和selenium中操作web頁面是一致的
username = driver.find_element_by_id("loginName")
# 如果需要輸入中文，需要在Desired capabilities對象中添加兩個配置項
# "unicodeKeyboard": True,
# "resetKeyboard": True
username.send_keys("123456")

# 這裡有幾點需要注意：
# 1.在webview頁面定位元素需要藉助chrome://inspect工具
#   在chrome://inspect中找打當前打開的webview頁面（具體操作可以看之前的文章）
#   注意：chrome://inspect的使用需要梯子。
# 2.注意chromedriver和手機本身瀏覽器內核版本匹配
#   否則定位不到元素，還會報錯，如下：
#   WebDriverException ： Original error: No Chromedriver found that can automate Chrome '39.0.0'.
#   意思是WebDriver的操作：未找到可自動執行Chrome '39.0.0' 版本的Chromedriver驅動
#   說明一下：在webview中的操作和selenium中的操作是一致的
#       所需webview中操作的執行也是需要Google瀏覽器的驅動。
#       在Android手機中，瀏覽器的內核都是Google的，
#       Google瀏覽器的內核版本是多少，報錯中已經給出提示。
#       如上報錯資訊中提示的是'39.0.0' 版本，
#       我們就需要找一個'39.0.0' 版本對應的的Chromedriver驅動
#       （下載一個2.13版本的Chromedriver驅動就可以對應'39.0.0' 版本的Google瀏覽器）
#       然後把該Chromedriver驅動放入Appium的安裝目錄中，具體位置如下：
#       C:\Users\L\AppData\Local\Programs\Appium\resources\app\node_modules\appium\node_modules\appium-chromedriver\chromedriver\win
#       把之前的刪除掉，或者備份一下。


# 4.5 退出webview   進入native(原生頁面)
driver.switch_to.context(contexts[0])
# 查看當前頁面的context
print(driver.current_context)
time.sleep(3)
# 點擊關閉微博登陸頁面
driver.find_element_by_android_uiautomator('new UiSelector().text("關閉")').click()

# 5.關閉APP
time.sleep(3)
driver.quit()

Tags: 測試基礎必會技能 - Appium測試框架