Interview #96: Selenium - What steps to take if an element is not clickable?

When automating web applications using Selenium WebDriver, you may encounter a situation where an element is present in the DOM but not clickable. Clicking an element might fail due to various reasons such as overlays, dynamic page loading, or improper element identification. Here are the steps to diagnose and resolve this issue:

Disclaimer: For QA-Testing Jobs, WhatsApp us @ 91-9606623245

1. Understanding the Issue

An element might not be clickable due to:

• Element is not visible – The element is present in the DOM but hidden from view.
• Element is overlapped by another element – A pop-up, modal, or loader covers the element.
• JavaScript event blocking – Some websites use JavaScript to prevent direct clicks.
• Element is still loading – The element might be available in the DOM but is not yet ready for interaction.
• Incorrect element locator – The selector might be identifying a different element.

2. Steps to Resolve the Issue

Step 1: Use Explicit Wait to Ensure Clickability

The element might not be ready to be clicked immediately after page load. Using explicit waits ensures the element is in a clickable state before performing an action.

Solution: Wait Until Element is Clickable

WebDriverWait wait = new WebDriverWait(driver, Duration.ofSeconds(10));
WebElement element = wait.until(ExpectedConditions.elementToBeClickable(By.id("clickableElement")));
element.click();        

Why?

• This waits until the element is visible and enabled before clicking.
• Helps handle elements that take time to load.

Step 2: Scroll to the Element Before Clicking

Sometimes an element may not be visible within the viewport, preventing it from being clicked.

Solution: Use JavaScript Executor to Scroll

WebElement element = driver.findElement(By.id("clickableElement"));
((JavascriptExecutor) driver).executeScript("arguments[0].scrollIntoView(true);", element);
element.click();        

Why?

• This brings the element into view before clicking.

Step 3: Click Using JavaScript Executor

If Selenium’s click() method does not work due to overlays or event handlers, JavaScript can be used to perform the click.

Solution: JavaScript Click

WebElement element = driver.findElement(By.id("clickableElement"));
((JavascriptExecutor) driver).executeScript("arguments[0].click();", element);        

Why?

• This bypasses any overlays or event-handling issues that block direct clicks.
• Useful when traditional Selenium click fails.

Step 4: Use Actions Class for Clicking

In some cases, the element is not recognized as clickable because of improper focus or styling issues.

Solution: Use the Actions Class

WebElement element = driver.findElement(By.id("clickableElement"));
Actions actions = new Actions(driver);
actions.moveToElement(element).click().perform();        

Why?

• This moves the mouse to the element before clicking, simulating real user interaction.

Step 5: Check for Overlapping Elements

An overlay, popup, or other elements may be covering the target element.

Solution: Find and Remove the Overlay

WebElement overlay = driver.findElement(By.className("overlay-class"));
((JavascriptExecutor) driver).executeScript("arguments[0].style.display='none';", overlay);        

OR Click elsewhere on the page before clicking the element:

Actions actions = new Actions(driver);
actions.moveByOffset(10, 10).click().perform(); // Clicks on an empty area        

Why?

• Dismissing overlays helps interact with hidden elements.

Step 6: Verify Locator Strategy

Sometimes, an incorrect locator might be identifying an element that is not interactive.

Solution: Verify Locator

Use debugging tools like Chrome DevTools (Inspect Element) to ensure you are selecting the right element.

WebElement element = driver.findElement(By.xpath("https://button[text()='Submit']"));        

Why?

• Ensures you are selecting the correct clickable element.

Step 7: Increase Click Wait Time

Some elements might take longer to be ready for interaction.

Solution: Add Small Delay Before Clicking

Thread.sleep(2000);  // Not recommended for frequent use, but can be useful for debugging
element.click();        

Why?

• Allows extra time for animations or page load delays.

3. Best Practices to Avoid Clickability Issues

1. Use Explicit Waits Instead of Thread.sleep()

• Avoid unnecessary delays by waiting for elements dynamically.

1. Use the Right Locator

• Ensure the element locator uniquely identifies the correct clickable element.

1. Check for Hidden or Overlapping Elements

• Use JavaScript to check if an element is covered by another.

1. Handle Modals and Alerts Before Clicking

• If an alert or modal blocks the element, close it first.

1. Try Different Click Methods

• Actions.click(), JavaScript click, or scrolling methods can help when element.click() fails.

4. Conclusion

If an element is not clickable in Selenium WebDriver, the issue can arise due to visibility, overlays, loading delays, or incorrect selectors. The best approach is to:

• Use explicit waits to ensure the element is clickable.
• Scroll into view if the element is not visible.
• Use JavaScript Executor for force-clicking when necessary.
• Check for overlays or popups blocking the element.

By following these steps, you can effectively troubleshoot and resolve clickability issues in Selenium WebDriver. ??