『與善仁』Appium基礎 — 19、元素定位工具(三)

語言: CN / TW / HK

目錄

  • 2、Chrome Inspect開啟方式
  • 3、Chrome Inspect工具的使用
    • (1)Chrome Inspect工作前提
    • (2)Chrome Inspect操作
  • 4、使用Chrome Inspect遇到的問題
    • (1)Android系統版本問題
    • (2)所測App的debug模式要開啟
    • (3)Xposed工具的安裝
    • (4)HTTP/1.1 404 Not Found和空白頁問題
    • (5)補充:安卓模擬器開啟開發者選項

APP中的元素定位工具大致有三種:

uiautomatorviewer
Appium Inspector
Chrome Inspect

提示:本篇文章介紹 Chrome Inspect 工具。

1、Chrome Inspect介紹

Chrome Inspect 定位工具是用來抓取APP中Webview頁面的。

為了專案的需求,為了更好的保證效果和佈局跨平臺,Android&H5混合開發一般是我們不錯的選擇。Google瀏覽器中的 Chrome Inspect 定位工具,提供了一個移動端Web頁面開發除錯的功能,通過它我們可以除錯手機頁面,可以看到頁面的原始碼,從而進行元素的定位。

使用 Chrome Inspect 定位工具的前提條件

使用Chrome開發人員工具除錯原生Android應用中的WebView,Android版本應該在Android4.4(KitKat)或更高版本上,通過DevTools在原生Android應用中除錯WebView頁面中的內容。

2、Chrome Inspect開啟方式

開啟PC端的Chrome瀏覽器,在訪問位址列中輸入 chrome://inspect/ 就可以了,就是這麼簡單。

如下圖:

3、Chrome Inspect工具的使用

(1)Chrome Inspect工作前提

  • 所測試裝置是開機狀態(手機或者模擬器)。
  • 確保電腦與裝置是連結狀態,也就是
    cmd進入命令列終端,
    輸入 adb connect 127.0.0.1:21503 連結逍遙模擬器,
    輸入 adb devices 能夠獲取裝置名稱。

(2)Chrome Inspect操作

1)在APP中開啟含有Webview的頁面

例如:開百度APP,進入到微博登陸的介面就是一個含有Webview的頁面。

如下圖:

2)在 Chrome Inspect 中識別到Webview頁面

我們進入到PC端的Chrome瀏覽器中,訪問位址列中輸入 chrome://inspect/ (沒有顯示的話就點選一下重新整理),就可以檢測到當前應用程式介面是Webview頁面了。

如下圖:

3)點選inspect可以進入除錯檢視

點選如上圖中的 inspect ,可以進入 Chrome Inspect 工具的除錯檢視 .

會彈出一個新視窗,顯示當前頁面的Webview元素資訊。

並且元素定位方法同Selenium WebDriver一致。

就是這麼簡單。

4、使用Chrome Inspect遇到的問題

(1)Android系統版本問題

Android移動裝置版本應該在Android4.4或更高版本上。

從Android 4.4開始, webkit 是支援遠端除錯的。

(2)所測App的debug模式要開啟

在使用 Chrome Inspect 工具除錯移動端APP的Webview頁面的時候,需要將該APP的debug模式開啟。

但其實大部分APP的debug模式都是關閉的,要去找一個開啟debug模式的版本還是比較麻煩的。

因此需要使用藉助第三方工具來強制開啟任何APP的 Android webview debug 模式,使之可以使用 Chrome Inspec t。

而這個工具就是 Xposed

(3)Xposed工具的安裝

1)將裝置進行root。

因為涉及到 root 許可權,因此需要將裝置進行 root

有很多工具可以來 root ,比如 KingRoot 等。

注:Android模擬器預設root。

2)下載 Xposed 框架。

官方下載地址: http://repo.xposed.info/module/de.robv.android.xposed.installer

點選頁面下方的 Show older versions ,選擇一個穩定版本進行下載。

3)安裝 Xposed 框架。

將下載好的 Xposed 安裝包 de.robv.android.xposed.installer_v32_de4f0d.apk ,直接拖入到Android模擬器中,進行安裝。

安裝好後如下圖:

4)安裝/更新 Xposed 框架。

開啟 Xposed Installer ,選擇“安裝/更新”的最新版,然後點“安裝”會自動下載刷入。(過程可能會有一些慢)

如下圖所示:

安裝介面,如下圖所示:

安裝更新完成後的介面,如下圖所示:

4、安裝 Xposed webview debugging 模組。

開啟 Xposed 介面中點選左上角的三條橫槓,選擇模組,然後啟用需啟用模組的複選框, 正常重啟 後即可使用。

如下圖所示:

如果你的手機中沒有安裝 WebViewDebugHook 模組或者沒有任何模組,如下圖:

可以在 Xposed 中進行下載安裝 WebViewDebugHook 模組。

如下圖所示:

然後按照上面的方式啟用 WebViewDebugHook 模組即可。

(4)HTTP/1.1 404 Not Found和空白頁問題

chrome://inspect/#devices 中點選 inspect 出現的視窗中,介面是出現 HTTP/1.1 404 Not Found 或者是空白頁的現象。

空白頁,如下圖所示:

HTTP/1.1 404 Not Found 介面,如下圖所示:

原因:

對於國內的程式猿來說,由於無法訪問 https://chrome-devtools-frontend.appspot.com ,就會出現出現 HTTP/1.1 404 Not Found 或者空白頁面的現象。

例如上面的 @33f6ad690e178169a17596eeec8596751a696d1e 就是移動裝置中瀏覽器的一個版本號,當你換一個手機或模擬器的時候,版本號可能就不一樣了。

因為不同型號的手機生產商可能會打包不同版本的Chrome瀏覽器核心, Chrome Inspect 定位工具就會先訪問 https://chrome-devtools-frontend.appspot.com ,下載對應的 chrome-devtools 相關驅動,而國內無法訪問並下載這些驅動,就出現了404和空白頁。

網上找到如下三種解決方式:

  • 方法一:下載 devtoolsinspect離線開發者除錯工具包。 (花錢,沒有免費的)
  • 方法二: 修改網路連線,修改hosts檔案。
  • 方法三:使用第三方的 chromium 核心的瀏覽器,如QQ瀏覽器。

(都不好使,大家也可以自己試試)

推薦使用VPN,或者下載一個可FQ的谷歌瀏覽器用一下即可,不用的時候就關了。

(5)補充:安卓模擬器開啟開發者選項

  1. 開啟手機的“設定”,進入到“設定”頁面;
  2. 滑到“設定”頁面的最下端,找到“關於手機”,進入到“關於手機”頁面;
  3. 找到“版本號”,連續點選。
  4. 會彈出一段文字提醒,直到提醒次數為0後,結束點選。
  5. 返回“設定”介面,開發者選項就出來了。