Ionic+Cordova混合应用ion-input的ID在Appium Inspector不显示问题

问题成因 #

• Ionic的ion-input是经过封装的自定义Web组件，直接在<ion-input>标签上添加的id属性只会挂载到外层的自定义标签容器节点上，不会自动传递到组件内部真实可交互的原生<input>/<textarea>元素上
• Appium定位输入操作时默认识别的是内部原生输入节点，而非外层的ion-input容器，自然无法查询到外层添加的id
• ion-button等按钮类组件封装层级简单，添加的id会直接挂载到可交互的按钮节点上，因此可以被Appium正常识别

解决方案 #

方法1：使用Ionic官方提供的input-id属性（最推荐） #

Ionic为ion-input预留了input-id专用属性，用于将id直接绑定到内部原生输入元素，代码示例：

<!-- 错误写法：id仅挂载到外层ion-input容器 -->
<ion-input id="accountInput" placeholder="请输入账号"></ion-input>

<!-- 正确写法：通过input-id将id绑定到内部输入框 -->
<ion-input input-id="accountInput" placeholder="请输入账号"></ion-input>

设置完成后直接在Appium中查询对应id的元素即可正常识别。

方法2：添加accessibilityId辅助定位 #

如果需要同时保留外层ion-input的id用于业务逻辑，可以额外添加content-desc属性作为辅助定位标识，代码示例：

<ion-input id="accountInput" attr.content-desc="accountInput" placeholder="请输入账号"></ion-input>

后续在Appium中使用accessibility id定位对应元素即可。

方法3：组合选择器定位 #

如果处于Web上下文测试，可以通过CSS组合选择器关联外层id和内部输入元素，定位写法示例：

#accountInput > input

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