在JavaScript Selenium中无法向ion-datetime字段通过sendKeys传入日期

你遇到的element not interactable错误很典型——因为Ionic的<ion-datetime>是封装后的自定义Web组件，不是原生的input控件，直接调用sendKeys()操作它的外层元素自然会失败。下面给你几个靠谱的解决思路：

方法一：直接通过JS设置组件值（最稳定推荐） #

既然是Web Component，我们可以直接操作它的value属性，再触发必要的事件让组件更新状态，完全不需要模拟用户点击操作：

// 定位到ion-datetime元素
const dobElement = await driver.findElement(By.name('dob'));
// 通过JS直接设置日期值
await driver.executeScript('arguments[0].value = "2020-12-12";', dobElement);
// 触发input事件，确保组件内部状态同步
await driver.executeScript('arguments[0].dispatchEvent(new Event("input"));', dobElement);

这个方法不依赖UI渲染的结构，适配大多数Ionic版本，稳定性最高。

方法二：模拟用户操作打开选择器选择日期 #

如果你需要完全模拟真实用户的交互流程，可以先点击组件打开日期选择器，再选择对应日期：

// 点击ion-datetime打开选择器弹窗
await driver.findElement(By.name('dob')).click();

// 注意：以下选择器需要根据你实际的Ionic版本和DOM结构调整
// 选择年份2020
await driver.findElement(By.css('.picker-col[data-index="0"] .picker-item[data-value="2020"]')).click();
// 选择12月
await driver.findElement(By.css('.picker-col[data-index="1"] .picker-item[data-value="12"]')).click();
// 选择12日
await driver.findElement(By.css('.picker-col[data-index="2"] .picker-item[data-value="12"]')).click();

// 点击确认按钮完成选择
await driver.findElement(By.css('.picker-button.confirm')).click();

⚠️ 提示：不同Ionic版本的选择器结构可能有差异，建议用浏览器开发者工具查看实际渲染的DOM，调整选择器。

方法三：操作底层隐藏的原生input #

部分Ionic版本会在<ion-datetime>内部渲染一个隐藏的原生input，你可以尝试定位它并操作：

// 找到ion-datetime内部的原生input
const nativeInput = await driver.findElement(By.css('ion-datetime[name="dob"] input'));
// 如果元素被隐藏，先设置为可见（部分场景需要）
await driver.executeScript('arguments[0].style.display = "block";', nativeInput);
// 输入日期值
await nativeInput.sendKeys('2020-12-12');

这个方法兼容性稍差，因为不同版本的组件内部结构可能变化，但在某些场景下可以生效。

内容的提问来源于stack exchange，提问作者Mohamed Rafiq P