Selenium中如何用JS脚本处理带动态脚本的列表控件输入与选中？

问题分析 #

这个位置控件属于自动完成（Typeahead）控件，依赖前端动态脚本触发下拉选项，直接修改DOM属性或操作非输入元素无法触发控件的交互逻辑，导致输入无效。

可行解决方案 #

核心思路：定位正确的输入控件，触发输入事件并等待下拉选项加载完成后再选择。

完整代码示例 #

import org.openqa.selenium.By;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.support.ui.ExpectedConditions;
import org.openqa.selenium.support.ui.WebDriverWait;
import java.time.Duration;

// 初始化显式等待，超时时间设为10秒
WebDriverWait wait = new WebDriverWait(driver, Duration.ofSeconds(10));

// 等待位置输入框可点击（定位实际接收输入的tt-input元素）
WebElement locationInput = wait.until(ExpectedConditions.elementToBeClickable(By.cssSelector("input.tt-input")));

// 清空输入框（避免残留内容干扰）
locationInput.clear();

// 输入城市名"Ottawa"
locationInput.sendKeys("Ottawa");

// 等待下拉选项中的"Ottawa, ON"可见
WebElement targetOption = wait.until(ExpectedConditions.visibilityOfElementLocated(
    By.xpath("//div[@class='tt-suggestion' and contains(text(), 'Ottawa, ON')]")
));

// 点击选中目标选项
targetOption.click();

为什么之前的方法无效？ #

• 第一种方法操作tt-hint元素：该元素是只读的提示文本容器，不接收用户输入，所以sendKeys不会生效；即使切换到tt-input，直接加Keys.ENTER会在下拉选项未加载完成时触发，导致无法匹配到目标选项。
• 第二种方法用JS修改value属性：仅修改了DOM的属性值，但没有触发控件需要的input或change事件，前端动态脚本无法感知输入，因此不会生成下拉选项。

备选方案：用Actions模拟完整交互流程 #

如果直接sendKeys仍有问题，可以用Actions类模拟鼠标点击输入框再输入的完整操作：

import org.openqa.selenium.interactions.Actions;

Actions actions = new Actions(driver);
actions.moveToElement(locationInput)
       .click()
       .sendKeys("Ottawa")
       .build()
       .perform();

// 后续等待选项并点击的步骤同上

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