公衆号搜尋：TestingStudio 霍格沃茲測試開發的幹貨都很硬核

混合應用測試或微信小程式測試，都會涉及到 WebView 元件，這節内容将分析一下 WebView 的技術原理。首先通過日志分析檢視 Appium 的運作過程。

WebView日志分析

要想檢視 ChromeDriver 的日志，需要在 Capability 裡開啟一個開關項 showChromedriverLog。讓 Appium 運作測試用例時能夠生成 ChromeDriver 相關的日志（預設是不列印 ChromeDriver 這部分日志的）。代碼如下：

capabilities['showChromedriverLog'] = True

啟動 AppiumServer 并将生成的所有日志存儲到檔案 /tmp/appium.log 中：

appium -g /tmp/appium.log

關鍵日志分析

下面我們對 /tmp/appium.log 檔案中的關鍵日志進行詳細的分析。首先找到 Context 切換的日志，發現 Context 切換到 WEBVIEW_io.appium.android.apis 上下文中：

[HTTP] <-- GET /wd/hub/session/xx/contexts 200 99 ms - 145
[HTTP] --> POST /wd/hub/session/xx/context \
{"name":"WEBVIEW_io.appium.android.apis"}

Appium 在本地開啟了兩個 WebView 程序，程序号分别是 1271 和 26060。

[debug] [AndroidDriver] WEBVIEW_1271 mapped to pid 1271
[debug] [AndroidDriver] Getting process name for webview
[debug] [ADB] Getting connected devices...
[debug] [AndroidDriver] WEBVIEW_26060 mapped to pid 26060
[debug] [AndroidDriver] Getting process name for webview

然後，Appium 通過使用 adb 指令來檢視 1271 和 26060 的程序資訊。

[debug] [ADB] Running '/Users/xxxx/profile/android-sdk_r2.4.1-\
macosx/android-sdk-macosx/platform-tools/adb' with args: ["-P",5037,\
"-s","192.168.56.101:5555","shell","ps"]
[debug] [AndroidDriver] Parsed pid: '1271' pkg: 'cn.goapk.market' from
[debug] [AndroidDriver]     USER     PID   PPID  VSIZE  RSS     \
WCHAN \   PC         NAME
[debug] [AndroidDriver]     u0_a58    1271  192   606848 53268 \
ffffffff b76c707b S cn.goapk.market
[debug] [AndroidDriver] Returning process name: 'cn.goapk.market'
[debug] [AndroidDriver] Parsed pid: '26060' pkg: 'io.appium.android.\
apis'\ from
[debug] [AndroidDriver]     USER     PID   PPID  VSIZE  RSS   \
  WCHAN    PC         NAME
[debug] [AndroidDriver]     u0_a139   26060 192   649076 68004\
 ffffffff b76c6371 R io.appium.android.apis
[debug] [AndroidDriver] Returning process name:\
 'io.appium.android.apis'

Appium Server 列出通過程序查找到的所有 WebView 和可用 Context，如下：

[debug] [AndroidDriver] Found webviews: ["WEBVIEW_cn.goapk.market",\"WEBVIEW_io.appium.android.apis"]
[debug] [AndroidDriver] Available contexts: ["NATIVE_APP",\"WEBVIEW_cn.goapk.market","WEBVIEW_io.appium.android.apis"]

然後 Appium Server 嘗試連接配接 ChromeDriver，由于我們沒有設定 ChromeDriver 的端口，是以 Appium Server 預設啟用 8000 端口與 WebView 通訊。Appium Server 通過 ChromeDriver 與 app WebView 通訊。

[debug] [AndroidDriver] Connecting to chrome-backed webview context\
 'WEBVIEW_io.appium.android.apis'
[debug] [AndroidDriver] A port was not given, using random port: 8000

然後，Appium 先殺掉 ChromeDriver 這個程序，清理 adb 映射端口資料，如下：

[debug] [Chromedriver] Killing any old chromedrivers, running: \
pkill -15 -f "/usr/local/lib/node_modules/appium/node_modules/\
[email protected]@appium-chromedriver/chromedriver/mac/\
chromedriver.*--port=8000"
[Chromedriver] No old chromedrivers seemed to exist
[debug] [Chromedriver] Cleaning any old adb forwarded port socket \
connections
[debug] [ADB] List forwarding ports
[debug] [ADB] Running '/Users/xxx/profile/android-sdk_r24.4.1-macosx\
/android-sdk-macosx/platform-tools/adb' with args: ["-P",5037,"-s","192.168.56.101:5555","forward","--list"]

到這步是真正開啟 ChromeDriver 服務，建立起 Appium Server 與 ChromeDriver 之間的通訊。

[Chromedriver] Spawning chromedriver with: /usr/local/lib/\
node_modules/appium/node_modules/[email protected]@\
appium-chromedriver/chromedriver/mac/chromedriver --url-base=wd/hub \
--port=8000 --adb-port=5037 --verbose

建立連接配接之後，Appium Server 先檢視 ChromeDriver 版本号。

[debug] [Chromedriver] Chromedriver version: '2.33.506106'

ChromeDriver 列印啟動日志，開始傳輸參數。

