Java+Selenium环境下JS设置输入框值后自动消失的解决方法咨询

这种情况大多是因为前端框架（比如React、Vue、Angular）的双向绑定机制导致的——直接通过JS修改value属性只是改变了DOM的显示值，但没有触发框架监听的输入事件，框架的数据模型没更新，后续渲染时就会把DOM值重置成模型里的初始值。以下是几种可行的解决办法：

方法1：设置值后触发输入/变更事件 #

给输入框设置值后，手动触发input或change事件，让前端框架感知到值的变化，同步更新数据模型。

WebDriverWait wait = new WebDriverWait(DriverManager.getDriver(), Duration.ofSeconds(10));
WebElement field = wait.until(ExpectedConditions.elementToBeClickable(By.id("spocData[0].spocDetails.email")));

JavascriptExecutor js = (JavascriptExecutor) DriverManager.getDriver();
js.executeScript("arguments[0].scrollIntoView(true);", field);
// 设置值后触发input事件（bubbles: true确保事件能向上冒泡被框架捕获）
js.executeScript("arguments[0].value='test346@gmail.com'; arguments[0].dispatchEvent(new Event('input', { bubbles: true }));", field);

如果input事件无效，可以尝试换成change事件，或者同时触发两个：

js.executeScript("arguments[0].value='test346@gmail.com'; arguments[0].dispatchEvent(new Event('input', { bubbles: true })); arguments[0].dispatchEvent(new Event('change', { bubbles: true }));", field);

方法2：严格模拟真实用户输入流程 #

放弃JS赋值，重新优化sendKeys的操作逻辑，确保完全模拟用户点击、清除、输入的步骤：

WebDriverWait wait = new WebDriverWait(DriverManager.getDriver(), Duration.ofSeconds(10));
WebElement field = wait.until(ExpectedConditions.elementToBeClickable(By.id("spocData[0].spocDetails.email")));

// 先点击激活输入框，确保获得焦点
field.click();
// 清除输入框原有内容（避免叠加输入）
field.clear();
// 输入目标值
field.sendKeys("test346@gmail.com");
// 等待值确实被设置到输入框的value属性中
wait.until(ExpectedConditions.attributeContains(field, "value", "test346@gmail.com"));

如果点击后还是无法激活，可以用JS强制聚焦：

js.executeScript("arguments[0].focus();", field);

方法3：等待页面完全稳定后再操作 #

如果页面存在异步加载、防抖节流逻辑，可能会覆盖你设置的值。可以先等待页面加载完成、AJAX请求结束后再执行操作：

// 等待页面DOM加载完成
wait.until(driver -> ((JavascriptExecutor) driver).executeScript("return document.readyState").equals("complete"));

// 可选：等待所有AJAX请求结束（需要页面使用jQuery的情况）
wait.until(driver -> (Boolean) ((JavascriptExecutor) driver).executeScript("return jQuery.active == 0"));

// 再执行赋值操作
WebElement field = wait.until(ExpectedConditions.elementToBeClickable(By.id("spocData[0].spocDetails.email")));
// ... 后续赋值逻辑

方法4：排查浏览器自动填充干扰 #

浏览器的自动填充功能可能会覆盖你设置的值，可以在启动浏览器时禁用自动填充：

ChromeOptions options = new ChromeOptions();
// 禁用自动填充
options.addArguments("--disable-autofill");
// 禁用扩展避免干扰
options.addArguments("--disable-extensions");
// 初始化驱动时传入配置
DriverManager.setDriver(new ChromeDriver(options));

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