In this article, we will analyze the click problem which is one of the most fundamental problems you may encounter during UI testing, and explore all possible solutions to it.
If you try to test UI with Selenium WebDriver, you have probably encountered dozens of different problems: web elements that cannot be located, synchronization problems, Iframe, troublesome pop-ups, some cookies problems, and hundreds more. As if that wasn’t enough, the use cases that are constantly changed by the developers are a big headache for the test automation engineer.
As a tester, it is part of our job to solve the problems we encounter in order to produce consistent and reliable tests despite all these challenges. Such a simple function like a click can sometimes turn into a real nightmare 😣 You wake up in the morning and dozens of tests have failed. Why? Because the click no longer works. You will most probably not find the cause, but solving this problem and getting your tests back to green is an unquestionable necessity. So, let’s get started ⏩
What Is The Click()?
One of the most fundamental interactions during UI automation testing is done by automating click operations over elements on a web page. For this, Selenium provides us a simple method called Selenium.click().
Let’s say the web element we want to click looks like in the source code below:
<span class="exampleWebElement">
We can use the click() operator as follows:
driver.findElement(By.className("exampleWebElement")).click();
What Are The Common Reasons For The Click Problem?
We can list the most common reasons for click problems as being one of the following:
- Wrong web element locations
- The existence of a web element that obscures the web element that we want to click
- The Selenium WebDriver works much faster than the response of the application
- Sometimes, the speed of the internet makes the web page load slower
- Some system hardware issues
We often encounter ElementClickInterceptedException when the situations we have listed above cause a clicking problem ❌ It indicates that a click cannot be properly executed because the target element is obscured in some way.
How Do I Handle This Problem?
When you encounter this problem, you can find 7 practical ways that will definitely work as follows:
1. Check The Web Element
The first thing to do is of course to check the web element 🔍 The developer might have added a parent element for the target element, and the path in the source code of the web element may have changed. This may now point to a non-clickable web element. I mean maybe the web driver clicks it, but you may think it doesn’t perform the click function because there is no action. Actually, it performs, but on the wrong web element. If you are sure about the web element path, you can use a different locater strategy. In this case, Xpath or CSS selector can be used like that:
driver.findElement(By.cssSelector("span.exampleWebElement")).click();
driver.findElement(By.xpath("//span[@class='exampleWebElement']")).click();
2. Synchronization Problem
As we mentioned above, the click problem may be caused by a synchronization problem between the web page and selenium. In this case, you can solve the problem with some dynamic wait methods. Here are some suggestions:
You can use the following method to wait until all web elements are loaded on the web page:
/**
* waits for backgrounds processes on the browser to complete
*
* @param timeOutInSeconds
*/
public static void waitForPageToLoad(long timeOutInSeconds) {
ExpectedCondition<Boolean> expectation = new ExpectedCondition<Boolean>() {
public Boolean apply(WebDriver driver) {
return ((JavascriptExecutor) driver).executeScript("return document.readyState").equals("complete");
}
};
try {
WebDriverWait wait = new WebDriverWait(driver, timeOutInSeconds);
wait.until(expectation);
} catch (Throwable error) {
error.printStackTrace();
}
}
Also, you can use the explicit waits until the web element is clickable:
/**
* Waits for element matching the locator to be clickable
*
* @param locator
* @param timeout
* @return
*/
public static WebElement waitForClickablility(By locator, int timeout) {
WebDriverWait wait = new WebDriverWait(driver, timeout);
return wait.until(ExpectedConditions.elementToBeClickable(locator));
}
or
/**
* Waits for provided element to be clickable
*
* @param element
* @param timeout
* @return
*/
public static WebElement waitForClickablility(WebElement element, int timeout) {
WebDriverWait wait = new WebDriverWait(driver, timeout);
return wait.until(ExpectedConditions.elementToBeClickable(element));
}
WebElement element= driver.findElement(By.cssSelector("span.exampleWebElement"));
waitForClickablility(element,10);
element.click();
3. Presence of Another Blocking Web Element
If you get this error message:
selenium.common.exceptions.ElementClickInterceptedException: Message: Element <span class="exampleWebElement"> is not clickable at point (372.300003051710,551.1899872547688) because another element <div class="blockingWebElement"> obscures it
you can explicitly wait until the blocking web element is invisible
/**
* Waits for element matching the locator to be invisible on the page
*
* @param locator
* @param timeout
* @return
*/
public static WebElement waitForInvisibility(By locator, int timeout) {
WebDriverWait wait = new WebDriverWait(driver, timeout);
return wait.until(ExpectedConditions.invisibilityOfElementLocated(locator));
}
or
/**
* Waits for the provided element to be invisible on the page
*
* @param element
* @param timeToWaitInSec
* @return
*/
public static WebElement waitForInvisibility(WebElement element, int timeToWaitInSec) {
WebDriverWait wait = new WebDriverWait(driver, timeToWaitInSec);
return wait.until(ExpectedConditions.invisibilityOf(element));
}
WebElement blockingElement= driver.findElement(By.cssSelector("span.blockingWebElement"));
WebElement element= driver.findElement(By.cssSelector("span.exampleWebElement"));
waitForInvisibility(blockingElement,10);
element.click();
4. Submit()
If you have done the steps we listed so far and your problem is still not resolved, you don’t have a problem with time or locator. Maybe the problem is with the click method. You can easily use submit() operator instead of click(). So, what’s the difference between them?
Click() performs only the “click” operation like a mouse click, but submit() performs the “Enter” operation like keyboard Enter event.
WebElement element= driver.findElement(By.cssSelector("span.exampleWebElement"));
element.submit();
5. SendKeys()
With the SendKeys() method, the click function can be performed indirectly.
WebElement element= driver.findElement(By.cssSelector("span.exampleWebElement"));
element.sendKeys(Keys.RETURN);
//or
element.sendKeys(Keys.ENTER);
6. Click With Action Class
Actions class is provided by Selenium to perform keyboard and mouse events. In addition, it is possible to handle these events which include operations such as drag & drop, and clicking on multiple elements with the control key, by using the advanced user interactions API. You can use this class to perform the simple click function as well:
Actions action = new Actions(driver);
WebElement element= driver.findElement(By.cssSelector("span.exampleWebElement"));
action.moveToElement(element).click().perform();
7. Click With JS Executer
If your problem is still not solved, you need a DOM-level solution. So, we need an interface that helps to execute JavaScript with Selenium WebDriver. It is called JavaScriptExecutor. JavaScript works at the DOM level. Therefore, we are able to click any web element by using JavaScript executor.
/**
* Clicks on an element using JavaScript
*
* @param element
*/
public static void clickWithJS(WebElement element) {
((JavascriptExecutor) driver).executeScript("arguments[0].scrollIntoView(true);", element);
((JavascriptExecutor) driver).executeScript("arguments[0].click();", element);
}
Conclusion
We examined 7 different solutions that you can use in different situations. I hope one of these 7 ways solved your click problem. If not, maybe your problem isn’t because of the click 😅 Remember, in order to find the best solution we should understand and analyze the problem first.