使用TypeScript在Playwright中无法填充日期组合框问题求助

问题分析 #

你遇到的情况是自定义日期组合框（由日、月、年三个子输入框组成）无法通过fill()方法填充，使用键盘全选输入的方式时断时续，原因通常是：

• 自定义组件拦截了原生fill()方法的执行逻辑
• 键盘全选操作未完全生效就开始输入，被组件的防抖/校验逻辑截断
• 组件依赖特定的事件（如input/change）来更新状态

解决方案 #

1. 分别定位子输入框单独填充（最可靠） #

从HTML结构来看，日期组件拆分为三个独立的输入框，直接定位每个输入框填充对应值：

// 填充日
await this.page.locator('input[aria-label="Dag"]').fill('17');
// 填充月
await this.page.locator('input[aria-label="Måned"]').fill('09');
// 填充年
await this.page.locator('input[aria-label="År"]').fill('2026');

2. 直接修改DOM值并触发事件 #

绕过UI交互，直接设置输入框的value属性，同时触发组件需要的事件：

await this.courseStartDate.evaluate(el => {
  el.value = '17.09.2026';
  // 触发input事件通知组件更新
  el.dispatchEvent(new Event('input', { bubbles: true }));
  // 触发change事件确保组件保存值
  el.dispatchEvent(new Event('change', { bubbles: true }));
});

3. 优化键盘输入逻辑 #

如果必须使用键盘输入，用更可靠的全选方式并增加输入延迟：

await this.courseStartDate.focus();
// 使用原生selectText方法替代Ctrl+A，兼容性更好
await this.courseStartDate.selectText();
// 增加输入延迟，模拟真实用户输入节奏
await this.page.keyboard.type('17.09.2026', { delay: 80 });

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