如何使用Playwright在带有readonly属性的日历控件中选择日期

带readonly属性的日期输入框默认禁止用户直接输入，Playwright原生的fill方法走模拟用户输入逻辑，因此会触发限制导致填入失效，处理逻辑和你之前用Protractor处理同类控件的思路基本一致，你可以根据场景选择以下方案实现操作：

• 方案1：移除readonly属性后填入（通用性最高，适配绝大多数场景）

// 定位目标日期输入框，选择器可根据实际业务调整
const dateInput = page.locator('#date-picker')
// 移除元素的readonly属性
await dateInput.evaluate(dom => dom.removeAttribute('readonly'))
// 按控件要求的格式填入目标日期
await dateInput.fill('2024-06-15')
// 若控件需要失焦才触发值变更校验，可主动触发失焦事件
await dateInput.blur()

• 方案2：模拟真实用户点击选择（完全贴合真实操作路径，不会绕过控件原生校验）

// 点击输入框唤起日历选择弹窗
await page.locator('#date-picker').click()
// 按控件结构选择目标年、月，选择器需匹配你所使用的日历控件结构
await page.locator('.year-select').selectOption('2024')
await page.locator('.month-select').selectOption('6')
// 点击对应日期完成选择
await page.locator('.calendar-cell:has-text("15")').click()

• 方案3：直接赋值并手动触发变更事件（适配属性修改后fill仍不生效的强限制场景）

const dateInput = page.locator('#date-picker')
await dateInput.evaluate(dom => {
  // 直接给DOM赋值
  dom.value = '2024-06-15'
  // 手动触发input、change事件，通知控件值已变更
  dom.dispatchEvent(new Event('input', { bubbles: true }))
  dom.dispatchEvent(new Event('change', { bubbles: true }))
})

注意：所有方案中使用的日期格式必须和目标控件要求的格式完全匹配，例如部分控件要求MM/DD/YYYY格式，格式错误会导致操作失效。

内容的提问来源于stack exchange，提问作者Malik Saqib Awan