如何用Selenium Java设置HTML日期输入框？提交后日期重置求解

问题场景 #

使用Selenium Java操作Chrome浏览器时，设置type="date"的输入框日期后，表单提交时该字段会被重置，同时出现验证提示。相关元素及尝试过的方法如下：

输入框元素 #

<input class="date_range_input" type="date" placeholder="Select Date" name="SelectDateFrom" min="2023-09-14" max="2023-09-20" value="">

初始化代码 #

Driver driver = new ChromeDriver();
JavascriptExecutor javascriptExecutor = (JavascriptExecutor) driver;

已尝试的无效方案 #

• JS设置属性：仅修改DOM的value属性，但未触发页面验证所需事件

  javascriptExecutor.executeScript("document.querySelector(\"input[name='SelectDateFrom']\").setAttribute('value', '2023-09-20');");
  

• sendKeys方法：存在语法错误（sendKey应为sendKeys），且未确保事件触发

  WebElement fromDateInput = driver.findElement(By.cssSelector("input[name='SelectDateFrom']"));
  fromDateInput.sendKey("2023-09-20");
  fromDateInput.click();
  

问题原因 #

1. 直接用JS修改value属性仅更新了DOM静态值，未触发change、input等前端依赖的事件，导致表单验证逻辑认为字段未被正确填写。
2. 原sendKeys写法存在语法错误，且未确保输入后触发页面的字段状态更新。

正确解决方案 #

方案1：修正sendKeys并触发事件 #

确保输入格式正确（YYYY-MM-DD），清除原有值后输入，再通过切换焦点触发验证事件：

WebElement fromDateInput = driver.findElement(By.cssSelector("input[name='SelectDateFrom']"));
// 清除输入框默认值（若有）
fromDateInput.clear();
// 正确调用sendKeys方法（注意复数形式）
fromDateInput.sendKeys("2023-09-20");
// 切换焦点触发change事件，让页面识别值已更新
fromDateInput.sendKeys(Keys.TAB);

方案2：JS设置值并手动触发事件 #

通过JS设置值后，主动分发change事件，触发页面的验证逻辑：

javascriptExecutor.executeScript("const input = document.querySelector('input[name=\"SelectDateFrom\"]'); input.value = '2023-09-20'; input.dispatchEvent(new Event('change'));");

额外注意事项 #

• type="date"输入框仅接受YYYY-MM-DD格式的字符串，必须严格符合格式要求。
• 部分页面可能依赖input事件而非change，可将代码中的change替换为input尝试。

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