Selenium JS操作textbox输入框报Element not interactable错误

问题复现 #

Python版本Selenium操作weather.com搜索栏可正常运行，代码如下：

// this works
driver = webdriver.Chrome(ChromeDriverManager().install())
driver.get('https://www.weather.com/')
time.sleep(2)
elem = driver.find_element_by_id('LocationSearch_input')
time.sleep(2)
elem.send_keys(location)
time.sleep(2)
elem.send_keys(Keys.ENTER)

改写为JavaScript版本后，执行到sendKeys步骤前抛出ElementNotInteractableError: element not interactable错误，原JS代码如下：

await driver.get('http://www.weather.com/');
    console.log("step0");
    await driver.findElement(By.xpath('//input[@id="LocationSearch_input"]'));
    console.log("step1");
    await driver.findElement(By.xpath('//input[@id="LocationSearch_input"]')).click();
    console.log("step2");
    await driver.findElement(By.className('//input[@id="LocationSearch_input"]')).sendKeys(location, Key.RETURN);
    console.log("step3");

错误点排查 #

• 定位器使用错误：sendKeys前的元素定位错误调用By.className方法，传入的却是xpath表达式，根本没有匹配到目标输入框
• 访问协议错误：使用http协议访问站点会触发自动跳转到https地址，跳转过程中DOM元素状态不稳定
• 等待逻辑不合理：仅判断元素存在于DOM就执行操作，没有等待元素进入可见、可交互的状态，页面加载阶段元素虽然在DOM树中，但实际还不支持输入操作

正确JS实现代码 #

先确认已导入Selenium WebDriver相关依赖：

const { Builder, By, Key, until } = require('selenium-webdriver');
require('chromedriver');

核心操作逻辑：

// 初始化driver后，使用https协议访问目标站点
await driver.get('https://www.weather.com/');
// 显式等待最多10秒，直到目标搜索框可见、可交互，替代固定时长的硬等待
const searchInput = await driver.wait(
  until.elementIsInteractable(driver.findElement(By.id('LocationSearch_input'))),
  10000
);
await searchInput.click();
// 传入位置参数
await searchInput.sendKeys(location);
// 等待输入触发的联想列表加载完成后触发回车
await driver.sleep(1500);
await searchInput.sendKeys(Key.RETURN);

优化建议 #

• 已知元素id的场景下优先使用By.id定位，比手写xpath更简洁、定位效率更高
• 不同定位器方法不要混用：By.className仅接收元素class属性值，By.xpath仅接收xpath表达式，By.css仅接收css选择器
• 优先使用Selenium内置的显式等待方法判断元素状态，比固定sleep等待更稳定，执行效率也更高

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