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?

ElementNotInteractable Exception is thrown by Selenium WebDriver when the element is present in the DOM but not in an interactable state. One of the easiest ways to handle exception is by using wait till the element is Located or become clickable.

Element Not Interactable Exception includes an element that is not displayed or whose center point cannot be scrolled into the viewport.

The element in Element Not Interactable exception is not interactable as it cannot be clicked and send keys cannot work since the element is either not visible or hidden, disabled, outside the viewport and inaccessible, overlapped by another element, or 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. 

Talk to an Expert

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. 

Testing on real devices and browsers is beneficial as it offers:

• Real-World Performance: Emulators and simulators often don’t perfectly replicate the performance characteristics of actual devices. Testing on real devices allows developers to see how their applications perform under real user conditions, including varying network speeds, hardware capabilities, and resource availability.
• User Experience: Real devices provide insights into how users will interact with the application. This includes responsiveness to touch gestures, screen sizes, resolutions, and orientations, which are crucial for ensuring a smooth user experience.
• Browser Compatibility: Different browsers can render web pages differently. Testing on real browsers helps identify inconsistencies in layout, functionality, and performance, ensuring that the application works as intended across all platforms.
• Different Network Conditions: Real devices can be tested under different network conditions (Wi-Fi, 4G, 5G, etc.), helping identify issues with loading times, data usage, and overall performance under varying connectivity scenarios.
• Adapts to Hardware Features: Certain functionalities, like GPS, camera access, and sensors, can only be tested on actual devices, ensuring that features work as expected in real-life scenarios.
• User Feedback: Testing on real devices can reveal unexpected user behaviors and preferences that might not be captured in automated testing or simulation.
• Operating System Differences: Different devices run different versions of operating systems, which can affect application behavior. Testing on actual devices ensures compatibility with various OS versions and helps catch issues that might arise from OS-specific features or bugs.
• Accessibility Testing: Real device cloud like BrowserStack Live enable testing for accessibility features, such as voice control or screen readers, to ensure the application is usable for people with disabilities.
• Debugging Capabilities for website: Real devices often provide better debugging tools and logs, which can be invaluable for identifying and fixing issues that may not be evident in a simulated environment.

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.

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

Try BrowserStack Automate