Selenium Python中send_keys与JS executor无法向Airbnb价格框输入内容怎么办

• Airbnb的价格筛选输入框是前端框架渲染的受控组件，仅通过setAttribute修改DOM的value属性不会同步到框架内部维护的状态，页面触发校验、失焦等动作时就会自动恢复默认值
• 修改完值后没有主动触发输入框对应的input、change事件，页面的筛选逻辑感知不到数值发生了变化，自然不会用你设置的数值覆盖原有默认值
• 之前用send_keys失效大概率是输入框存在输入拦截或者校验逻辑，快捷键操作后没有触发后续的校验事件导致回弹

你需要在修改完输入框数值后，主动触发用户正常输入时会产生的交互事件，让框架状态和DOM数值同步，修正后的代码如下：

from selenium.webdriver.common.by import By
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC

# 最低价格设置
min_price = 354
element = WebDriverWait(self.driver, 5).until(
    EC.element_to_be_clickable((By.ID, "price_filter_min"))
)
# 先激活输入框
self.driver.execute_script("arguments[0].focus();", element)
# 修改值同时触发事件，同步组件状态
self.driver.execute_script("""
arguments[0].value = arguments[1];
arguments[0].dispatchEvent(new Event('input', { bubbles: true }));
arguments[0].dispatchEvent(new Event('change', { bubbles: true }));
arguments[0].dispatchEvent(new Event('blur', { bubbles: true }));
""", element, min_price)

# 最高价格设置
max_price = 800
element2 = WebDriverWait(self.driver, 5).until(
    EC.element_to_be_clickable((By.ID, "price_filter_max"))
)
self.driver.execute_script("arguments[0].focus();", element2)
self.driver.execute_script("""
arguments[0].value = arguments[1];
arguments[0].dispatchEvent(new Event('input', { bubbles: true }));
arguments[0].dispatchEvent(new Event('change', { bubbles: true }));
arguments[0].dispatchEvent(new Event('blur', { bubbles: true }));
""", element2, max_price)

如果设置完后筛选未生效，可以在上述代码执行完成后，模拟点击筛选面板的确认按钮即可。

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