使用Puppeteer模拟输入date类型输入框时行为异常的问题求助

遇到原生<input type="date" />控件的操作问题很常见，这类浏览器内置控件有着特殊的交互逻辑，和普通文本输入框不一样，我来帮你拆解问题并给出可行方案：

最可靠的解决方案：直接设置控件的value属性 #

原生date控件的value属性遵循ISO格式（YYYY-MM-DD），直接修改这个属性是最稳妥的方式，完全绕开焦点和键盘模拟的坑，代码示例：

// 直接通过DOM操作设置日期
await page.$eval('input[type="date"]', el => el.value = '2024-05-20');

如果需要触发change等事件，可以在设置value后手动派发：

await page.$eval('input[type="date"]', el => {
  el.value = '2024-05-20';
  el.dispatchEvent(new Event('change'));
});

你的问题背后的原因 #

你遇到的各种奇怪现象，本质上都是原生date控件的特殊交互逻辑导致的：

• page.keyboard.type(selector, value)无效：这个方法的用法有误，page.keyboard.type()的参数是要输入的文本，不是选择器。正确的流程应该是先聚焦元素，再调用该方法，但即使这样，date控件的内部处理也会让键盘输入变得不可控。
• elementHandle.type(value)输入混乱：原生date控件会自动处理输入的数字，比如输入到一定长度后自动跳转焦点到年/月/日的下一部分，Puppeteer的连续输入速度和人工操作不同，控件的自动跳转逻辑会和输入节奏冲突，导致值混乱。
• 焦点选中部分和人工不同：不同浏览器对date控件的默认焦点顺序实现有差异，Puppeteer模拟Tab键聚焦的行为和真实用户点击聚焦的逻辑不一致，这是控件本身的特性，不是Puppeteer的bug。
• 无法获取选中的日期部分：原生date控件的内部输入区域属于Shadow DOM，普通的document.getSelection()无法访问Shadow DOM内的内容，所以返回空值。

若需模拟键盘输入（特殊场景） #

如果你的场景必须模拟真实键盘输入（比如需要触发特定的用户交互事件），可以试试先清空现有值，再连续输入日期字符串：

const dateInput = await page.$('input[type="date"]');
await dateInput.focus();

// 先选中并清空现有值（Mac用Meta，Windows用Control）
await page.keyboard.press('Meta+A');
await page.keyboard.press('Delete');

// 输入连续的日期数字，控件会自动格式化为YYYY-MM-DD
await page.keyboard.type('20240520');

不过这个方法依然可能受浏览器控件行为的影响，不如直接设置value属性稳定。

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