Selenium中使用JavaScriptExecutor选择日历日期失败求助

我完全懂你现在的困惑——明明用JavaScriptExecutor修改了日期输入框的value属性，页面上却看不到日期被选中，控制台也没报错，完全摸不着头脑对吧？这其实是因为像MakeMyTrip这类网站的日历组件有自己的交互逻辑，单纯改DOM属性根本触发不了它的内部状态更新。

问题根源分析 #

从你提供的HTML代码能看到，这个日期输入框是**只读（readonly）**状态：

<input data-cy="departure" id="departure" type="text" class="fsw_inputField font20" readonly="" value="Friday, 19 Jun 2020">

这类只读输入框的日期选择，本质上不是直接修改输入框的值，而是依赖于点击打开日历弹窗、选择对应日期元素的交互流程。你用JS修改value只是改动了DOM的属性，但没有触发页面日历组件的内部事件（比如状态更新、UI渲染事件），所以页面不会有任何变化，甚至后续提交表单时，网站也可能不认可这个强行修改的值。

正确解决方案：模拟真实用户操作流程 #

我们需要模拟用户的真实操作：点击输入框打开日历弹窗，再定位到目标日期元素并点击。下面是修改后的完整代码：

package SeleniumSessions;
import java.util.concurrent.TimeUnit;
import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.support.ui.ExpectedConditions;
import org.openqa.selenium.support.ui.WebDriverWait;

public class SelectCalendarByJS {
    public static void main(String[] args) {
        System.setProperty("webdriver.chrome.driver","F:\\Drivers\\chromedriver_win32\\chromedriver.exe");
        WebDriver driver = new ChromeDriver();
        driver.manage().window().maximize();
        driver.manage().deleteAllCookies();
        driver.manage().timeouts().pageLoadTimeout(40, TimeUnit.SECONDS);
        driver.get("https://www.makemytrip.com/");

        // 点击出发日期输入框，唤起日历弹窗
        WebElement dateInput = driver.findElement(By.id("departure"));
        dateInput.click();

        // 等待日历弹窗加载完成，定位目标日期元素（这里以日期"19"为例，XPath需根据实际页面调整）
        WebDriverWait wait = new WebDriverWait(driver, 10);
        WebElement targetDate = wait.until(ExpectedConditions.elementToBeClickable(
            By.xpath("//div[contains(@class, 'DayPicker-Day') and text()='19']")
        ));
        targetDate.click();

        // 验证选中的日期是否正确
        String selectedDate = dateInput.getAttribute("value");
        System.out.println("成功选中的日期：" + selectedDate);

        // driver.quit();
    }
}

额外注意事项 #

• 如果目标日期不在当前显示的月份，你需要额外添加点击月份切换按钮的逻辑，切换到对应的月份（比如2020年6月）后再选择日期。
• 现代前端框架（如React、Vue）普遍采用数据状态与DOM分离的设计，直接修改DOM属性不会同步到组件的内部状态，必须通过触发组件的原生交互事件（点击、输入等）才能正常更新UI和数据。
• 尽量避免直接修改readonly输入框的value，这类输入框的设计初衷就是禁止手动输入，强行修改可能导致后续流程出现异常。

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