Troubleshooting 'org.openqa.selenium.ElementNotInteractableException' when automating tests with Selenium WebDriver on VueSelect in Nuxt.js

Question

org.openqa.selenium.ElementNotInteractableException: element not interactable "when interacting with VueSelect

so guys, in my current project i was interacting with VueSelect since we are using Nuxt.js i got the error : org.openqa.selenium.ElementNotInteractableException: element not interactable when i execute my code like below :

 WebElement currency = driver.findElement(By.id("select_currency")); Assert.assertTrue(currency.isDisplayed()); currency.click(); Thread.sleep(3000); currency.sendKeys("Indonesian Rupiah"); Thread.sleep(3000); currency.sendKeys(Keys.ENTER); // below the frontend code in case you guys need it <label>Currency</label> <VueSelect :class=" validationContext.errors[0] ? 'vs__dropdown-toggle-invalid' : '' " :options="listCurrency" placeholder="Select Currency" label="text" v-model="selectCurrency" id="select_currency" ></VueSelect> 

i use Thread.sleep so i could check the interface

before the code failed this is the latest condition before it's shut down

before it shut down

it seems like it got error at the code : currency.sendKeys("Indonesian Rupiah"); anybody could give me insight about this?

i hope i could get some help

Answer 1

The error you're facing, org.openqa.selenium.ElementNotInteractableException: element not interactable, typically occurs when an element on the web page is found but cannot be interacted with using the specified method.

#solution 1 Wait for the element to become interactable: It's possible that the element is not immediately ready for interaction when the currency WebElement is located. You can try using explicit waits to ensure the element is present and interactable before performing actions on it.

WebElement currency = new WebDriverWait(driver, 10).until(ExpectedConditions.elementToBeClickable(By.id("select_currency"))); 

#solution 2 Scroll into view: If the VueSelect component is not in the visible area of the web page, you may need to scroll it into view before interacting with it. You can use the scrollIntoView JavaScript function to bring the element into the view.

JavascriptExecutor jsExecutor = (JavascriptExecutor) driver; jsExecutor.executeScript("arguments[0].scrollIntoView(true);", currency);