如何在Selenium WebDriver中定位含input和button的div内输入元素？

问题场景 #

目标HTML结构：

<div class="v-datefield v-datefield-popupcalendar v-widget webdp-ui-datefield v-datefield-webdp-ui-datefield v-required v-datefield-required v-has-width v-datefield-year" id="buildingYear" style="width: 255px;">
    <input type="text" class="v-textfield v-datefield-textfield" autocomplete="off" aria-describedby="gwt-uid-357" aria-controls="gwt-uid-358" id="gwt-uid-386" aria-labelledby="gwt-uid-385" aria-required="true" tabindex="0">
    <button type="button" class="v-datefield-button" tabindex="-1" role="button" aria-hidden="true" aria-controls="gwt-uid-358" aria-disabled="false"></button>
</div>

尝试用CSS选择器定位输入框并输入，代码如下：

WebElement buildingYear = wait.until(ExpectedConditions.
          presenceOfElementLocated(By.cssSelector("#buildingYear input")));
buildingYear.sendKeys("2024");

报错：Exception in thread "main" org.openqa.selenium.ElementNotInteractableException: element not interactable

使用动态ID的XPath可以成功，但ID（gwt-uid-386）会变化，无法稳定定位：

WebElement buildingYear = wait.until(ExpectedConditions.
          presenceOfElementLocated(By.xpath("//input[@id='gwt-uid-386']"))); //works
buildingYear.sendKeys("2024");

原因分析 #

1. presenceOfElementLocated仅确保元素存在于DOM中，但不保证元素可见、可交互，此时元素可能还在渲染、被遮挡或处于不可用状态。
2. GWT框架生成的组件可能有特殊交互逻辑，输入框可能默认处于不可直接交互的状态，需等待元素完全就绪。

解决方案 #

方案1：使用精确选择器+等待元素可交互 #

改用elementToBeClickable等待条件，同时用更精确的CSS选择器（结合输入框的类名），确保定位到正确且可交互的元素：

WebElement buildingYear = wait.until(ExpectedConditions.elementToBeClickable(
    By.cssSelector("#buildingYear input.v-datefield-textfield")
));
buildingYear.sendKeys("2024");

方案2：基于父元素静态类定位（若父ID也可能变化） #

如果buildingYear这个ID也存在变动风险，可以利用父元素的静态类v-datefield-year结合输入框类定位：

WebElement buildingYear = wait.until(ExpectedConditions.elementToBeClickable(
    By.cssSelector("div.v-datefield-year input.v-datefield-textfield")
));
buildingYear.sendKeys("2024");

方案3：通过JavaScript直接设置值（绕过交互限制） #

如果输入框始终存在交互障碍，可通过JavaScript直接修改输入框的值：

WebElement buildingYear = wait.until(ExpectedConditions.presenceOfElementLocated(
    By.cssSelector("#buildingYear input")
));
JavascriptExecutor js = (JavascriptExecutor) driver;
js.executeScript("arguments[0].value='2024';", buildingYear);

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