Appium中開啟iOS webview調試進行h5自動化測試

在做iOS的h5頁面的時候，肯定會需要去做webview調試來進行代碼調試，而iOS webview調試需要區分真機和模擬器，因為具體的實現原理不一樣的，模擬器使用 remote debugger，可以直接通過safari遠程調試，而真機使用 ios-webkit-debugger-proxy去遠程調試的。
下面具體聊下真機的webview調試的基本原理和實踐。
注意，測試包必須要使用develop證書打包，才可以進行真機調試。

• 原理：

1. 原理（http://blog.csdn.net/whackw/article/details/45207551）：
   1. 首先了解遠程調試協議：
      1. Chrome DevTools是一個調試工具，被集成在chrome瀏覽器（但是是一個獨立的web應用程序）；
      2. 通過遠程調試協議（瀏覽器內核起了一個WebSocket服務），將DevTools和瀏覽器內核建立連接進行數據交互
   2. ios-webkit-debug-proxy扮演的角色：
      • 因為無法通過tcp和真機直接聯系，所以無法直接采用 remote debugger方式進行調試，所以必須要借助ios-webkit-debug-proxy來進行代理橋接

      • 結構圖如下：

      • 

• 模擬器：
  沒使用過，暫時略過此部分；

• 真機：
  幾種調試方式，開啟調試必須先設置開啟web-inspector，打開設備設置-Safari-高級-web檢查器並開啟：

  1. 使用ios-webkit-debug-proxy（https://github.com/google/ios-webkit-debug-proxy）：
     1. 實踐：如果在ios真機的webview頁面執行appium自動化，需要做以下准備：
        1. 安裝 ios_webkit_debug_proxy，在執行webview自動化時必須啟動該服務
           1. brew install ios-webkit-debug-proxy
        2. 運行ios-webkit-debug-proxy
           1. 官方提供的命令：ios_webkit_debug_proxy -c UUID:27753 -d
           2. 使用chrome dev-tools調試
              1. 運行命令ios_webkit_debug_proxy -f chrome-devtools://devtools/bundled/inspector.html
              2. 根據日志提示，獲得端口並打開頁面對應端口頁面，如localhost:9221
              3. 點擊設備提示拷貝鏈接到地址欄即可訪問；
              4. 原理：
           3. 使用safari調試
              1. 打開mac上的safari瀏覽器開發者模式
              2. 打開設備上的webview頁面
              3. 點擊safari瀏覽器菜單中的開發-device，選擇進程；
           4. 問題：若啟動報錯“Could not connect to lockdownd. Exiting.: Operation now in progress ”，執行以下命令更新解決：
              1. brew update
              2. brew reinstall --HEAD libimobiledevice
              3. brew reinstall -s ios-webkit-debug-proxy
  2. 使用RemoteDebug iOS WebKit Adapter（https://github.com/RemoteDebug/remotedebug-ios-webkit-adapter ），該工具可以是你像調試android webview一樣調試ios webview頁面，非常方便；
     1. 安裝依賴：
        • brew update
        • brew unlink libimobiledevice ios-webkit-debug-proxy
        • brew uninstall --force libimobiledevice ios-webkit-debug-proxy
        • brew install --HEAD libimobiledevice
        • brew install --HEAD ios-webkit-debug-proxy2.
     2. 安裝最新的adapter：
        • npm install remotedebug-ios-webkit-adapter -g
     3. 連接Mac，並讓設備信任該mac；
     4. 啟動adpter：
        • remotedebug_ios_webkit_adapter --port=9000
     5. 打開chrome瀏覽器，輸入chrome://inspect;
        1. 配置“ Discover network targets”，添加localhost:9000
        2. 可以看到設備列表里有ios設備
  3. 直接在瀏覽器對h5調試，將h5地址輸入MAC端瀏覽器，加入UA模擬設備訪問
  4. 直接在設備safari中國對h5調試，將地址輸入到設備的safari瀏覽器中，然后使用mac的safari調試

• appium中使用：
  在appium中使用ios-webkit-debug-proxy ：

1. 直接在capabilities中新增參數如下：

   capabilities.setCapability("startIWDP", true); 

   iwdp指的就是 ios_webkit_debug_proxy

2. 第二種方式就是直接手動啟動ios-webkit-debug-proxy，然后再執行自動化，注意此時需要制定端口27753(appium默認iwdp端口為這個)以及設備ID，即

   ios-webkit-debug-proxy -u uuid:port
   

 

作者：九歌1992
鏈接：https://www.jianshu.com/p/5d05a3ed21ab
來源：簡書
簡書著作權歸作者所有，任何形式的轉載都請聯系作者獲得授權並注明出處。