在Nuxt.js中用Selenium操作VueSelect时遇ElementNotInteractableException问题排查

原因分析 #

• VueSelect是封装的第三方组件，你通过id="select_currency"定位到的是组件的根容器元素，而非可接收输入的<input>元素。该根元素仅作为触发下拉的按钮容器，不支持sendKeys操作，因此抛出ElementNotInteractableException。
• 点击组件后，真正负责接收搜索输入的是组件内部动态生成的搜索输入框（通常带有vs__search类名），必须定位这个真实的交互元素才能执行输入操作。
• Thread.sleep属于硬等待，稳定性极差——要么等待时间不足导致元素未就绪，要么等待过长浪费测试时间，无法适配不同环境的渲染速度。

解决建议 #

1. 定位正确的输入元素 #

点击VueSelect组件触发下拉后，定位其内部的搜索输入框，而非组件根元素。可通过CSS选择器结合组件id和内部类名定位，示例选择器：

#select_currency .vs__search

2. 用显式等待替代硬等待 #

使用WebDriverWait配合ExpectedConditions等待元素可交互，确保元素完全就绪后再操作，彻底避免因页面加载、组件渲染延迟导致的问题。

修改后的测试代码示例 #

// 定位VueSelect组件根元素并点击触发下拉
WebElement currencySelect = driver.findElement(By.id("select_currency"));
Assert.assertTrue(currencySelect.isDisplayed());
currencySelect.click();

// 显式等待内部搜索输入框可交互（超时时间设为10秒）
WebDriverWait wait = new WebDriverWait(driver, 10);
WebElement searchInput = wait.until(ExpectedConditions.elementToBeClickable(By.cssSelector("#select_currency .vs__search")));

// 在输入框中输入目标内容
searchInput.sendKeys("Indonesian Rupiah");

// 等待下拉选项加载完成后按回车选择
wait.until(ExpectedConditions.presenceOfElementLocated(By.cssSelector(".vs__dropdown-option")));
searchInput.sendKeys(Keys.ENTER);

额外优化提示 #

如果需要更精准地选择选项，可直接定位对应文本的下拉项并点击，示例代码：

// 等待目标选项可点击后直接点击
WebElement targetOption = wait.until(ExpectedConditions.elementToBeClickable(
    By.xpath("//div[contains(@class, 'vs__dropdown-option') and text()='Indonesian Rupiah']")
));
targetOption.click();

内容的提问来源于stack exchange，提问作者Julio Safitra Mayoru