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

本文介绍了如何在iOS真机上进行Webview调试,包括使用ios-webkit-debug-proxy、Safari远程调试、RemoteDebug iOS WebKit Adapter等方法,并详细阐述了appium自动化测试中的Webview调试配置。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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

  • 原理:

    1. 原理(http://blog.youkuaiyun.com/whackw/article/details/45207551):
    2. 首先了解远程调试协议:
      1. Chrome DevTools是一个调试工具,被集成在chrome浏览器(但是是一个独立的web应用程序);
      2. 通过远程调试协议(浏览器内核起了一个WebSocket服务),将DevTools和浏览器内核建立连接进行数据交互
    3. ios-webkit-debug-proxy扮演的角色:
      • 因为无法通过tcp和真机直接联系,所以无法直接采用 remote debugger方式进行调试,所以必须要借助ios-webkit-debug-proxy来进行代理桥接
      • 结构图如下:
      • *
  • 模拟器:
    没使用过,暂时

### 关于Appium自动化测试脚本 #### 创建基本的Appium测试项目结构 为了创建一个有效的Appium自动化测试环境,通常需要设置如下文件夹和文件: - `tests` 文件夹用于存储所有的测试用例。 - `pages` 文件夹用来定义页面对象模式中的各个页面类。 - `config.js` 配置文件保存着不同平台(如Android或iOS)上的配置参数。 #### 初始化WebdriverIO与Appium连接 在Node.js环境中安装必要的依赖包之后,在JavaScript中初始化WDIO客户端并建立到Appium服务器的链接可以这样操作[^3]: ```javascript const { remote } = require('webdriverio'); (async () => { const driver = await remote({ capabilities: { platformName: 'Android', app: '/path/to/app.apk' }, path: '/wd/hub', port: 4723, host: 'localhost' }); console.log('Session created'); // Your test code here await driver.deleteSession(); })(); ``` 这段代码展示了如何通过指定的能力(capabilities)来启动一个新的会话(session),其中包含了目标应用程序的位置以及其他必需的信息。一旦建立了这个会话,就可以开始执行各种UI交互动作了。 #### 编写简单的登录功能测试案例 下面给出了一段针对假设的应用程序——具有用户名输入框、密码输入框及提交按钮的一个简单登录界面——编写的测试逻辑[^1]: ```javascript await driver.$('~username').setValue('testUser'); await driver.$('~password').setValue('secretPassword'); await driver.$('~loginButton').click(); // Verify login was successful by checking for a welcome message element. const welcomeMessageElement = await $(~'welcomeText'); expect(await welcomeMessageElement.isDisplayed()).toBe(true); ``` 这里使用了XPath定位器(`~`)去查找特定控件,并对其进行了相应的操作,比如设置文本值(setValue)或是点击(click)。最后还验证了一个预期的结果,即成功登陆后的欢迎消息是否存在(isDisplayed)。 #### 处理WebView内的HTML元素 (Hybrid Apps) 对于包含web视图组件(Hybrid Apps)的情况,当涉及到H5网页部分时,则需切换上下文至对应的WebView以便能够访问这些DOM节点 : ```javascript let contexts = await driver.getContexts(); await driver.switchContext(contexts[contexts.length - 1]); // Switch to the last context which is usually webview. // Now you can interact with HTML elements using standard WebDriver commands. await $('input[name="email"]').setValue('example@example.com'); await $('button[type="submit"]').click(); await driver.switchContext('NATIVE_APP'); // Don't forget to switch back after done interacting with WebView content. ``` 此片段说明了怎样获取当前可用的所有上下文列表(getContexts), 并选择最后一个作为要切换的目标(switchTo.context). 这样就能按照常规的方式处理任何存在于该WebView内部的标准HTML标签了。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值