1. 程式人生 > 遊戲 >《紙嫁衣4》移動端預約開啟 今年暑假上線

《紙嫁衣4》移動端預約開啟 今年暑假上線

Hybrid App(混合模式移動應用)是介於 Web-app、Native-app 之間的 app,本質上是 Native-app 中嵌入 WebView 元件,在 WebView 元件裡可以訪問 Web App。Hybrid App 在給使用者良好互動體驗的同時,還具備了 Web App 的跨平臺、熱更新機制等優勢。

Android WebView 在 Android 平臺上是一個特殊的 View,用它來展示網頁內容。WebView 內部實現是採用渲染引擎來展示 View 的內容,提供網頁前進後退、網頁放大、縮小、搜尋等功能。使用 WebView 進行測試需要開發人員配合開啟一個 WebView 的開關。

WebView開關

WebView 是手機應用內嵌的瀏覽器,在 Android 4.4 之前 WebView 核心採用的是 WebKit,Android 4.4 之後才用的是 Chrome 作為內建瀏覽器。它是用來載入 HTML 頁面的控制元件。在模擬器(android6.0 版本)中是預設開啟 WebView 開關的,可以直接除錯和測試 WebView。真機測試時,必須在應用中開啟 WebView 除錯開關。要啟用 WebView 除錯,請在 WebView 類上呼叫靜態方法 setWebContentsDebuggingEnabled。

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
    if (0 != (getApplicationInfo().flags &\
     ApplicationInfo.FLAG_DEBUGGABLE))
    { WebView.setWebContentsDebuggingEnabled(true); }
}

開啟這個開關之後,手機端開啟被測的 WebView 頁面,然後在電腦端 Chrome 瀏覽器位址列錄入 “chrome://inspect” 將顯示裝置上的 WebView 列表。

點選想要除錯的 WebView 下方的 inspect 連結,就可以檢視這個頁面的原始碼了。通過原始碼就可以檢視並確定元素定位表示式了。

如果遇到 Chrome 瀏覽器版本和 Chromedriver 版本不匹配的問題,可以參見:

   chromedriver下載地址與webview自動化關鍵程式碼
注意:測試開發寶典中提及的觸屏操作自動化連結改為:Appium-touch-actions ,請有意向者移步該帖進行瀏覽 chromedriver的介紹與相關資料地址,方便自動化測試工程師查閱 
錯誤提示 未安裝chromedriver No Chromedriver found that can automate Chrome ‘76.0.3809’. You could als…

WebView 測試

切換到 WebView 頁面,就可以使用 Selenium 操作元素。
driver.switch_to.context 方法可以從原生頁面切換到 WebView 頁面,示例程式碼如下:

webview = driver.contexts[-1]
driver.switch_to.context(webview)

WebView 案例

雪球案例,開啟雪球應用,點選“交易”,點選“A 股開戶”進入到開戶頁,驗證頁面正確。如下圖:

840×1434 234 KB
    def test_webview(self):
        # 點選交易
        self.driver.find_element(MobileBy.XPATH, '//*[@text="交易"]').click()
        # 列印當前頁面有哪些上下文
        print(self.driver.contexts)
        e = self.driver.contexts
        for context in self.driver.contexts[::-1]:
            if 'webview' in context.lower():
                aim = context
                break
        # 切換上下文
        self.driver.switch_to.context(aim)
        # 點選'A股開戶'
        print(self.driver.window_handles)
        A_locator = (MobileBy.XPATH, '//*[@id="Layout_app_3V4"]/div/div/ul/li[1]/div[2]/h1')
        WebDriverWait(self.driver, 10).until(expected_conditions.element_to_be_clickable(A_locator))

進入到 APP 後,開啟一個包含 H5 的頁面,系統預設是 Native 的上下文。如果要操作 H5 上的元素,則需要切換到 WEBVIEW 的上下文。

上面的程式碼先通過 driver.contexts 找到所有的 contexts(即上下文),迴圈遍歷這個contexts,找到目標的 WEBVIEW,然後切換到這個 WEBVIEW 中,再執行相應的操作。這時就可以使用 Selenium 的定位方式到 H5 頁面的元素了。