如何測試帶有webview的Android Hybrid App

-

你一定曾遇過用uiautomation viewer查找頁面結構時

遇到webview就像遇到柏林圍牆不知道怎麼繼續做下去


uiautomator_webviewblock

來試試看怎麼突破吧~

環境準備

  • Webview HTML5 test Android Apk (或任何帶有webivew的App)
  • 電腦上安裝Chrome browser
  • Android 6.0 模擬器

找到Webview下的元件路徑

谷哥大神有教我們可以用Chrome inspector來Remote Debugging Webviews
我們就來給它照著做下去試試看
  1. 先在模擬器上面打開你要檢查的webview頁面
  2. 打開電腦上的Chrome, 在網址列輸入 chrome://inspect
  3. Chrome inspector會偵測目前有哪些已經連接的remote device
    並且列出每個device上面有哪些webview被開啟中
    chrome_remotedevices
  4. 按下Inspect, 會氣到彈出來 >
    Chrome Developer tools
    chrome_developertools
  5. 有時候左邊的preview畫面會太小,可以按兩次上方的device button重新調整畫面
    chrome_developertoolbar
  6. 要怎麼找到元件的路徑呢?
    各位看到這裡那種熟悉的感覺是不是又回來了
    • 先點上方的search button
    • 接著移動到想要找的元件上面
    • 右邊會自動帶到對應的Element Tree Layer
    chrome_inspectorsearch
  7. 到這裡就能用Selenium常用的Locator來定義元件的位置, ex. Id, Classname, Xpath
    也可以按右鍵Copy CSS or Xpath來快速取得路徑
    developertool_copypath

使用Appium操控Webview

知道怎麼樣定位Webview裡面的路徑
那接下來就是把路徑放到appium script的工作了
  1. Desired Capability設定跟Native app一樣
desired_caps = {
'platformName': 'Android',
'platformVersion': '6.0',
'deviceName': 'emulator-5554',
'noReset': 'true',
'autoAcceptAlerts': 'true',
'command-timeout': '60',
'app': '../WebView_HTML5_Test_v1.0.apk'
}
  1. 先確定要測試頁面裡有沒有包含Webview context
    contexts = driver.contexts
    print(contexts)
    Webview的名稱會長得像這樣
    context_list
  2. 用switch_to.context切換不同context
    一種比較簡單的方式切是指定contexts的最後一筆
    driver.switch_to.context("WEBVIEW_com.wt.webviewhtml5test")

萬事俱備，只欠東風.... 嗎

好Der, 讓我們趕快跑一下看看效果如何
哎呦! Orz.. 居然出現錯誤
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 (Driver info: chromedriver=2.33.506106...
這是什麼妖術! 怎麼會出現這樣的訊息?
簡單來說原因是webview元件依賴Android內Chrome核心版本去驅動
每個Chrome核心各自需要不同的chromedriver版本支援
這個錯誤訊息就是提示你目前使用的chromedriver和Chrome不相容
那要怎麼知道現在的webview是用哪個Chrome核心版本呢
最快的方式是打開Chrome inspector去檢查
這裡可以看到目前的Chrome版本是44.0.2403
chrome_webviewversion
對照下圖可以看到44可用的chromeDriver是V2.15~2.20
chromedriver_chrome01
chromedriver_chrome02
回顧剛剛的錯誤訊息, appium內建的chrome driver是2.33只支持v60-62 難怪會出現錯誤

解決方式

其中一種解決方式是去下載舊版的chromedriver, 並指定appium去使用
  1. 到Google 官方提供的舊版chromedriver下載舊版(2.15)的chromedriver
    https://chromedriver.storage.googleapis.com/index.html
  2. 解壓縮放到指定資料夾
  3. 加上參數指定Appium server啟動時使用特定的chrome driver
    --chromedriver-executable /.../chromeDriver/2.15/chromedriver
    讓我們重新再執行一次測試腳本，終於能順利的切換到webview了
    執行過程中可以用current context確認目前是使用哪個view
    current_context = driver.current_context
    切換到webview後我們就可以用selenium的方式來找到web element做各種操作

最後記得別忘了要回家

通常有許多返回按鈕都會放在default view上面
最後要離開前記得要切回原來的Native_app view喔
可以用下面這兩種方式來達成
driver.switch_to.context(None)
或
driver.switch_to.context(contexts[0])

Reference:

Comments

Post a Comment