Ionic 2自动化测试：如何用Appium+Webdriver.io设置DatePicker值？

我来帮你搞定这个日期选择器的自动化测试难题！你遇到的问题根源在于Ionic的ion-datetime不是普通的可编辑输入框，它是一个封装好的自定义组件，点击后会唤起系统原生的日期选择器（iOS是UIDatePicker，Android是DatePickerDialog），所以直接用setValue操作这个组件元素肯定会报错——因为它本身就不是用户可直接编辑的文本输入框。

下面给你分平台和场景提供具体的解决方案：

核心思路 #

先点击ion-datetime组件唤起原生日期选择器，再针对不同平台的原生控件进行操作，最后点击完成按钮确认选择。

步骤1：唤起日期选择器 #

不管是iOS还是Android，第一步都是先点击组件弹出选择器：

// 等待组件加载完成，再点击
client.waitForExist('//*[@id="d.fromDt"]', 5000);
client.click('//*[@id="d.fromDt"]');

针对iOS平台的操作 #

iOS的原生日期选择器是XCUIElementTypePickerWheel类型的滚轮控件，我们可以直接定位每个滚轮并设置值：

// 等待原生选择器出现
client.waitForExist('XCUIElementTypePicker', 5000);

// 对应你的pickerFormat "MMM DD YYYY"，三个滚轮分别是月份、日期、年份
client.setValue('XCUIElementTypePickerWheel[0]', 'May'); // 设置月份
client.setValue('XCUIElementTypePickerWheel[1]', '22'); // 设置日期
client.setValue('XCUIElementTypePickerWheel[2]', '2018'); // 设置年份

// 点击你定义的doneText按钮"ok"
client.click('~ok');

针对Android平台的操作 #

Android的日期选择器是原生对话框，推荐用Appium提供的mobile: setValue命令直接设置日期，比手动操作滚轮更高效：

// 等待原生日期选择器加载
client.waitForExist('android.widget.DatePicker', 5000);

// 获取日期选择器元素
const datePicker = client.element('android.widget.DatePicker');

// 使用mobile命令直接设置日期，格式为yyyy-MM-dd
client.execute('mobile: setValue', {
  elementId: datePicker.value.ELEMENT,
  value: '2018-05-22'
});

// 点击对话框的确定按钮（如果你的doneText是"ok"，也可以用text定位：client.click('//*[@text="ok"]')）
client.click('android:id/button1');

如果上述命令不生效，也可以手动操作滚轮控件：

// 调整年份到2018
client.click('android.widget.NumberPicker[0]'); // 第一个滚轮是年份
client.sendKeys('2018');

// 调整月份到5月（注意Android月份是从0开始还是1开始，根据实际情况调整）
client.click('android.widget.NumberPicker[1]');
client.sendKeys('5');

// 调整日期到22号
client.click('android.widget.NumberPicker[2]');
client.sendKeys('22');

// 点击确定
client.click('android:id/button1');

进阶方案：直接修改Angular绑定值（不依赖原生控件） #

如果你不想依赖系统原生选择器，也可以通过执行Angular内部代码直接修改ngModel绑定的fromDate值：

client.execute(() => {
  // 获取组件元素
  const dateElement = document.getElementById('d.fromDt');
  // 获取Ionic DateTime组件的Angular控制器实例
  const datetimeCtrl = angular.element(dateElement).controller('ionDatetime');
  // 设置日期值
  datetimeCtrl.fromDate = new Date('2018-05-22');
  // 触发Angular变更检测，更新视图
  datetimeCtrl.$apply();
});

⚠️ 注意：这种方法需要你的测试环境能访问Angular的全局变量，可能需要在Ionic应用中开启调试模式（比如禁用生产模式）。

内容的提问来源于stack exchange，提问作者gaurang