[debug] [Chromedriver] [STDOUT] Starting ChromeDriver 2.33.506106 \
(8a06c39c4582fbfbab6966dbb1c38a9173bfb1a2) on port 8000
[debug] [Chromedriver] [STDOUT] Only local connections are allowed.
[debug] [JSONWP Proxy] Proxying [GET /status] to [GET\
 http://127.0.0.1:8000/wd/hub/status] with no body
[debug] [JSONWP Proxy] Got response with status 200:\
 "{\"sessionId\":\"\",\"status\":0,\"value\":{\"build\":{\"version
 \":\"alpha\"},\"os\":{\"arch\":\"x86_64\",\"name\":\"Mac OS X\",
 \"version\":\"10.12.6\"}}}"
[debug] [JSONWP Proxy] Proxying [POST /session] to [POST \
http://127.0.0.1:8000/wd/hub/session] with body: {"\
desiredCapabilities"\:{"chromeOptions":{"androidPackage":\
"io.appium.android.apis","androidUseRunningApp":true,"androidDeviceSerial":"192.168.56.101:5555"}}}

通過 ps 指令列出手機的程序清單，從中查找 WebView。

[Chromedriver] [STDERR] [0.349][DEBUG]: \
Sending adb command: \
host:transport:192.168.56.101:5555|shell:ps && ps -A

通過程序清單擷取 WebView 的程序号，Appium 根據這些資訊操作 WebView。

Chromedriver] [STDERR] [0.365][DEBUG]: \
Sending adb command: \
host-serial:192.168.56.101:5555:forward:tcp:12531;\
localabstract:webview_devtools_remote_26060

檢視WebView

WebView 控件會被映射為原生控件，類型為 View，其中的文本内容會變成 content-desc（Android 6.0）或者 text（Android 9.0）。

打開雪球 APP，下面指令可以檢視 Android 系統内的 WebView 程序：

Hogwarts $ adb shell cat /proc/net/unix | grep webview
0000000000000000: 00000002 00000000 00010000 0001 01 12863 /dev/socket/webview_zygote
0000000000000000: 00000002 00000000 00010000 0001 01 24703 @webview_devtools_remote_1758
0000000000000000: 00000003 00000000 00000000 0001 03 24672 /dev/socket/webview_zygote

上面的指令中，凡是名字前面有 @ 的都是套接字。套接字(Socket)是對網絡中不同主機上的應用程序之間進行雙向通信的端點的抽象。

下面指令檢視這個程序對應的應用：

Hogwarts $ adb shell ps |grep 1758

u0_a67        1758   211 1600592 333680 futex_wait_queue_me f016fbb9 S com.xueqiu.android

檢視到是雪球 APP 的 WebView 程序。測試時，Appium Server 就利用這個端口實作與 WebView 的通訊。

Context切換

由于直接操作套接字很難，是以使用 adb forward 将它重定向到本地端口。

adb forward tcp:$port localabstract:webview_devtools_remote_$pid

例如：使用本地 7777 端口

Hogwarts $ adb forward tcp:7777 localabstract:webview_devtools_remote_1758

可以發送 http 請求實作相關操作，下面擷取 WebView 元件版本（也可以直接在浏覽器中通路 http://localhost:7777/json/version），指令如下：

Hogwarts $ curl http://localhost:7777/json/version
{
   "Android-Package": "com.xueqiu.android",
   "Browser": "Chrome/74.0.3729.186",
   "Protocol-Version": "1.3",
   "User-Agent": "Mozilla/5.0 (Linux; Android 8.1.0; Google Pixel_1 Build/OPM6.171019.030.E1; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/74.0.3729.186 Mobile Safari/537.36",
   "V8-Version": "7.4.288.28",
   "WebKit-Version": "537.36 (@99fc61ba7ee9c511608e5ea11edc2622ba3b8e3f)",
   "webSocketDebuggerUrl": "ws://localhost:7777/devtools/browser"
}

Chrome 的 devtools 協定是遠端調試協定（chromedevtools.github.io/devtools-pr…

http://127.0.0.1:7777/json/list 可以直接擷取 devtoolsFrontendUrl 檢視調試的遠端重定向的頁面詳細資訊。

[
    {
        "description": "{\"attached\":true,\"empty\":false,\"height\":1605,\"screenX\":0,\"screenY\":189,\"visible\":true,\"width\":1080}",
        "devtoolsFrontendUrl": "http://chrome-devtools-frontend.appspot.com/serve_rev/@99fc61ba7ee9c511608e5ea11edc2622ba3b8e3f/inspector.html?ws=127.0.0.1:7777/devtools/page/06840BED58C1415235EFC9817FFD472E",
        "faviconUrl": "https://assets.imedao.com/broker/static/images/favicon.8d2e0522.png",
        "id": "06840BED58C1415235EFC9817FFD472E",
        "title": "平安證券 極速開戶",
        "type": "page",
        "url": "https://broker.xueqiu.com/open/pingan?snb_from=tab",
        "webSocketDebuggerUrl": "ws://127.0.0.1:7777/devtools/page/06840BED58C1415235EFC9817FFD472E"
    },
    ...

然後通路Chrome的調試頁面 chrome://inspect/#devices，就可以擷取到頁面元素資訊，進而完成對元素的定位。

軟體測試/測試開發丨app自動化測試之Appium WebView 技術原理

WebView日志分析

關鍵日志分析

檢視WebView

Context切換

繼續閱讀

測試執行過程的注意事項

測試采坑後的注意事項總結

淺談使用Fiddler工具進行弱網測試

Charles打斷點--修改response值（wind版）

利用Selenium內建TestLink做自動化測試

TestLink1.9.6基本操作

軟體測試基礎_對應TestLink整理的測試計劃流程步驟

測試理論面試題

騰訊進階測試工程師的心得體會

10年軟體測試工程師，隻剩下這點感悟了（初級測試工程師必看）

做軟體測試工程師如何突破月薪20k?

測試工程師必備武器

面試題解析：你接口測試是怎麼做的？

軟體測試工程師跳槽：收到面試電話後，我會做的事。

測試學習筆記之軟體測試高頻面試題

軟體測試經典面試題（小題彙總）