Understanding Element Not Interactable Exception in Selenium

Selenium is the most widely used automation tool to automate web applications using various programming languages such as Java, Python, and JavaScript. As an automation tester you would have come across an exception called ElementNotInteractableException very often while automating web applications.

This article discusses in which circumstances this exception occurs and what are the different ways to solve the exception.

What is an ElementNotInteractable Exception?

ElementNotInteractableException is thrown by Selenium WebDriver when the element is present in the DOM but cannot be interacted with. This includes an element that is not displayed or whose center point cannot be scrolled into the viewport. The element is not interactable in the sense it cannot be clicked or send keys cannot work as the element is:

• not visible or hidden
• disabled
• outside the viewport and inaccessible
• overlapped by another element
• not completely rendered on the page

When does an ElementNotInteractable Exception occur?

ElementNotInteractable exception occurs in Selenium when an attempt is made to interact with a web element but the element is not in a condition to be interacted with.

Here are the possible reasons for this exception to occur:

1. Element is not visible: If the targeted web element present in the DOM is hidden or covered by another element it makes it non-interactive.
2. Element is disabled: If the web element is present in the DOM but is disabled, such as disabled button or disabled checkbox or radio button. This element cannot be interacted with until it is enabled.
3. Element is outside the viewport and inaccessible: When the element is present in the DOM but is not in view, it can be made interactive only after the view is scrolled.
4. Element is overlapped by another element: If the web element to be interacted with is overlapped by another web element such as modal dialog, it cannot be interacted with until the overlapping element is moved or removed.
5. Element is not rendered: If the web element is rendered dynamically on the web page and is not fully loaded when the interaction takes place, it cannot be interacted until it is loaded completely.

How to handle ElementNotInteractable Exception in Selenium

ElementNotInteractableException can only be handled by making the web element to be interactable. Different approaches should be implemented to make the web element interactable before attempting to interact with it such as scroll until the web element is in view, enable the web element if disabled or apply a retry mechanism.

Below are some of the common ways to handle this exception.

1.  Wait for the element to be visible 

To make the web element interactable implement explicit wait as it allows to wait for a specific condition to be met before performing the next action. Use WebDriverWait along with ExpectedConditions as below:

Code snippet:

public class ElementNotInteractableException {

@Test

public void verifyPageTitle() {

 

     // Initialize ChromeDriver

        WebDriver driver = new ChromeDriver();

 

     // Open the webpage

        driver.get("https://www.browserstack.com/");

 

     // Initialize WebDriverWait with a timeout of 10 seconds

        WebDriverWait wait = new WebDriverWait(driver, Duration.ofSeconds(10));

 

     // Find the element which may not be initially interactable

        WebElement element = wait.until(ExpectedConditions.elementToBeClickable(By.id("signupModalProductButton")));

 

     // Perform action on the element

        element.click();

        driver.manage().timeouts().implicitlyWait(Duration.ofSeconds(2));

        Assert.assertEquals(driver.getCurrentUrl(), "https://www.browserstack.com/users/sign_up");

 

     // Close the browser

        driver.quit();

}

}

In the above program, applying an explicit wait for the “Get Started free” button which is present in the BrowserStack home page.

2. Scroll into the View 

In Selenium, JavaScriptExecutor is used to scroll the page and make the web element visible within the viewport of the web page. Some webpages are long and dynamic in nature and as it is scrolled, it shows data to the user. 

In such scenarios, if you are trying to interact with a web element which is not in view yet, Selenium throws ElementNotInteractableException. By using JavaScript, you can scroll till the required web element and make it accessible for actionable activities such as clicking, typing, etc.

You can use the executeScript method of JavaScriptExecutor class to scroll to the element like below.

WebElement element = driver.findElement(By.id("signupModalProductButton"));

// Scroll element into view using JavaScriptExecutor

((JavascriptExecutor) driver).executeScript("arguments[0].scrollIntoView(true);", element);

3. Enable the web element

Input elements such as checkboxes, radio buttons and dropdowns are disabled in a web page in some context. Disabled means it is not enabled and any action performed by Selenium on such elements will throw an exception.

<input type ="checkbox" name ="maths" value ="on" disabled>

"Maths"

<input type ="checkbox" name ="physics" value ="on">

"Physics"

In the above HTML code, “maths” checkbox is disabled on the web page, whereas the “physics” checkbox is enabled.

To avoid exception in such scenarios, check for the element’s state and then try to execute the action on it, like below:

WebElement element = driver.findElement(By.LocatorType("Locator value"));

if (element.isEnabled()) {

// If the element is enabled, perform desired actions

element.click();

} else {

  // If the element is disabled, handle the situation accordingly

   System.out.println("Element is disabled.");

}

4. Handle overlapping elements

In some scenarios, the web element to be interacted with is blocked or overlapped by some other elements on the web page. The element such as modal dialog or pop-ups which are blocking the desired web element should be moved or dismissed from the view. Dismissing such overlapping elements is necessary to interact with the desired web element.

WebElement modalDialogBox = driver.findElement(By.id("modalDialogId"));

if (modalDialogBox.isDisplayed()) {

// Close the modal dialog

       driver.findElement(By.id("modalButtonCloseBtn")).click();

}

It is also possible that the element to be interacted with is present in the modal dialog box or alert box. In such cases, switch to the desired web element and then perform the operation.

5. Handle switching to correct frame

If the element to be interacted with is inside a frame, you need to switch to that frame using switch method as follows:

driver.switchTo().frame(frameIndex);

driver.switchTo().frame(frameId);

driver.switchTo().frame(frameName);

Use the appropriate method to switch to the desired frame and the web element. Also ensure that before switching to the frame, it is completely loaded.

This article discussed what is ElementNotInteractableException, how it is surfaced and how you can avoid this exception by implementing various strategies. 

Why is testing on real devices and browsers important?

Testing on emulators and simulators can be cost effective, nevertheless, it is crucial to test the web applications on real devices as testing on simulators and emulators cannot represent real-world scenarios such as network conditions, hardware configurations and environmental factors. 

BrowserStack is a popular cloud-based platform which provides 3500+ real devices and browsers to test the web applications from anywhere. It provides a pool of products like Automate, Live, Percy, App Live, App Automate, etc to cater different types of testing.

Talk to an Expert

Below are some of the features provided by BrowserStack’s Automate product: 

1. Diverse environment testing: With BrowserStack you can automate Selenium tests across different devices, operating systems and browsers.
2.  Real Devices and Browsers: It is always wiser to test the application on real devices and browsers to simulate a real user experience. Testing on real devices gives the actual confidence about the application performance. 
3. Concurrent test execution: Simultaneous test execution of multiple Selenium tests can be achieved which reduces the total execution time, gives quicker feedback and accelerates deployment cycles.
4. Custom Reports with Artifacts: In Automate, custom reports can be generated to provide detailed and customized reports for the automated test execution.
5. Easy Integration with CI/CD Pipeline: BrowserStack’s Automate product can be seamlessly integrated with popular CI/CD tools such as Jenkins, TeamCity, TravisCI

Why use BrowserStack Automate for Selenium Tests?

Different devices and browsers render web pages differently. To ensure that a given application behaves uniformly across different pools of devices and browsers, it is advisable to test it in the real devices and browsers with a real environment set up.

Testing in real devices and browsers ensures high-quality user experience, compatibility across different platforms, and validates performance and security of the application in real user conditions. BrowserStack is one such platform which leverages testing any mobile or web application by providing 3500+ real devices.

Try BrowserStack Automate