Appium中开启iOS webview调试进行h5自动化测试

在做iOS的h5页面的时候，肯定会需要去做webview调试来进行代码调试，而iOS webview调试需要区分真机和模拟器，因为具体的实现原理不一样的，模拟器使用 remote debugger，可以直接通过safari远程调试，而真机使用 ios-webkit-debugger-proxy去远程调试的。
下面具体聊下真机的webview调试的基本原理和实践。
注意，测试包必须要使用develop证书打包，才可以进行真机调试。

原理：

原理（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调试
        
        运行命令ios_webkit_debug_proxy -f chrome-devtools://devtools/bundled/inspector.html
        
        根据日志提示，获得端口并打开页面对应端口页面，如localhost:9221
        
        点击设备提示拷贝链接到地址栏即可访问；
        
        原理：
      3. 使用safari调试
        
        打开mac上的safari浏览器开发者模式
        
        打开设备上的webview页面
        
        点击safari浏览器菜单中的开发-device，选择进程；
      4. 问题：若启动报错“Could not connect to lockdownd. Exiting.: Operation now in progress ”，执行以下命令更新解决：
        
        brew update
        
        brew reinstall --HEAD libimobiledevice
        
        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 ：

直接在capabilities中新增参数如下：
```
capabilities.setCapability("startIWDP", true);
```
iwdp指的就是 ios_webkit_debug_proxy
第二种方式就是直接手动启动ios-webkit-debug-proxy，然后再执行自动化，注意此时需要制定端口27753(appium默认iwdp端口为这个)以及设备ID，即
```
ios-webkit-debug-proxy -u uuid:port
```

作者：九歌1992
链接：https://www.jianshu.com/p/5d05a3ed21ab
来源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。