如何在Selenium WebDriver中选择role为combobox的div内元素？

问题背景 #

对应HTML结构：

<td class="v-formlayout-contentcell">
    <div role="combobox" class="v-filterselect v-widget v-required v-filterselect-required v-has-width v-filterselect-prompt" id="envRegulations" style="width: 255px;">
        <input type="text" class="v-filterselect-input" autocomplete="off" id="gwt-uid-366" aria-labelledby="gwt-uid-365" aria-required="true" style="width: 100%;" tabindex="0" dir="">
        <div class="v-filterselect-button" aria-hidden="true" role="button"></div>
    </div>
</td>
<div class="v-filterselect-button" aria-hidden="true" role="button"></div>

该组件为Vaadin的v-filterselect下拉框，包含"Yes"和"No"两个选项。尝试直接操作父div（id="envRegulations"）输入内容时，抛出ElementNotInteractableException报错，且内部input的id为动态值无法直接使用。

解决方案 #

方法一：定位内部input元素直接输入 #

父div的id是固定的，可通过父元素定位到内部的input标签（真正接收输入的元素），同时等待元素可交互：

// 等待内部input元素可点击/交互
WebElement inputElement = wait.until(ExpectedConditions.elementToBeClickable(
    By.cssSelector("#envRegulations input.v-filterselect-input")
));
// 清空输入框（可选，避免原有内容干扰）
inputElement.clear();
// 输入目标选项并回车确认
inputElement.sendKeys("YES");
inputElement.sendKeys(Keys.ENTER);

方法二：点击下拉按钮选择选项 #

通过点击下拉按钮展开选项列表，再点击对应选项：

// 点击下拉按钮展开选项
WebElement dropdownButton = wait.until(ExpectedConditions.elementToBeClickable(
    By.cssSelector("#envRegulations .v-filterselect-button")
));
dropdownButton.click();

// 等待下拉选项加载完成并点击"Yes"（需根据实际DOM调整选项选择器）
WebElement yesOption = wait.until(ExpectedConditions.elementToBeClickable(
    By.xpath("//div[contains(@class, 'v-filterselect-option') and normalize-space(text())='YES']")
));
yesOption.click();

关键注意事项 #

• 等待元素状态正确：必须使用elementToBeClickable而非presenceOfElementLocated，确保元素已加载完成且可交互。
• 定位正确的交互元素：父div仅作为容器，真正可输入/点击的是内部的input或下拉按钮，直接操作父容器会触发不可交互报错。
• 适配选项DOM结构：下拉选项的类名或路径可能因Vaadin版本不同略有差异，需通过浏览器开发者工具确认实际元素选择器。

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