混合應(yīng)用測試或微信小程序測試，都會涉及到 WebView 組件，這節(jié)內(nèi)容將分析一下 WebView 的技術(shù)原理。首先通過日志分析查看 Appium 的運行過程。

WebView日志分析

要想查看 ChromeDriver 的日志，需要在 Capability 里開啟 一個開關(guān)項 showChromedriverLog。讓 Appium 運行測試用例時能夠生成 ChromeDriver 相關(guān)的日志（默認(rèn)是不打印 ChromeDriver 這部分日志的）。代碼如下：

capabilities['showChromedriverLog'] = True

啟動 AppiumServer 并將生成的所有日志存儲到文件 /tmp/appium.log 中：

appium -g /tmp/appium.log

關(guān)鍵日志分析

下面我們對 /tmp/appium.log 文件中的關(guān)鍵日志進(jìn)行詳細(xì)的分析。首先找到 Context 切換的日志，發(fā)現(xiàn) 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 進(jìn)程，進(jìn)程號分別是 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 的進(jìn)程信息。

[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 列出通過進(jìn)程查找到的所有 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，由于我們沒有設(shè)置 ChromeDriver 的端口，所以 Appium Server 默認(rèn)啟用 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 這個進(jìn)程，清理 adb 映射端口數(shù)據(jù)，如下：

[debug] [Chromedriver] Killing any old chromedrivers, running: \?

pkill -15 -f "/usr/local/lib/node_modules/appium/node_modules/\

_appium-chromedriver@3.1.3@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 服務(wù)，建立起 Appium Server 與 ChromeDriver 之間的通訊。

[Chromedriver] Spawning chromedriver with: /usr/local/lib/\ node_modules/appium/node_modules/_appium-chromedriver@3.1.3@\ 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 打印啟動日志，開始傳輸參數(shù)。

[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 命令列出手機(jī)的進(jìn)程列表，從中查找 WebView。

[Chromedriver] [STDERR] [0.349][DEBUG]: \

Sending adb command: \?

host:transport:192.168.56.101:5555|shell:ps && ps -A

通過進(jìn)程列表獲取 WebView 的進(jìn)程號，Appium 根據(jù)這些信息操作 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，其中的文本內(nèi)容會變成 content-desc（Android 6.0）或者 text（Android 9.0）。
打開雪球 APP，下面命令可以查看 Android 系統(tǒng)內(nèi)的 WebView 進(jìn)程：

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)是對網(wǎng)絡(luò)中不同主機(jī)上的應(yīng)用進(jìn)程之間進(jìn)行雙向通信的端點的抽象。
下面命令查看這個進(jìn)程對應(yīng)的應(yīng)用：

Hogwarts $ adb shell ps |grep 1758 u0_a67 ? ? ? ?1758 ? 211 1600592 333680 futex_wait_queue_me f016fbb9 S com.xueqiu.android

查看到是雪球 APP 的 WebView 進(jìn)程。測試時，Appium Server 就利用這個端口實現(xiàn)與 WebView 的通訊。

Context切換

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

adb forward tcp:$port localabstract:webview_devtools_remote_$pid

例如：使用本地 7777 端口

Hogwarts $ adb forward tcp:7777 localabstract:webview_devtools_remote_1758

可以發(fā)送 http 請求實現(xiàn)相關(guān)操作，下面獲取 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 協(xié)議是遠(yuǎn)程調(diào)試協(xié)議（https://chromedevtools.github.io/devtools-protocol/）
http://127.0.0.1:7777/json/list?可以直接獲取 devtoolsFrontendUrl 查看調(diào)試的遠(yuǎn)程重定向的頁面詳細(xì)信息。

[ ? ?{ ? ? ? ?"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的調(diào)試頁面 chrome://inspect/#devices，就可以獲取到頁面元素信息，從而完成對元素的定位。