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
来源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。