Python Selenium修改input值后页面UI不显示如何解决

• 核心错误1：属性名写错。文本类型<input>输入框控制显示值、提交值的标准属性是value，不存在名为text的标准控制属性。你执行setAttribute('text', '6')只是给元素新增了一个无意义的自定义属性，根本没有修改输入框的实际值。另外你后续读值用的是piece_element，和前面定位的quantity_element不是同一个变量，取到的"6"属于变量混淆导致的错误结果，不是目标输入框的真实值。
• 核心错误2：直接修改DOM属性不会触发前端框架的状态同步。现在绝大多数网站用React/Vue等框架开发，输入框的UI显示、表单状态是通过监听input/change等原生交互事件更新的，就算你改对了value属性，不手动触发这些事件，前端也不会感知到值变化，自然不会同步更新UI，甚至后续提交表单时还会上传旧值。

按优先级推荐两种实现方式：

1. 优先使用Selenium原生操作，完全模拟真实用户输入行为，会自动触发所有前端绑定的事件，兼容性最好：

from selenium.webdriver.common.by import By

quantity_element = driver.find_element(By.CSS_SELECTOR,'input[class*="js-order-amount"]')
# 先清空输入框原有值
quantity_element.clear()
# 输入目标数值
quantity_element.send_keys("6")

2. 如果页面有自定义输入拦截、原生send_keys失效，再用JS注入的方式修改，必须同时完成「修改正确的value属性」+「触发必要交互事件」两个步骤：

quantity_element = driver.find_element(By.CSS_SELECTOR,'input[class*="js-order-amount"]')
driver.execute_script("""
// 修改输入框实际value值
arguments[0].value = arguments[1];
// 冒泡触发input、change事件，通知前端框架值已更新
arguments[0].dispatchEvent(new Event('input', { bubbles: true }));
arguments[0].dispatchEvent(new Event('change', { bubbles: true }));
""", quantity_element, "6")

执行后再校验目标输入框的value属性、查看页面UI，就会显示正确的更新值了。

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